Dev.del/feat studio e2e (#375)

* feat: setting up playwright for studio-web component

* test: finalizing studio-web component e2e tests

* test: stories for end-to-end testing of the Studio-Web

* test: refactored tests into separate files to parallelize execution and reduce runtime

test(ci): setup of matrix sharding to deal with test timeout

* feat: upload component subscribes to Soundswallower loading event

* test(ci): optimizing ci e2e test for studio-web

---------

Co-authored-by: Eric Joanis <eric.joanis@nrc-cnrc.gc.ca>

.github/workflows/end-to-end-tests.yml

@@ -21,9 +21,7 @@ jobs:
           node-version: 20
       - name: Install everything
         run: npm install
-      - name: Always test with the latest browserslist db
-        run: |
-          npx update-browserslist-db@latest
+
       - name: Ng test for studio-web
         run: |
           npx nx build web-component
@@ -56,3 +54,81 @@ jobs:
           npx nx bundle web-component
           git status
           git diff --word-diff=porcelain --word-diff-regex=... --color | perl -ple 's/^(\x1b[^ -+]{0,6})? (.{81,})$/$1 . " " . substr($2, 0, 40) . " [... " . (length($2)-80) . " bytes ...] " . substr($2, -40)/ex'
+  playwright-tests:
+    name: Run Playwright test-suites
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install and run the back-end API, needed for end-to-end testing
+        run: |
+          git clone https://github.com/ReadAlongs/Studio
+          cd Studio
+          pip install -e . -r requirements.api.txt
+          ./run-web-api.sh &
+          # wait for the API to be up
+          curl --retry 20 --retry-delay 1 --retry-all-errors http://localhost:8000/api/v1/langs
+      - name: Install everything
+        run: npm install
+      - name: Install dependencies
+        run: npm ci
+      - name: Run studio-web in the background
+        run: |
+          npx nx build web-component
+          npx nx run-many --targets=serve,serve-fr,serve-es --projects=web-component,studio-web --parallel 6 &
+
+          # wait for the studio web to be up
+          sleep 100
+          curl --retry 20 --retry-delay 30 --retry-all-errors http://localhost:4200
+      - name: Run Playwright tests for studio-web
+        run: |
+          npx playwright install --with-deps chromium
+          npx nx e2e studio-web --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: packages/studio-web/blob-report
+          retention-days: 1
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [playwright-tests]
+    name: "Merge playwright reports"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install everything
+        run: npm install
+      - name: Install dependencies
+        run: npm ci
+      - name: Install playwright
+        run: npx playwright install
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter=html,github ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 5

.gitignore

@@ -9,3 +9,5 @@ www
 *~
 **/version.ts
 packages/web-component/wordpress-plugin/read-along-web-app-loader/js/*
+packages/studio-web/playwright-report
+**/test-results

.husky/post-install

@@ -0,0 +1 @@
+npx playwright install --with-deps firefox chromium webkit

package.json

@@ -15,6 +15,7 @@
     "@nx/jest": "18.3.4",
     "@nx/storybook": "18.3.4",
     "@nxext/stencil": "^18",
+    "@playwright/test": "^1.36.0",
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/core": "^4.15.0",
     "@stencil/sass": "^3.0.11",
@@ -43,6 +44,7 @@
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
     "ts-jest": "^29",
+    "ts-node": "^10.9.2",
     "tsx": "^4.7.3"
   },
   "dependencies": {
@@ -62,6 +64,7 @@
     "jszip": "^3.10.1",
     "mime": "^4.0.1",
     "ngx-toastr": "^18.0.0",
+    "root": "file:",
     "shepherd.js": "^11.2.0",
     "soundswallower": "^0.6.3",
     "standardized-audio-context": "^25.3.70",

packages/studio-web/package.json

@@ -9,9 +9,14 @@
     "helpme": "echo This project is part of a monorepo managed using nx. Run the targets in project.json using npx nx target studio-web at the root of the monorepo.",
     "ng": "ng",
     "test:ng": "ng test",
-    "test:once": "ng test --watch=false --browsers ChromeHeadlessCI"
+    "test:once": "ng test --watch=false --browsers ChromeHeadlessCI",
+    "e2e": "playwright test",
+    "e2e-ui": "playwright test --ui"
   },
   "private": true,
   "singleFileBundleVersion": "1.5.2",
-  "singleFileBundleTimestamp": "2024-11-18+11-19-49"
+  "singleFileBundleTimestamp": "2024-11-18+11-19-49",
+  "dependencies": {
+    "readalong-studio": "file:"
+  }
 }