Merge branch '348682-roadmap-quarters-are-completely-misaligned-to-calendar-quarters' into 'master'

Resolve "Roadmap quarters are completely misaligned to calendar quarters"

See merge request gitlab-org/gitlab!76927

ee/app/assets/javascripts/roadmap/utils/roadmap_utils.js

@@ -29,6 +29,19 @@ export const getWeeksForDates = (startDate, endDate) => {
   return timeframe;
 };
 
+export const getMonthsForDates = (startDate, endDate) => {
+  const timeframe = [];
+  const start = newDate(startDate);
+  const end = newDate(endDate);
+
+  while (start.getTime() < end.getTime()) {
+    timeframe.push(newDate(start));
+    start.setMonth(start.getMonth() + 1);
+  }
+
+  return timeframe;
+};
+
 export const getTimeframeForRangeType = ({
   timeframeRangeType = DATE_RANGES.CURRENT_QUARTER,
   presetType = PRESET_TYPES.WEEKS,
@@ -89,7 +102,11 @@ export const getTimeframeForRangeType = ({
     startDate.setDate(1);
 
     if (presetType === PRESET_TYPES.QUARTERS) {
-      timeframe = getTimeframeWindowFrom(startDate, 18 * 2);
+      // Shift start and end dates to align with calender quarters
+      startDate.setMonth(startDate.getMonth() - (startDate.getMonth() % 3));
+      endDate.setMonth(endDate.getMonth() + (2 - (endDate.getMonth() % 3)));
+
+      timeframe = getMonthsForDates(startDate, endDate);
       const quartersTimeframe = [];
 
       // Iterate over the timeframe and break it down

ee/spec/frontend/roadmap/components/epics_list_empty_spec.js

@@ -86,7 +86,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
       });
 
       expect(findSubTitle().text()).toBe(
-        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jul 1, 2016 to Jun 30, 2019.',
+        'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jul 1, 2016 to Sep 30, 2019.',
       );
     });
 
@@ -99,7 +99,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
       });
 
       expect(findSubTitle().text()).toBe(
-        'To widen your search, change or remove filters; from Jul 1, 2016 to Jun 30, 2019.',
+        'To widen your search, change or remove filters; from Jul 1, 2016 to Sep 30, 2019.',
       );
     });
   });

ee/spec/frontend/roadmap/utils/roadmap_item_utils_spec.js

@@ -176,7 +176,7 @@ describe('timeframeEndDate', () => {
    */
   it.each`
     presetType               | endDate                          | timeframe
-    ${PRESET_TYPES.QUARTERS} | ${dateFromString('May 31 2022')} | ${mockQuarterly.timeframe}
+    ${PRESET_TYPES.QUARTERS} | ${dateFromString('Jun 30 2022')} | ${mockQuarterly.timeframe}
     ${PRESET_TYPES.MONTHS}   | ${dateFromString('Dec 31 2020')} | ${mockMonthly.timeframe}
     ${PRESET_TYPES.WEEKS}    | ${dateFromString('Jan 03 2021')} | ${mockWeekly.timeframe}
   `(

ee/spec/frontend/roadmap/utils/roadmap_utils_spec.js

 import { PRESET_TYPES, DATE_RANGES } from 'ee/roadmap/constants';
 import {
   getEpicsTimeframeRange,
-  getWeeksForDates,
+  getMonthsForDates,
+  getPresetTypeForTimeframeRangeType,
   getTimeframeForRangeType,
+  getWeeksForDates,
   sortEpics,
-  getPresetTypeForTimeframeRangeType,
 } from 'ee/roadmap/utils/roadmap_utils';
 
 import { mockTimeframeInitialDate, mockUnsortedEpics } from '../mock_data';
@@ -27,6 +28,18 @@ describe('getWeeksForDates', () => {
   });
 });
 
+describe('getMonthsForDates', () => {
+  it('returns months for given start and due dates', () => {
+    const months = getMonthsForDates(mockTimeframeInitialDate, mockTimeframeMonths[4]);
+
+    expect(months).toHaveLength(4);
+    const dates = ['2018-01-01', '2018-02-01', '2018-03-01', '2018-04-01'];
+    dates.forEach((date, index) => {
+      expect(getDateString(months[index])).toBe(date);
+    });
+  });
+});
+
 describe('getTimeframeForRangeType', () => {
   beforeEach(() => {
     jest.useFakeTimers('modern');
@@ -77,7 +90,7 @@ describe('getTimeframeForRangeType', () => {
       presetType: PRESET_TYPES.QUARTERS,
     });
 
-    expect(timeframe).toHaveLength(12);
+    expect(timeframe).toHaveLength(13);
 
     expect(timeframe[0]).toMatchObject({
       quarterSequence: 3,
@@ -139,7 +152,7 @@ describe('getEpicsTimeframeRange', () => {
       expect.objectContaining({
         timeframe: {
           start: '2016-07-01',
-          end: '2019-06-30',
+          end: '2019-09-30',
         },
       }),
     );