-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #378 from ReadAlongs/dev.del/feat-editor-e2e
feat: extended studio-web end-to-end test suite to include tests for editor interface
- Loading branch information
Showing
14 changed files
with
592 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { test, expect } from "@playwright/test"; | ||
| import { testAssetsPath, disablePlausible } from "../test-commands"; | ||
| test.describe.configure({ mode: "parallel" }); | ||
| 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!" }), | ||
| "Tour button is visible", | ||
| ).toBeVisible(); | ||
| await expect( | ||
| page.locator("#updateRAS"), | ||
| "Choose file is visible", | ||
| ).toBeVisible(); | ||
| let fileChooserPromise = page.waitForEvent("filechooser"); | ||
| await page.locator("#updateRAS").click(); | ||
| let fileChooser = await fileChooserPromise; | ||
| fileChooser.setFiles(testAssetsPath + "sentence-paragr.html"); | ||
| //check audio bar | ||
| /** | ||
| * We are using css classes instead of test-id because this is an external plugin | ||
| * failure here means the plugin version has changed we should test impact on our app | ||
| */ | ||
|
|
||
| await expect( | ||
| page.locator("#audioToolbar"), | ||
| "audio bar should exist", | ||
| ).toHaveCount(1); | ||
| await expect( | ||
| page.locator("segment.wavesurfer-segment"), | ||
| "should seven audio segments", | ||
| ).toHaveCount(7); | ||
| await expect( | ||
| page.locator("segment.wavesurfer-segment:first-of-type > .segment-content"), | ||
| "audio segments text should be editable", | ||
| ).toHaveAttribute("contenteditable", "true"); | ||
| await expect( | ||
| page.locator( | ||
| "segment.wavesurfer-segment:first-of-type > .wavesurfer-handle", | ||
| ), | ||
| "audio segments boundaries should exist", | ||
| ).toHaveCount(2); | ||
|
|
||
| //check readalong | ||
| await expect( | ||
| page.locator("#readalongContainer"), | ||
| "should check that readalong is loading", | ||
| ).not.toBeEmpty(); | ||
| const header = page.locator( | ||
| "#readalongContainer span[slot=read-along-header]", | ||
| ); | ||
| await expect(header, "should have correct title").toContainText( | ||
| "Sentence Paragraph Page", | ||
| ); | ||
| await expect(header, "should have editable title").toHaveAttribute( | ||
| "contenteditable", | ||
| "true", | ||
| ); | ||
| const subheader = page.locator( | ||
| "#readalongContainer span[slot=read-along-subheader]", | ||
| ); | ||
| await expect(subheader, "should have correct subtitle").toContainText( | ||
| "by me", | ||
| ); | ||
| await expect(subheader, "should have editable subtitle").toHaveAttribute( | ||
| "contenteditable", | ||
| "true", | ||
| ); | ||
| await page.locator("#t0b0d0p1s0").scrollIntoViewIfNeeded(); | ||
| await expect( | ||
| page.locator("#t0b0d0p0s0").getByLabel("Remove translation"), | ||
| "should have translation for first paragraph first sentence", | ||
| ).toBeVisible(); | ||
| await expect( | ||
| page.locator("#t0b0d0p0s1").getByRole("button", { name: "add" }), | ||
| "should not have translation for first paragraph second sentence", | ||
| ).toBeVisible(); | ||
| await expect( | ||
| page.locator("#t0b0d0p1s0").getByLabel("Remove translation"), | ||
| "should have translation for second paragraph ", | ||
| ).toBeVisible(); | ||
| await expect( | ||
| page.locator("#fileElem--t0b0d0"), | ||
| "should not have image on first page", | ||
| ).toHaveCount(1); | ||
| await expect( | ||
| page.locator("#t0b0d1 img"), | ||
| "should have image on second page", | ||
| ).toHaveCount(1); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { test, expect } from "@playwright/test"; | ||
| import { testAssetsPath, editorDefaultBeforeEach } from "../test-commands"; | ||
| test.describe.configure({ mode: "parallel" }); | ||
|
|
||
| test("should edit images (editor)", async ({ page, isMobile }) => { | ||
| await expect(async () => { | ||
| await editorDefaultBeforeEach(page, isMobile); | ||
| }).toPass(); | ||
| await page.locator("#updateRAS").waitFor({ state: "visible" }); | ||
| await expect( | ||
| page.locator("#fileElem--t0b0d0"), | ||
| "should not have image on first page", | ||
| ).toHaveCount(1); | ||
| //upload a photo to page 1 | ||
| let fileChooserPromise = page.waitForEvent("filechooser"); | ||
| page.locator("#fileElem--t0b0d0").dispatchEvent("click"); | ||
|
|
||
| let fileChooser = await fileChooserPromise; | ||
| fileChooser.setFiles(testAssetsPath + "page1.png"); | ||
| await expect( | ||
| page.locator("#t0b0d0 img"), | ||
| "should have image on first page", | ||
| ).toHaveCount(1); | ||
| //delete photo page 2 and re-add | ||
| const progressBar = page.getByTestId("progress-bar"); | ||
| const progressBarBoundingBox = await progressBar.boundingBox(); | ||
|
|
||
| await progressBar.click({ | ||
| force: true, | ||
| position: { | ||
| x: progressBarBoundingBox?.x || 0, | ||
| y: progressBarBoundingBox ? progressBarBoundingBox.width * 0.9 : 0, | ||
| }, | ||
| }); | ||
| await page.locator("#t0b0d1").getByTestId("delete-button").click(); | ||
| await expect( | ||
| page.locator("#fileElem--t0b0d1"), | ||
| "should remove image on second page", | ||
| ).toHaveCount(1); | ||
| }); |
45 changes: 45 additions & 0 deletions
45
packages/studio-web/tests/editor/edit-translations.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { test, expect } from "@playwright/test"; | ||
| import { editorDefaultBeforeEach } from "../test-commands"; | ||
| test.describe.configure({ mode: "parallel" }); | ||
|
|
||
| test("should edit translations (editor)", async ({ page, isMobile }) => { | ||
| await expect(async () => { | ||
| await editorDefaultBeforeEach(page, isMobile); | ||
| }).toPass(); | ||
| await page.locator("#t0b0d0p0s0translation").waitFor({ state: "visible" }); | ||
| //edit first sentence translation | ||
| await page.locator("#t0b0d0p0s0translation").fill("Un vrai test."); | ||
| await expect(page.locator("#t0b0d0p0s0translation")).toContainText( | ||
| "Un vrai test.", | ||
| ); | ||
| //add translation to second sentence | ||
| await page | ||
| .locator("#t0b0d0p0s1") | ||
| .getByTestId("add-translation-button") | ||
| .click(); | ||
| await page.locator("#t0b0d0p0s1translation").fill("Phrase."); | ||
| //remove third sentence | ||
| await page | ||
| .locator("#t0b0d0p1s0") | ||
| .getByTestId("remove-translation-button") | ||
| .click(); | ||
| await page | ||
| .locator("#t0b0d0p1s0") | ||
| .getByTestId("add-translation-button") | ||
| .waitFor({ state: "visible" }); | ||
| //toggle translations | ||
| await page.getByTestId("translation-toggle").click(); | ||
| await expect( | ||
| page.locator(".sentence__translation.invisible"), | ||
| " translations should be hidden", | ||
| ).not.toHaveCount(0); | ||
| await page.getByTestId("translation-toggle").click(); | ||
| await expect( | ||
| page.locator(".sentence__translation.invisible"), | ||
| " translations should not be hidden", | ||
| ).toHaveCount(0); | ||
| await expect( | ||
| page.getByTestId("translation-line"), | ||
| " translations should not be hidden", | ||
| ).toHaveCount(2); | ||
| }); |
Oops, something went wrong.