ci: fix saucelabs browser crashing due to idle timeout

In the past when the Angular Team reworked the Saucelabs
Karma launcher the Saucelabs Selenium heartbeat has been
removed in favor of people just increasing the Saucelabs
`idleTimeout` to the max minutes their test will run.

The `idleTimeout` is limited to a 16min right now, so we
need to get back to the approach relying on a Selenium heartbeat.
For reference: The heartbeat refers to the Karma launcher
performing an arbitrary Selenium command every X seconds. This
helps with keeping the Saucelabs browser alive.

Currently we exceed the `idleTimeout` of 16min and the browsers
start to crash. Karma re-starts the browser. This results in
increased time for the Saucelabs test to ~30min from ~15min. We
fix this by upating the Karma Saucelabs launcher to a version
that has been improved by the Saucelabs team. We were always
hestitant to updating because it took a lot effort to get the
Saucelabs karma launcher stable (in the past it was _super_ flaky
with the heartbeat and implementation), but it's worth another try
given we now exceed the ~16min due to more tests being added.

Long-term we want to switch the Saucelabs/Browserstack tests to
fine-grained Bazel test targets that can be tested incrementally.
There is work in progress for this, but it's not prioritized.

This commit additionally updates the Saucelabs test from iOS13
to iOS14 with a more recent emulator, hoping for better specs
of the Saucelabs VM and emulator.

Note: We also need to add a new Yarn resolution that updates
nested `https-proxy-agent` dependencies. Packages like the
browserstack launcher install old versions that patch the
NodeJS native `http.request` method and break `webdriverio`
starting a remote Saucelabs session.

Author: devversion

package.json

@@ -193,7 +193,7 @@
     "karma-jasmine": "^4.0.1",
     "karma-parallel": "^0.3.0",
     "karma-requirejs": "^1.1.0",
-    "karma-sauce-launcher": "^2.0.2",
+    "karma-sauce-launcher": "^4.3.6",
     "karma-sourcemap-loader": "^0.3.7",
     "madge": "^4.0.0",
     "marked": "^2.0.0",
@@ -231,6 +231,7 @@
   },
   "resolutions": {
     "browser-sync-client": "2.26.13",
-    "dgeni-packages/typescript": "4.3.2"
+    "dgeni-packages/typescript": "4.3.2",
+    "**/https-proxy-agent": "5.0.0"
   }
 }

test/browser-providers.js

@@ -8,7 +8,7 @@
  */
 const browserConfig = {
   'Edge87':            {unitTest: {target: 'browserstack'}},
-  'iOS13':             {unitTest: {target: 'saucelabs'}},
+  'iOS14':             {unitTest: {target: 'saucelabs'}},
   'Safari13':          {unitTest: {target: 'browserstack'}},
 };
 

test/karma-browsers.json

@@ -1,23 +1,12 @@
 {
-  "ChromeHeadlessCI": {
-    "base": "ChromeHeadless",
-    "flags": [
-      "--window-size=1024,768",
-      "--no-sandbox"
-    ]
-  },
-  "ChromeLocalDebug": {
-    "base": "Chrome",
-    "flags": [
-      "--window-size=1024,768"
-    ]
-  },
-  "SAUCELABS_IOS13": {
+  "SAUCELABS_IOS14": {
     "base": "SauceLabs",
+    "appiumVersion": "1.20.1",
+    "deviceOrientation": "portrait",
     "browserName": "Safari",
-    "platformVersion": "13.2",
+    "platformVersion": "14.3",
     "platformName": "iOS",
-    "deviceName": "iPhone XS Simulator"
+    "deviceName": "iPhone 12 Pro Simulator"
   },
   "BROWSERSTACK_EDGE87": {
     "base": "BrowserStack",

test/karma.conf.js

@@ -7,9 +7,10 @@ module.exports = config => {
     frameworks: ['jasmine'],
     middleware: ['fake-url'],
     plugins: [
-      require('karma-jasmine'), require('karma-browserstack-launcher'),
-      require('karma-sauce-launcher'), require('karma-chrome-launcher'),
-      require('karma-firefox-launcher'), require('karma-sourcemap-loader'), {
+      require('karma-jasmine'),
+      require('karma-browserstack-launcher'),
+      require('karma-sauce-launcher'),
+      require('karma-sourcemap-loader'), {
         'middleware:fake-url': [
           'factory',
           function() {
@@ -107,7 +108,7 @@ module.exports = config => {
     browserDisconnectTolerance: 1,
     browserNoActivityTimeout: 300000,
 
-    browsers: ['ChromeLocalDebug'],
+    browsers: [],
     singleRun: false,
 
     // Try Websocket for a faster transmission first. Fallback to polling if necessary.

tools/package-tools/ts-compile.ts

@@ -11,7 +11,9 @@ import * as chalk from 'chalk';
 export function tsCompile(binary: 'tsc' | 'ngc', flags: string[]) {
   return new Promise<void>((resolve, reject) => {
     const binaryPath = resolvePath(`./node_modules/typescript/bin/${binary}`);
-    const childProcess = spawn(binaryPath, flags, {shell: true});
+    // Use `node` for spawning the TypeScript compiler. On Windows, the shell is
+    // not necessarily able to detect that the `tsc` files relies on Node.
+    const childProcess = spawn('node', [binaryPath, ...flags], {shell: true});
 
     // Pipe stdout and stderr from the child process.
     childProcess.stdout.on('data', (data: string|Buffer) => console.log(`${data}`));