fix: added timeout to the end of the activity

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

@@ -27,7 +27,7 @@ jobs:
         run: npm ci
       - name: Run Playwright tests
         run: |
-          npx playwright install --with-deps  firefox chromium webkit
+          npx playwright install --with-deps firefox chromium webkit
           npx ng e2e --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
       - name: Upload blob report to GitHub Actions Artifacts
         if: ${{ !cancelled() }}

e2e/player.spec.ts

@@ -40,7 +40,35 @@ test.describe('test player interface', () => {
       page.getByText('Audio generated'),
       'should display notice about audio'
     ).toBeVisible();
-    await expect(page.getByTitle('Play'), 'should have play').toBeVisible();
+    await expect(
+      page.getByText('transcribe test'),
+      'should have title'
+    ).toBeVisible();
+    await expect(
+      page.getByText('Write what you hear'),
+      'should have instructions'
+    ).toBeVisible();
+    await expect(
+      page.getByTitle('Play'),
+      'should have play button'
+    ).toBeVisible();
+    await expect(
+      page.getByTitle('Pause'),
+      'should have play button'
+    ).toBeVisible();
+    await expect(
+      page.getByTitle('Stop'),
+      'should have play button'
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('special_chars'),
+      'should display special characters'
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('special_chars').getByRole('button'),
+      'should have 12 special characters'
+    ).toHaveCount(16);
+
     await page.getByTitle('Play').click();
     await expect
       .soft(
@@ -76,7 +104,6 @@ test.describe('test player interface', () => {
       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(
@@ -105,8 +132,9 @@ test.describe('test player interface', () => {
     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(
+    const letters = await page.locator('span.letter.feedback').all();
+    for (const letter of letters)
+      expect(letter, 'input is correct').toHaveClass(
         /btn-outline-(success|warning|danger)/
       );
     await expect(

playwright.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env['CI'] ? 4 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env['CI'] ? [['blob', { open: 'never' }]] : '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('/')`. */

src/app/transcribing-activity/transcribing-activity.component.html

@@ -169,7 +169,7 @@ <h1 class="title text-center">
           </md-outlined-button>
         </span>
       </div>
-      <div class="col px-5">
+      <div class="col px-5" data-test-id="special_chars">
         @for (char of special_chars; track $index) {
         <md-outlined-button (click)="insertAlphabet(char)">
           {{ char }}

src/app/transcribing-activity/transcribing-activity.component.scss

@@ -1,12 +1,11 @@
-//@use "../app.bootstrap.base.scss";
-
 :host {}
 
 #userInput {
   display: block;
   min-height: 20vh;
 }
 
+/* bootstrap components */
 .container {
   --tp-gutter-x: 1.5rem;
   --tp-gutter-y: 0;
@@ -23,9 +22,6 @@
   box-sizing: border-box;
 }
 
-
-
-
 .row {
   --tp-gutter-x: 1.5rem;
   --tp-gutter-y: 0;
@@ -217,6 +213,7 @@
   --tp-gradient: none;
 }
 
+/** end of bootstrap */
 #startActivity {
   height: 2em;
   --_label-text-line-height: 1.9em;

src/app/transcribing-activity/transcribing-activity.component.ts

@@ -222,7 +222,7 @@ export class TranscribingActivityComponent implements OnInit, OnChanges {
   }
   synthesizeNext() {
     if (this.completed >= this.total) {
-      this.activityCompleted();
+      window.setTimeout(() => this.activityCompleted(), 3000);
       return;
     }
     if (this.current_words.length) {