Roadmap EpicItemDetails Component

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

+<script>
+  import { s__, sprintf } from '~/locale';
+  import { dateInWords } from '~/lib/utils/datetime_utility';
+  import tooltip from '~/vue_shared/directives/tooltip';
+
+  export default {
+    directives: {
+      tooltip,
+    },
+    props: {
+      epic: {
+        type: Object,
+        required: true,
+      },
+      currentGroupId: {
+        type: Number,
+        required: true,
+      },
+    },
+    computed: {
+      isEpicGroupDifferent() {
+        return this.currentGroupId !== this.epic.groupId;
+      },
+      /**
+       * In case Epic start date is out of range
+       * we need to use original date instead of proxy date
+       */
+      startDate() {
+        if (this.epic.startDateOutOfRange) {
+          return this.epic.originalStartDate;
+        }
+
+        return this.epic.startDate;
+      },
+      /**
+       * In case Epic end date is out of range
+       * we need to use original date instead of proxy date
+       */
+      endDate() {
+        if (this.epic.endDateOutOfRange) {
+          return this.epic.originalEndDate;
+        }
+        return this.epic.endDate;
+      },
+      /**
+       * Compose timeframe string to show on UI
+       * based on start and end date availability
+       */
+      timeframeString() {
+        if (this.epic.startDateUndefined) {
+          return sprintf(s__('GroupRoadmap|Until %{dateWord}'), {
+            dateWord: dateInWords(this.endDate, true),
+          });
+        } else if (this.epic.endDateUndefined) {
+          return sprintf(s__('GroupRoadmap|From %{dateWord}'), {
+            dateWord: dateInWords(this.startDate, true),
+          });
+        }
+
+        // In case both start and end date fall in same year
+        // We should hide year from start date
+        const startDateInWords = dateInWords(
+          this.startDate,
+          true,
+          this.startDate.getFullYear() === this.endDate.getFullYear(),
+        );
+
+        return `${startDateInWords} &ndash; ${dateInWords(this.endDate, true)}`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <td class="epic-details-cell">
+    <div class="epic-title">
+      <a
+        v-tooltip
+        data-container="body"
+        class="epic-url"
+        :href="epic.webUrl"
+        :title="epic.title"
+      >
+        {{ epic.title }}
+      </a>
+    </div>
+    <div class="epic-group-timeframe">
+      <span
+        v-tooltip
+        v-if="isEpicGroupDifferent"
+        class="epic-group"
+        data-placement="right"
+        data-container="body"
+        :title="epic.groupFullName"
+      >
+        {{ epic.groupName }} &middot;
+      </span>
+      <span
+        class="epic-timeframe"
+        v-html="timeframeString"
+      >
+      </span>
+    </div>
+  </td>
+</template>

spec/javascripts/roadmap/components/epic_item_details_spec.js

+import Vue from 'vue';
+
+import epicItemDetailsComponent from 'ee/roadmap/components/epic_item_details.vue';
+
+import { mockGroupId, mockEpic } from '../mock_data';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = (epic = mockEpic, currentGroupId = mockGroupId) => {
+  const Component = Vue.extend(epicItemDetailsComponent);
+
+  return mountComponent(Component, {
+    epic,
+    currentGroupId,
+  });
+};
+
+describe('EpicItemDetailsComponent', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('isEpicGroupDifferent', () => {
+      it('returns true when Epic.groupId is different from currentGroupId', () => {
+        const mockEpicItem = Object.assign({}, mockEpic, { groupId: 1 });
+        vm = createComponent(mockEpicItem, 2);
+
+        expect(vm.isEpicGroupDifferent).toBe(true);
+      });
+
+      it('returns false when Epic.groupId is same as currentGroupId', () => {
+        const mockEpicItem = Object.assign({}, mockEpic, { groupId: 1 });
+        vm = createComponent(mockEpicItem, 1);
+
+        expect(vm.isEpicGroupDifferent).toBe(false);
+      });
+    });
+
+    describe('startDate', () => {
+      it('returns Epic.startDate when start date is within range', () => {
+        vm = createComponent(mockEpic);
+
+        expect(vm.startDate).toBe(mockEpic.startDate);
+      });
+
+      it('returns Epic.originalStartDate when start date is out of range', () => {
+        const mockStartDate = new Date(2018, 0, 1);
+        const mockEpicItem = Object.assign({}, mockEpic, {
+          startDateOutOfRange: true,
+          originalStartDate: mockStartDate,
+        });
+        vm = createComponent(mockEpicItem);
+
+        expect(vm.startDate).toBe(mockStartDate);
+      });
+    });
+
+    describe('endDate', () => {
+      it('returns Epic.endDate when end date is within range', () => {
+        vm = createComponent(mockEpic);
+
+        expect(vm.endDate).toBe(mockEpic.endDate);
+      });
+
+      it('returns Epic.originalEndDate when end date is out of range', () => {
+        const mockEndDate = new Date(2018, 0, 1);
+        const mockEpicItem = Object.assign({}, mockEpic, {
+          endDateOutOfRange: true,
+          originalEndDate: mockEndDate,
+        });
+        vm = createComponent(mockEpicItem);
+
+        expect(vm.endDate).toBe(mockEndDate);
+      });
+    });
+
+    describe('timeframeString', () => {
+      it('returns timeframe string correctly when both start and end dates are defined', () => {
+        vm = createComponent(mockEpic);
+
+        expect(vm.timeframeString).toBe('Jul 10, 2017 – Jun 2, 2018');
+      });
+
+      it('returns timeframe string correctly when only start date is defined', () => {
+        const mockEpicItem = Object.assign({}, mockEpic, {
+          endDateUndefined: true,
+        });
+        vm = createComponent(mockEpicItem);
+
+        expect(vm.timeframeString).toBe('From Jul 10, 2017');
+      });
+
+      it('returns timeframe string correctly when only end date is defined', () => {
+        const mockEpicItem = Object.assign({}, mockEpic, {
+          startDateUndefined: true,
+        });
+        vm = createComponent(mockEpicItem);
+
+        expect(vm.timeframeString).toBe('Until Jun 2, 2018');
+      });
+
+      it('returns timeframe string with hidden year for start date when both start and end dates are from same year', () => {
+        const mockEpicItem = Object.assign({}, mockEpic, {
+          startDate: new Date(2018, 0, 1),
+          endDate: new Date(2018, 3, 1),
+        });
+        vm = createComponent(mockEpicItem);
+
+        expect(vm.timeframeString).toBe('Jan 1 – Apr 1, 2018');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `epic-details-cell`', () => {
+      vm = createComponent();
+
+      expect(vm.$el.classList.contains('epic-details-cell')).toBe(true);
+    });
+
+    it('renders Epic title correctly', () => {
+      vm = createComponent();
+      const epicTitleEl = vm.$el.querySelector('.epic-title .epic-url');
+
+      expect(epicTitleEl).not.toBeNull();
+      expect(epicTitleEl.getAttribute('href')).toBe(mockEpic.webUrl);
+      expect(epicTitleEl.innerText.trim()).toBe(mockEpic.title);
+    });
+
+    it('renders Epic group name and tooltip', () => {
+      const mockEpicItem = Object.assign({}, mockEpic, {
+        groupId: 1,
+        groupName: 'Bar',
+        groupFullName: 'Foo / Bar',
+      });
+      vm = createComponent(mockEpicItem, 2);
+      const epicGroupNameEl = vm.$el.querySelector('.epic-group-timeframe .epic-group');
+
+      expect(epicGroupNameEl).not.toBeNull();
+      expect(epicGroupNameEl.innerText.trim()).toContain(mockEpicItem.groupName);
+      expect(epicGroupNameEl.dataset.originalTitle).toBe(mockEpicItem.groupFullName);
+    });
+
+    it('renders Epic timeframe', () => {
+      vm = createComponent();
+      const epicTimeframeEl = vm.$el.querySelector('.epic-group-timeframe .epic-timeframe');
+
+      expect(epicTimeframeEl).not.toBeNull();
+      expect(epicTimeframeEl.innerText.trim()).toBe('Jul 10, 2017 – Jun 2, 2018');
+    });
+  });
+});