From 5cd5d9c0c37228fc9ee6f608cd577ab7e903736c Mon Sep 17 00:00:00 2001 From: Delasie Torkornoo Date: Mon, 6 Jan 2025 15:52:07 -0500 Subject: [PATCH] test: modified editor test to pass for mobile screen --- .../studio-web/src/app/app.component.html | 7 +- .../tests/editor/check-page.spec.ts | 6 +- .../tests/editor/edit-images.spec.ts | 4 +- .../tests/editor/edit-translations.spec.ts | 6 +- .../tests/editor/tour-editor.spec.ts | 7 +- .../tests/editor/use-audio-toolbar.spec.ts | 65 ++++++++++++++----- packages/studio-web/tests/test-commands.ts | 9 ++- 7 files changed, 76 insertions(+), 28 deletions(-) diff --git a/packages/studio-web/src/app/app.component.html b/packages/studio-web/src/app/app.component.html index 929ae014..50acaaf6 100644 --- a/packages/studio-web/src/app/app.component.html +++ b/packages/studio-web/src/app/app.component.html @@ -3,7 +3,12 @@ ReadAlong Studio - diff --git a/packages/studio-web/tests/editor/check-page.spec.ts b/packages/studio-web/tests/editor/check-page.spec.ts index ad2797bb..359d33ab 100644 --- 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 index 05b369f6..81f7dacf 100644 --- 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 index 2e506ea1..f6a7dd33 100644 --- 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 index 71e716d3..597dcb0b 100644 --- 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 index 3fd7aa9e..dfddb202 100644 --- a/packages/studio-web/tests/editor/use-audio-toolbar.spec.ts +++ b/packages/studio-web/tests/editor/use-audio-toolbar.spec.ts @@ -4,9 +4,9 @@ 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 @@ -14,6 +14,11 @@ test("should edit alignment and words (editor)", async ({ page }) => { 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(); @@ -21,22 +26,24 @@ test("should edit alignment and words (editor)", async ({ page }) => { 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 { /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 }) => { /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 index 7fe7a0f8..1e1de1a3 100644 --- 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();