Roadmap TimelineHeaderSubItem Component

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

+<script>
+  import { getSundays } from '~/lib/utils/datetime_utility';
+
+  import timelineTodayIndicator from './timeline_today_indicator.vue';
+
+  export default {
+    components: {
+      timelineTodayIndicator,
+    },
+    props: {
+      currentDate: {
+        type: Date,
+        required: true,
+      },
+      timeframeItem: {
+        type: Date,
+        required: true,
+      },
+    },
+    computed: {
+      headerSubItems() {
+        return getSundays(this.timeframeItem);
+      },
+      headerSubItemClass() {
+        const currentYear = this.currentDate.getFullYear();
+        const currentMonth = this.currentDate.getMonth();
+        const timeframeYear = this.timeframeItem.getFullYear();
+        const timeframeMonth = this.timeframeItem.getMonth();
+
+        // Show dark color text only for dates from current month and future months.
+        return timeframeYear >= currentYear && timeframeMonth >= currentMonth ? 'label-dark' : '';
+      },
+      hasToday() {
+        const timeframeYear = this.timeframeItem.getFullYear();
+        const timeframeMonth = this.timeframeItem.getMonth();
+
+        return this.currentDate.getMonth() === timeframeMonth &&
+               this.currentDate.getFullYear() === timeframeYear;
+      },
+    },
+    methods: {
+      getSubItemValueClass(subItem) {
+        // Show light color text for dates which are
+        // older than today
+        if (subItem < this.currentDate) {
+          return 'value-light';
+        }
+        return '';
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="item-sublabel"
+    :class="headerSubItemClass"
+  >
+    <span
+      v-for="(subItem, index) in headerSubItems"
+      :key="index"
+      class="sublabel-value"
+      :class="getSubItemValueClass(subItem)"
+    >
+      {{ subItem.getDate() }}
+    </span>
+    <timeline-today-indicator
+      v-if="hasToday"
+      :timeframe-item="timeframeItem"
+      :current-date="currentDate"
+    />
+  </div>
+</template>

spec/javascripts/roadmap/components/timeline_header_sub_item_spec.js

+import Vue from 'vue';
+
+import timelineHeaderSubItemComponent from 'ee/roadmap/components/timeline_header_sub_item.vue';
+
+import { mockTimeframe } from '../mock_data';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = ({
+  currentDate = mockTimeframe[0],
+  timeframeItem = mockTimeframe[0],
+}) => {
+  const Component = Vue.extend(timelineHeaderSubItemComponent);
+
+  return mountComponent(Component, {
+    currentDate,
+    timeframeItem,
+  });
+};
+
+describe('TimelineHeaderSubItemComponent', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('headerSubItems', () => {
+      it('returns array of dates containing Sundays from timeframeItem', () => {
+        vm = createComponent({});
+        expect(Array.isArray(vm.headerSubItems)).toBe(true);
+      });
+    });
+
+    describe('headerSubItemClass', () => {
+      it('returns string containing `label-dark` when timeframe year and month are greater than current year and month', () => {
+        vm = createComponent({});
+        expect(vm.headerSubItemClass).toBe('label-dark');
+      });
+
+      it('returns empty string when timeframe year and month are less than current year and month', () => {
+        vm = createComponent({
+          currentDate: new Date(2017, 10, 1),   // Nov 1, 2017
+          timeframeItem: new Date(2018, 0, 1),  // Jan 1, 2018
+        });
+        expect(vm.headerSubItemClass).toBe('');
+      });
+    });
+
+    describe('hasToday', () => {
+      it('returns true when current month and year is same as timeframe month and year', () => {
+        vm = createComponent({});
+        expect(vm.hasToday).toBe(true);
+      });
+
+      it('returns false when current month and year is different from timeframe month and year', () => {
+        vm = createComponent({
+          currentDate: new Date(2017, 10, 1),   // Nov 1, 2017
+          timeframeItem: new Date(2018, 0, 1),  // Jan 1, 2018
+        });
+        expect(vm.hasToday).toBe(false);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('getSubItemValueClass', () => {
+      it('returns empty string when provided subItem is greater than current date', () => {
+        vm = createComponent({
+          currentDate: new Date(2018, 0, 1), // Jan 1, 2018
+        });
+        const subItem = new Date(2018, 0, 15); // Jan 15, 2018
+        expect(vm.getSubItemValueClass(subItem)).toBe('');
+      });
+
+      it('returns string containing `value-light` when provided subItem is less than current date', () => {
+        vm = createComponent({
+          currentDate: new Date(2018, 0, 15), // Jan 15, 2018
+        });
+        const subItem = new Date(2018, 0, 1); // Jan 1, 2018
+        expect(vm.getSubItemValueClass(subItem)).toBe('value-light');
+      });
+    });
+  });
+
+  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();
+    });
+  });
+});