Create E2E app & run it in CI

Author: Kocal

.github/workflows/browser-tests.yml

@@ -20,11 +20,22 @@ on:
             - '.github/workflows/app-tests.yaml'
             - '.github/workflows/unit-tests.yaml'
 
+concurrency:
+    group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+    cancel-in-progress: true
+
 jobs:
-    js:
+    test:
         runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                symfony: ['6.4', '7.3']
+        env:
+            SYMFONY_REQUIRE: '${{ matrix.symfony }}.*'
         steps:
             -   uses: actions/checkout@v4
+
             -   run: npm i -g corepack && corepack enable
             -   uses: actions/setup-node@v4
                 with:
@@ -33,21 +44,76 @@ jobs:
                     cache-dependency-path: |
                         pnpm-lock.yaml
                         package.json
-                        src/**/package.json
-            -   run: pnpm install --frozen-lockfile
 
-            -   name: Install custom browsers
-                run: node ./bin/get_browsers.mjs
+            - name: Install root JS dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Install custom browsers
+              run: node ./bin/get_browsers.mjs
+
+            - name: Install browsers with Playwright
+              run: pnpm exec playwright install firefox ffmpeg
+
+            - uses: shivammathur/setup-php@v2
+              with:
+                  php-version: 8.2
+                  tools: symfony-cli, flex
+
+            - name: Install root PHP dependencies
+              uses: ramsey/composer-install@v3
+              with:
+                  working-directory: ${{ github.workspace }}
+
+            - name: Build root packages
+              run: php .github/build-packages.php
 
-            -   name: Install browsers with Playwright
-                run: pnpm exec playwright install firefox ffmpeg
+            - name: Start Docker containers
+              run: docker compose up -d --build
+              working-directory: test_apps/e2e-app
 
-            # TODO: Install the E2E app + run webserver
-            -   run: pnpm run test:browser
+            - name: Configure E2E app
+              run: |
+                  echo 'APP_ENV=prod' >> .env.local
+                  echo 'APP_DEBUG=0' >> .env.local
+                  echo 'APP_SECRET=df4c071596e64cc75a349456f2887ae2419ae650' >> .env.local
+              working-directory: test_apps/e2e-app
+
+            - name: Install E2E PHP dependencies
+              uses: ramsey/composer-install@v3
+              with:
+                  working-directory: test_apps/e2e-app
+                  dependency-versions: highest
+                  composer-options: --no-dev
+                  custom-cache-suffix: symfony-${{ matrix.symfony }}
+
+            - name: Prepare E2E app
+              run: |
+                  symfony composer dump-autoload --classmap-authoritative --no-dev
+                  symfony composer dump-env
+                  symfony console asset-map:compile
+                  symfony console ux:icons:warm-cache
+              working-directory: test_apps/e2e-app
+
+            - name: Start E2E app
+              run: symfony serve --daemon
+              working-directory: test_apps/e2e-app
+
+            - name: Run browser tests
+              run: pnpm run test:browser
+              id: browser-tests
+
+            - uses: actions/upload-artifact@v4
+              if: ${{ always() && steps.browser-tests.conclusion == 'failure' }}
+              with:
+                  name: Playwright report and output (${{ matrix.symfony }})
+                  path: |
+                      src/**/assets/.playwright-report/
+                      src/**/assets/.playwright-output/
+                  retention-days: 7
 
             - uses: actions/upload-artifact@v4
-              if: ${{ !cancelled() }}
+              if: ${{ always() && steps.browser-tests.conclusion == 'failure' }}
               with:
-                  name: playwright-report
-                  path: .playwright-report/
+                  name: Symfony logs (${{ matrix.symfony }})
+                  path: test_apps/e2e-app/var/log/
                   retention-days: 7

.github/workflows/code-quality.yaml

@@ -24,12 +24,16 @@ jobs:
         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'
-            - run: pnpm install --frozen-lockfile
+
+            - name: Install root JS dependencies
+              run: pnpm install --frozen-lockfile
+
             - run: pnpm run ci
 
     phpstan:

.github/workflows/dist-files-unbuilt.yaml

@@ -21,6 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
       - run: npm i -g corepack && corepack enable
       - uses: actions/setup-node@v4
         with:
@@ -29,7 +30,12 @@ jobs:
           cache-dependency-path: |
             pnpm-lock.yaml
             **/package.json
-      - run: pnpm install --frozen-lockfile && pnpm run build
+
+      - name: Install root JS dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
 
       - name: Check if JS dist files are current
         run: |

.github/workflows/release-on-npm.yaml

@@ -30,7 +30,8 @@ jobs:
                 pnpm-lock.yaml
                 package.json
                 src/**/package.json
-          - run: pnpm install --frozen-lockfile
+          - name: Install root JS dependencies
+            run: pnpm install --frozen-lockfile
 
           - name: Update version of JS packages
             run: pnpm version ${{ env.VERSION }} --no-git-tag-version --workspaces --no-workspaces-update

.github/workflows/unit-tests.yaml

@@ -145,6 +145,7 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
+
             - run: npm i -g corepack && corepack enable
             - uses: actions/setup-node@v4
               with:
@@ -154,5 +155,8 @@ jobs:
                   pnpm-lock.yaml
                   package.json
                   src/**/package.json
-            - run: pnpm install --frozen-lockfile
+
+            - name: Install root JS dependencies
+              run: pnpm install --frozen-lockfile
+
             - run: pnpm run test:unit

.gitignore

@@ -8,5 +8,5 @@ node_modules
 /vendor
 
 /browsers
-.last-run.json
 .playwright-report/
+.playwright-output/

bin/test_package.sh

@@ -40,10 +40,10 @@ fi
 runTestSuite() {
     if [ "$testType" == "unit" ]; then
       echo -e "🧪  Running unit tests for $workspace...\n"
-      pnpm exec vitest --run "${args[@]}" || { all_tests_passed=false; }
+      (cd "$location"; pnpm exec vitest --run "${args[@]}") || { all_tests_passed=false; }
     elif [ "$testType" == "browser" ]; then
       echo -e "🧪  Running browser tests for $workspace...\n"
-      # TODO: to implement
+      (cd "$location"; pnpm exec playwright test "${args[@]}") || { all_tests_passed=false; }
     fi
 }
 
@@ -99,16 +99,18 @@ processWorkspace() {
                 trimmed_version=$(echo "$version" | tr -d '[:space:]')
                 if [ -n "$trimmed_version" ]; then
                     # Install each version of the library separately
-                    echo -e "  - Install $library@$trimmed_version for $workspace\n"
-                    pnpm add "$library@$trimmed_version" --save-peer --filter "$workspace"
+                    echo -e "  - Installing $library@$trimmed_version for $workspace\n"
+                    (cd "$location" || exit 1; pnpm add "$library@$trimmed_version" --save-peer --silent)
+                    echo -e "  - Building $workspace assets...\n"
+                    (cd "$location" || exit 1; pnpm run build)
 
                     runTestSuite
                 fi
             done
         done
 
-        echo " -> Reverting version changes from $package_json_path"
-        git checkout -- "$package_json_path" "$PROJECT_DIR/pnpm-lock.yaml"
+        echo " -> Reverting changes"
+        git checkout -- "$package_json_path" "$location/dist" "$PROJECT_DIR/pnpm-lock.yaml"
     else
         echo -e " -> No peerDependencies found with multiple versions defined\n"
         runTestSuite

package.json

@@ -10,7 +10,7 @@
         "build": "pnpm run --filter @symfony/ux-map build && pnpm run -r --aggregate-output build",
         "test": "pnpm run -r --workspace-concurrency=1 test",
         "test:unit": "pnpm run -r --aggregate-output test:unit",
-        "test:browser": "pnpm exec playwright test",
+        "test:browser": "pnpm run -r --workspace-concurrency=1 test:browser",
         "check": "biome check",
         "ci": "biome ci"
     },
@@ -25,8 +25,7 @@
         "pkg-types": "^2.2.0",
         "tinyglobby": "^0.2.14",
         "tsup": "^8.5.0",
-        "vitest": "^3.2.4",
-        "webdriverio": "^9.19.1"
+        "vitest": "^3.2.4"
     },
     "version": "2.27.0"
 }

playwright.config.ts renamed to playwright.config.base.ts

@@ -1,23 +1,33 @@
-import { defineConfig, devices } from '@playwright/test';
+/**
+ * Playwright base configuration for UX packages, for browser testing.
+ *
+ * This file is not intended to be used directly, but to be used by UX packages themselves.
+ * For example:
+ * ```typescript
+ * // src/Autocomplete/assets/playwright.config.ts
+ *
+ * import baseConfig from '../../../../../../playwright.config.base';
+ *
+ * export default baseConfig;
+ * ```
+ */
 
+import { defineConfig, devices } from '@playwright/test';
 import { browsers } from './bin/get_browsers.mjs';
 
 export default defineConfig({
-    testMatch:[
-        'src/**/assets/test/browser/**/*.{test,spec}.ts',
-        'src/**/assets/test/**/*.browser.{test,spec}.ts',
-    ],
-    testIgnore: [
-        // TODO: Temporary, as the Map tests require some TypeScript code to be compiled
-        // and so fails (which is expected). To remove once the tests are real E2E.
-        /Map/
+    testMatch: [
+        '**/test/browser/**/*.{test,spec}.ts',
+        '**/test/**/*.browser.{test,spec}.ts',
     ],
 
     reporter: [
         ['list'],
         ['html', { open: process.env.CI ? 'never' : 'on-failure', outputFolder: '.playwright-report' }],
     ],
 
+    outputDir: '.playwright-output',
+
     use: {
         // Base URL to use in actions like `await page.goto('/')`.
         baseURL: 'http://localhost:9876',
@@ -27,13 +37,6 @@ export default defineConfig({
         trace: 'retain-on-failure'
     },
 
-    //webServer: {
-    //    command: 'cd test_apps/e2e-app && symfony serve',
-    //    url: 'http://localhost:9876',
-    //    reuseExistingServer: !process.env.CI,
-    //    stderr: 'pipe',
-    //},
-
     projects: [
         {
             name: 'chrome-lowest',