@luma.gl/test-utils 9.0.0-alpha.8 → 9.0.0-beta.1

package/src/index.ts

@@ -3,9 +3,9 @@ import './register-devices';
 export type {TestRunnerTestCase} from './test-runner';
 export type {SnapshotTestRunnerTestCase} from './snapshot-test-runner';
 
-export {default as SnapshotTestRunner} from './snapshot-test-runner';
-export {default as PerformanceTestRunner} from './performance-test-runner';
-export {createTestDevice, createTestContext, webgl1TestDevice, webgl2TestDevice, webgpuTestDevice} from './create-test-device';
+export {SnapshotTestRunner} from './snapshot-test-runner';
+export {PerformanceTestRunner} from './performance-test-runner';
+export {createTestDevice, createTestContext, webgl1Device, webgl2Device, webgpuDevice} from './create-test-device';
 export {getTestDevices, getWebGLTestDevices} from './create-test-device';
 
 export {checkType} from './check-type';

package/src/performance-test-runner.ts

@@ -1,11 +1,16 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
 import {Stats, Stat} from '@probe.gl/stats';
-import TestRunner, {TestRunnerOptions} from './test-runner';
+import {TestRunner, TestRunnerProps, TestRunnerTestCase} from './test-runner';
+
+export type PerformanceTestRunnerProps = TestRunnerProps;
 
-export default class PerformanceTestRunner extends TestRunner {
-  private _stats: Stats;
-  private _fps: Stat;
+export class PerformanceTestRunner extends TestRunner {
+  private _stats: Stats | null = null;
+  private _fps: Stat | null = null;
 
-  constructor(props: TestRunnerOptions) {
+  constructor(props: PerformanceTestRunnerProps) {
     super(props);
 
     Object.assign(this.testOptions, {
@@ -14,17 +19,16 @@ export default class PerformanceTestRunner extends TestRunner {
     });
   }
 
-  initTestCase(testCase) {
+  override initTestCase(testCase: TestRunnerTestCase): void {
     super.initTestCase(testCase);
     this._stats = new Stats({id: testCase.name});
     this._fps = this._stats.get('fps');
   }
 
-  shouldRender(animationProps) {
-    this._fps.timeEnd();
-    this._fps.timeStart();
+  override shouldRender(animationProps: Record<string, any>): boolean {
+    this._fps?.timeEnd();
+    this._fps?.timeStart();
 
-    // @ts-expect-error
     if (this._fps.count > this.testOptions.maxFramesToRender) {
       animationProps.done();
     }
@@ -32,11 +36,11 @@ export default class PerformanceTestRunner extends TestRunner {
     return true;
   }
 
-  assert(testCase) {
+  override assert(testCase: TestRunnerTestCase): void {
     // @ts-expect-error
     const targetFPS = testCase.targetFPS || this.testOptions.targetFPS;
-    const count = this._fps.count;
-    const fps = this._fps.getHz();
+    const count = this._fps?.count;
+    const fps = this._fps?.getHz() || 0;
 
     if (fps >= targetFPS) {
       this._pass({fps, framesRendered: count});

package/src/register-devices.ts

@@ -1,6 +1,7 @@
 // luma.gl, MIT license
+// Copyright (c) vis.gl contributors
 
-import {luma} from '@luma.gl/api';
+import {luma} from '@luma.gl/core';
 import {WebGLDevice, registerHeadlessGL} from '@luma.gl/webgl';
 import {WebGPUDevice} from '@luma.gl/webgpu';
 

package/src/snapshot-test-runner.ts

@@ -1,65 +1,67 @@
-import TestRunner, {TestRunnerOptions, TestRunnerTestCase} from './test-runner';
+import {TestRunner, TestRunnerProps, TestRunnerTestCase} from './test-runner';
 import {getBoundingBoxInPage} from './utils';
 
 /** A snapshot test case */
 export type SnapshotTestRunnerTestCase = TestRunnerTestCase & {
   /** URL to golden image */
   goldenImage: string;
+  /** Diff options */
+  imageDiffOptions?: {[key: string]: any}; 
 }
 
-export default class SnapshotTestRunner extends TestRunner {
-  private isDiffing: boolean = false;
+export type SnapshotTestRunnerProps = TestRunnerProps;
 
-  constructor(props: TestRunnerOptions) {
-    super(props);
+export class SnapshotTestRunner extends TestRunner {
+  // should be defined here but hack access in TestRunner
+  // private isDiffing: boolean = false;
 
-    // @ts-expect-error
+  constructor(props: SnapshotTestRunnerProps) {
+    super(props);
     this.testOptions.imageDiffOptions = {};
   }
 
-  initTestCase(testCase) {
+  override initTestCase(testCase: SnapshotTestRunnerTestCase): void {
     super.initTestCase(testCase);
     if (!testCase.goldenImage) {
       throw new Error(`Test case ${testCase.name} does not have golden image`);
     }
   }
 
-  shouldRender() {
+  override shouldRender(): boolean {
     // wait for the current diffing to finish
     return !this.isDiffing;
   }
 
-  assert(testCase) {
+  override async assert(testCase: SnapshotTestRunnerTestCase): Promise<void> {
     if (this.isDiffing) {
       // Already performing diffing
       return;
     }
     this.isDiffing = true;
 
-    const diffOptions = Object.assign(
-      {},
-      // @ts-expect-error
-      this.testOptions.imageDiffOptions,
-      testCase.imageDiffOptions,
-      {
-        goldenImage: testCase.goldenImage,
-        // @ts-expect-error
-        region: getBoundingBoxInPage(this._animationProps.canvas)
-      }
-    );
+    const canvas = this._animationProps?.canvas;
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      throw new Error('canvas');
+    }
+
+    const diffOptions = {
+      ...this.testOptions.imageDiffOptions,
+      ...testCase.imageDiffOptions,
+      goldenImage: testCase.goldenImage,
+      region: getBoundingBoxInPage(canvas)
+    };
 
     // Take screenshot and compare
-    // @ts-expect-error
-    window.browserTestDriver_captureAndDiffScreen(diffOptions).then((result) => {
-      // invoke user callback
-      if (result.success) {
-        this._pass(result);
-      } else {
-        this._fail(result);
-      }
+    const result = await globalThis.browserTestDriver_captureAndDiffScreen(diffOptions);
+
+    // invoke user callback
+    if (result.success) {
+      this._pass(result);
+    } else {
+      this._fail(result);
+    }
 
-      this.isDiffing = false;
-      this._next();
-    });
+    this.isDiffing = false;
+    this._next();
   }
 }

package/src/test-runner.ts

@@ -1,58 +1,78 @@
-// @ts-nocheck TODO remove
-/* eslint-disable no-console */
-import {AnimationLoop} from '@luma.gl/core';
-import {pushContextState, popContextState} from '@luma.gl/webgl';
+// @ts-nocheck
+/* eslint-disable */
+
+import {AnimationProps} from '@luma.gl/engine';
+import {webglDevice} from './create-test-device';
+
+// TODO - Replace with new AnimationLoop from `@luma.gl/engine`
+import {ClassicAnimationLoop as AnimationLoop} from './engine/classic-animation-loop';
 
 /** Describes a test case */
 export type TestRunnerTestCase = {
   /** Name of the test case (for logging) */
   name: string;
   /** Initialize the test case. Can return a promise */
-  onInitialize: any;
+  onInitialize: (props: AnimationProps) => Promise<void | {}>;
   /** Perform rendering */
-  onRender: any;
+  onRender: (props: AnimationProps & {done}) => void;
   /** Clean up after the test case */
-  onFinalize: any;
+  onFinalize: (props: AnimationProps) => void;
+  animationLoop?: AnimationLoop;
 };
 
-function noop() {}
-
 const DEFAULT_TEST_CASE: TestRunnerTestCase = {
   name: 'Unnamed test',
-  onInitialize: noop,
+  onInitialize: async () => {},
   onRender: ({done}) => done(),
-  onFinalize: noop
+  onFinalize: () => {}
 };
 
 /** Options for a TestRunner */
-export type TestRunnerOptions = {
+export type TestRunnerProps = {
+  width?: number;
+  height?: number;
   // test lifecycle callback
-  onTestStart?: any;
-  onTestPass?: any;
-  onTestFail?: any;
-
+  onTestStart?: (testCase: TestRunnerTestCase) => void;
+  onTestPass?: (testCase: TestRunnerTestCase, result?: unknown) => void;
+  onTestFail?: (testCase: TestRunnerTestCase, error?: unknown) => void;
   /** milliseconds to wait for each test case before aborting */
   timeout?: number;
+  maxFramesToRender?: number;
+  // HACK - this is for the snapshot test runner
+  imageDiffOptions?: any;
 };
 
-const DEFAULT_TEST_OPTIONS: Required<TestRunnerOptions> = {
+const DEFAULT_TEST_PROPS: Required<TestRunnerProps> = {
+  width: undefined,
+  height: undefined,
+
   // test lifecycle callback
-  onTestStart: (testCase) => console.log(`# ${testCase.name}`),
-  onTestPass: (testCase) => console.log(`ok ${testCase.name} passed`),
-  onTestFail: (testCase) => console.log(`not ok ${testCase.name} failed`),
+  onTestStart: (testCase: TestRunnerTestCase) => console.log(`# ${testCase.name}`),
+  onTestPass: (testCase: TestRunnerTestCase, result?: unknown) => console.log(`ok ${testCase.name} passed`),
+  onTestFail: (testCase: TestRunnerTestCase, error?: unknown) => console.log(`not ok ${testCase.name} failed`),
 
   // milliseconds to wait for each test case before aborting
-  timeout: 2000
+  timeout: 2000,
+  maxFramesToRender: undefined,
+  imageDiffOptions: undefined
 };
 
 /** Runs an array of test cases */
-export default class TestRunner {
-  props;
-  isRunning = false;
-  readonly testOptions: object = {...DEFAULT_TEST_OPTIONS};
-  readonly _animationProps: object = {};
+export class TestRunner {
+  device = webglDevice;
+  props: Record<string, any>;
+  isRunning: boolean = false;
+  testOptions: Required<TestRunnerProps> = {...DEFAULT_TEST_PROPS};
+  readonly _animationProps?: AnimationProps;
+  private _animationLoop: AnimationLoop | null;
   private _testCases: TestRunnerTestCase[] = [];
-  private _testCaseData = null;
+  private _testCaseData: any = null;
+  private _currentTestCase: TestRunnerTestCase | null;
+  private _currentTestCaseStartTime: number;
+  private _currentTestCaseStartTick: number;
+
+  // should be defined in snapshot-test-runner
+  isDiffing: boolean = false;
 
   // @ts-expect-error
   isHeadless: boolean = Boolean(window.browserTestDriver_isHeadless);
@@ -61,17 +81,14 @@ export default class TestRunner {
    * props
    *   AnimationLoop props
    */
-  constructor(props = {}) {
+  constructor(props: Record<string, any> = {}) {
     this.props = props;
   }
 
   /**
    * Add testCase(s)
    */
-  /**
-   * Add testCase(s)
-   */
-   add(testCases: TestRunnerTestCase[]): this {
+  add(testCases: TestRunnerTestCase[]): this {
     if (!Array.isArray(testCases)) {
       testCases = [testCases];
     }
@@ -81,75 +98,75 @@ export default class TestRunner {
     return this;
   }
 
-   /**
+  /**
     * Returns a promise that resolves when all the test cases are done
     */
   run(options: object = {}): Promise<void>  {
-    Object.assign(this.testOptions, options);
-
-    return new Promise<void>(resolve => {
-      this._animationLoop = new AnimationLoop(
-        // @ts-expect-error TODO
-        Object.assign({}, this.props, {
-          onRender: this._onRender.bind(this),
-          onFinalize: () => {
-            this.isRunning = false;
-            resolve();
-          }
-        })
-      );
+    this.testOptions = {...this.testOptions, ...options};
+
+    return new Promise<void>((resolve, reject) => {
+      this._animationLoop = new AnimationLoop({
+        ...this.props,
+        device: this.device,
+        onRender: this._onRender.bind(this),
+        onFinalize: () => {
+          this.isRunning = false;
+          resolve();
+        }
+      });
       this._animationLoop.start(this.props);
 
       this.isRunning = true;
       this.isDiffing = false;
       this._currentTestCase = null;
-    }).catch((error) => {
+    }).catch (error => {
       this._fail({error: error.message});
+      // reject(error);
     });
   }
 
   /* Lifecycle methods for subclassing */
 
-  initTestCase(testCase) {
+  initTestCase(testCase: TestRunnerTestCase) {
     const {animationLoop} = testCase;
     if (animationLoop) {
-      testCase.onInitialize = animationLoop.onInitialize.bind(animationLoop);
-      testCase.onRender = animationLoop.onRender.bind(animationLoop);
-      testCase.onFinalize = animationLoop.onFinalize.bind(animationLoop);
+      testCase.onInitialize = animationLoop.props.onInitialize.bind(animationLoop);
+      testCase.onRender = animationLoop.props.onRender.bind(animationLoop);
+      testCase.onFinalize = animationLoop.props.onFinalize.bind(animationLoop);
     }
     for (const key in DEFAULT_TEST_CASE) {
       testCase[key] = testCase[key] || DEFAULT_TEST_CASE[key];
     }
   }
 
-  shouldRender(animationProps) {
+  shouldRender(animationProps): boolean {
     return true;
   }
 
-  assert(testCase) {
+  assert(testCase: TestRunnerTestCase): void {
     this._pass(testCase);
     this._next();
   }
 
   /* Utilities */
 
-  _pass(result) {
-    // @ts-expect-error
+  _pass(result: unknown): void {
     this.testOptions.onTestPass(this._currentTestCase, result);
+    // this._animationLoop?.stop();
   }
 
-  _fail(result) {
-    // @ts-expect-error
+  _fail(result: unknown): void {
     this.testOptions.onTestFail(this._currentTestCase, result);
+    // this._animationLoop?.stop();
   }
 
-  _next() {
+  _next(): void {
     this._nextTestCase();
   }
 
   /* Private methods */
 
-  _onRender(animationProps) {
+  _onRender(animationProps): void {
     this._animationProps = animationProps;
 
     const testCase = this._currentTestCase || this._nextTestCase();
@@ -160,7 +177,9 @@ export default class TestRunner {
     }
 
     let isDone = false;
-    const testCaseAnimationProps = Object.assign({}, animationProps, this._testCaseData, {
+    const testCaseAnimationProps: AnimationProps = {
+      ...animationProps, 
+      ...this._testCaseData,
       // tick/time starts from 0 for each test case
       startTime: this._currentTestCaseStartTime,
       time: animationProps.time - this._currentTestCaseStartTime,
@@ -169,11 +188,15 @@ export default class TestRunner {
       done: () => {
         isDone = true;
       }
-    });
+    };
 
     if (this._testCaseData && this.shouldRender(testCaseAnimationProps)) {
+      // try {
       // test case is initialized, render frame
       testCase.onRender(testCaseAnimationProps);
+      // } catch {
+      //   isDone = true;
+      // }
     }
 
     const timeout = testCase.timeout || this.testOptions.timeout;
@@ -186,7 +209,7 @@ export default class TestRunner {
     }
   }
 
-  _nextTestCase() {
+  _nextTestCase(): Promise<TestRunnerTestCase> {
     const animationProps = this._animationProps;
 
     // finalize the current test case
@@ -194,13 +217,13 @@ export default class TestRunner {
       for (const key in this._testCaseData) {
         const value = this._testCaseData[key];
         if (value && value.delete) {
-          value.delete();
+          value.destroy();
         }
       }
       this._currentTestCase.onFinalize(Object.assign({}, animationProps, this._testCaseData));
 
       // reset WebGL context
-      popContextState(animationProps.gl);
+      this.device.popState();
 
       this._currentTestCase = null;
       this._testCaseData = null;
@@ -218,22 +241,24 @@ export default class TestRunner {
       // initialize test case
 
       // save WebGL context
-      pushContextState(animationProps.gl);
+      this.device.pushState();
 
       // aligned with the behavior of AnimationLoop.onInitialized
       // onInitialized could return a plain object or a promise
-      Promise.resolve(
-        testCase.onInitialize(
-          Object.assign({}, animationProps, {
-            // tick/time starts from 0 for each test case
-            startTime: animationProps.time,
-            time: 0,
-            tick: 0
-          })
-        )
-      ).then((userData) => {
+      const initProps = {
+        ...animationProps,
+        // tick/time starts from 0 for each test case
+        startTime: animationProps.time,
+        time: 0,
+        tick: 0
+      };
+
+      // aligned with the behavior of AnimationLoop.onInitialized
+      // onInitialized could return a plain object or a promise
+      Promise.resolve(testCase.onInitialize(initProps)).then((userData) => {
         this._testCaseData = userData || {};
       });
+
       // invoke user callback
       this.testOptions.onTestStart(testCase);
     }

package/src/utils.ts

@@ -1,5 +1,5 @@
 // Get the bounding box of a DOMElement relative to the page
-export function getBoundingBoxInPage(domElement) {
+export function getBoundingBoxInPage(domElement: HTMLElement): {x: number; y: number; width: number; height: number;} {
   const bbox = domElement.getBoundingClientRect();
   return {
     x: window.scrollX + bbox.x,