test: migrate from Karma to Vitest Browser

[LayZeeDK]

Closes #80.

Work In Progress

To do

• Fix hanging Firefox latest tests in GitHub Actions
• Run MutationObserver in SSR test/implementation
• Remove Karma, Jasmine, and related dependencies like @ngtools/webpack
• Remove env from tests_local_browsers CI job
• Convert demo project tests to Vitest/Vitest Browser

Use the following command to install Playwright locally.

pnpm exec playwright install --with-deps

Playwright version

Based on the relase date of Angular 19.0, and their browser support strategy, I determined that we need to support the following browser ranges.

• Chrome 130 to latest
• Firefox 131 to latest
• Firefox ESR 115 and 128
• Safari 17 to latest

We match the smallest supported minor version of a browser to a Playwright version and otherwise use the installed version of Playwright in the CI job.

Update Safari test

The flex value of <div fxFlex> in the following example has changed as of Safari 16.

<div fxLayout="column">
  <div fxFlex="20"></div>
  <div fxFlex="60"></div>
  <div fxFlex></div>
</div>

In Safari 15, it is flex: 1 1 1e-9px; while it is flex: 1 1 0px; in Safari 16, 17, and 18.

Safari 15

Safari 16

Safari 17

Safari 18

Tested at https://tburleson-layouts-demos.firebaseapp.com/ using Browserling.

I have updated the unit test assertion that failed in supported Safari versions.

Disable MutationObserver in SSR

MutationObserver is unavailable in Angular SSR because it is unsupported by Domino. Disable MutationObserver in LayoutGapDirective in SSR.

[DuncanFaulkner]

LGTM

[LayZeeDK]

LGTM

Thanks, but I'm not done yet 😊 I need to figure out how to run tests in SSR mode. Maybe just Vitest without Vitest Browser and server providers.

And some cleaning left to do in the Git history.

Also, there's a test failing in WebKit.

[DuncanFaulkner]

not a problem, didn't see it was in draft until afterwards