chore(client): ts migrate frame runner (#43798)

* Preserve history commit

* feat: Typescript migration frame-runner

* fix: types for expected/actual

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/client/frame-runner.ts

@@ -2,17 +2,42 @@ import '@babel/polyfill';
 import jQuery from 'jquery';
 import curriculumHelpers from '../utils/curriculum-helpers';
 
+declare global {
+  interface Window {
+    $: JQueryStatic;
+  }
+  interface Document {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __initTestFrame: (e: InitTestFrameArg) => Promise<void>;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __runTest: (
+      testString: string
+    ) => Promise<
+      { pass: boolean } | { err: { message: string; stack?: string } }
+    >;
+  }
+}
+
 window.$ = jQuery;
 
 document.__initTestFrame = initTestFrame;
 
-async function initTestFrame(e = { code: {} }) {
+export interface InitTestFrameArg {
+  code: {
+    contents?: string;
+    editableContents?: string;
+  };
+  getUserInput?: (fileName: string) => string;
+  loadEnzyme?: () => void;
+}
+
+async function initTestFrame(e: InitTestFrameArg = { code: {} }) {
   const code = (e.code.contents || '').slice();
   const editableContents = (e.code.editableContents || '').slice();
   // __testEditable allows test authors to run tests against a transitory dom
   // element built using only the code in the editable region.
-  // eslint-disable-next-line no-unused-vars
-  const __testEditable = cb => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const __testEditable = (cb: () => () => unknown) => {
     const div = document.createElement('div');
     div.id = 'editable-only';
     div.innerHTML = editableContents;
@@ -26,12 +51,14 @@ async function initTestFrame(e = { code: {} }) {
     e.getUserInput = () => code;
   }
 
-  /* eslint-disable no-unused-vars */
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   // Fake Deep Equal dependency
-  const DeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+  const DeepEqual = (a: Record<string, unknown>, b: Record<string, unknown>) =>
+    JSON.stringify(a) === JSON.stringify(b);
 
   // Hardcode Deep Freeze dependency
-  const DeepFreeze = o => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const DeepFreeze = (o: Record<string, any>) => {
     Object.freeze(o);
     Object.getOwnPropertyNames(o).forEach(function (prop) {
       if (
@@ -50,10 +77,11 @@ async function initTestFrame(e = { code: {} }) {
   const { default: chai } = await import(/* webpackChunkName: "chai" */ 'chai');
   const assert = chai.assert;
   const __helpers = curriculumHelpers;
-  /* eslint-enable no-unused-vars */
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 
   let Enzyme;
   if (e.loadEnzyme) {
+    /* eslint-disable prefer-const */
     let Adapter16;
     /* eslint-disable no-inline-comments */
 
@@ -64,9 +92,10 @@ async function initTestFrame(e = { code: {} }) {
     /* eslint-enable no-inline-comments */
 
     Enzyme.configure({ adapter: new Adapter16() });
+    /* eslint-enable prefer-const */
   }
 
-  document.__runTest = async function runTests(testString) {
+  document.__runTest = async function runTests(testString: string) {
     // uncomment the following line to inspect
     // the frame-runner as it runs tests
     // make sure the dev tools console is open
@@ -81,7 +110,7 @@ async function initTestFrame(e = { code: {} }) {
         $(() => {
           try {
             // eslint-disable-next-line no-eval
-            const test = eval(testString);
+            const test: unknown = eval(testString);
             resolve(test);
           } catch (err) {
             reject(err);
@@ -102,10 +131,10 @@ async function initTestFrame(e = { code: {} }) {
       // actual before returning
       return {
         err: {
-          message: err.message,
-          stack: err.stack,
-          expected: err.expected,
-          actual: err.actual
+          message: (err as Error).message,
+          stack: (err as Error).stack,
+          expected: (err as { expected?: string }).expected,
+          actual: (err as { actual?: string }).actual
         }
       };
     }

client/webpack-workers.js

@@ -11,7 +11,7 @@ module.exports = (env = {}) => {
     cache: __DEV__ ? { type: 'filesystem' } : false,
     mode: __DEV__ ? 'development' : 'production',
     entry: {
-      'frame-runner': './src/client/frame-runner.js',
+      'frame-runner': './src/client/frame-runner.ts',
       'sass-compile': './src/client/workers/sass-compile.ts',
       'test-evaluator': './src/client/workers/test-evaluator.ts'
     },