feat: setup of end-to-end test

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

@@ -0,0 +1,71 @@
+name: Tests
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+on:
+  - push
+  - workflow_call
+jobs:
+  e2e-tests:
+    name: End-To-End test-suites
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3]
+        shardTotal: [3]
+    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: Run Playwright tests
+        run: |
+          npx playwright install --with-deps chromium
+          npx ng e2e --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: [e2e-tests]
+    name: "Merge playwright reports from app end-to-end tests"
+    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 a single HTML Report
+        run: npx playwright merge-reports --reporter=html,github ./all-blob-reports
+
+      - name: Upload single HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 5

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
       #    npm run test
       - name: Build
         run: |
-          npm run-script build
+          npx ng build --base-href ./
       - name: Deploy 🚀
         uses: JamesIves/[email protected]
         with:

README.md

@@ -1,4 +1,5 @@
-# TranscriptionPlaygroundForWsb
+# Transcription Playground For WSB
+[Visit Preview](https://everyvoicetts.github.io/transcription-playground-for-wsb/)
 
 This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.1.
 
@@ -7,24 +8,11 @@ This project was generated using [Angular CLI](https://github.com/angular/angula
 To start a local development server, run:
 
 ```bash
-ng serve
+ng serve --port 5100
 ```
 
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+Once the server is running, open your browser and navigate to `http://localhost:5100/`. The application will automatically reload whenever you modify any of the source files.
 
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
 
 ## Building
 
@@ -44,16 +32,30 @@ To execute unit tests with the [Karma](https://karma-runner.github.io) test runn
 ng test
 ```
 
-## Running end-to-end tests
+## Running end-to-end tests 
 
 For end-to-end (e2e) testing, run:
 
 ```bash
 ng e2e
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-## Additional Resources
+
+### Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
+#### Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```

e2e/creator.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('test creator interface', () => {
+  test('check UI', async ({ page }) => {
+    await page.goto('/create');
+    await expect(
+      page.getByTestId('config-file-importer'),
+      'should have config loader '
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('link', { name: 'Create' }),
+      'should have creator link'
+    ).toBeVisible();
+    await expect(
+      page.getByRole('link', { name: 'Play' }),
+      'should have creator link'
+    ).toBeVisible();
+  });
+});

e2e/fixtures/data-fixture.ts

@@ -0,0 +1,40 @@
+import { Page } from 'playwright/test';
+
+export const mockEveryVoiceAPI = async (page: Page) => {
+  await page.route('https://mock-api.dev/gradio_api/info', async (route) => {
+    await route.fulfill({ contentType: 'application/json', json: {} });
+  });
+  await page.route(
+    'https://mock-api.dev/gradio_api/queue/join',
+    async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        json: { event_id: 'abcd1234' },
+      });
+    }
+  );
+  await page.route(
+    'https://mock-api.dev/gradio_api/queue/data**',
+    async (route) => {
+      await route.fulfill({
+        contentType: 'application/json',
+        body: `data: {"msg":"estimation","event_id":"abcd1234","rank":0,"queue_size":1,"rank_eta":0.8395884182988381}
+
+data: {"msg":"process_starts","event_id":"abcd1234","eta":0.8395884182988381}
+
+data: {"msg":"process_completed","event_id":"abcd1234","output":{"data":[{"path":"/tmp/gradio/abcd1234/audio.mp3","url":"https://mock-api.dev/gradio_api/file=/tmp/gradio/abcd1234/audio.mp3","size":null,"orig_name":"audio.mp3","mime_type":null,"is_stream":false,"meta":{"_type":"gradio.FileData"}}],"is_generating":false,"duration":0.38480591773986816,"average_duration":0.7159850692749024,"render_config":null,"changed_state_ids":[]},"success":true,"title":null}
+
+data: {"msg":"close_stream","event_id":null}`,
+      });
+    }
+  );
+  await page.route(
+    'https://mock-api.dev/gradio_api/file=/tmp/gradio/abcd1234/audio.mp3',
+    async (route) => {
+      await route.fulfill({
+        contentType: 'audio/mpeg',
+        path: 'e2e/fixtures/audio.mp3',
+      });
+    }
+  );
+};

e2e/fixtures/test-activity.json

@@ -0,0 +1,15 @@
+{
+  "configuration": {
+    "title": "transcribe test",
+    "description": "",
+    "text_instructions": "",
+    "limit": 10,
+    "randomize": false,
+    "speaker": "penac",
+    "lang": "str",
+    "api": "https://mock-api.dev/",
+    "validator_level": "accent_insensitive",
+    "duration_control": 1
+  },
+  "data": "W3sib3J0aG9ncmFwaHkiOiJYzLFFWMyxRSDDgUzhuLQgyLtFyLtFTlNJRVfMsSJ9LHsib3J0aG9ncmFwaHkiOiJQRUwgU0VLIMOBTkUgVEXhuYggU0UgU8OBIMSGReG5iCJ9LHsib3J0aG9ncmFwaHkiOiJT4oKtRUxF4oKtRSDEhk9YzLFF4bmIIFnIullFUSJ9XQ=="
+}

e2e/fixtures/test-config.json

@@ -0,0 +1,12 @@
+{
+  "title": "transcribe test",
+  "description": "",
+  "text_instructions": "",
+  "limit": 10,
+  "randomize": true,
+  "speaker": "penac",
+  "lang": "str",
+  "api": "https://mock-api.dev/",
+  "validator_level": "accent_insensitive",
+  "duration_control": 1
+}

e2e/fixtures/test-data.json

@@ -0,0 +1,5 @@
+[
+  { "orthography": "X̱EX̱E ÁLḴ ȻEȻENSIEW̱" },
+  { "orthography": "PEL SEK ÁNE TEṈ SE SÁ ĆEṈ" },
+  { "orthography": "S₭ELE₭E ĆOX̱EṈ YȺYEQ" }
+]

e2e/player.spec.ts

@@ -0,0 +1,117 @@
+import { test, expect } from '@playwright/test';
+import { mockEveryVoiceAPI } from './fixtures/data-fixture';
+
+test.describe('test player interface', () => {
+  test('check UI', async ({ page }) => {
+    await page.goto('/');
+    await expect(
+      page.getByTestId('activity_loader_input'),
+      'should have activity loader '
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('link', { name: 'Create' }),
+      'should have creator link'
+    ).toBeVisible();
+    await expect(
+      page.getByRole('link', { name: 'Play' }),
+      'should have creator link'
+    ).toBeVisible();
+  });
+  test('play activity', async ({ page }) => {
+    await page.goto('/');
+    mockEveryVoiceAPI(page);
+
+    await page.getByTestId('activity_loader_input').click();
+    await page
+      .getByTestId('activity_loader_input')
+      .setInputFiles('e2e/fixtures/test-activity.json');
+    await expect(
+      page.getByText('API:online'),
+      'should detect API status'
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('start_activity'),
+      'should have start button'
+    ).toBeVisible();
+    await page.getByTestId('start_activity').click({ force: true });
+    //Give the correct answer and check the results
+    await expect(
+      page.getByText('Audio generated'),
+      'should display notice about audio'
+    ).toBeVisible();
+    await expect(page.getByTitle('Play'), 'should have play').toBeVisible();
+    await page.getByTitle('Play').click();
+    await expect
+      .soft(
+        page.getByTitle('validate'),
+        'validation button should not be enabled'
+      )
+      .toHaveAttribute('disabled');
+    await page.getByLabel('Transcript').fill('X̱EX̱E ÁLḴ ȻEȻENSIEW̱');
+    await page.getByTitle('Play').click();
+    await expect
+      .soft(page.getByTitle('validate'), 'validation button should be enabled')
+      .toBeEnabled();
+    await expect(
+      page.getByText('Next'),
+      'next button should not be visible'
+    ).not.toBeVisible();
+    await page.getByTitle('validate').click({ force: true });
+    await expect(
+      page.getByText('Next'),
+      'next button should be visible'
+    ).toBeVisible();
+    for (const letter of await page.locator('span.letter.feedback').all())
+      await expect(letter, 'input is correct').toHaveClass(
+        /btn-outline-success/
+      );
+
+    await expect(
+      page.getByText('Completed'),
+      'Completed list should be visible'
+    ).toBeVisible();
+    const completedList = await page.getByTestId('completed_list');
+    await expect(
+      completedList.locator('li').first().locator('span.status'),
+      'expect first completed item to give positive feedback'
+    ).toHaveClass(/success/);
+
+    //test ASCII input
+    await page.getByTestId('next_item').click();
+    await expect(
+      page.getByText('Audio generated').first(),
+      'should display notice about audio'
+    ).toBeVisible();
+    //PEL SEK ÁNE TEṈ SE SÁ ĆEṈ
+    await page.getByLabel('Transcript').fill('PEL SEK ANE TEṈ SE SA CEN');
+    await page.getByTitle('Play').click();
+    await page.getByTitle('validate').click({ force: true });
+    for (const letter of await page.locator('span.letter.feedback').all())
+      await expect(letter, 'input is correct').toHaveClass(
+        /btn-outline-(success|warning)/
+      );
+    await expect(
+      completedList.locator('li').nth(1).locator('span.status'),
+      'expect first completed item to give positive feedback'
+    ).toHaveClass(/success/);
+    //test incorrect input
+    await page.getByTestId('next_item').click();
+    await expect(
+      page.getByText('Audio generated').first(),
+      'should display notice about audio'
+    ).toBeVisible();
+    //S₭ELE₭E ĆOX̱EṈ YȺYEQ
+    await page.getByLabel('Transcript').fill('PEL SEK ANE TEṈ SE SA CEṈ');
+    await page.getByTitle('Play').click();
+    await page.getByTitle('validate').click({ force: true });
+    for (const letter of await page.locator('span.letter.feedback').all())
+      await expect(letter, 'input is correct').toHaveClass(
+        /btn-outline-(success|warning|danger)/
+      );
+    await expect(
+      completedList.locator('li').last().locator('span.status'),
+      'expect first completed item to give positive feedback'
+    ).toHaveClass(/danger/);
+  });
+});

playwright.config.ts

@@ -24,10 +24,11 @@ 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: process.env['PLAYWRIGHT_TEST_BASE_URL'] ?? 'http://localhost:4200',
+    baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] ?? 'http://localhost:5100',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    testIdAttribute: 'data-test-id',
   },
 
   /* Configure projects for major browsers */
@@ -62,9 +63,9 @@ export default defineConfig({
     //   name: 'Microsoft Edge',
     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
     // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
   ],
 });