👷 Split unit-bs CI job per browser

Each browser now runs as a separate CI job using parallel: matrix.
The --browser flag on ci-bs.ts filters the Karma config to a single
browser via the BS_BROWSER env var.

Author: mormubis

.gitlab-ci.yml

@@ -303,13 +303,15 @@ unit-bs:
     - .base-configuration
     - .bs-allowed-branches
   interruptible: true
-  resource_group: browserstack
+  parallel:
+    matrix:
+      - BS_BROWSER: [edge, firefox, safari-desktop, chrome-desktop, chrome-mobile]
   artifacts:
     reports:
       junit: test-report/unit-bs/*.xml
   script:
     - yarn
-    - node scripts/test/ci-bs.ts test:unit
+    - node scripts/test/ci-bs.ts test:unit --browser $BS_BROWSER
   after_script:
     - node ./scripts/test/export-test-result.ts unit-bs
 

scripts/test/ci-bs.ts

@@ -1,3 +1,4 @@
+import { parseArgs } from 'node:util'
 import { printLog, runMain } from '../lib/executionUtils.ts'
 import { command } from '../lib/command.ts'
 import { fetchPR, getLastCommonCommit, LOCAL_BRANCH } from '../lib/gitUtils.ts'
@@ -16,9 +17,20 @@ const RELEVANT_FILE_PATTERNS = [
 ]
 
 runMain(async () => {
-  const testCommand = process.argv[2]
+  const {
+    values: { browser },
+    positionals,
+  } = parseArgs({
+    args: process.argv.slice(2),
+    options: {
+      browser: { type: 'string' },
+    },
+    allowPositionals: true,
+  })
+
+  const testCommand = positionals[0]
   if (!testCommand) {
-    throw new Error('Usage: ci-bs.ts <test:unit>')
+    throw new Error('Usage: ci-bs.ts <test:unit> [--browser <id>]')
   }
 
   const pr = await fetchPR(LOCAL_BRANCH!)
@@ -30,13 +42,16 @@ runMain(async () => {
     return
   }
 
-  command`yarn ${testCommand}:bs`
-    .withEnvironment({
-      BS_USERNAME: getBrowserStackUsername(),
-      BS_ACCESS_KEY: getBrowserStackAccessKey(),
-    })
-    .withLogs()
-    .run()
+  const environment: Record<string, string> = {
+    BS_USERNAME: getBrowserStackUsername(),
+    BS_ACCESS_KEY: getBrowserStackAccessKey(),
+  }
+
+  if (browser) {
+    environment.BS_BROWSER = browser
+  }
+
+  command`yarn ${testCommand}:bs`.withEnvironment(environment).withLogs().run()
 })
 
 function hasRelevantChanges(baseCommit: string): boolean {

test/browsers.conf.d.ts

@@ -1,4 +1,5 @@
 export interface BrowserConfiguration {
+  id?: string
   sessionName: string
   name: string
   version?: string

test/unit/browsers.conf.ts

@@ -9,34 +9,39 @@ export const OLDEST_BROWSER_ECMA_VERSION = 2017
 
 export const browserConfigurations: BrowserConfiguration[] = [
   {
+    id: 'edge',
     sessionName: 'Edge',
     name: 'Edge',
     version: '80.0',
     os: 'Windows',
     osVersion: '11',
   },
   {
+    id: 'firefox',
     sessionName: 'Firefox',
     name: 'Firefox',
     version: '78.0',
     os: 'Windows',
     osVersion: '11',
   },
   {
+    id: 'safari-desktop',
     sessionName: 'Safari desktop',
     name: 'Safari',
     version: '14.0',
     os: 'OS X',
     osVersion: 'Big Sur',
   },
   {
+    id: 'chrome-desktop',
     sessionName: 'Chrome desktop',
     name: 'Chrome',
     version: '80.0',
     os: 'Windows',
     osVersion: '11',
   },
   {
+    id: 'chrome-mobile',
     sessionName: 'Chrome mobile',
     name: 'chrome',
     os: 'android',

test/unit/karma.bs.conf.js

@@ -2,6 +2,16 @@ import { getBuildInfos } from '../envUtils.ts'
 import { browserConfigurations } from './browsers.conf.ts'
 import karmaBaseConf from './karma.base.conf.js'
 
+const selectedBrowser = process.env.BS_BROWSER
+const filteredConfigurations = selectedBrowser
+  ? browserConfigurations.filter((configuration) => configuration.id === selectedBrowser)
+  : browserConfigurations
+
+if (selectedBrowser && filteredConfigurations.length === 0) {
+  const availableIds = browserConfigurations.map((c) => c.id).join(', ')
+  throw new Error(`Unknown BS_BROWSER "${selectedBrowser}". Available: ${availableIds}`)
+}
+
 // eslint-disable-next-line import/no-default-export
 export default function (config) {
   config.set({
@@ -13,8 +23,8 @@ export default function (config) {
     ],
     plugins: [...karmaBaseConf.plugins, 'karma-browserstack-launcher'],
     reporters: [...karmaBaseConf.reporters, 'BrowserStack'],
-    browsers: browserConfigurations.map((configuration) => configuration.sessionName),
-    concurrency: 5,
+    browsers: filteredConfigurations.map((configuration) => configuration.sessionName),
+    concurrency: filteredConfigurations.length,
     browserDisconnectTolerance: 3,
     captureTimeout: 2 * 60 * 1000,
     browserStack: {
@@ -25,7 +35,7 @@ export default function (config) {
       video: false,
     },
     customLaunchers: Object.fromEntries(
-      browserConfigurations.map((configuration) => [
+      filteredConfigurations.map((configuration) => [
         configuration.sessionName,
         // See https://github.com/karma-runner/karma-browserstack-launcher#per-browser-options
         {