fix: pr review feedback 2

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

@@ -21,22 +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: 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: Ng test for studio-web
         run: |
           npx nx build web-component

package.json

@@ -9,7 +9,6 @@
     "@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",
@@ -42,14 +41,11 @@
     "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",
     "ts-node": "^10.9.2",
-    "tsx": "^4.7.3",
-    "v8-to-istanbul": "^9.3.0"
+    "tsx": "^4.7.3"
   },
   "dependencies": {
     "@angular/animations": "^17",
@@ -68,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/.gitignore

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

packages/studio-web/package.json

@@ -11,10 +11,12 @@
     "test:ng": "ng test",
     "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",
-  "singleFileBundleTimestamp": "2024-11-18+11-19-49"
+  "singleFileBundleTimestamp": "2024-11-18+11-19-49",
+  "dependencies": {
+    "readalong-studio": "file:"
+  }
 }

packages/studio-web/playwright.config.ts

@@ -12,7 +12,7 @@ import { defineConfig, devices } from "@playwright/test";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  timeout: 2 * 60 * 1000,
+  timeout: (process.env.CI ? 25 : 50) * 1000,
   testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -59,20 +59,21 @@ export default defineConfig({
           use: { ...devices["Desktop Firefox"] },
         },
         /* We do not have full webkit support
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
+        {
+          name: "webkit",
+          use: { ...devices["Desktop Safari"] },
+        },
 
-    /* Test against mobile viewports. */
+        /* Test against mobile viewports. */
         {
           name: "Mobile Chrome",
           use: { ...devices["Pixel 5"] },
         },
-        /*{
-      name: "Mobile Safari",
-      use: { ...devices["iPhone 12"] },
-    },
+        /*
+        {
+          name: "Mobile Safari",
+          use: { ...devices["iPhone 12"] },
+        },
 
     /* Test against branded browsers. */
         // {

packages/studio-web/tests/studio-web/download-srt.spec.ts

@@ -19,7 +19,7 @@ test("should Download SRT ( file format)", async ({ page, browserName }) => {
     download2.suggestedFilename(),
     "should have the expected filename",
   ).toMatch(/readalong\.srt/);
-  /* TODO: figure out spacing issue*/
+
   const filePath = await download2.path();
   const fileData = fs.readFileSync(filePath, { encoding: "utf8", flag: "r" });
   const refFileData = fs.readFileSync(`${testAssetsPath}/ref/readalong.srt`, {

packages/studio-web/tests/test-commands.ts

@@ -56,7 +56,7 @@ export const testMakeAReadAlong = async (page: Page) => {
     await page
       .getByTestId("ra-subheader")
       .fill("by me", { force: true, timeout: 0 });
-
+    await expect(page.getByTestId("ra-subheader")).toHaveValue("by me");
     //add translations
 
     await page
@@ -73,15 +73,15 @@ export const testMakeAReadAlong = async (page: Page) => {
       .getByRole("button")
       .click({ force: true, timeout: 0 });
     //update translations
-
+    await expect(page.locator("#t0b0d0p0s0translation")).toBeEditable();
     await page
       .locator("#t0b0d0p0s0translation")
       .fill("Ceci est un test.", { force: true, timeout: 0 });
-
+    await expect(page.locator("#t0b0d0p0s1translation")).toBeEditable();
     await page
       .locator("#t0b0d0p0s1translation")
       .fill("Phrase.", { force: true, timeout: 0 });
-
+    await expect(page.locator("#t0b0d0p1s0translation")).toBeEditable();
     await page
       .locator("#t0b0d0p1s0translation")
       .fill("Paragraphe.", { force: true, timeout: 0 });
@@ -99,6 +99,9 @@ export const testMakeAReadAlong = async (page: Page) => {
     page.locator("#fileElem--t0b0d1").dispatchEvent("click");
     fileChooser = await fileChooserPromise;
     fileChooser.setFiles(testAssetsPath + "page2.png");
+    await expect(async () => {
+      await expect(page.locator("div.toast-message")).not.toBeVisible();
+    }).toPass();
   });
 };
 
@@ -109,7 +112,6 @@ export const defaultBeforeEach = async (page: Page, browserName: string) => {
       browserName === "webkit",
       "The aligner feature is not stable for webkit",
     );
-    //await page.coverage.startJSCoverage();
 
     await page.goto("/", { waitUntil: "load" });
     await expect(
@@ -118,15 +120,3 @@ export const defaultBeforeEach = async (page: Page, browserName: string) => {
     ).not.toBeDisabled();
   });
 };
-
-/*test.afterEach(async ({ page }) => {
-    const coverage = await page.coverage.stopJSCoverage();
-    for (const entry of coverage) {
-      if (entry.source) {
-        const converter = v8toIstanbul("", 0, { source: entry.source });
-        await converter.load();
-        converter.applyCoverage(entry.functions);
-        console.log(JSON.stringify(converter.toIstanbul()));
-      }
-    }
-  });*/