test: modified editor test to pass for mobile screen

ReadAlongs · Jan 6, 2025 · 5cd5d9c · 5cd5d9c
1 parent 5794e13
commit 5cd5d9c
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 28 deletions.
diff --git a/packages/studio-web/src/app/app.component.html b/packages/studio-web/src/app/app.component.html
@@ -3,7 +3,12 @@
     ReadAlong Studio
   </span>
   <span class="nav-spacer"></span>
-  <button class="d-md-none" mat-button [matMenuTriggerFor]="menu">
+  <button
+    class="d-md-none"
+    data-test-id="menu-toggle"
+    mat-button
+    [matMenuTriggerFor]="menu"
+  >
     <mat-icon>menu</mat-icon>
   </button>
   <mat-menu #menu="matMenu">

diff --git a/packages/studio-web/tests/editor/check-page.spec.ts b/packages/studio-web/tests/editor/check-page.spec.ts
@@ -1,9 +1,13 @@
 import { test, expect } from "@playwright/test";
 import { testAssetsPath, disablePlausible } from "../test-commands";
 test.describe.configure({ mode: "parallel" });
-test("should check editor UI", async ({ page }) => {
+test("should check editor UI", async ({ page, isMobile }) => {
   await page.goto("/", { waitUntil: "load" });
+
   await disablePlausible(page);
+  if (isMobile) {
+    await page.getByTestId("menu-toggle").click();
+  }
   await page.getByRole("button", { name: /Editor/ }).click();
   await expect(
     page.getByRole("button", { name: "Take the tour!" }),

diff --git a/packages/studio-web/tests/editor/edit-images.spec.ts b/packages/studio-web/tests/editor/edit-images.spec.ts
@@ -2,9 +2,9 @@ import { test, expect } from "@playwright/test";
 import { testAssetsPath, editorDefaultBeforeEach } from "../test-commands";
 test.describe.configure({ mode: "parallel" });
 
-test("should edit images (editor)", async ({ page }) => {
+test("should edit images (editor)", async ({ page, isMobile }) => {
   await expect(async () => {
-    await editorDefaultBeforeEach(page);
+    await editorDefaultBeforeEach(page, isMobile);
   }).toPass();
   await page.locator("#updateRAS").waitFor({ state: "visible" });
   await expect(

diff --git a/packages/studio-web/tests/editor/edit-translations.spec.ts b/packages/studio-web/tests/editor/edit-translations.spec.ts
@@ -1,10 +1,10 @@
 import { test, expect } from "@playwright/test";
-import { testAssetsPath, editorDefaultBeforeEach } from "../test-commands";
+import { editorDefaultBeforeEach } from "../test-commands";
 test.describe.configure({ mode: "parallel" });
 
-test("should edit translations (editor)", async ({ page }) => {
+test("should edit translations (editor)", async ({ page, isMobile }) => {
   await expect(async () => {
-    await editorDefaultBeforeEach(page);
+    await editorDefaultBeforeEach(page, isMobile);
   }).toPass();
   await page.locator("#t0b0d0p0s0translation").waitFor({ state: "visible" });
   //edit first sentence translation

diff --git a/packages/studio-web/tests/editor/tour-editor.spec.ts b/packages/studio-web/tests/editor/tour-editor.spec.ts
@@ -1,9 +1,12 @@
 import { test, expect } from "@playwright/test";
-import { testAssetsPath, disablePlausible } from "../test-commands";
+import { disablePlausible } from "../test-commands";
 test.describe.configure({ mode: "parallel" });
-test("should do tour", async ({ page }) => {
+test("should do tour", async ({ page, isMobile }) => {
   await page.goto("/", { waitUntil: "load" });
   disablePlausible(page);
+  if (isMobile) {
+    await page.getByTestId("menu-toggle").click();
+  }
   await page.getByRole("button", { name: /Editor/ }).click();
   await expect(
     page.getByRole("button", { name: "Take the tour!" }),

diff --git a/packages/studio-web/tests/editor/use-audio-toolbar.spec.ts b/packages/studio-web/tests/editor/use-audio-toolbar.spec.ts
@@ -4,39 +4,46 @@ import fs from "fs";
 import JSZip from "jszip";
 test.describe.configure({ mode: "parallel" });
 
-test("should edit alignment and words (editor)", async ({ page }) => {
+test("should edit alignment and words (editor)", async ({ page, isMobile }) => {
   await expect(async () => {
-    await editorDefaultBeforeEach(page);
+    await editorDefaultBeforeEach(page, isMobile);
   }).toPass();
   await page.locator("#t0b0d0p0s0").waitFor({ state: "visible" });
   //first handle
   const handle = await page.getByTitle("-1.070").locator("handle").first();
   await handle.scrollIntoViewIfNeeded();
   const segment = await page.getByTitle("0.840-1.070");
   await segment.click();
+  await page.locator("#wavesurferContainer").hover();
+  if (isMobile) {
+    await page.mouse.wheel(-130, 0);
+  }
+
   const segBoxPreChange = await segment.boundingBox();
   //move the handle to the left to about 0.5
   await handle.hover();
   await page.mouse.down();
   if (segBoxPreChange)
     await page.mouse.move(segBoxPreChange.x - 100, segBoxPreChange.y);
   await page.mouse.up();
+
   //validate the new segment width
-  await expect(
-    page.getByTitle("0.506-1.070"),
-    "should have new time code",
-  ).toHaveCount(1);
-  const segBoxPostChange = await page.getByTitle("0.506-1.070").boundingBox();
+
+  const segBoxPostChange = await page
+    .locator("segment.wavesurfer-segment")
+    .first()
+    .boundingBox();
   if (segBoxPostChange && segBoxPreChange)
     expect(
       segBoxPostChange.width,
       "should be wider than the original segment",
     ).toBeGreaterThan(segBoxPreChange.width);
-  await page.getByTitle("0.506-1.070").click();
+  await page.locator("segment.wavesurfer-segment").first().click();
   await expect(
     page.getByTitle("-2.360").locator("div"),
     "should contain word `Sentence`",
   ).toContainText("Sentence");
+
   const text = await page.getByTitle("-2.360").locator("div");
   await text.scrollIntoViewIfNeeded();
   await text.click();
@@ -46,6 +53,11 @@ test("should edit alignment and words (editor)", async ({ page }) => {
     "should now contain word `Sentences`",
   ).toContainText("Sentences");
 
+  const newStartTime = await page
+    .locator("segment.wavesurfer-segment")
+    .first()
+    .evaluate((seg) => (seg as HTMLElement).title.substring(0, 4));
+
   //check web bundle output
   await page.locator("#mat-select-value-3").click();
   await page.getByRole("option", { name: "Web Bundle" }).click();
@@ -68,8 +80,11 @@ test("should edit alignment and words (editor)", async ({ page }) => {
     "readalong file should reflect new spelling",
   ).toMatch(/>Sentences</);
   await expect
-    .soft(readalongContent, "readalong file should reflect new alignment")
-    .toMatch(/time="0\.5\d+" dur="0\.5\d+"/);
+    .soft(
+      readalongContent,
+      "readalong file should reflect new alignment start time" + newStartTime,
+    )
+    .toMatch(new RegExp(`time="${newStartTime.replace(".", "\\.")}\\d+" `));
 
   //check SRT
   await page.locator("#mat-select-value-3").click();
@@ -86,8 +101,11 @@ test("should edit alignment and words (editor)", async ({ page }) => {
     /Sentences/,
   );
   await expect
-    .soft(fileData, "SRT file should reflect new alignment")
-    .toMatch(/00\,5\d+\s-->/);
+    .soft(
+      fileData,
+      "SRT file should reflect new alignment start time " + newStartTime,
+    )
+    .toMatch(new RegExp(`${newStartTime.replace(".", ",")}\\d+\\s-->`));
   //check WEBVTT
   await page.locator("#mat-select-value-3").click();
   await page.getByRole("option", { name: "WebVTT Subtitles" }).click();
@@ -100,8 +118,11 @@ test("should edit alignment and words (editor)", async ({ page }) => {
     /Sentences/,
   );
   await expect
-    .soft(fileData, "WEBVTT file should reflect new alignment")
-    .toMatch(/00\.5\d+\s-->/);
+    .soft(
+      fileData,
+      "WEBVTT file should reflect new alignment start time " + newStartTime,
+    )
+    .toMatch(new RegExp(`${newStartTime.replace(".", "\\.")}\\d+\\s-->`));
   //check PRAAT
   await page.locator("#mat-select-value-3").click();
   await page.getByRole("option", { name: "Praat TextGrid" }).click();
@@ -114,8 +135,13 @@ test("should edit alignment and words (editor)", async ({ page }) => {
     /text = "Sentences"/,
   );
   await expect
-    .soft(fileData, "PRAAT file should reflect new alignment")
-    .toMatch(/xmin = 0\.5\d+/);
+    .soft(
+      fileData,
+      "PRAAT file should reflect new alignment start time " + newStartTime,
+    )
+    .toMatch(
+      new RegExp(`xmin\\s=\\s${newStartTime.replace(".", "\\.")}\\d+\\\s`),
+    );
   //check elan
   await page.locator("#mat-select-value-3").click();
   await page.getByRole("option", { name: "Elan File" }).click();
@@ -128,6 +154,9 @@ test("should edit alignment and words (editor)", async ({ page }) => {
     /<ANNOTATION_VALUE>Sentences<\/ANNOTATION_VALUE>/,
   );
   await expect
-    .soft(fileData, "ELAN file should reflect new alignment")
-    .toMatch(/TIME_VALUE="5\d+"/);
+    .soft(
+      fileData,
+      "ELAN file should reflect new alignment start time " + newStartTime,
+    )
+    .toMatch(new RegExp(`TIME_VALUE="${newStartTime.substring(2)}\\d+" `));
 });
diff --git a/packages/studio-web/tests/test-commands.ts b/packages/studio-web/tests/test-commands.ts
@@ -146,11 +146,18 @@ export const disablePlausible = async (page: Page) => {
  * Uploads single file html (setup editor test)
  * @param page
  */
-export const editorDefaultBeforeEach = async (page: Page) => {
+export const editorDefaultBeforeEach = async (
+  page: Page,
+  isMobile: boolean,
+) => {
   test.step("upload single file html", async () => {
     await page.goto("/", { waitUntil: "load" });
     disablePlausible(page);
+    if (isMobile) {
+      await page.getByTestId("menu-toggle").click();
+    }
     await page.getByRole("button", { name: /Editor/ }).click();
+
     await page.locator("#updateRAS").waitFor({ state: "visible" });
     let fileChooserPromise = page.waitForEvent("filechooser");
     await page.locator("#updateRAS").click();