test: finalizing studio-web component e2e tests

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

@@ -21,9 +21,30 @@ jobs:
           node-version: 20
       - name: Install everything
         run: npm install
-      - name: Always test with the latest browserslist db
+      #- name: Always test with the latest browserslist db
+      #  run: |
+      #    npx update-browserslist-db@latest
+      #- name: Commit browserslist db changes on dev branches
+      #  if: ${{ github.ref_type == 'branch' && ! github.ref_protected }}
+      #  run: |
+      #    if git diff --exit-code package-lock.json; then
+      #      echo "The browserslist db is up to date."
+      #    else
+      #      echo "The browserslist db is out of date."
+      #      git config --global user.email "github-actions[bot]@users.noreply.github.com"
+      #      git config --global user.name "github-actions[bot]"
+      #      git add package-lock.json
+      #      git commit -m "chore: update browserslist db"
+      #      git push
+      #    fi
+      - name: Install and run the back-end API, needed for end-to-end testing
         run: |
-          npx update-browserslist-db@latest
+          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: Ng test for studio-web
         run: |
           npx nx build web-component
@@ -56,3 +77,16 @@ 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'
+
+      - 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: Playwright for studio-web
+        run: |
+          npx playwright install --with-deps chromium
+          npx nx e2e studio-web

.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

@@ -9,12 +9,14 @@
     "@angular/localize": "^17",
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@nx/angular": "18.3.4",
     "@nx/eslint": "18.3.4",
     "@nx/eslint-plugin": "18.3.4",
     "@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",
@@ -40,10 +42,14 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^17",
     "nx": "18.3.4",
+    "nyc": "^17.1.0",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
+    "source-map-support": "^0.5.21",
     "ts-jest": "^29",
-    "tsx": "^4.7.3"
+    "ts-node": "^10.9.2",
+    "tsx": "^4.7.3",
+    "v8-to-istanbul": "^9.3.0"
   },
   "dependencies": {
     "@angular/animations": "^17",
@@ -62,6 +68,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/.gitignore

@@ -35,3 +35,4 @@ e2e/*.map
 
 # End of https://www.toptal.com/developers/gitignore/api/angular
 *~
+.nyc_output

packages/studio-web/.nycrc

@@ -0,0 +1,15 @@
+{
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "all": false,
+  "include": ["src/app/*.ts"],
+  "exclude": [
+    "**/*spec.ts",
+    "**/*config.ts",
+    "**/*lang.ts",
+    "src/@types/audio-recorder-polyfill/mpeg-encoder/index.d.ts"
+  ],
+  "reporter": ["html", "text-summary"],
+  "sourceMap": true,
+  "instrument": true,
+  "require": ["ts-node/register"]
+}

packages/studio-web/package.json

@@ -9,7 +9,10 @@
     "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",
+    "nyc": "nyc --reporter=html --reporter=text-summary playwright test ",
+    "e2e-ui": "playwright test --ui"
   },
   "private": true,
   "singleFileBundleVersion": "1.5.2",

packages/studio-web/playwright.config.ts

@@ -12,64 +12,78 @@ import { defineConfig, devices } from "@playwright/test";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  timeout: 2 * 60 * 1000,
   testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 3,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: "http://localhost:4200",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
     testIdAttribute: "data-test-id",
+    video: "retain-on-failure",
   },
 
   /* Configure projects for major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
+  /* Only test chromium on CI */
+  projects: process.env.CI
+    ? [
+        {
+          name: "chromium",
+          use: { ...devices["Desktop Chrome"] },
+        },
+        {
+          name: "Mobile Chrome",
+          use: { ...devices["Pixel 5"] },
+        },
+      ]
+    : [
+        {
+          name: "chromium",
+          use: { ...devices["Desktop Chrome"] },
+        },
 
+        {
+          name: "firefox",
+          use: { ...devices["Desktop Firefox"] },
+        },
+        /* We do not have full webkit support
     {
       name: "webkit",
       use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+        {
+          name: "Mobile Chrome",
+          use: { ...devices["Pixel 5"] },
+        },
+        /*{
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
+    },
 
     /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+      ],
 
   /* Run your local dev server before starting the tests */
   // webServer: {

packages/studio-web/src/app/shared/download/download.component.html

@@ -1,13 +1,17 @@
 <div class="download__buttons">
   <mat-form-field class="d-lg-block" appearance="fill">
     <mat-label i18n="Output format">Output Format</mat-label>
-    <mat-select [(ngModel)]="selectedOutputFormat">
+    <mat-select
+      data-test-id="download-formats"
+      [(ngModel)]="selectedOutputFormat"
+    >
       <mat-option *ngFor="let format of outputFormats" [value]="format.value">
         {{ format.display }}
       </mat-option>
     </mat-select>
   </mat-form-field>
   <button
+    data-test-id="download-ras"
     class="download"
     color="primary"
     (click)="download()"