From eaf96081d23f0a78d6860570f6e39a2f896f152c Mon Sep 17 00:00:00 2001 From: Hamas Shafiq Date: Tue, 13 Dec 2022 10:17:28 +0000 Subject: [PATCH] Chore: Refactor scroll-page.test.js to TypeScript (#59617) --- .../jaeger-ui-components/src/Tween.test.ts | 4 +- packages/jaeger-ui-components/src/Tween.tsx | 30 +++++------ ...croll-page.test.js => scroll-page.test.ts} | 53 +++++++++---------- 3 files changed, 41 insertions(+), 46 deletions(-) rename packages/jaeger-ui-components/src/{scroll-page.test.js => scroll-page.test.ts} (71%) diff --git a/packages/jaeger-ui-components/src/Tween.test.ts b/packages/jaeger-ui-components/src/Tween.test.ts index fbfd014924d..d68e4d24f03 100644 --- a/packages/jaeger-ui-components/src/Tween.test.ts +++ b/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.callbackUpdate).toBe(undefined); + expect(tween.onComplete).toBe(undefined); + expect(tween.onUpdate).toBe(undefined); }); }); }); diff --git a/packages/jaeger-ui-components/src/Tween.tsx b/packages/jaeger-ui-components/src/Tween.tsx index c9c082a7379..e4c3b8271e7 100644 --- a/packages/jaeger-ui-components/src/Tween.tsx +++ b/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; - callbackUpdate: TTweenCallback | TNil; + onComplete: 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.callbackUpdate = undefined; + this.onComplete = undefined; + this.onUpdate = undefined; this.timeoutID = undefined; this.requestID = undefined; } else { - this.callbackComplete = onComplete; - this.callbackUpdate = onUpdate; + this.onComplete = onComplete; + 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) { - this.callbackUpdate(current); + if (this.onUpdate) { + this.onUpdate(current); } - if (this.callbackComplete && current.done) { - this.callbackComplete(current); + if (this.onComplete && current.done) { + this.onComplete(current); } if (current.done) { - this.callbackComplete = undefined; - this.callbackUpdate = undefined; + this.onComplete = 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.callbackUpdate = undefined; + this.onComplete = undefined; + this.onUpdate = undefined; } getCurrent(): TweenState { diff --git a/packages/jaeger-ui-components/src/scroll-page.test.js b/packages/jaeger-ui-components/src/scroll-page.test.ts similarity index 71% rename from packages/jaeger-ui-components/src/scroll-page.test.js rename to packages/jaeger-ui-components/src/scroll-page.test.ts index a697fd9ce4f..5c4a3e7f0c9 100644 --- a/packages/jaeger-ui-components/src/scroll-page.test.js +++ b/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(); - Tween.mockImplementation((opts) => { - const rv = { to: opts.to, onUpdate: opts.onUpdate }; - Object.keys(Tween.prototype).forEach((name) => { - if (name !== 'constructor') { - rv[name] = jest.fn(); - } - }); + jest.mocked(Tween).mockClear(); + jest.mocked(Tween).mockImplementation((opts) => { + const rv = { to: opts.to, onUpdate: opts.onUpdate, cancel: jest.fn(), getCurrent: jest.fn() } as unknown as Tween; 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(Tween.mock.calls[1]).toEqual([spec]); + expect(jest.mocked(Tween).mock.calls.length).toBe(2); + 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(Tween.mock.calls[1]).toEqual([spec]); + expect(jest.mocked(Tween).mock.calls.length).toBe(2); + 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(Tween.mock.calls[1]).toEqual([spec]); + expect(jest.mocked(Tween).mock.calls.length).toBe(2); + 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([[]]); - tw.cancel.mockReset(); + expect(jest.mocked(tw.cancel).mock.calls).toEqual([[]]); + 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 }); - expect(window.scrollTo.mock.calls.length).toBe(1); - expect(window.scrollTo.mock.calls[0][1]).toBe(value); + onUpdate?.({ value, done: false }); + expect(jest.mocked(window.scrollTo).mock.calls.length).toBe(1); + 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); }); }); });