chore(web): gesture-recognizer test browser test conversion to TS

common/web/gesture-recognizer/src/test/auto/browser/cases/canary.def.ts

@@ -10,8 +10,7 @@ import {
 describe("'Canary' checks", function() {
   this.timeout(5000);
 
-  /** @type {string} */
-  let domain;
+  let domain: string;
 
   before(async () => {
     let loc = document.location;

common/web/gesture-recognizer/src/test/auto/browser/cases/host-page.spec.html

@@ -18,9 +18,9 @@
       import { runTests } from '@web/test-runner-mocha';
 
       runTests(async() => {
-        await import('./canary.def.mjs');
-        await import('./ignoredInputs.def.mjs');
-        await import('./recordedCoordSequences.def.mjs');
+        await import('./canary.def.ts');
+        await import('./ignoredInputs.def.ts');
+        await import('./recordedCoordSequences.def.ts');
       });
     </script>
   </head>

common/web/gesture-recognizer/src/test/auto/browser/cases/ignoredInputs.def.ts

@@ -11,33 +11,35 @@ import {
 describe("Layer one - DOM -> InputSequence", function() {
   this.timeout(5000);
 
+  let controller: HostFixtureLayoutController;
+
   beforeEach(function(done) {
-    this.controller = new HostFixtureLayoutController();
-    this.controller.connect().then(() => done());
+    controller = new HostFixtureLayoutController();
+    controller.connect().then(() => done());
   });
 
   afterEach(function() {
-    this.controller.destroy();
+    controller.destroy();
   });
 
   describe('other tests', function() {
     it("starts in roaming zone are ignored", function() {
-      let playbackEngine = new InputSequenceSimulator(this.controller);
-      let recorder = new SequenceRecorder(this.controller);
+      let playbackEngine = new InputSequenceSimulator(controller);
+      let recorder = new SequenceRecorder(controller);
       let layout = new FixtureLayoutConfiguration("screen2", "bounds1", "full", "safe-loose");
-      this.controller.layoutConfiguration = layout;
+      controller.layoutConfiguration = layout;
 
       let fireEvent = () => {
         playbackEngine.replayTouchSamples(/*relative coord:*/ [{sample: {targetX: 10, targetY: -5}, identifier: 1}],
                                           /*state:*/         "start",
                                           /*recentTouches:*/  [],
-                                          /*targetElement:*/ this.controller.recognizer.config.maxRoamingBounds
+                                          /*targetElement:*/ controller.recognizer.config.maxRoamingBounds
                                         );
       }
 
       // This test is invalidated if the handler itself isn't called.  So... let's verify that!
       // This requires white-box inspection of the actual handler control-flow, and we must do
-      let touchEngine = this.controller.recognizer.touchEngine;
+      let touchEngine = controller.recognizer.touchEngine;
       let trueHandler = touchEngine.onTouchStart;
       let fakeHandler = touchEngine.onTouchStart = sinon.fake();
       fireEvent();
@@ -55,10 +57,10 @@ describe("Layer one - DOM -> InputSequence", function() {
     });
 
     it("ignores target-external events", function() {
-      let playbackEngine = new InputSequenceSimulator(this.controller);
-      let recorder = new SequenceRecorder(this.controller);
+      let playbackEngine = new InputSequenceSimulator(controller);
+      let recorder = new SequenceRecorder(controller);
       let layout = new FixtureLayoutConfiguration("screen2", "bounds1", "full", "safe-loose");
-      this.controller.layoutConfiguration = layout;
+      controller.layoutConfiguration = layout;
 
       let fireEvent = () => {
         playbackEngine.replayMouseSample(/*relative coord:*/ {targetX: -5, targetY: 15},
@@ -69,7 +71,7 @@ describe("Layer one - DOM -> InputSequence", function() {
 
       // This test is invalidated if the handler itself isn't called.  So... let's verify that!
       // Not quite covered by the canary cases b/c of the distinct targetElement.
-      let mouseEngine = this.controller.recognizer.mouseEngine;
+      let mouseEngine = controller.recognizer.mouseEngine;
       let trueHandler = mouseEngine.onMouseStart;
       let fakeHandler = mouseEngine.onMouseStart = sinon.fake();
       fireEvent();

common/web/gesture-recognizer/src/test/auto/browser/cases/recordedCoordSequences.def.ts

@@ -1,6 +1,8 @@
 import { assert, expect } from 'chai';
 import sinon from 'sinon';
 
+import type { GestureDebugSource, InputSample, SerializedGestureSource } from '@keymanapp/gesture-recognizer';
+
 import {
   HostFixtureLayoutController,
   InputSequenceSimulator
@@ -11,7 +13,7 @@ function isOnAndroid() {
   return agent.indexOf('Android' >= 0);
 }
 
-let loc = document.location;
+const loc = document.location;
 // config.testFile generally starts with a '/', with the path resembling the actual full local
 // filesystem for the drive.
 const domain = `${loc.protocol}/${loc.host}`
@@ -24,13 +26,15 @@ async function fetchRecording(jsonFilename) {
 describe("Layer one - DOM -> InputSequence", function() {
   this.timeout(20000);
 
+  let controller: HostFixtureLayoutController;
+
   beforeEach(function(done) {
-    this.controller = new HostFixtureLayoutController();
-    this.controller.connect().then(() => done());
+    controller = new HostFixtureLayoutController();
+    controller.connect().then(() => done());
   });
 
   afterEach(function() {
-    this.controller.destroy();
+    controller.destroy();
   });
 
   describe('recorded input sequences', function() {
@@ -44,9 +48,7 @@ describe("Layer one - DOM -> InputSequence", function() {
 
     // We rely on this function to have the same context as `it` - the test-definition function.
     let replayAndCompare = function(testObj) {
-      let resultPromise;
-
-      let playbackEngine = new InputSequenceSimulator(this.controller);
+      let playbackEngine = new InputSequenceSimulator(controller);
 
       // **********************************
       // Android-Chrome sequence simulation does not allow fractional values in MouseEvent clientX/clientY...
@@ -62,7 +64,7 @@ describe("Layer one - DOM -> InputSequence", function() {
         }
       }
 
-      resultPromise = playbackEngine.replayAsync(testObj);
+      let resultPromise = playbackEngine.replayAsync(testObj);
 
       // replayAsync sets up timeouts against the `clock` object.
       // This will run through the simulated timeout queue asynchronously.
@@ -106,8 +108,8 @@ describe("Layer one - DOM -> InputSequence", function() {
         // Now to compare just the timestamp elements.  We'll tolerate a difference of up to 1.
         // Note:  if using the `replaySync` function instead, disable this section!
         // (Through to the nested for-loop `assert.closeTo`)
-        let sampleTimeExtractor = (sample) => sample.t;
-        let inputTimeExtractor = (input) => {
+        let sampleTimeExtractor = (sample: InputSample<any>) => sample.t;
+        let inputTimeExtractor = (input: GestureDebugSource<any> | SerializedGestureSource) => {
           return input.path.coords.map(sampleTimeExtractor);
         }
 

common/web/gesture-recognizer/src/test/auto/browser/web-test-runner.config.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 import { devices, playwrightLauncher } from '@web/test-runner-playwright';
 import { summaryReporter } from '@web/test-runner';
-import teamcityReporter from '@keymanapp/common-test-resources/test-runner-TC-reporter.mjs';
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { importMapsPlugin } from '@web/dev-server-import-maps';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
@@ -35,6 +35,7 @@ export default {
     }
   ],
   plugins: [
+    esbuildPlugin({ ts: true, target: 'auto'}),
     importMapsPlugin({
       inject: {
         importMap: {