feat(@angular/build): run vitest browser with playwright with OS theme

[csvn]

PR Checklist

Please check to confirm your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular-cli/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: #32469

Using Vitest with @vitest/browser-playwright will open browser with light mode every time when running tests, even if theme toggle is used.

What is the new behavior?

Using Vitest with @vitest/browser-playwright will open browser using prefers-color-scheme from OS over light default in Playwright.

Does this PR introduce a breaking change?

• Yes
• No

Setting the value like this affects the entire browser, and not just the Vitest UI. If any components with styles runs expecting light but getting dark via prefers-color-scheme, then tests may fail if tests rely on light being the default.

An alternative approach could be to only modify the vueuse-color-scheme for localhost:<port> via contextOptions.storageState instead.

Another option would be to create an angular.json option for @angular/build:unit-test such that it's possible to opt-in to changing this default.

Other information

I can create a test for this after feedback on which option would be best for this; current PR code, using storageState, or adding a option config value.

Would it be best to modify the existing playwright test, or add a new one, when testing this? (https://github.com/angular/angular-cli/blob/main/tests/e2e/tests/vitest/browser-playwright.ts#L19)

[clydin]

Thank you for the contribution.
The current approach appears reasonable. For a test, you can copy the linked one above into a new file and augment as needed.

[csvn]

@clydin I tried to copying browser-no-globals.ts and make a test that would use matchMedia to check if OS setting is respected (below), but I could not figure out how to run the test with a certain OS preference. There's sadly no way to check (prefers-color-scheme: auto), only light or dark can be checked.

  await writeFile(
    'src/app/app.spec.ts',
    `
    import { test, expect } from 'vitest';

    test('should pass', () => {
      const mm = matchMedia('(prefers-color-scheme: dark)');
      expect(mm.matches).toBe(true);
    });
  `,
  );

For now, I added a test that checks that contextOptions.colorScheme: null is passed to @vitest/browser-playwright. I hope this looks alright.

[clydin]

There's a formatting issue for packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider_spec.ts.
Otherwise this looks good.

[csvn]

There's a formatting issue for packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider_spec.ts. Otherwise this looks good.

Oops, sorry! 😅 I ran formatting and pushed the formatting changes.

[clydin]

This PR was merged into the repository. The changes were merged into the following branches:

• main: cad7a7c