Chore: Refactor scroll-page.test.js to TypeScript (#59617)

packages/jaeger-ui-components/src/Tween.test.ts

@@ -189,8 +189,8 @@ describe('Tween', () => {
     it('releases references to callbacks', () => {
       const tween = new Tween({ ...baseOptions, onComplete: () => {}, onUpdate: () => {} });
       tween.cancel();
-      expect(tween.callbackComplete).toBe(undefined);
+      expect(tween.onComplete).toBe(undefined);
-      expect(tween.callbackUpdate).toBe(undefined);
+      expect(tween.onUpdate).toBe(undefined);
     });
   });
 });

packages/jaeger-ui-components/src/Tween.tsx

@@ -23,7 +23,7 @@ export interface TweenState {
 
 type TTweenCallback = (state: TweenState) => void;
 
-type TTweenOptions = {
+export type TTweenOptions = {
   delay?: number;
   duration: number;
   from: number;
@@ -33,8 +33,8 @@ type TTweenOptions = {
 };
 
 export default class Tween {
-  callbackComplete: TTweenCallback | TNil;
+  onComplete: TTweenCallback | TNil;
-  callbackUpdate: TTweenCallback | TNil;
+  onUpdate: TTweenCallback | TNil;
   delay: number | TNil;
   duration: number;
   from: number;
@@ -49,13 +49,13 @@ export default class Tween {
     this.from = from;
     this.to = to;
     if (!onUpdate && !onComplete) {
-      this.callbackComplete = undefined;
+      this.onComplete = undefined;
-      this.callbackUpdate = undefined;
+      this.onUpdate = undefined;
       this.timeoutID = undefined;
       this.requestID = undefined;
     } else {
-      this.callbackComplete = onComplete;
+      this.onComplete = onComplete;
-      this.callbackUpdate = onUpdate;
+      this.onUpdate = onUpdate;
       if (delay) {
         // setTimeout from @types/node returns NodeJS.Timeout, so prefix with `window.`
         this.timeoutID = window.setTimeout(this._frameCallback, delay);
@@ -71,15 +71,15 @@ export default class Tween {
     this.timeoutID = undefined;
     this.requestID = undefined;
     const current = Object.freeze(this.getCurrent());
-    if (this.callbackUpdate) {
+    if (this.onUpdate) {
-      this.callbackUpdate(current);
+      this.onUpdate(current);
     }
-    if (this.callbackComplete && current.done) {
+    if (this.onComplete && current.done) {
-      this.callbackComplete(current);
+      this.onComplete(current);
     }
     if (current.done) {
-      this.callbackComplete = undefined;
+      this.onComplete = undefined;
-      this.callbackUpdate = undefined;
+      this.onUpdate = undefined;
     } else {
       this.requestID = window.requestAnimationFrame(this._frameCallback);
     }
@@ -94,8 +94,8 @@ export default class Tween {
       window.cancelAnimationFrame(this.requestID);
       this.requestID = undefined;
     }
-    this.callbackComplete = undefined;
+    this.onComplete = undefined;
-    this.callbackUpdate = undefined;
+    this.onUpdate = undefined;
   }
 
   getCurrent(): TweenState {

packages/jaeger-ui-components/src/scroll-page.test.ts

@@ -19,20 +19,15 @@ import { scrollBy, scrollTo, cancel } from './scroll-page';
 
 // keep track of instances, manually
 // https://github.com/facebook/jest/issues/5019
-const tweenInstances = [];
+const tweenInstances: Tween[] = [];
 
 describe('scroll-by', () => {
   beforeEach(() => {
     window.scrollY = 100;
     tweenInstances.length = 0;
-    Tween.mockClear();
+    jest.mocked(Tween).mockClear();
-    Tween.mockImplementation((opts) => {
+    jest.mocked(Tween).mockImplementation((opts) => {
-      const rv = { to: opts.to, onUpdate: opts.onUpdate };
+      const rv = { to: opts.to, onUpdate: opts.onUpdate, cancel: jest.fn(), getCurrent: jest.fn() } as unknown as Tween;
-      Object.keys(Tween.prototype).forEach((name) => {
-        if (name !== 'constructor') {
-          rv[name] = jest.fn();
-        }
-      });
       tweenInstances.push(rv);
       return rv;
     });
@@ -48,7 +43,7 @@ describe('scroll-by', () => {
         const yDelta = 10;
         scrollBy(yDelta);
         const spec = expect.objectContaining({ to: window.scrollY + yDelta });
-        expect(Tween.mock.calls).toEqual([[spec]]);
+        expect(jest.mocked(Tween).mock.calls).toEqual([[spec]]);
       });
     });
 
@@ -56,9 +51,9 @@ describe('scroll-by', () => {
       it('is the same as `appendToLast === false` without an in-progress scroll', () => {
         const yDelta = 10;
         scrollBy(yDelta, true);
-        expect(Tween.mock.calls.length).toBe(1);
+        expect(jest.mocked(Tween).mock.calls.length).toBe(1);
         scrollBy(yDelta, false);
-        expect(Tween.mock.calls[0]).toEqual(Tween.mock.calls[1]);
+        expect(jest.mocked(Tween).mock.calls[0]).toEqual(jest.mocked(Tween).mock.calls[1]);
       });
 
       it('is additive when an in-progress scroll is the same direction', () => {
@@ -66,8 +61,8 @@ describe('scroll-by', () => {
         const spec = expect.objectContaining({ to: window.scrollY + 2 * yDelta });
         scrollBy(yDelta);
         scrollBy(yDelta, true);
-        expect(Tween.mock.calls.length).toBe(2);
+        expect(jest.mocked(Tween).mock.calls.length).toBe(2);
-        expect(Tween.mock.calls[1]).toEqual([spec]);
+        expect(jest.mocked(Tween).mock.calls[1]).toEqual([spec]);
       });
 
       it('ignores the in-progress scroll is the other direction', () => {
@@ -75,8 +70,8 @@ describe('scroll-by', () => {
         const spec = expect.objectContaining({ to: window.scrollY - yDelta });
         scrollBy(yDelta);
         scrollBy(-yDelta, true);
-        expect(Tween.mock.calls.length).toBe(2);
+        expect(jest.mocked(Tween).mock.calls.length).toBe(2);
-        expect(Tween.mock.calls[1]).toEqual([spec]);
+        expect(jest.mocked(Tween).mock.calls[1]).toEqual([spec]);
       });
     });
   });
@@ -86,7 +81,7 @@ describe('scroll-by', () => {
       const to = 10;
       const spec = expect.objectContaining({ to });
       scrollTo(to);
-      expect(Tween.mock.calls).toEqual([[spec]]);
+      expect(jest.mocked(Tween).mock.calls).toEqual([[spec]]);
     });
 
     it('ignores the in-progress scroll', () => {
@@ -94,8 +89,8 @@ describe('scroll-by', () => {
       const spec = expect.objectContaining({ to });
       scrollTo(Math.random());
       scrollTo(to);
-      expect(Tween.mock.calls.length).toBe(2);
+      expect(jest.mocked(Tween).mock.calls.length).toBe(2);
-      expect(Tween.mock.calls[1]).toEqual([spec]);
+      expect(jest.mocked(Tween).mock.calls[1]).toEqual([spec]);
     });
   });
 
@@ -106,7 +101,7 @@ describe('scroll-by', () => {
       expect(tweenInstances.length).toBe(1);
       const tw = tweenInstances[0];
       cancel();
-      expect(tw.cancel.mock.calls).toEqual([[]]);
+      expect(jest.mocked(tw.cancel).mock.calls).toEqual([[]]);
     });
 
     it('is a noop if there is not an in-progress scroll', () => {
@@ -115,16 +110,16 @@ describe('scroll-by', () => {
       expect(tweenInstances.length).toBe(1);
       const tw = tweenInstances[0];
       cancel();
-      expect(tw.cancel.mock.calls).toEqual([[]]);
+      expect(jest.mocked(tw.cancel).mock.calls).toEqual([[]]);
-      tw.cancel.mockReset();
+      jest.mocked(tw.cancel).mockReset();
       // now, we check to see if `cancel()` has an effect on the last created tween
       cancel();
-      expect(tw.cancel.mock.calls.length).toBe(0);
+      expect(jest.mocked(tw.cancel).mock.calls.length).toBe(0);
     });
   });
 
   describe('_onTweenUpdate', () => {
-    let oldScrollTo;
+    let oldScrollTo: { (options?: ScrollToOptions | undefined): void; (x: number, y: number): void };
 
     beforeEach(() => {
       oldScrollTo = window.scrollTo;
@@ -140,19 +135,19 @@ describe('scroll-by', () => {
       // cause a `Tween` to be created to get a reference to _onTweenUpdate
       scrollTo(10);
       const { onUpdate } = tweenInstances[0];
-      onUpdate({ value, done: false });
+      onUpdate?.({ value, done: false });
-      expect(window.scrollTo.mock.calls.length).toBe(1);
+      expect(jest.mocked(window.scrollTo).mock.calls.length).toBe(1);
-      expect(window.scrollTo.mock.calls[0][1]).toBe(value);
+      expect(jest.mocked(window.scrollTo).mock.calls[0][1]).toBe(value);
     });
 
     it('discards the in-progress scroll if the scroll is done', () => {
       // cause a `Tween` to be created to get a reference to _onTweenUpdate
       scrollTo(10);
       const { onUpdate, cancel: twCancel } = tweenInstances[0];
-      onUpdate({ value: 123, done: true });
+      onUpdate?.({ value: 123, done: true });
       // if the tween is not discarded, `cancel()` will cancel it
       cancel();
-      expect(twCancel.mock.calls.length).toBe(0);
+      expect(jest.mocked(twCancel).mock.calls.length).toBe(0);
     });
   });
 });