chore(testrunner): typescript test files (#2751)

This lets our spec files be .ts instead of just .js. The typescript files will be checked against the public types. Tests are compiled with babel just in time before running them, emulating the jest experience. TypeScript tests are also linted with eslint.

I converted keyboard.spec.js as the first demo. I'll follow up converting some more more tests.

Author: JoelEinbinder

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint', 'notice'],
     parserOptions: {
-      project: './tsconfig.json',
+      project: ['./tsconfig.json', './test/tsconfig.json'],
       ecmaVersion: 9,
       sourceType: 'module',
     },

package-lock.json

@@ -35,8 +35,9 @@
     "prepare": "node install-from-github.js",
     "build": "node utils/runWebpack.js --mode='development' && tsc -p . && npm run generate-types",
     "watch": "node utils/runWebpack.js --mode='development' --watch --silent | tsc -w -p .",
-    "test-types": "npm run generate-types && npx -p [email protected] tsc -p utils/generate_types/test/tsconfig.json",
-    "generate-types": "node utils/generate_types/"
+    "test-types": "npm run generate-types && npx -p [email protected] tsc -p utils/generate_types/test/tsconfig.json && npm run typecheck-tests",
+    "generate-types": "node utils/generate_types/",
+    "typecheck-tests": "tsc -p ./test/"
   },
   "author": {
     "name": "Microsoft Corporation"
@@ -56,6 +57,9 @@
     "ws": "^6.1.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/preset-typescript": "^7.10.1",
     "@types/debug": "0.0.31",
     "@types/extract-zip": "^1.6.2",
     "@types/mime": "^2.0.1",
@@ -77,6 +81,7 @@
     "formidable": "^1.2.1",
     "ncp": "^2.0.0",
     "node-stream-zip": "^1.8.2",
+    "pirates": "^4.0.1",
     "pixelmatch": "^4.0.2",
     "socksv5": "0.0.6",
     "text-diff": "^1.0.1",

package.json

@@ -446,7 +446,7 @@ describe('Page.goto', function() {
     });
 
     /**
-     * @param {import('../src/frames').Frame} frame
+     * @param {import('../index').Frame} frame
      * @param {TestServer} server
      * @param {() => Promise<void>} action
      * @param {boolean} isSetContent

test/keyboard.spec.js renamed to test/keyboard.spec.ts

@@ -85,7 +85,7 @@ module.exports = {
         './focus.spec.js',
         './input.spec.js',
         './jshandle.spec.js',
-        './keyboard.spec.js',
+        './keyboard.spec.ts',
         './mouse.spec.js',
         './navigation.spec.js',
         './network.spec.js',

test/navigation.spec.js

@@ -17,6 +17,9 @@
 
 const fs = require('fs');
 const utils = require('./utils');
+const path = require('path');
+const pirates = require('pirates');
+const babel = require('@babel/core');
 const TestRunner = require('../utils/testrunner/');
 const { PlaywrightEnvironment, BrowserTypeEnvironment, BrowserEnvironment, PageEnvironment} = require('./environments.js');
 
@@ -132,7 +135,18 @@ function collect(browserNames) {
             }
           }
           for (const file of spec.files || []) {
+            const revert = pirates.addHook((code, filename) => {
+              const result = babel.transformFileSync(filename, {
+                presets: [
+                  ['@babel/preset-env', {targets: {node: 'current'}}],
+                  '@babel/preset-typescript']
+              });
+              return result.code;
+            }, {
+              exts: ['.ts']
+            });
             require(file);
+            revert();
             delete require.cache[require.resolve(file)];
           }
         });

test/test.config.js

@@ -6,6 +6,7 @@
         "moduleResolution": "node",
         "target": "ESNext",
         "strictNullChecks": false,
+        "allowSyntheticDefaultImports": true,
     },
-    "include": ["*.spec.js", "types.d.ts"]
+    "include": ["*.spec.js", "types.d.ts", "*.spec.ts"]
   }

test/test.js

@@ -1,7 +1,7 @@
 type ServerResponse = import('http').ServerResponse;
 type IncomingMessage = import('http').IncomingMessage;
 
-type Falsy = false|""|0|null|undefined;
+type Falsy = false|''|0|null|undefined;
 interface Expect<T> {
     toBe(other: T, message?: string): void;
     toBeFalsy(message?: string): void;
@@ -24,7 +24,12 @@ interface Expect<T> {
 
 type DescribeFunction = ((name: string, inner: () => void) => void) & {fail(condition: boolean): DescribeFunction};
 
-type ItFunction<STATE> = ((name: string, inner: (state: STATE) => Promise<void>) => void) & {fail(condition: boolean): ItFunction<STATE>; repeat(n: number): ItFunction<STATE>};
+type ItFunction<STATE> = ((name: string, inner: (state: STATE) => Promise<void>) => void) & {
+    fail(condition: boolean): ItFunction<STATE>;
+    skip(condition: boolean): ItFunction<STATE>;
+    slow(): ItFunction<STATE>;
+    repeat(n: number): ItFunction<STATE>;
+};
 
 type TestRunner<STATE> = {
     describe: DescribeFunction;
@@ -50,9 +55,9 @@ interface TestSetup<STATE> {
     WIN: boolean;
     playwright: typeof import('../index');
     browserType: import('../index').BrowserType<import('../index').Browser>;
-    selectors: import('../src/selectors').Selectors;
+    selectors: import('../index').Selectors;
     expect<T>(value: T): Expect<T>;
-    defaultBrowserOptions: import('../src/server/browserType').LaunchOptions;
+    defaultBrowserOptions: import('../index').LaunchOptions;
     playwrightPath;
     headless: boolean;
     ASSETS_DIR: string;
@@ -100,3 +105,20 @@ interface TestServer {
     EMPTY_PAGE: string;
 
 }
+
+declare const describe: DescribeFunction;
+declare const fdescribe: DescribeFunction;
+declare const xdescribe: DescribeFunction;
+declare function expect<T>(value: T): Expect<T>;
+declare const it: ItFunction<PageState>;
+declare const fit: ItFunction<PageState>;
+declare const dit: ItFunction<PageState>;
+declare const xit: ItFunction<PageState>;
+
+declare const browserType: import('../index').BrowserType<import('../index').Browser>;
+
+
+// global variables in assets
+
+// keyboard.html
+declare function getResult(): string;