Apply reviewer and maintainer suggestions

Place 'dateFromString' helper function in
  spec/frontend/helpers/datetime_helpers.js

Use realistic mock data and place them in mock_data.js

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -100,11 +100,6 @@ export function formatDateAsMonth(datetime, options = {}) {
   return getMonthNames(abbreviated)[month];
 }
 
-/**
- * Returns a date object corresponding to the given date string.
- */
-export const dateFromString = dateString => new Date(dateFormat(dateString));
-
 /**
  * @example
  * dateFormat('2017-12-05','mmm d, yyyy h:MMtt Z' ) -> "Dec 5, 2017 12:00am GMT+0000"

ee/app/assets/javascripts/roadmap/store/actions.js

@@ -238,6 +238,8 @@ export const toggleEpic = ({ state, dispatch }, { parentItem }) => {
  * so that the epic bars get longer to appear infinitely scrolling.
  */
 export const refreshEpicDates = ({ commit, state }) => {
+  const { presetType, timeframe } = state;
+
   const epics = state.epics.map((epic) => {
     // Update child epic dates too
     if (epic.children?.edges?.length > 0) {
@@ -337,15 +339,10 @@ export const receiveMilestonesFailure = ({ commit }) => {
   flash(s__('GroupRoadmap|Something went wrong while fetching milestones'));
 };
 
-<<<<<<< HEAD
-export const refreshMilestoneDates = ({ commit, state, getters }) => {
-  const milestones = state.milestones.map((milestone) =>
-=======
 export const refreshMilestoneDates = ({ commit, state }) => {
   const { presetType, timeframe } = state;
 
-  const milestones = state.milestones.map(milestone =>
->>>>>>> 1290c5ff943 (Move getter methods into roadmap_item_utils.js)
+  const milestones = state.milestones.map((milestone) =>
     roadmapItemUtils.processRoadmapItemDates(
       milestone,
       roadmapItemUtils.timeframeStartDate(presetType, timeframe),

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

@@ -117,7 +117,7 @@ export const extractGroupMilestones = (edges) =>
  *
  * @param {Array} timeframe
  */
-export const lastTimeframeIndex = timeframe => timeframe.length - 1;
+export const lastTimeframeIndex = (timeframe) => timeframe.length - 1;
 
 /**
  * Returns first item of the timeframe array

ee/spec/frontend/roadmap/mock_data.js

+import {
+  getTimeframeForWeeksView,
+  getTimeframeForMonthsView,
+  getTimeframeForQuartersView,
+} from 'ee/roadmap/utils/roadmap_utils';
+
+import { dateFromString } from 'helpers/datetime_helpers';
+
 export const mockScrollBarSize = 15;
 
 export const mockGroupId = 2;
@@ -94,6 +102,52 @@ export const mockTimeframeWeeksAppend = [
   new Date(2018, 2, 4),
 ];
 
+const OCT_11_2020 = dateFromString('Oct 11 2020');
+export const mockWeekly = {
+  currentDate: OCT_11_2020,
+  /*
+    Each item in timeframe is a Date object.
+
+    timeframe = [ Sep 27 2020, Oct  4 2020, Oct 11 2020, <- current week or currentIndex == 2
+                  Oct 18 2020, Oct 25 2020, Nov  1 2020,
+                  Nov  8 2020 ]
+  */
+  timeframe: getTimeframeForWeeksView(OCT_11_2020),
+};
+
+const DEC_1_2020 = dateFromString('Dec 1 2020');
+export const mockMonthly = {
+  currentDate: DEC_1_2020,
+  /*
+    Each item in timeframe is a Date object.
+
+    timeframe = [ Oct 1 2020, Nov 1 2020, Dec 1 2020, <- current month == index 2
+                  Jan 1 2021, Feb 1 2021, Mar 1 2021,
+                  Apr 1 2021, May 31 2021 ]
+  */
+  timeframe: getTimeframeForMonthsView(DEC_1_2020),
+};
+
+const DEC_25_2020 = dateFromString('Dec 25 2020');
+export const mockQuarterly = {
+  currentDate: DEC_25_2020,
+  /*
+    The format of quarterly timeframes differs from that of the monthly and weekly ones.
+
+    For quarterly, each item in timeframe has the following shape:
+      { quarterSequence: number, range: array<Dates>, year: number }
+
+      Each item in range is a Date object.
+
+      E.g., { 2020 Q2 } = { quarterSequence: 2, range: [ Apr 1 2020, May 1 2020, Jun 30 2020], year 2020 }
+
+    timeframe = [ { 2020 Q2 }, { 2020 Q3 }, { 2020 Q4 }, <- current quarter == index 2
+                  { 2021 Q1 }, { 2021 Q2 }, { 2021 Q3 },
+                  { 2021 Q4 } ]
+  */
+  timeframe: getTimeframeForQuartersView(DEC_25_2020),
+};
+
 export const mockEpic = {
   id: 1,
   iid: 1,

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

 import * as roadmapItemUtils from 'ee/roadmap/utils/roadmap_item_utils';
 
 import { PRESET_TYPES } from 'ee/roadmap/constants';
-import { dateFromString, parsePikadayDate } from '~/lib/utils/datetime_utility';
-
-import { rawEpics, mockGroupMilestonesQueryResponse } from '../mock_data';
-
-const mockQuarterlyTimeframe = [
-  {
-    range: [
-      dateFromString('Jan 1 2020'),
-      dateFromString('Feb 1 2020'),
-      dateFromString('Mar 1 2020'),
-    ],
-  },
-  {
-    range: [
-      dateFromString('Apr 1 2020'),
-      dateFromString('May 1 2020'),
-      dateFromString('Jun 1 2020'),
-    ],
-  },
-];
-
-const mockMonthlyTimeframe = [
-  dateFromString('Jan 1 2020'),
-  dateFromString('Feb 1 2020'),
-  dateFromString('Mar 1 2020'),
-];
-
-const mockWeeklyTimeframe = [
-  dateFromString('Dec 6 2020'),
-  dateFromString('Dec 13 2020'),
-  dateFromString('Dec 20 2020'),
-];
+import { dateFromString } from 'helpers/datetime_helpers';
+import { parsePikadayDate } from '~/lib/utils/datetime_utility';
+import {
+  rawEpics,
+  mockGroupMilestonesQueryResponse,
+  mockQuarterly,
+  mockMonthly,
+  mockWeekly,
+} from '../mock_data';
 
 describe('processRoadmapItemDates', () => {
   const timeframeStartDate = new Date(2017, 0, 1);
@@ -168,33 +145,44 @@ describe('lastTimeframeIndex', () => {
 
 describe('timeframeStartDate', () => {
   it.each`
-    presetType               | firstItem                       | timeframe
-    ${PRESET_TYPES.QUARTERS} | ${dateFromString('Jan 1 2020')} | ${mockQuarterlyTimeframe}
-    ${PRESET_TYPES.MONTHS}   | ${dateFromString('Jan 1 2020')} | ${mockMonthlyTimeframe}
-    ${PRESET_TYPES.WEEKS}    | ${dateFromString('Dec 6 2020')} | ${mockWeeklyTimeframe}
+    presetType               | startDate                              | timeframe
+    ${PRESET_TYPES.QUARTERS} | ${mockQuarterly.timeframe[0].range[0]} | ${mockQuarterly.timeframe}
+    ${PRESET_TYPES.MONTHS}   | ${mockMonthly.timeframe[0]}            | ${mockMonthly.timeframe}
+    ${PRESET_TYPES.WEEKS}    | ${mockWeekly.timeframe[0]}             | ${mockWeekly.timeframe}
   `(
-    `should return first item of the timeframe range array when preset type is $presetType`,
-    ({ presetType, firstItem, timeframe }) => {
-      expect(roadmapItemUtils.timeframeStartDate(presetType, timeframe)).toEqual(firstItem);
+    `should return starting date for the timeframe range array when preset type is $presetType`,
+    ({ presetType, startDate, timeframe }) => {
+      expect(roadmapItemUtils.timeframeStartDate(presetType, timeframe)).toEqual(startDate);
     },
   );
 });
 
 describe('timeframeEndDate', () => {
   /*
-    Note that for a weekly timeframe, lastItem should point to the ending date of a week.
-    For example, if in mockWeeklyTimeframe, 'Dec 20 2020' is the last item.
-    However, the ending date for that week is 'Dec 27 2020'.
+    Note: there are inconsistencies in how timeframes are generated.
+
+    A monthly timeframe generated with roadmap_util's getTimeframeForMonthsView function -
+      will always set its last item to the ending date for that month.
+      E.g., [ Oct 1, Nov 1, Dec 31 ]
+
+      The same is true of quarterly timeframes generated with getTimeframeForQuarterlyView
+      E.g., [ ..., { range: [ Oct 1, Nov 1, Dec 31 ] }]
+    
+    In comparison, a weekly timeframe won't have its last item set to the ending date for the week.
+      E.g., [ Oct 25, Nov 1, Nov 8 ]
+
+      In this example,
+      roadmapItemUtils.timeframeEndDate([ Oct 25, Nov 1, Nov 8 ]) should return 'Nov 15'
    */
   it.each`
-    presetType               | lastItem                         | timeframe
-    ${PRESET_TYPES.QUARTERS} | ${dateFromString('Jun 1 2020')}  | ${mockQuarterlyTimeframe}
-    ${PRESET_TYPES.MONTHS}   | ${dateFromString('Mar 1 2020')}  | ${mockMonthlyTimeframe}
-    ${PRESET_TYPES.WEEKS}    | ${dateFromString('Dec 27 2020')} | ${mockWeeklyTimeframe}
+    presetType               | endDate                          | timeframe
+    ${PRESET_TYPES.QUARTERS} | ${dateFromString('Dec 31 2021')} | ${mockQuarterly.timeframe}
+    ${PRESET_TYPES.MONTHS}   | ${dateFromString('May 31 2021')} | ${mockMonthly.timeframe}
+    ${PRESET_TYPES.WEEKS}    | ${dateFromString('Nov 15 2020')} | ${mockWeekly.timeframe}
   `(
-    `should return last item of the timeframe range array when preset type is $presetType`,
-    ({ presetType, lastItem, timeframe }) => {
-      expect(roadmapItemUtils.timeframeEndDate(presetType, timeframe)).toEqual(lastItem);
+    `should return ending date for the timeframe range array when preset type is $presetType`,
+    ({ presetType, endDate, timeframe }) => {
+      expect(roadmapItemUtils.timeframeEndDate(presetType, timeframe)).toEqual(endDate);
     },
   );
 });

spec/frontend/helpers/datetime_helpers.js

+import dateFormat from 'dateformat';
+
+/**
+ * Returns a date object corresponding to the given date string.
+ */
+export const dateFromString = (dateString) => new Date(dateFormat(dateString));