Merge branch '236004-use-fake-date-everywhere' into 'master'

Step 2 - Setup `useFakeDate` by default in Jest

See merge request gitlab-org/gitlab!39496

doc/development/testing_guide/frontend_testing.md

@@ -655,15 +655,41 @@ Non-determinism is the breeding ground for flaky and brittle specs. Such specs e
 
 ### Faking `Date` for determinism
 
-Consider using `useFakeDate` to ensure a consistent value is returned with every `new Date()` or `Date.now()`.
+`Date` is faked by default in our Jest environment. This means every call to `Date()` or `Date.now()` returns a fixed deterministic value.
+
+If you really need to change the default fake date, you can call `useFakeDate` within any `describe` block, and
+the date will be replaced for that specs within that `describe` context only:
 
 ```javascript
 import { useFakeDate } from 'helpers/fake_date';
 
 describe('cool/component', () => {
-  useFakeDate();
+  // Default fake `Date`
+  const TODAY = new Date();
 
-  // ...
+  // NOTE: `useFakeDate` cannot be called during test execution (i.e. inside `it`, `beforeEach`, `beforeAll`, etc.).
+  describe("on Ada Lovelace's Birthday", () => {
+    useFakeDate(1815, 11, 10)
+
+    it('Date is no longer default', () => {
+      expect(new Date()).not.toEqual(TODAY);
+    });
+  });
+
+  it('Date is still default in this scope', () => {
+    expect(new Date()).toEqual(TODAY)
+  });
+})
+```
+
+Similarly, if you really need to use the real `Date` class, then you can import and call `useRealDate` within any `describe` block:
+
+```javascript
+import { useRealDate } from 'helpers/fake_date';
+
+// NOTE: `useRealDate` cannot be called during test execution (i.e. inside `it`, `beforeEach`, `beforeAll`, etc.). 
+describe('with real date', () => {
+  useRealDate();
 });
 ```
 

ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap

@@ -117,7 +117,7 @@ exports[`MergeRequestTable component template matches the snapshot 1`] = `
               </li>
                
               <li>
-                opened just now
+                opened 5 months ago
               </li>
                
               <li>

ee/spec/frontend/analytics/code_review_analytics/components/merge_request_table_spec.js

@@ -58,8 +58,6 @@ describe('MergeRequestTable component', () => {
 
   describe('template', () => {
     beforeEach(() => {
-      jest.spyOn(global, 'Date').mockImplementationOnce(() => new Date('2020-03-09T11:01:58.135Z'));
-
       bootstrap({ mergeRequests: mockMergeRequests });
     });
 

ee/spec/frontend/analytics/repository_analytics/components/download_test_coverage_spec.js

@@ -2,12 +2,10 @@ import { GlAlert, GlDropdown, GlDropdownItem, GlModal } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import DownloadTestCoverage from 'ee/analytics/repository_analytics/components/download_test_coverage.vue';
 import SelectProjectsDropdown from 'ee/analytics/repository_analytics/components/select_projects_dropdown.vue';
-import { useFakeDate } from 'helpers/fake_date';
 
 const localVue = createLocalVue();
 
 describe('Download test coverage component', () => {
-  useFakeDate();
   let wrapper;
 
   const findCodeCoverageModalButton = () =>
@@ -73,8 +71,6 @@ describe('Download test coverage component', () => {
     });
 
     describe('when selecting a project', () => {
-      // Due to the fake_date helper, we can always expect today's date to be 2020-07-06
-      // and the default date 30 days ago to be 2020-06-06
       const groupAnalyticsCoverageReportsPathWithDates = `${injectedProperties.groupAnalyticsCoverageReportsPath}?start_date=2020-06-06&end_date=2020-07-06`;
 
       describe('with all projects selected', () => {

ee/spec/frontend/analytics/repository_analytics/components/test_coverage_summary_spec.js

@@ -3,14 +3,12 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import TestCoverageSummary from 'ee/analytics/repository_analytics/components/test_coverage_summary.vue';
 import getGroupTestCoverage from 'ee/analytics/repository_analytics/graphql/queries/get_group_test_coverage.query.graphql';
-import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
 const localVue = createLocalVue();
 
 describe('Test coverage table component', () => {
-  useFakeDate();
   let wrapper;
   let fakeApollo;
 

ee/spec/frontend/analytics/shared/components/daterange_spec.js

 import { GlDaterangePicker } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { useFakeDate } from 'helpers/fake_date';
 import Daterange from 'ee/analytics/shared/components/daterange.vue';
 
 const defaultProps = {
@@ -8,6 +9,8 @@ const defaultProps = {
 };
 
 describe('Daterange component', () => {
+  useFakeDate(2019, 8, 25);
+
   let wrapper;
 
   const factory = (props = defaultProps) => {
@@ -19,10 +22,6 @@ describe('Daterange component', () => {
     });
   };
 
-  beforeEach(() => {
-    jest.spyOn(global.Date, 'now').mockImplementation(() => new Date('2019-09-25T00:00:00Z'));
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });

ee/spec/frontend/burndown_chart/burn_chart_data_spec.js

 import dateFormat from 'dateformat';
 import timezoneMock from 'timezone-mock';
 import BurndownChartData from 'ee/burndown_chart/burn_chart_data';
+import { useFakeDate } from 'helpers/fake_date';
 
 describe('BurndownChartData', () => {
   const startDate = '2017-03-01';
@@ -68,16 +69,7 @@ describe('BurndownChartData', () => {
     });
 
     describe('when viewing before due date', () => {
-      const realDateNow = Date.now;
-
-      beforeAll(() => {
-        const today = jest.fn(() => new Date(2017, 2, 2));
-        global.Date.now = today;
-      });
-
-      afterAll(() => {
-        global.Date.now = realDateNow;
-      });
+      useFakeDate(2017, 2, 2);
 
       it('counts until today if milestone due date > date today', () => {
         const chartData = burndownChartData.generateBurndownTimeseries();

ee/spec/frontend/burndown_chart/components/burn_charts_spec.js

@@ -10,7 +10,7 @@ import TimeboxSummaryCards from 'ee/burndown_chart/components/timebox_summary_ca
 import { useFakeDate } from 'helpers/fake_date';
 import { day1, day2, day3, day4 } from '../mock_data';
 
-function fakeDate({ date }) {
+function useFakeDateFromDay({ date }) {
   const [year, month, day] = date.split('-');
 
   useFakeDate(year, month - 1, day);
@@ -201,12 +201,12 @@ describe('burndown_chart', () => {
 
   // some separate tests for the update function since it has a bunch of logic
   describe('padSparseBurnupData function', () => {
+    useFakeDateFromDay(day4);
+
     beforeEach(() => {
       createComponent({
         props: { startDate: day1.date, dueDate: day4.date },
       });
-
-      fakeDate(day4);
     });
 
     it('pads data from startDate if no startDate values', () => {
@@ -236,15 +236,18 @@ describe('burndown_chart', () => {
       });
     });
 
-    it('if dueDate is in the future, pad data up to current date using last existing value', () => {
-      fakeDate(day3);
+    describe('when dueDate is in the future', () => {
+      // day3 is before the day4 we set to dueDate in the beforeEach
+      useFakeDateFromDay(day3);
 
-      const result = wrapper.vm.padSparseBurnupData([day1, day2]);
+      it('pad data up to current date using last existing value', () => {
+        const result = wrapper.vm.padSparseBurnupData([day1, day2]);
 
-      expect(result.length).toBe(3);
-      expect(result[2]).toEqual({
-        ...day2,
-        date: day3.date,
+        expect(result.length).toBe(3);
+        expect(result[2]).toEqual({
+          ...day2,
+          date: day3.date,
+        });
       });
     });
 

ee/spec/frontend/environments/environment_alert_spec.js

 import { mount } from '@vue/test-utils';
 import EnvironmentAlert from 'ee/environments/components/environment_alert.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
-import { useFakeDate } from 'helpers/fake_date';
 
 describe('Environment Alert', () => {
   let wrapper;
   const DEFAULT_PROVIDE = { projectPath: 'test-org/test' };
   const DEFAULT_PROPS = { environment: { name: 'staging' } };
 
-  useFakeDate();
-
   const factory = (props = {}, provide = {}) => {
     wrapper = mount(EnvironmentAlert, {
       propsData: {

ee/spec/frontend/geo_nodes/components/geo_node_last_updated_spec.js

@@ -11,7 +11,8 @@ import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
 describe('GeoNodeLastUpdated', () => {
   let wrapper;
 
-  const staleStatusTime = differenceInMilliseconds(STATUS_DELAY_THRESHOLD_MS);
+  // The threshold is exclusive so -1
+  const staleStatusTime = differenceInMilliseconds(STATUS_DELAY_THRESHOLD_MS) - 1;
   const nonStaleStatusTime = new Date().getTime();
 
   const defaultProps = {

ee/spec/frontend/oncall_schedule/schedule/components/rotations_list_section_spec.js

@@ -47,8 +47,9 @@ describe('RotationsListSectionComponent', () => {
   });
 
   describe('when the timeframe includes today', () => {
+    useFakeDate(2021, 0, 14);
+
     beforeEach(() => {
-      useFakeDate(2021, 0, 14);
       createComponent();
     });
 
@@ -77,8 +78,9 @@ describe('RotationsListSectionComponent', () => {
   });
 
   describe('when the timeframe does not include today', () => {
+    useFakeDate(2021, 0, 31);
+
     beforeEach(() => {
-      useFakeDate(2021, 0, 31);
       createComponent();
     });
 

ee/spec/frontend/oncall_schedule/schedule/mixins/common_mixin_spec.js

@@ -7,10 +7,14 @@ import * as dateTimeUtility from '~/lib/utils/datetime_utility';
 describe('Schedule Common Mixins', () => {
   // January 3rd, 2018
   useFakeDate(2018, 0, 3);
-  const today = new Date();
 
+  let today;
   let wrapper;
 
+  beforeEach(() => {
+    today = new Date();
+  });
+
   const component = {
     template: `<span></span>`,
     props: {

ee/spec/frontend/security_dashboard/components/csv_export_button_spec.js

@@ -4,7 +4,6 @@ import MockAdapter from 'axios-mock-adapter';
 import CsvExportButton, {
   STORAGE_KEY,
 } from 'ee/security_dashboard/components/csv_export_button.vue';
-import { useFakeDate } from 'helpers/fake_date';
 import { TEST_HOST } from 'helpers/test_constants';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -14,7 +13,6 @@ import statusCodes from '~/lib/utils/http_status';
 
 jest.mock('~/flash');
 jest.mock('~/lib/utils/downloader');
-useFakeDate();
 
 const mockReportDate = formatDate(new Date(), 'isoDateTime');
 const vulnerabilitiesExportEndpoint = `${TEST_HOST}/vulnerability_findings.csv`;

ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js

@@ -4,15 +4,12 @@ import NetworkPolicyList from 'ee/threat_monitoring/components/network_policy_li
 import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue';
 import { PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
 import createStore from 'ee/threat_monitoring/store';
-import { useFakeDate } from 'helpers/fake_date';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { mockPoliciesResponse } from '../mock_data';
 
 const mockData = mockPoliciesResponse.map((policy) => convertObjectPropsToCamelCase(policy));
 
 describe('NetworkPolicyList component', () => {
-  useFakeDate();
-
   let store;
   let wrapper;
 

spec/frontend/__helpers__/fake_date.js → spec/frontend/__helpers__/fake_date/fake_date.js

 // Frida Kahlo's birthday (6 = July)
-export const DEFAULT_ARGS = [2020, 6, 6];
+const DEFAULT_ARGS = [2020, 6, 6];
 
 const RealDate = Date;
 
 const isMocked = (val) => Boolean(val.mock);
 
-export const createFakeDateClass = (ctorDefault) => {
+const createFakeDateClass = (ctorDefaultParam = []) => {
+  const ctorDefault = ctorDefaultParam.length ? ctorDefaultParam : DEFAULT_ARGS;
+
   const FakeDate = new Proxy(RealDate, {
     construct: (target, argArray) => {
       const ctorArgs = argArray.length ? argArray : ctorDefault;
@@ -39,11 +41,20 @@ export const createFakeDateClass = (ctorDefault) => {
   return FakeDate;
 };
 
-export const useFakeDate = (...args) => {
-  const FakeDate = createFakeDateClass(args.length ? args : DEFAULT_ARGS);
+const setGlobalDateToFakeDate = (...args) => {
+  const FakeDate = createFakeDateClass(args);
   global.Date = FakeDate;
 };
 
-export const useRealDate = () => {
+const setGlobalDateToRealDate = () => {
   global.Date = RealDate;
 };
+
+// We use commonjs so that the test environment module can pick this up
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  setGlobalDateToFakeDate,
+  setGlobalDateToRealDate,
+  createFakeDateClass,
+  RealDate,
+};

spec/frontend/__helpers__/fake_date_spec.js → spec/frontend/__helpers__/fake_date/fake_date_spec.js

-import { createFakeDateClass, DEFAULT_ARGS, useRealDate } from './fake_date';
+import { createFakeDateClass } from './fake_date';
 
 describe('spec/helpers/fake_date', () => {
   describe('createFakeDateClass', () => {
     let FakeDate;
 
-    beforeAll(() => {
-      useRealDate();
-    });
-
     beforeEach(() => {
-      FakeDate = createFakeDateClass(DEFAULT_ARGS);
+      FakeDate = createFakeDateClass();
     });
 
     it('should use default args', () => {

spec/frontend/__helpers__/fake_date/index.js

+export * from './fake_date';
+export * from './jest';

spec/frontend/__helpers__/fake_date/jest.js

+import { createJestExecutionWatcher } from '../jest_execution_watcher';
+import { RealDate, createFakeDateClass } from './fake_date';
+
+const throwInsideExecutionError = (fnName) => {
+  throw new Error(`Cannot call "${fnName}" during test execution (i.e. within "it", "beforeEach", "beforeAll", etc.).
+
+Instead, please move the call to "${fnName}" inside the "describe" block itself.
+
+      describe('', () => {
+    +   ${fnName}();
+
+        it('', () => {
+    -     ${fnName}();
+        })
+      })
+`);
+};
+
+const isExecutingTest = createJestExecutionWatcher();
+
+export const useDateInScope = (fnName, factory) => {
+  if (isExecutingTest()) {
+    throwInsideExecutionError(fnName);
+  }
+
+  let origDate;
+
+  beforeAll(() => {
+    origDate = global.Date;
+    global.Date = factory();
+  });
+
+  afterAll(() => {
+    global.Date = origDate;
+  });
+};
+
+export const useFakeDate = (...args) =>
+  useDateInScope('useFakeDate', () => createFakeDateClass(args));
+
+export const useRealDate = () => useDateInScope('useRealDate', () => RealDate);

spec/frontend/__helpers__/jest_execution_watcher.js

+export const createJestExecutionWatcher = () => {
+  let isExecuting = false;
+
+  beforeAll(() => {
+    isExecuting = true;
+  });
+  afterAll(() => {
+    isExecuting = false;
+  });
+
+  return () => isExecuting;
+};

spec/frontend/access_tokens/components/expires_at_field_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { useFakeDate } from 'helpers/fake_date';
 import ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
 
 describe('~/access_tokens/components/expires_at_field', () => {
-  useFakeDate();
-
   let wrapper;
 
   const createComponent = () => {

spec/frontend/analytics/instance_statistics/components/projects_and_groups_chart_spec.js

@@ -3,7 +3,6 @@ import { GlLineChart } from '@gitlab/ui/dist/charts';
 import { GlAlert } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { useFakeDate } from 'helpers/fake_date';
 import ProjectsAndGroupChart from '~/analytics/instance_statistics/components/projects_and_groups_chart.vue';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import projectsQuery from '~/analytics/instance_statistics/graphql/queries/projects.query.graphql';
@@ -45,8 +44,8 @@ describe('ProjectsAndGroupChart', () => {
 
     return shallowMount(ProjectsAndGroupChart, {
       props: {
-        startDate: useFakeDate(2020, 9, 26),
-        endDate: useFakeDate(2020, 10, 1),
+        startDate: new Date(2020, 9, 26),
+        endDate: new Date(2020, 10, 1),
         totalDataPoints: mockCountsData2.length,
       },
       localVue,

spec/frontend/analytics/instance_statistics/components/users_chart_spec.js

@@ -3,7 +3,6 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { GlAlert } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { useFakeDate } from 'helpers/fake_date';
 import UsersChart from '~/analytics/instance_statistics/components/users_chart.vue';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import usersQuery from '~/analytics/instance_statistics/graphql/queries/users.query.graphql';
@@ -31,8 +30,8 @@ describe('UsersChart', () => {
 
     return shallowMount(UsersChart, {
       props: {
-        startDate: useFakeDate(2020, 9, 26),
-        endDate: useFakeDate(2020, 10, 1),
+        startDate: new Date(2020, 9, 26),
+        endDate: new Date(2020, 10, 1),
         totalDataPoints: mockCountsData2.length,
       },
       localVue,

spec/frontend/diffs/components/compare_dropdown_layout_spec.js

@@ -69,7 +69,7 @@ describe('CompareDropdownLayout', () => {
       expect(findListItemsData()).toEqual([
         {
           href: 'version/1',
-          text: 'version 1 (base) abcdef1 1 commit 2 years ago',
+          text: 'version 1 (base) abcdef1 1 commit 1 year ago',
           createdAt: TEST_CREATED_AT,
           isActive: true,
         },

spec/frontend/environment.js

@@ -4,6 +4,7 @@ const path = require('path');
 const { ErrorWithStack } = require('jest-util');
 const JSDOMEnvironment = require('jest-environment-jsdom');
 const { TEST_HOST } = require('./__helpers__/test_constants');
+const { setGlobalDateToFakeDate } = require('./__helpers__/fake_date/fake_date');
 
 const ROOT_PATH = path.resolve(__dirname, '../..');
 
@@ -12,6 +13,10 @@ class CustomEnvironment extends JSDOMEnvironment {
     // Setup testURL so that window.location is setup properly
     super({ ...config, testURL: TEST_HOST }, context);
 
+    // Fake the `Date` for `jsdom` which fixes things like document.cookie
+    // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39496#note_503084332
+    setGlobalDateToFakeDate();
+
     Object.assign(context.console, {
       error(...args) {
         throw new ErrorWithStack(

spec/frontend/frequent_items/components/app_spec.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { useRealDate } from 'helpers/fake_date';
 import axios from '~/lib/utils/axios_utils';
 import appComponent from '~/frequent_items/components/app.vue';
 import eventHub from '~/frequent_items/event_hub';
@@ -93,23 +94,27 @@ describe('Frequent Items App Component', () => {
         expect(projects.length).toBe(1);
       });
 
-      it('should increase frequency of report if it was logged multiple times over the course of an hour', () => {
-        let projects;
-        const newTimestamp = Date.now() + HOUR_IN_MS + 1;
+      describe('with real date', () => {
+        useRealDate();
 
-        vm.logItemAccess(session.storageKey, session.project);
-        projects = JSON.parse(storage[session.storageKey]);
+        it('should increase frequency of report if it was logged multiple times over the course of an hour', () => {
+          let projects;
+          const newTimestamp = Date.now() + HOUR_IN_MS + 1;
 
-        expect(projects[0].frequency).toBe(1);
+          vm.logItemAccess(session.storageKey, session.project);
+          projects = JSON.parse(storage[session.storageKey]);
 
-        vm.logItemAccess(session.storageKey, {
-          ...session.project,
-          lastAccessedOn: newTimestamp,
-        });
-        projects = JSON.parse(storage[session.storageKey]);
+          expect(projects[0].frequency).toBe(1);
 
-        expect(projects[0].frequency).toBe(2);
-        expect(projects[0].lastAccessedOn).not.toBe(session.project.lastAccessedOn);
+          vm.logItemAccess(session.storageKey, {
+            ...session.project,
+            lastAccessedOn: newTimestamp,
+          });
+          projects = JSON.parse(storage[session.storageKey]);
+
+          expect(projects[0].frequency).toBe(2);
+          expect(projects[0].lastAccessedOn).not.toBe(session.project.lastAccessedOn);
+        });
       });
 
       it('should always update project metadata', () => {

spec/frontend/issuable_list/components/issuable_item_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLink, GlLabel, GlIcon, GlFormCheckbox } from '@gitlab/ui';
-
+import { useFakeDate } from 'helpers/fake_date';
 import IssuableItem from '~/issuable_list/components/issuable_item.vue';
 import IssuableAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
 
@@ -19,6 +19,9 @@ const createComponent = ({ issuableSymbol = '#', issuable = mockIssuable, slots
   });
 
 describe('IssuableItem', () => {
+  // The mock data is dependent that this is after our default date
+  useFakeDate(2020, 11, 11);
+
   const mockLabels = mockIssuable.labels.nodes;
   const mockAuthor = mockIssuable.author;
   const originalUrl = gon.gitlab_url;

spec/frontend/issuable_show/components/issuable_body_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { useFakeDate } from 'helpers/fake_date';
 
 import IssuableBody from '~/issuable_show/components/issuable_body.vue';
 
@@ -35,6 +36,9 @@ const createComponent = (propsData = issuableBodyProps) =>
   });
 
 describe('IssuableBody', () => {
+  // Some assertions expect a date later than our default
+  useFakeDate(2020, 11, 11);
+
   let wrapper;
 
   beforeEach(() => {
@@ -98,11 +102,8 @@ describe('IssuableBody', () => {
 
     it('renders issuable edit info', () => {
       const editedEl = wrapper.find('small');
-      const sanitizedText = editedEl.text().replace(/\n/g, ' ').replace(/\s+/g, ' ');
 
-      expect(sanitizedText).toContain('Edited');
-      expect(sanitizedText).toContain('ago');
-      expect(sanitizedText).toContain(`by ${mockIssuable.updatedBy.name}`);
+      expect(editedEl.text()).toMatchInterpolatedText('Edited 3 months ago by Administrator');
     });
 
     it('renders issuable-edit-form when `editFormVisible` prop is true', async () => {

spec/frontend/issues_list/components/issuable_spec.js

@@ -12,9 +12,15 @@ import { simpleIssue, testAssignees, testLabels } from '../issuable_list_test_da
 
 jest.mock('~/user_popovers');
 
-const TEST_NOW = '2019-08-28T20:03:04.713Z';
-const TEST_MONTH_AGO = '2019-07-28';
-const TEST_MONTH_LATER = '2019-09-30';
+const TODAY = new Date();
+
+const createTestDateFromDelta = (timeDelta) =>
+  formatDate(new Date(TODAY.getTime() + timeDelta), 'yyyy-mm-dd');
+
+// TODO: Encapsulate date helpers https://gitlab.com/gitlab-org/gitlab/-/issues/320883
+const MONTHS_IN_MS = 1000 * 60 * 60 * 24 * 31;
+const TEST_MONTH_AGO = createTestDateFromDelta(-MONTHS_IN_MS);
+const TEST_MONTH_LATER = createTestDateFromDelta(MONTHS_IN_MS);
 const DATE_FORMAT = 'mmm d, yyyy';
 const TEST_USER_NAME = 'Tyler Durden';
 const TEST_BASE_URL = `${TEST_HOST}/issues`;
@@ -26,16 +32,8 @@ const TEST_MILESTONE = {
 const TEXT_CLOSED = 'CLOSED';
 const TEST_META_COUNT = 100;
 
-// Use FixedDate so that time sensitive info in snapshots don't fail
-class FixedDate extends Date {
-  constructor(date = TEST_NOW) {
-    super(date);
-  }
-}
-
 describe('Issuable component', () => {
   let issuable;
-  let DateOrig;
   let wrapper;
 
   const factory = (props = {}, scopedLabelsAvailable = false) => {
@@ -63,15 +61,6 @@ describe('Issuable component', () => {
     wrapper = null;
   });
 
-  beforeAll(() => {
-    DateOrig = window.Date;
-    window.Date = FixedDate;
-  });
-
-  afterAll(() => {
-    window.Date = DateOrig;
-  });
-
   const checkExists = (findFn) => () => findFn().exists();
   const hasIcon = (iconName, iconWrapper = wrapper) =>
     iconWrapper.findAll(GlIcon).wrappers.some((icon) => icon.props('name') === iconName);

spec/frontend/releases/components/release_block_footer_spec.js

@@ -8,19 +8,9 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 const originalRelease = getJSONFixture('api/releases/release.json');
 
-const mockFutureDate = new Date(9999, 0, 0).toISOString();
-let mockIsFutureRelease = false;
-
-jest.mock('~/vue_shared/mixins/timeago', () => ({
-  methods: {
-    timeFormatted() {
-      return mockIsFutureRelease ? 'in 1 month' : '7 fortnights ago';
-    },
-    tooltipTitle() {
-      return 'February 30, 2401';
-    },
-  },
-}));
+// TODO: Encapsulate date helpers https://gitlab.com/gitlab-org/gitlab/-/issues/320883
+const MONTHS_IN_MS = 1000 * 60 * 60 * 24 * 31;
+const mockFutureDate = new Date(new Date().getTime() + MONTHS_IN_MS).toISOString();
 
 describe('Release block footer', () => {
   let wrapper;
@@ -44,7 +34,6 @@ describe('Release block footer', () => {
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
-    mockIsFutureRelease = false;
   });
 
   const commitInfoSection = () => wrapper.find('.js-commit-info');
@@ -88,7 +77,7 @@ describe('Release block footer', () => {
 
     it('renders the author and creation time info', () => {
       expect(trimText(authorDateInfoSection().text())).toBe(
-        `Created 7 fortnights ago by ${release.author.username}`,
+        `Created 1 year ago by ${release.author.username}`,
       );
     });
 
@@ -100,7 +89,6 @@ describe('Release block footer', () => {
 
     describe('renders the author and creation time info with future release date', () => {
       beforeEach(() => {
-        mockIsFutureRelease = true;
         factory({ releasedAt: mockFutureDate });
       });
 
@@ -113,7 +101,6 @@ describe('Release block footer', () => {
 
     describe('when the release date is in the future', () => {
       beforeEach(() => {
-        mockIsFutureRelease = true;
         factory({ releasedAt: mockFutureDate });
       });
 
@@ -177,13 +164,12 @@ describe('Release block footer', () => {
     beforeEach(() => factory({ author: undefined }));
 
     it('renders the release date without the author name', () => {
-      expect(trimText(authorDateInfoSection().text())).toBe(`Created 7 fortnights ago`);
+      expect(trimText(authorDateInfoSection().text())).toBe(`Created 1 year ago`);
     });
   });
 
   describe('future release without any author info', () => {
     beforeEach(() => {
-      mockIsFutureRelease = true;
       factory({ author: undefined, releasedAt: mockFutureDate });
     });
 

spec/frontend/test_setup.js

@@ -3,6 +3,7 @@ import 'jquery';
 
 import * as jqueryMatchers from 'custom-jquery-matchers';
 import { config as testUtilsConfig } from '@vue/test-utils';
+import { setGlobalDateToFakeDate } from 'helpers/fake_date';
 import Translate from '~/vue_shared/translate';
 import { initializeTestTimeout } from './__helpers__/timeout';
 import { getJSONFixture, loadHTMLFixture, setHTMLFixture } from './__helpers__/fixtures';
@@ -20,6 +21,10 @@ process.on('unhandledRejection', global.promiseRejectionHandler);
 
 setupManualMocks();
 
+// Fake the `Date` for the rest of the jest spec runtime environment.
+// https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39496#note_503084332
+setGlobalDateToFakeDate();
+
 afterEach(() =>
   // give Promises a bit more time so they fail the right test
   new Promise(setImmediate).then(() => {