mock date constructor in test

Signed-off-by: Kerry Archibald <kerrya@element.io>
matrix-org · Dec 21, 2021 · e5029e5 · e5029e5
1 parent b12b6a5
commit e5029e5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
@@ -38,25 +38,19 @@ function getDaysArray(): string[] {
 interface IProps {
     ts: number;
     forExport?: boolean;
-    now?: Date;
 }
 
 @replaceableComponent("views.messages.DateSeparator")
 export default class DateSeparator extends React.Component<IProps> {
-    // use defaultProp for now to make testing easier
-    public static defaultProps = {
-        now: new Date(),
-    };
-
     private getLabel() {
         const date = new Date(this.props.ts);
         const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
 
         // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
         if (this.props.forExport || disableRelativeTimestamps) return formatFullDateNoTime(date);
 
-        const today = this.props.now;
-        const yesterday = new Date(this.props.now);
+        const today = new Date();
+        const yesterday = new Date();
         const days = getDaysArray();
         yesterday.setDate(today.getDate() - 1);
 

diff --git a/test/components/views/messages/DateSeparator-test.tsx b/test/components/views/messages/DateSeparator-test.tsx
@@ -32,21 +32,29 @@ describe("DateSeparator", () => {
     const HOUR_MS = 3600000;
     const DAY_MS = HOUR_MS * 24;
     // Friday Dec 17 2021, 9:09am
-    const now = new Date('Fri Dec 17 2021 09:09:00 GMT+0100 (Central European Standard Time)');
+    const now = '2021-12-17T08:09:00.000Z';
+    const nowMs = 1639728540000;
     const defaultProps = {
-        ts: now.getTime(),
+        ts: nowMs,
         now,
     };
+    const RealDate = global.Date;
+    class MockDate extends Date {
+        constructor(date) {
+            super(date || now);
+        }
+    }
+
     const getComponent = (props = {}) =>
         mount(<DateSeparator {...defaultProps} {...props} />);
 
     type TestCase = [string, number, string];
     const testCases: TestCase[] = [
-        ['the exact same moment', now.getTime(), 'Today'],
-        ['same day as current day', now.getTime() - HOUR_MS, 'Today'],
-        ['day before the current day', now.getTime() - (HOUR_MS * 12), 'Yesterday'],
-        ['2 days ago', now.getTime() - DAY_MS * 2, 'Wednesday'],
-        ['144 hours ago', now.getTime() - HOUR_MS * 144, 'Sat, Dec 11 2021'],
+        ['the exact same moment', nowMs, 'Today'],
+        ['same day as current day', nowMs - HOUR_MS, 'Today'],
+        ['day before the current day', nowMs - (HOUR_MS * 12), 'Yesterday'],
+        ['2 days ago', nowMs - DAY_MS * 2, 'Wednesday'],
+        ['144 hours ago', nowMs - HOUR_MS * 144, 'Sat, Dec 11 2021'],
         [
             '6 days ago, but less than 144h',
             new Date('Saturday Dec 11 2021 23:59:00 GMT+0100 (Central European Standard Time)').getTime(),
@@ -55,9 +63,14 @@ describe("DateSeparator", () => {
     ];
 
     beforeEach(() => {
+        global.Date = MockDate as unknown as DateConstructor;
         (SettingsStore.getValue as jest.Mock).mockReturnValue(true);
     });
 
+    afterAll(() => {
+        global.Date = RealDate;
+    });
+
     it('renders the date separator correctly', () => {
         const component = getComponent();
         expect(component).toMatchSnapshot();

diff --git a/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`DateSeparator renders the date separator correctly 1`] = `
 <Wrapper
-  now={2021-12-17T08:09:00.000Z}
+  now="2021-12-17T08:09:00.000Z"
   ts={1639728540000}
 >
   <DateSeparator
-    now={2021-12-17T08:09:00.000Z}
+    now="2021-12-17T08:09:00.000Z"
     ts={1639728540000}
   >
     <h2