feat: stage 1 end to end test for studio interface

Author: deltork

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

@@ -21,26 +21,40 @@ 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
-      - 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
+          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
           npx nx test:once studio-web
+      - name: Playwright for studio-web
+        run: |
+          npx nx build web-compnent
+          npx nx nx run-many --targets=serve-test-data,serve-web-api,serve,serve-fr,serve-es --projects=web-component,studio-web --parallel 6
+          npx nx e2e studio-web
+
       - name: Cypress run for web-component
         uses: cypress-io/github-action@v6
         with:

.gitignore

@@ -8,3 +8,5 @@ www
 .python-version
 *~
 **/version.ts
+packages/studio-web/playwright-report
+**/test-results

package-lock.json

@@ -9,6 +9,7 @@
     "@angular/localize": "^17",
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
+    "@playwright/test": "^1.36.0",
     "@nx/angular": "18.3.4",
     "@nx/eslint": "18.3.4",
     "@nx/eslint-plugin": "18.3.4",

package.json

@@ -9,7 +9,9 @@
     "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",

packages/studio-web/package.json

@@ -12,6 +12,7 @@ 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,
@@ -26,7 +27,7 @@ export default defineConfig({
   /* 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",

packages/studio-web/playwright.config.ts

@@ -80,8 +80,12 @@
       },
       "defaultConfiguration": "production"
     },
+    "update-browserslist": {
+      "command": "npx update-browserslist-db@latest"
+    },
     "serve": {
       "executor": "@angular-builders/custom-webpack:dev-server",
+      "dependsOn": ["update-browserslist"],
       "configurations": {
         "production-en": {
           "buildTarget": "studio-web:build:production,en"

packages/studio-web/project.json

@@ -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()"