Adds puppeteer to test whether typescript.js runs in the browser (microsoft#35471)

Orta · web-flow · commit 19c3bcb9a99c · 2020-02-13T14:19:33.000-05:00
* Adds puppeteer to test whether typescript.js runs in the browser

* Adds a check for the browser integration into the GitHub Actions CI

* Update to use playwright, and test in three browsers
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -35,3 +35,6 @@ jobs:
         npm install
         npm update
         npm test
+    - name: Validate the browser can import TypeScript
+      run: gulp test-browser-integration
+    
diff --git a/Gulpfile.js b/Gulpfile.js
@@ -472,6 +472,11 @@ task("runtests-parallel").flags = {
     "   --shardId": "1-based ID of this shard (default: 1)",
 };
 
+
+task("test-browser-integration", () => exec(process.execPath, ["scripts/browserIntegrationTest.js"]));
+task("test-browser-integration").description = "Runs scripts/browserIntegrationTest.ts which tests that typescript.js loads in a browser";
+
+
 task("diff", () => exec(getDiffTool(), [refBaseline, localBaseline], { ignoreExitCode: true, waitForExit: false }));
 task("diff").description = "Diffs the compiler baselines using the diff tool specified by the 'DIFF' environment variable";
 
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
         "through2": "latest",
         "travis-fold": "latest",
         "typescript": "next",
+        "playwright": "latest",
         "vinyl": "latest",
         "vinyl-sourcemaps-apply": "latest",
         "xml2js": "^0.4.19"
diff --git a/scripts/browserIntegrationTest.js b/scripts/browserIntegrationTest.js
@@ -0,0 +1,39 @@
+const playwright = require("playwright");
+const chalk = require("chalk");
+const { join } = require("path");
+const { readFileSync } = require("fs");
+
+// Turning this on will leave the Chromium browser open, giving you the
+// chance to open up the web inspector.
+const debugging = false;
+
+(async () => {
+  for (const browserType of ["chromium", "firefox", "webkit"]) {
+    const browser = await playwright[browserType].launch({ headless: !debugging });
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    const errorCaught = err => {
+        console.error(chalk.red("There was an error running built/typescript.js in " + browserType));
+        console.log(err.toString());
+        process.exitCode = 1;
+    };
+
+    page.on("error", errorCaught);
+    page.on("pageerror", errorCaught);
+    page.on("console", log => console[log._type](log._text));
+
+    await page.setContent(`
+    <html>
+    <script>${readFileSync(join("built", "local", "typescript.js"), "utf8")}</script>
+    </html>
+    `);
+
+    if (!debugging) {
+        await browser.close();
+    }
+    else {
+        console.log("Not closing the browser, you'll need to exit the process in your terminal manually");
+    }
+  }
+})();
