Feature: @angular-devkit/build-angular:web-test-runner picks up the web test runner config

[RobbyRabbitman]

Command

test

Description

When testing angular code with the web test runner, I would like to configure the web test runner via its known api. My understanding of the web test runner is, that you provide a plugin which wraps the framework of your choice. The plugin takes care of building and testing your code specific to your framework and then reports the results to the web test runner.

I tried the @angular-devkit/build-angular:web-test-runner in a monorepo and I really like it so far, but I was confused that when provided a web-test-runner.config.mjs it was ignored. Other projects in my monorepo that use the web test runner are configured via the plugin option of the web test runner config when they needed to be build framework specific.

I would love to hear your thoughts on this one! :)

Describe the solution you'd like

Create a plugin which builds and tests angular code. Make @angular-devkit/build-angular:web-test-runner call the web test runner.

Using the web test runner config would also enable to launch multiple browsers with their playwright package:

// web-test-runner.config.mjs

export default {
// ...
plugins: [angular()],
browsers: [
      playwrightLauncher({ product: 'chromium' }),
      playwrightLauncher({ product: 'firefox' }),
      playwrightLauncher({ product: 'webkit' }),
    ]
}

Angular would not introduce a new api, a developer could just use the web test runner api.

// angular.json

"test": {
          "builder": "@angular-devkit/build-angular:web-test-runner",
          "options": {
            "wtrPath": "some/non/default/path"
          }
        }

Describe alternatives you've considered

Expose the web test runner api in the options of the test target in the angular.json.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[RobbyRabbitman]

FYI

If you want to try launching browsers with @web/test-runner-playwright, you can patch @angular-devkit/build-angular with something like this:

@@ -107,6 +107,9 @@ function extractZoneTesting(polyfills) {
 async function runTests(wtr, testDir, options) {
     const testPagePath = node_path_1.default.resolve(__dirname, 'test_page.html');
     const testPage = await promises_1.default.readFile(testPagePath, 'utf8');
+
+    const { playwrightLauncher } = require('@web/test-runner-playwright');
+
     const runner = await wtr.startTestRunner({
         config: {
             rootDir: testDir,
@@ -127,10 +130,16 @@ async function runTests(wtr, testDir, options) {
             port: 9876,
             watch: options.watch ?? false,
             testRunnerHtml: (_testFramework, _config) => testPage,
+            browsers: [
+                playwrightLauncher({ product: 'chromium' }),
+                playwrightLauncher({ product: 'firefox' }),
+                playwrightLauncher({ product: 'webkit' }),
+            ],
         },
         readCliArgs: false,
         readFileConfig: false,
         autoExitProcess: false,
+        
     });
     if (!runner) {
         throw new Error('Failed to start Web Test Runner.');

in my case this outputs:

> nx run XYZ-angular-components-button:test-angular

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
NOTE: The Web Test Runner builder is currently EXPERIMENTAL and not ready for production use.
The 'inlineStyleLanguage' option is not yet supported by this builder.
The 'stylePreprocessorOptions' option is not yet supported by this builder.
The 'sourceMap' option is not yet supported by this builder.
The 'progress' option is not yet supported by this builder.
Initial chunk files | Names           |  Raw size
polyfills.js        | polyfills       | 936.76 kB | 

                    | Initial total   | 936.76 kB

Lazy chunk files    | Names           |  Raw size
chunk-WDVB7UB7.js   | -               |   1.84 MB | 
jasmine_runner.js   | jasmine_runner  | 286.17 kB | 
jasmine.js          | jasmine         | 261.17 kB | 
XYZ-button.spec.js  | XYZ-button-spec |  69.04 kB | 
testing.js          | zone-testing    |  65.99 kB | 
chunk-IKOPAYLZ.js   | -               |   1.86 kB | 

Application bundle generation complete. [1.524 seconds]


dist/test-out/38883466-8230-4364-876e-caf512a70611/XYZ-button.spec.js:

 🚧 Browser logs:
      Tests passed!

Chromium: |██████████████████████████████| 1/1 test files | 79 passed, 0 failed
Firefox:  |██████████████████████████████| 1/1 test files | 79 passed, 0 failed
Webkit:   |██████████████████████████████| 1/1 test files | 79 passed, 0 failed

Finished running tests in 2.7s, all tests passed! 🎉