Roadmap QuartersHeaderSubItem Component

ee/app/assets/javascripts/roadmap/components/preset_quarters/quarters_header_sub_item.vue

+<script>
+  import { monthInWords } from '~/lib/utils/datetime_utility';
+
+  import { PRESET_TYPES } from '../../constants';
+
+  import timelineTodayIndicator from '../timeline_today_indicator.vue';
+
+  export default {
+    presetType: PRESET_TYPES.QUARTERS,
+    components: {
+      timelineTodayIndicator,
+    },
+    props: {
+      currentDate: {
+        type: Date,
+        required: true,
+      },
+      timeframeItem: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        quarterBeginDate: this.timeframeItem.range[0],
+        quarterEndDate: this.timeframeItem.range[2],
+      };
+    },
+    computed: {
+      headerSubItems() {
+        return this.timeframeItem.range;
+      },
+      hasToday() {
+        return this.currentDate >= this.quarterBeginDate &&
+               this.currentDate <= this.quarterEndDate;
+      },
+    },
+    methods: {
+      getSubItemValueClass(subItem) {
+        let itemValueClass = '';
+
+        if (this.currentDate.getFullYear() === subItem.getFullYear() &&
+            this.currentDate.getMonth() === subItem.getMonth()) {
+          itemValueClass = 'label-dark label-bold';
+        } else if (this.currentDate < subItem) {
+          itemValueClass = 'label-dark';
+        }
+        return itemValueClass;
+      },
+      getSubItemValue(subItem) {
+        return monthInWords(subItem, true);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="item-sublabel">
+    <span
+      v-for="(subItem, index) in headerSubItems"
+      :key="index"
+      class="sublabel-value"
+      :class="getSubItemValueClass(subItem)"
+    >
+      {{ getSubItemValue(subItem) }}
+    </span>
+    <timeline-today-indicator
+      v-if="hasToday"
+      :preset-type="$options.presetType"
+      :current-date="currentDate"
+      :timeframe-item="timeframeItem"
+    />
+  </div>
+</template>

spec/javascripts/roadmap/components/preset_quarters/quarters_header_sub_item_spec.js

+import Vue from 'vue';
+
+import QuartersHeaderSubItemComponent from 'ee/roadmap/components/preset_quarters/quarters_header_sub_item.vue';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mockTimeframeQuarters } from '../../mock_data';
+
+const createComponent = ({
+  currentDate = mockTimeframeQuarters[0].range[1],
+  timeframeItem = mockTimeframeQuarters[0],
+}) => {
+  const Component = Vue.extend(QuartersHeaderSubItemComponent);
+
+  return mountComponent(Component, {
+    currentDate,
+    timeframeItem,
+  });
+};
+
+describe('QuartersHeaderSubItemComponent', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('headerSubItems', () => {
+      it('returns array of dates containing Months from timeframeItem', () => {
+        vm = createComponent({});
+        expect(Array.isArray(vm.headerSubItems)).toBe(true);
+        vm.headerSubItems.forEach(subItem => {
+          expect(subItem instanceof Date).toBe(true);
+        });
+      });
+    });
+
+    describe('hasToday', () => {
+      it('returns true when current quarter is same as timeframe quarter', () => {
+        vm = createComponent({});
+        expect(vm.hasToday).toBe(true);
+      });
+
+      it('returns false when current quarter month is different from timeframe quarter', () => {
+        vm = createComponent({
+          currentDate: new Date(2017, 10, 1), // Nov 1, 2017
+          timeframeItem: mockTimeframeQuarters[1], // 2018 Apr May Jun
+        });
+        expect(vm.hasToday).toBe(false);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('getSubItemValueClass', () => {
+      it('returns string containing `label-dark` when provided subItem is greater than current date', () => {
+        vm = createComponent({
+          currentDate: new Date(2018, 0, 1), // Jan 1, 2018
+        });
+        const subItem = new Date(2018, 1, 15); // Feb 15, 2018
+        expect(vm.getSubItemValueClass(subItem)).toBe('label-dark');
+      });
+    });
+  });
+
+  describe('template', () => {
+    beforeEach(() => {
+      vm = createComponent({});
+    });
+
+    it('renders component container element with class `item-sublabel`', () => {
+      expect(vm.$el.classList.contains('item-sublabel')).toBe(true);
+    });
+
+    it('renders sub item element with class `sublabel-value`', () => {
+      expect(vm.$el.querySelector('.sublabel-value')).not.toBeNull();
+    });
+  });
+});