fix(clock): do not advance into the past (#37820)

Author: dgozman

packages/injected/src/clock.ts

@@ -90,6 +90,7 @@ export class ClockController {
 
   now(): number {
     this._replayLogOnce();
+    // Sync real time to support calling Date.now() in a loop.
     this._syncRealTime();
     return this._now.time;
   }
@@ -111,6 +112,7 @@ export class ClockController {
 
   performanceNow(): DOMHighResTimeStamp {
     this._replayLogOnce();
+    // Sync real time to support calling performance.now() in a loop.
     this._syncRealTime();
     return this._now.ticks;
   }
@@ -139,6 +141,12 @@ export class ClockController {
   }
 
   private _advanceNow(to: Ticks) {
+    if (this._now.ticks > to) {
+      // While running timers, `now` can advance by syncing with real time
+      // from within now() or performance.now().
+      // This makes it possible for `now` to be ahead of where we want to advance it.
+      return;
+    }
     if (!this._now.isFixedTime)
       this._now.time = asWallTime(this._now.time + to - this._now.ticks);
     this._now.ticks = to;
@@ -172,6 +180,7 @@ export class ClockController {
     }
 
     this._advanceNow(to);
+
     if (firstException)
       throw firstException;
   }
@@ -375,6 +384,9 @@ export class ClockController {
   }
 
   getTimeToNextFrame() {
+    // When `window.requestAnimationFrame` is the first call in the page,
+    // this place is the first API call, so replay the log.
+    this._replayLogOnce();
     return 16 - this._now.ticks % 16;
   }
 

tests/library/unit/clock.spec.ts

@@ -730,6 +730,29 @@ it.describe('runFor', () => {
 
     expect(spies[0].calledBefore(spies[1])).toBeTruthy();
   });
+
+  it('does not rewind back in time', async ({ clock }) => {
+    const stub = createStub();
+    const gotTime = await new Promise<number>(done => {
+      clock.setTimeout(() => {
+        stub(clock.Date.now());
+      }, 10);
+      clock.setTimeout(() => {
+        stub(clock.Date.now());
+      }, 10);
+      clock.resume();
+      setTimeout(async () => {
+        // Call fast-forward right after the real time sync happens,
+        // but before all the callbacks are processed.
+        await clock.runFor(1000);
+        setTimeout(() => {
+          done(clock.Date.now());
+        }, 20);
+      }, 10);
+    });
+    expect(stub.callCount).toBe(2);
+    expect(gotTime).toBeGreaterThan(1010);
+  });
 });
 
 it.describe('clearTimeout', () => {
@@ -1419,6 +1442,18 @@ it.describe('fastForward', () => {
     expect(stub.callCount).toBe(1);
     expect(stub.calledWith(2000)).toBeTruthy();
   });
+
+  it('error does not pause forever', async ({ clock }) => {
+    const stub = createStub();
+    clock.setTimeout(() => {
+      stub(clock.Date.now());
+    }, 1000);
+    clock.resume();
+    const error = await clock.fastForward(-1000).catch(e => e);
+    expect(error.message).toContain('Cannot fast-forward to the past');
+    await new Promise(f => setTimeout(f, 1500));
+    expect(stub.callCount).toBe(1);
+  });
 });
 
 it.describe('pauseAt', () => {