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: {
         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,10 +33,13 @@ describe('EpicItemTimelineComponent', () => {
     vm.$destroy();
   });
 
-  describe('data', () => {
-    it('returns default data props', () => {
+  describe('computed', () => {
+    beforeEach(() => {
       vm = createComponent({});
+    });
 
+    describe('epicStartDateValues', () => {
+      it('returns object containing date parts from epic.startDate', () => {
         expect(vm.epicStartDateValues).toEqual(
           jasmine.objectContaining({
             day: mockEpic.startDate.getDay(),
@@ -46,7 +49,11 @@ describe('EpicItemTimelineComponent', () => {
             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(),
@@ -58,6 +65,7 @@ describe('EpicItemTimelineComponent', () => {
         );
       });
     });
+  });
 
   describe('template', () => {
     it('renders component container element with class `epic-timeline-cell`', () => {