Configure Vitest for unit and browser tests

Author: Kocal

.github/workflows/browser-tests.yml

@@ -0,0 +1,39 @@
+name: Browser Tests
+
+defaults:
+    run:
+        shell: bash
+
+on:
+    push:
+        paths-ignore:
+            - 'src/*/doc/**'
+            - 'src/**/*.md'
+            - 'ux.symfony.com/**'
+            - '.github/workflows/app-tests.yaml'
+            - '.github/workflows/unit-tests.yaml'
+    pull_request:
+        paths-ignore:
+            - 'src/*/doc/**'
+            - 'src/**/*.md'
+            - 'ux.symfony.com/**'
+            - '.github/workflows/app-tests.yaml'
+            - '.github/workflows/unit-tests.yaml'
+
+jobs:
+    js:
+        runs-on: ubuntu-latest
+        steps:
+            -   uses: actions/checkout@v4
+            -   run: npm i -g corepack && corepack enable
+            -   uses: actions/setup-node@v4
+                with:
+                    node-version-file: '.nvmrc'
+                    cache: 'pnpm'
+                    cache-dependency-path: |
+                        pnpm-lock.yaml
+                        package.json
+                        src/**/package.json
+            -   run: pnpm install --frozen-lockfile
+            # TODO: Install the E2E app + run webserver
+            -   run: pnpm run test:browser

.github/workflows/functional-tests.yml

@@ -1,3 +1,4 @@
+# Deprecated, will be removed in favor of browser-tests.yml
 name: Functional Tests
 
 defaults:

.github/workflows/unit-tests.yaml

@@ -143,21 +143,16 @@ jobs:
                 fi
     js:
         runs-on: ubuntu-latest
-        strategy:
-            fail-fast: false
-            matrix:
-                node-version: [ '18.x', '20.x', '22.x', '24.x' ]
         steps:
             - uses: actions/checkout@v4
             - run: npm i -g corepack && corepack enable
             - uses: actions/setup-node@v4
               with:
-                node-version: ${{ matrix.node-version }}
+                node-version-file: '.nvmrc'
                 cache: 'pnpm'
                 cache-dependency-path: |
                   pnpm-lock.yaml
                   package.json
                   src/**/package.json
             - run: pnpm install --frozen-lockfile
-            - run: pnpm exec playwright install chromium
-            - run: pnpm run test
+            - run: pnpm run test:unit

CONTRIBUTING.md

@@ -82,12 +82,16 @@ To help you with assets, you can run the following commands in a specific packag
   - `pnpm run build`: build (compile) assets from the package,
   - `pnpm run watch`: watch for modifications and rebuild assets from the package,
   - `pnpm run test`: run the tests from the package,
+  - `pnpm run test:unit`: run the Unit tests from the package,
+  - `pnpm run test:browser`: run the Browser tests from the package,
   - `pnpm run check`: run the formatter, linter, and sort imports, and fails if any modifications
   - `pnpm run check --write`: run the formatter, linter, imports sorting, and write modifications
 
 Thanks to [PNPM Workspaces](https://pnpm.io/workspaces), you can also run these commands from the root directory of the project:
   - `pnpm run build`: build (compile) assets from **all** packages,
   - `pnpm run test`: run the tests from **all** packages,
+  - `pnpm run test:unit`: run the Unit tests from **all** packages,
+  - `pnpm run test:browser`: run the Browser tests from **all** packages,
   - `pnpm run check`: run the formatter, linter, and sort imports for **all** packages, and fails if any modifications
   - `pnpm run check --write`: run the formatter, linter, imports sorting for **all** packages, and write modifications
 
@@ -112,7 +116,7 @@ docker run --rm -it -e DOCS_DIR='/docs' -v ${PWD}:/docs  oskarstark/doctor-rst -
 ```shell
 $ git checkout 2.x && \
   git fetch upstream && \
-  git rebase upstream/2.x && \
+  git reset --hard upstream/2.x && \
   git push origin 2.x
 ```
 

bin/test_package.sh

@@ -9,8 +9,8 @@ PROJECT_DIR=$(dirname "$SCRIPT_DIR")
 # Flag to track if any test fails
 all_tests_passed=true
 
-# Check if we have at least one argument
-if [ $# -eq 0 ]
+# Check if we have enough arguments
+if [ $# -eq 2 ]
   then
     echo "No arguments supplied, please provide the package's path."
 fi
@@ -22,46 +22,58 @@ if ! command -v jq &> /dev/null; then
 fi
 
 runTestSuite() {
-    echo -e "Running tests for $workspace...\n"
-    pnpm exec vitest --run || { all_tests_passed=false; }
+    local testProject="$1"
+    if [ "$testProject" != "unit" ] && [ "$testProject" != "browser" ]; then
+        echo "Unknown test project: $testProject. Please use 'unit' or 'browser'."
+        exit 1
+    fi
+
+    echo -e "🧪  Running $testProject tests for $workspace...\n"
+    pnpm exec vitest --run --project "$testProject" || { all_tests_passed=false; }
 }
 
 processWorkspace() {
     local location="$1"
+    local testProject="$2"
 
     if [ ! -d "$location" ]; then
-        echo "No directory found at $location"
+        echo "⚠ No directory found at $location"
         return
     fi
 
     package_json_path="$location/package.json"
     if [ ! -f "$package_json_path" ]; then
-        echo "No package.json found at $package_json_path"
+        echo "⚠ No package.json found at $package_json_path"
         return
     fi
 
     workspace=$(jq -r '.name' "$package_json_path")
     if [ -z "$workspace" ]; then
-        echo "No name found in package.json at $package_json_path"
+        echo "⚠ No name found in package.json at $package_json_path"
         return
     fi
 
-    echo -e "Processing workspace $workspace at location $location...\n"
+    echo -e "⏳  Processing workspace $workspace at location $location...\n"
 
-    echo "Checking '$package_json_path' for peerDependencies and importmap dependencies to have the same version"
+    echo "⚙️  Checking '$package_json_path' for peerDependencies and importmap dependencies to have the same version"
     deps=$(jq -r '.peerDependencies | keys[]' "$package_json_path")
     for library in $deps; do
         version=$(jq -r ".peerDependencies.\"$library\"" "$package_json_path")
-        importmap_version=$(jq -r ".symfony.importmap.\"$library\"" "$package_json_path")
+        importmap_version=$(jq -r ".symfony.importmap.\"$library\" | if type == \"string\" then . else .version end" "$package_json_path")
+
+        if [ "$importmap_version" == null ]; then
+            echo " ⚠  No importmap version found for $library in $package_json_path, skipping..."
+            continue
+        fi
 
         if [ "$version" != "$importmap_version" ]; then
-            echo " -> Version mismatch for $library: $version (peerDependencies) vs $importmap_version (importmap)"
-            echo " -> You need to match the version of the \"peerDependency\" with the version in the \"importmap\""
-            exit
+            echo " ⚠  Version mismatch for $library: $version (peerDependencies) vs $importmap_version (importmap)"
+            echo " ⚠  You need to match the version of the \"peerDependency\" with the version in the \"importmap\""
+            exit 1
         fi
     done
 
-    echo "Checking '$package_json_path' for peerDependencies with multiple versions defined"
+    echo "⚙️  Checking '$package_json_path' for peerDependencies with multiple versions defined"
     deps_with_multiple_versions=$(jq -r '.peerDependencies | to_entries[] | select(.value | contains("||")) | .key' "$package_json_path")
 
     if [ -n "$deps_with_multiple_versions" ]; then
@@ -78,20 +90,26 @@ processWorkspace() {
                     echo -e "  - Install $library@$trimmed_version for $workspace\n"
                     pnpm add "$library@$trimmed_version" --save-peer --filter "$workspace"
 
-                    runTestSuite
+                    runTestSuite "$testProject"
                 fi
             done
         done
 
         echo " -> Reverting version changes from $package_json_path"
-        git checkout -- "$package_json_path"
+        git checkout -- "$package_json_path" "$PROJECT_DIR/pnpm-lock.yaml"
     else
         echo -e " -> No peerDependencies found with multiple versions defined\n"
-        runTestSuite
+        runTestSuite "$testProject"
     fi
 }
 
-processWorkspace "$(realpath "$PWD/$1")"
+case "$2" in
+  --unit) testProject="unit" ;;
+  --browser) testProject="browser" ;;
+  *) echo "Unknown test type: $2. Please use --unit or --browser."; exit 1 ;;
+esac
+
+processWorkspace "$(realpath "$PWD/$1")" "$testProject"
 
 # Check the flag at the end and exit with code 1 if any test failed
 if [ "$all_tests_passed" = false ]; then

package.json

@@ -8,7 +8,9 @@
     ],
     "scripts": {
         "build": "pnpm run --filter @symfony/ux-map build && pnpm run -r --aggregate-output build",
-        "test": "pnpm run -r --aggregate-output test",
+        "test": "pnpm run -r --workspace-concurrency=1 test",
+        "test:unit": "pnpm run -r test:unit",
+        "test:browser": "pnpm run -r --workspace-concurrency=1 test:browser",
         "check": "biome check",
         "ci": "biome ci"
     },
@@ -19,10 +21,10 @@
         "@types/node": "^22.6.0",
         "lightningcss": "^1.28.2",
         "pkg-types": "^2.2.0",
-        "playwright": "^1.47.0",
         "tinyglobby": "^0.2.14",
         "tsup": "^8.5.0",
-        "vitest": "^3.2.4"
+        "vitest": "^3.2.4",
+        "webdriverio": "^9.19.1"
     },
     "version": "2.27.0"
 }