Roadmap TimelineTodayIndicator Component

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

+<script>
+  import { totalDaysInMonth } from '~/lib/utils/datetime_utility';
+
+  import eventHub from '../event_hub';
+
+  export default {
+    props: {
+      currentDate: {
+        type: Date,
+        required: true,
+      },
+      timeframeItem: {
+        type: Date,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        todayBarStyles: '',
+        todayBarReady: false,
+      };
+    },
+    mounted() {
+      eventHub.$on('epicsListRendered', this.handleEpicsListRender);
+    },
+    beforeDestroy() {
+      eventHub.$off('epicsListRendered', this.handleEpicsListRender);
+    },
+    methods: {
+      /**
+       * This method takes height of current shell
+       * and renders vertical line over the area where
+       * today falls in current timeline
+       */
+      handleEpicsListRender({ height }) {
+        // Get total days of current timeframe Item
+        const daysInMonth = totalDaysInMonth(this.timeframeItem);
+        // Get size in % from current date and days in month.
+        const left = Math.floor((this.currentDate.getDate() / daysInMonth) * 100);
+
+        // Set styles and reduce scrollbar height from total shell height.
+        this.todayBarStyles = `height: ${height}px; left: ${left}%;`;
+        this.todayBarReady = true;
+      },
+    },
+  };
+</script>
+
+<template>
+  <span
+    v-if="todayBarReady"
+    class="today-bar"
+    :style="todayBarStyles"
+  >
+  </span>
+</template>

spec/javascripts/roadmap/components/timeline_today_indicator_spec.js

+import Vue from 'vue';
+
+import timelineTodayIndicatorComponent from 'ee/roadmap/components/timeline_today_indicator.vue';
+import eventHub from 'ee/roadmap/event_hub';
+
+import { mockTimeframe } from '../mock_data';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const mockCurrentDate = new Date(
+  mockTimeframe[0].getFullYear(),
+  mockTimeframe[0].getMonth(),
+  15,
+);
+
+const createComponent = ({
+  currentDate = mockCurrentDate,
+  timeframeItem = mockTimeframe[0],
+}) => {
+  const Component = Vue.extend(timelineTodayIndicatorComponent);
+
+  return mountComponent(Component, {
+    currentDate,
+    timeframeItem,
+  });
+};
+
+describe('TimelineTodayIndicatorComponent', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('data', () => {
+    it('returns default data props', () => {
+      vm = createComponent({});
+      expect(vm.todayBarStyles).toBe('');
+      expect(vm.todayBarReady).toBe(false);
+    });
+  });
+
+  describe('methods', () => {
+    describe('handleEpicsListRender', () => {
+      it('sets `todayBarStyles` and `todayBarReady` props based on provided height param, timeframeItem and currentDate props', () => {
+        vm = createComponent({});
+        vm.handleEpicsListRender({
+          height: 100,
+        });
+        expect(vm.todayBarStyles).toBe('height: 100px; left: 50%;'); // Current date being 15th
+        expect(vm.todayBarReady).toBe(true);
+      });
+    });
+  });
+
+  describe('mounted', () => {
+    it('binds `epicsListRendered` event listener via eventHub', () => {
+      spyOn(eventHub, '$on');
+      const vmX = createComponent({});
+      expect(eventHub.$on).toHaveBeenCalledWith('epicsListRendered', jasmine.any(Function));
+      vmX.$destroy();
+    });
+  });
+
+  describe('beforeDestroy', () => {
+    it('unbinds `epicsListRendered` event listener via eventHub', () => {
+      spyOn(eventHub, '$off');
+      const vmX = createComponent({});
+      vmX.$destroy();
+      expect(eventHub.$off).toHaveBeenCalledWith('epicsListRendered', jasmine.any(Function));
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `today-bar`', (done) => {
+      vm = createComponent({});
+      vm.handleEpicsListRender({
+        height: 100,
+      });
+      vm.$nextTick(() => {
+        expect(vm.$el.classList.contains('today-bar')).toBe(true);
+        done();
+      });
+    });
+  });
+});
+