Roadmap EpicItem Component

ee/app/assets/javascripts/roadmap/components/epic_item.vue

+<script>
+  import epicItemDetails from './epic_item_details.vue';
+  import epicItemTimeline from './epic_item_timeline.vue';
+
+  export default {
+    components: {
+      epicItemDetails,
+      epicItemTimeline,
+    },
+    props: {
+      epic: {
+        type: Object,
+        required: true,
+      },
+      timeframe: {
+        type: Array,
+        required: true,
+      },
+      currentGroupId: {
+        type: Number,
+        required: true,
+      },
+      shellWidth: {
+        type: Number,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <tr class="epics-list-item">
+    <epic-item-details
+      :epic="epic"
+      :current-group-id="currentGroupId"
+    />
+    <epic-item-timeline
+      v-for="(timeframeItem, index) in timeframe"
+      :key="index"
+      :timeframe="timeframe"
+      :timeframe-item="timeframeItem"
+      :epic="epic"
+      :shell-width="shellWidth"
+    />
+  </tr>
+</template>

spec/javascripts/roadmap/components/epic_item_spec.js

+import Vue from 'vue';
+
+import epicItemComponent from 'ee/roadmap/components/epic_item.vue';
+
+import { mockTimeframe, mockEpic, mockGroupId, mockShellWidth } from '../mock_data';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = ({
+  epic = mockEpic,
+  timeframe = mockTimeframe,
+  currentGroupId = mockGroupId,
+  shellWidth = mockShellWidth,
+}) => {
+  const Component = Vue.extend(epicItemComponent);
+
+  return mountComponent(Component, {
+    epic,
+    timeframe,
+    currentGroupId,
+    shellWidth,
+  });
+};
+
+describe('EpicItemComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent({});
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders component container element class `epics-list-item`', () => {
+      expect(vm.$el.classList.contains('epics-list-item')).toBeTruthy();
+    });
+
+    it('renders Epic item details element with class `epic-details-cell`', () => {
+      expect(vm.$el.querySelector('.epic-details-cell')).not.toBeNull();
+    });
+
+    it('renders Epic timeline element with class `epic-timeline-cell`', () => {
+      expect(vm.$el.querySelector('.epic-timeline-cell')).not.toBeNull();
+    });
+  });
+});