Add custom karma-safari-launcher plugin

Author: dlarocque

config/karma.base.js

@@ -20,7 +20,66 @@ const path = require('path');
 const webpackTestConfig = require('./webpack.test');
 const { argv } = require('yargs');
 
+function determineBrowsers() {
+ const supportedBrowsers = ['ChromeHeadless', 'Safari', 'Firefox'];
+
+ if (process.env.BROWSERS) {
+ const browsers = process.env.BROWSERS.split(',');
+
+ const validBrowsers = browsers.filter(browser =>
+ supportedBrowsers.includes(browser)
+ );
+ if (validBrowsers.length === 0) {
+ console.error(
+ `The \'BROWSER\' environment variable was set, but no supported browsers were listed. The supported browsers are ${JSON.stringify(
+ supportedBrowsers
+ )}.`
+ );
+ return [];
+ }
+
+ if (browsers.includes('Safari') && process.platform !== 'darwin') {
+ console.error(
+ "The 'BROWSER' environment variable includes 'Safari', which is not supported on this platform. The only supported platform is darwin."
+ );
+ return [];
+ }
+
+ if (browsers.includes('Safari')) {
+ console.log(
+ "\x1b[38;2;255;165;0mSafari browser testing has been enabled. This requires Full Disk Access be granted to the executor. To grant Full Disk Access on macOS > 13, visit 'System Settings' > 'Privacy & Security' > 'Full Disk Access'.\x1b[0m"
+ ); // Log in orange
+ }
+
+ return validBrowsers;
+ } else {
+ /**
+ * By default we only run the Chrome tests locally since the Safari launcher has some quirks
+ * that make local testing annoying:
+ * - Tabs from previous test runs are restored, causing the tests to be ran once on each tab.
+ * To prevent this, Safari has to be manually re-opened and then quit after every test run.
+ * - Full Disk Access has to be manually enabled
+ *
+ * Running the browser tests in Chrome should catch most browser bugs. If that's not the case,
+ * the bugs will be caught when the browser tests are ran on Safari in CI.
+ */
+ console.log(
+ "The 'BROWSER' environment variable is undefined. Defaulting to 'ChromeHeadless'."
+ );
+ return ['ChromeHeadless'];
+ }
+}
+
 const config = {
+ // See: https://karma-runner.github.io/6.4/config/plugins.html#loading-plugins
+ plugins: [
+ // We use our own custom Safari launcher plugin since https://github.com/karma-runner/karma-safari-launcher
+ // does not work and is not maintained.
+ require('../tools/karma-safari-launcher'),
+ // Include all other plugins from our npm modules
+ 'karma-*'
+ ],
+
  // disable watcher
  autoWatch: false,
 
@@ -57,10 +116,11 @@ const config = {
  // changes
  autoWatch: false,
 
- // start these browsers
- // available browser launchers:
- // https://npmjs.org/browse/keyword/karma-launcher
- browsers: process.env?.BROWSERS?.split(',') ?? ['ChromeHeadless'],
+ // Browsers to launch for testing
+ // To use a custom set of browsers, define the BROWSERS environment variable as a comma-seperated list.
+ // Supported browsers are 'ChromeHeadless', 'Safari', and 'Firefox'.
+ // See: https://karma-runner.github.io/6.4/config/browsers.html
+ browsers: determineBrowsers(),
 
  webpack: webpackTestConfig,
 

package.json

@@ -120,7 +120,6 @@
  "karma-firefox-launcher": "2.1.3",
  "karma-mocha": "2.0.1",
  "karma-mocha-reporter": "2.2.5",
- "karma-safari-launcher": "1.0.0",
  "karma-sourcemap-loader": "0.4.0",
  "karma-spec-reporter": "0.0.36",
  "karma-summary-reporter": "3.1.1",

packages/auth-compat/karma.conf.js

@@ -23,7 +23,6 @@ const files = ['src/**/*.test.ts'];
 
 module.exports = function (config) {
  const karmaConfig = Object.assign({}, karmaBase, {
- browsers: getTestBrowsers(argv),
  // files to load into karma
  files: getTestFiles(),
  preprocessors: { '**/*.ts': ['webpack', 'sourcemap'] },
@@ -56,14 +55,6 @@ function getTestFiles() {
  }
 }
 
-function getTestBrowsers(argv) {
- let browsers = ['ChromeHeadless'];
- if (process.env?.BROWSERS && argv.unit) {
- browsers = process.env?.BROWSERS?.split(',');
- }
- return browsers;
-}
-
 function getClientConfig() {
  if (!argv.integration) {
  return {};

packages/auth/karma.conf.js

@@ -21,7 +21,6 @@ const { argv } = require('yargs');
 
 module.exports = function (config) {
  const karmaConfig = Object.assign({}, karmaBase, {
- browsers: getTestBrowsers(argv),
  // files to load into karma
  files: getTestFiles(argv),
  // frameworks to use
@@ -60,7 +59,7 @@ function getTestFiles(argv) {
  } else if (argv.cordova) {
  return ['src/platform_cordova/**/*.test.ts'];
  } else {
- // For the catch-all yarn:test, ignore the phone integration test
+ // For the catch-all yarn browser:test, ignore the phone integration test
  return [
  'src/**/*.test.ts',
  'test/helpers/**/*.test.ts',
@@ -71,14 +70,6 @@ function getTestFiles(argv) {
  }
 }
 
-function getTestBrowsers(argv) {
- let browsers = ['ChromeHeadless'];
- if (process.env?.BROWSERS && argv.unit) {
- browsers = process.env?.BROWSERS?.split(',');
- }
- return browsers;
-}
-
 function getClientConfig(argv) {
  if (!argv.local) {
  return {};

packages/auth/package.json

@@ -93,11 +93,12 @@
  "build:scripts": "tsc -moduleResolution node --module commonjs scripts/*.ts && ls scripts/*.js | xargs -I % sh -c 'terser % -o %'",
  "dev": "rollup -c -w",
  "test": "run-p --npm-path npm lint test:all",
- "test:all": "run-p --npm-path npm test:browser:unit test:node:unit test:integration test:browser:integration:prodbackend",
- "test:integration": "firebase emulators:exec --project emulatedproject --only auth \"run-s --npm-path npm test:browser:integration:local test:node:integration:local test:webdriver\"",
+ "test:all": "run-p --npm-path npm test:browser:unit test:node:unit test:integration",
+ "test:integration": "firebase emulators:exec --project emulatedproject --only auth \"run-s --npm-path npm test:browser:integration:local test:browser:integration:prodbackend test:node:integration:local test:webdriver\"",
  "test:ci": "node ../../scripts/run_tests_in_ci.js -s test:all",
  "test:integration:local": "run-s --npm-path npm test:node:integration:local test:browser:integration:local test:webdriver",
- "test:browser": "karma start --single-run --local",
+ "test:browser": "karma start --single-run",
+ "test:browser:local": "karma start --single-run --local",
  "test:browser:unit": "karma start --single-run --unit",
  "test:browser:integration": "karma start --single-run --integration",
  "test:browser:integration:local": "karma start --single-run --integration --local",

tools/karma-safari-launcher/index.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// See: https://karma-runner.github.io/6.4/dev/plugins.html
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+var SafariBrowser = function (baseBrowserDecorator) {
+ baseBrowserDecorator(this);
+
+ // This is the only directory that we can open files from in Safari without causing a
+ // dialog to open.
+ // Reading and writing to this directory requires Full Disk access, which can be granted on macOS > 13 at
+ // 'System Settings' > 'Privacy & Security' > 'Full Disk Access'.
+ const SAFARI_DATA_DIR = path.join(
+ os.homedir(),
+ 'Library/Containers/com.apple.Safari/Data'
+ );
+ const HTML_TRAMPOLINE_PATH = path.join(SAFARI_DATA_DIR, 'redirect.html');
+
+ this._start = function (url) {
+ var self = this;
+
+ // HTML trampoline to redirect Safari to the URL where the tests are hosted.
+ // This is necessary because Safari assumes the location we pass as an argument is a path
+ // in the Safari Data directory. So, if we were to pass 'http://localhost:3000' as an argument,
+ // Safari would attempt to open
+ // 'file:///Users/<user>/Library/Containers/com.apple.Safari/Data/http:/localhost:3000'.
+ const htmlTrampoline = `
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Redirect</title>
+ <meta http-equiv="refresh" content="0; url=${url}">
+ </head>
+ <body>
+ <p>If you are not redirected automatically, please click <a href="${url}">here</a>.</p>
+ </body>
+ </html>
+ `;
+
+ fs.writeFile(HTML_TRAMPOLINE_PATH, htmlTrampoline, function (err) {
+ if (err) {
+ console.error('Error writing file:', err);
+ return;
+ }
+
+ // Open the HTMl trampoline in Safari
+ self._execCommand(self._getCommand(), [HTML_TRAMPOLINE_PATH]);
+ });
+ };
+};
+
+SafariBrowser.prototype = {
+ name: 'Safari',
+ DEFAULT_CMD: {
+ darwin: '/Applications/Safari.app/Contents/MacOS/Safari'
+ },
+ ENV_CMD: 'SAFARI_BIN'
+};
+
+SafariBrowser.$inject = ['baseBrowserDecorator'];
+
+module.exports = {
+ 'launcher:Safari': ['type', SafariBrowser]
+};

tools/karma-safari-launcher/package.json

@@ -0,0 +1,6 @@
+{
+ "name": "karma-safari-launcher",
+ "version": "1.0.0",
+ "description": "A Karma plugin to launch a Safari browser",
+ "main": "index.js"
+}

yarn.lock

@@ -11337,11 +11337,6 @@ karma-mocha@2.0.1:
  dependencies:
  minimist "^1.2.3"
 
-karma-safari-launcher@1.0.0:
- version "1.0.0"
- resolved "https://registry.npmjs.org/karma-safari-launcher/-/karma-safari-launcher-1.0.0.tgz"
- integrity sha1-lpgqLMR9BmquccVTursoMZEVos4=
-
 karma-sourcemap-loader@0.4.0:
  version "0.4.0"
  resolved "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.4.0.tgz"