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.