Merge branch 'kp-fix-roadmap-timeline-scroll-bug' into 'master'

Fixes Roadmap timeline bars not expanding on scroll

See merge request gitlab-org/gitlab!22207

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

@@ -31,27 +31,29 @@ export default {
       required: true,
     },
   },
-  data() {
-    const { startDate, endDate } = this.epic;
+  computed: {
+    epicStartDateValues() {
+      const { startDate } = this.epic;
 
-    return {
-      epicStartDateValues: {
+      return {
         day: startDate.getDay(),
         date: startDate.getDate(),
         month: startDate.getMonth(),
         year: startDate.getFullYear(),
         time: startDate.getTime(),
-      },
-      epicEndDateValues: {
+      };
+    },
+    epicEndDateValues() {
+      const { endDate } = this.epic;
+
+      return {
         day: endDate.getDay(),
         date: endDate.getDate(),
         month: endDate.getMonth(),
         year: endDate.getFullYear(),
         time: endDate.getTime(),
-      },
-    };
-  },
-  computed: {
+      };
+    },
     hasStartDate() {
       if (this.presetType === PRESET_TYPES.QUARTERS) {
         return this.hasStartDateForQuarter();

ee/spec/javascripts/roadmap/components/epic_item_timeline_spec.js

@@ -33,29 +33,37 @@ describe('EpicItemTimelineComponent', () => {
     vm.$destroy();
   });
 
-  describe('data', () => {
-    it('returns default data props', () => {
+  describe('computed', () => {
+    beforeEach(() => {
       vm = createComponent({});
+    });
 
-      expect(vm.epicStartDateValues).toEqual(
-        jasmine.objectContaining({
-          day: mockEpic.startDate.getDay(),
-          date: mockEpic.startDate.getDate(),
-          month: mockEpic.startDate.getMonth(),
-          year: mockEpic.startDate.getFullYear(),
-          time: mockEpic.startDate.getTime(),
-        }),
-      );
-
-      expect(vm.epicEndDateValues).toEqual(
-        jasmine.objectContaining({
-          day: mockEpic.endDate.getDay(),
-          date: mockEpic.endDate.getDate(),
-          month: mockEpic.endDate.getMonth(),
-          year: mockEpic.endDate.getFullYear(),
-          time: mockEpic.endDate.getTime(),
-        }),
-      );
+    describe('epicStartDateValues', () => {
+      it('returns object containing date parts from epic.startDate', () => {
+        expect(vm.epicStartDateValues).toEqual(
+          jasmine.objectContaining({
+            day: mockEpic.startDate.getDay(),
+            date: mockEpic.startDate.getDate(),
+            month: mockEpic.startDate.getMonth(),
+            year: mockEpic.startDate.getFullYear(),
+            time: mockEpic.startDate.getTime(),
+          }),
+        );
+      });
+    });
+
+    describe('epicEndDateValues', () => {
+      it('returns object containing date parts from epic.endDate', () => {
+        expect(vm.epicEndDateValues).toEqual(
+          jasmine.objectContaining({
+            day: mockEpic.endDate.getDay(),
+            date: mockEpic.endDate.getDate(),
+            month: mockEpic.endDate.getMonth(),
+            year: mockEpic.endDate.getFullYear(),
+            time: mockEpic.endDate.getTime(),
+          }),
+        );
+      });
     });
   });