Fix timeframe extension for weeks view

Add support for handling custom length in `getTimeframeForWeeksView`.
Make `extendTimeframeForAvailableWidth` resilient to medium window size.

ee/app/assets/javascripts/roadmap/constants.js

@@ -12,6 +12,8 @@ export const SCROLL_BAR_SIZE = 15;
 
 export const EPIC_HIGHLIGHT_REMOVE_AFTER = 3000;
 
+export const DAYS_IN_WEEK = 7;
+
 export const PRESET_TYPES = {
   QUARTERS: 'QUARTERS',
   MONTHS: 'MONTHS',

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

 import { newDate, getTimeframeWindowFrom, totalDaysInMonth } from '~/lib/utils/datetime_utility';
 
-import { PRESET_TYPES, PRESET_DEFAULTS, EXTEND_AS, TIMELINE_CELL_MIN_WIDTH } from '../constants';
+import {
+  PRESET_TYPES,
+  PRESET_DEFAULTS,
+  EXTEND_AS,
+  TIMELINE_CELL_MIN_WIDTH,
+  DAYS_IN_WEEK,
+} from '../constants';
 
 const monthsForQuarters = {
   1: [0, 1, 2],
@@ -173,19 +179,26 @@ export const extendTimeframeForMonthsView = (initialDate = new Date(), length) =
  *
  * @param {Date} initialDate
  */
-export const getTimeframeForWeeksView = (initialDate = new Date()) => {
+export const getTimeframeForWeeksView = (initialDate = new Date(), length) => {
+  const timeframe = [];
   const startDate = newDate(initialDate);
   startDate.setHours(0, 0, 0, 0);
 
+  // When length is not provided
+  // We need to provide standard
+  // timeframe as per feature specs (see block comment above)
+  if (!length) {
     const dayOfWeek = startDate.getDay();
-  const daysToFirstDayOfPrevWeek = dayOfWeek + 14;
-  const timeframe = [];
+    const daysToFirstDayOfPrevWeek = dayOfWeek + DAYS_IN_WEEK * 2;
 
     // Move startDate to first day (Sunday) of 2 weeks prior
     startDate.setDate(startDate.getDate() - daysToFirstDayOfPrevWeek);
+  }
+
+  const rangeLength = length || PRESET_DEFAULTS.WEEKS.TIMEFRAME_LENGTH;
 
   // Iterate for the length of this preset
-  for (let i = 0; i < PRESET_DEFAULTS.WEEKS.TIMEFRAME_LENGTH; i += 1) {
+  for (let i = 0; i < rangeLength; i += 1) {
     // Push date to timeframe only when day is
     // first day (Sunday) of the week
     timeframe.push(newDate(startDate));
@@ -201,13 +214,14 @@ export const extendTimeframeForWeeksView = (initialDate = new Date(), length) =>
   const startDate = newDate(initialDate);
 
   if (length < 0) {
+    // When length is negative, we need to go
+    // back as many weeks in time as value of length
     startDate.setDate(startDate.getDate() + (length + 1) * 7);
   } else {
-    startDate.setDate(startDate.getDate() + 7);
+    startDate.setDate(startDate.getDate());
   }
 
-  const timeframe = getTimeframeForWeeksView(startDate, length + 1);
-  return timeframe.slice(1);
+  return getTimeframeForWeeksView(startDate, Math.abs(length) + 1);
 };
 
 export const extendTimeframeForPreset = ({
@@ -258,7 +272,14 @@ export const extendTimeframeForAvailableWidth = ({
   // We double the increaseLengthBy to make sure there's enough room
   // to perform horizontal scroll without triggering timeframe extension
   // on initial page load.
-  const increaseLengthBy = (timeframeLength - timeframe.length) * 2;
+  let increaseLengthBy = timeframeLength - timeframe.length;
+
+  // Handle a case where window size is leading to
+  // increaseLength between 1 & 3 which is not big
+  // enough for extendTimeframeFor*****View methods
+  if (increaseLengthBy > 0 && increaseLengthBy <= 3) {
+    increaseLengthBy += 4; // Equalize by adding 2 columns on each end
+  }
 
   // If there are timeframe items to be added
   // to make timeline scrollable, do as follows.

ee/spec/javascripts/roadmap/mock_data.js

@@ -70,12 +70,13 @@ export const mockTimeframeMonthsAppend = [
 ];
 
 export const mockTimeframeWeeksPrepend = [
-  new Date(2017, 10, 5),
   new Date(2017, 10, 12),
   new Date(2017, 10, 19),
   new Date(2017, 10, 26),
   new Date(2017, 11, 3),
   new Date(2017, 11, 10),
+  new Date(2017, 11, 17),
+  new Date(2017, 11, 24),
 ];
 export const mockTimeframeWeeksAppend = [
   new Date(2018, 0, 28),
@@ -84,6 +85,7 @@ export const mockTimeframeWeeksAppend = [
   new Date(2018, 1, 18),
   new Date(2018, 1, 25),
   new Date(2018, 2, 4),
+  new Date(2018, 2, 11),
 ];
 
 export const mockEpic = {

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

@@ -183,7 +183,7 @@ describe('getTimeframeForWeeksView', () => {
   let timeframe;
 
   beforeEach(() => {
-    timeframe = getTimeframeForWeeksView(new Date(2018, 0, 1));
+    timeframe = getTimeframeForWeeksView(mockTimeframeInitialDate);
   });
 
   it('returns timeframe with total of 7 weeks', () => {
@@ -215,6 +215,24 @@ describe('getTimeframeForWeeksView', () => {
     expect(timeframeItem.getMonth()).toBe(expectedMonth.month);
     expect(timeframeItem.getDate()).toBe(expectedMonth.date);
   });
+
+  it('returns timeframe starting on a specific date when provided with additional `length` param', () => {
+    const initialDate = new Date(2018, 0, 7);
+
+    timeframe = getTimeframeForWeeksView(initialDate, 5);
+    const expectedTimeframe = [
+      initialDate,
+      new Date(2018, 0, 14),
+      new Date(2018, 0, 21),
+      new Date(2018, 0, 28),
+      new Date(2018, 1, 4),
+    ];
+
+    expect(timeframe.length).toBe(5);
+    expectedTimeframe.forEach((timeframeItem, index) => {
+      expect(timeframeItem.getTime()).toBe(expectedTimeframe[index].getTime());
+    });
+  });
 });
 
 describe('extendTimeframeForWeeksView', () => {
@@ -272,9 +290,9 @@ describe('extendTimeframeForAvailableWidth', () => {
       timeframeEnd,
     });
 
-    expect(timeframe.length).toBe(16);
-    expect(timeframe[0].getTime()).toBe(1498867200000); // 1 July 2017
-    expect(timeframe[timeframe.length - 1].getTime()).toBe(1540944000000); // 31 Oct 2018
+    expect(timeframe.length).toBe(12);
+    expect(timeframe[0].getTime()).toBe(1504224000000); // 1 Sep 2017
+    expect(timeframe[timeframe.length - 1].getTime()).toBe(1535673600000); // 31 Aug 2018
   });
 });