👷 Split unit-bs CI job per browser

Author: mormubis

.gitlab-ci.yml

@@ -303,13 +303,16 @@ unit-bs:
     - .base-configuration
     - .bs-allowed-branches
   interruptible: true
-  resource_group: browserstack
+  resource_group: browserstack-$BS_BROWSER
+  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
+    - BS_BROWSER=$BS_BROWSER node scripts/test/ci-bs.ts test:unit
   after_script:
     - node ./scripts/test/export-test-result.ts unit-bs
 

scripts/test/ci-bs.ts

@@ -30,13 +30,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 (process.env.BS_BROWSER) {
+    environment.BS_BROWSER = process.env.BS_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
         {