|
1 | 1 | import { test, expect } from "@playwright/test"; |
2 | 2 | import { testAssetsPath, disablePlausible } from "../test-commands"; |
3 | 3 | import fs from "fs"; |
4 | | -import { hasUncaughtExceptionCaptureCallback } from "process"; |
| 4 | + |
5 | 5 | test.describe.configure({ mode: "parallel" }); |
6 | | -test.beforeEach(async ({ page, isMobile }) => { |
| 6 | +test.beforeEach(async ({ page, isMobile, context }) => { |
| 7 | + await context.grantPermissions(["clipboard-write", "clipboard-read"]); |
7 | 8 | await page.goto("/", { waitUntil: "load" }); |
8 | 9 | disablePlausible(page); |
9 | 10 | if (isMobile) { |
@@ -33,21 +34,21 @@ test.beforeEach(async ({ page, isMobile }) => { |
33 | 34 | page.locator("#t0b0d0"), |
34 | 35 | "read along has been loaded", |
35 | 36 | ).toHaveCount(1); |
| 37 | + await expect( |
| 38 | + page.locator("#style-section"), |
| 39 | + "css editor to be hidden", |
| 40 | + ).toHaveClass(/\bcollapsed\b/); |
| 41 | + await page.getByTestId("toggle-css-box").click(); |
| 42 | + await expect( |
| 43 | + page.locator("#style-section"), |
| 44 | + "css editor to be visible", |
| 45 | + ).not.toHaveClass(/\bcollapsed\b/); |
| 46 | + await expect(page.locator("#styleInput"), "has style data").toHaveValue( |
| 47 | + /\.theme--light/, |
| 48 | + ); |
36 | 49 | }).toPass(); |
37 | 50 | }); |
38 | 51 | test("should edit css (editor)", async ({ page, isMobile }) => { |
39 | | - await expect( |
40 | | - page.locator("#style-section"), |
41 | | - "css editor to be hidden", |
42 | | - ).toHaveClass(/\bcollapsed\b/); |
43 | | - await page.getByTestId("toggle-css-box").click(); |
44 | | - await expect( |
45 | | - page.locator("#style-section"), |
46 | | - "css editor to be visible", |
47 | | - ).not.toHaveClass(/\bcollapsed\b/); |
48 | | - await expect(page.locator("#styleInput"), "has style data").toHaveValue( |
49 | | - /\.theme--light/, |
50 | | - ); |
51 | 52 | await expect( |
52 | 53 | page |
53 | 54 | .locator('[data-test-id="text-container"]') |
@@ -91,3 +92,62 @@ test("should edit css (editor)", async ({ page, isMobile }) => { |
91 | 92 | ".theme--light.sentence__word,\n.theme--light.sentence__text {\n color: rgba(180, 170, 70, .9) !important;\n}", |
92 | 93 | ); |
93 | 94 | }); |
| 95 | +test("should use with custom font", async ({ page, isMobile }) => { |
| 96 | + let fileChooserPromise = page.waitForEvent("filechooser"); |
| 97 | + await page.locator("#defaultFont").click(); |
| 98 | + let fileChooser = await fileChooserPromise; |
| 99 | + fileChooser.setFiles(testAssetsPath + "cour.ttf"); |
| 100 | + await expect( |
| 101 | + page.getByText("File cour.ttf processed."), |
| 102 | + "font successfully loaded", |
| 103 | + ).toBeVisible(); |
| 104 | +}); |
| 105 | + |
| 106 | +test("should paste in style", async ({ page, context }) => { |
| 107 | + const style = fs.readFileSync( |
| 108 | + testAssetsPath + "sentence-paragr-cust-css.css", |
| 109 | + { encoding: "utf8", flag: "r" }, |
| 110 | + ); |
| 111 | + // Ensure clipboard permissions are granted |
| 112 | + await context.grantPermissions(["clipboard-write"]); |
| 113 | + await page.evaluate(async (text) => { |
| 114 | + await navigator.clipboard.writeText(text); |
| 115 | + }, style); |
| 116 | + await page.getByRole("button", { name: "Paste" }).click(); |
| 117 | + // Wait for the style input to be updated after paste |
| 118 | + await expect( |
| 119 | + page.locator("#styleInput"), |
| 120 | + "style input should not be empty", |
| 121 | + ).not.toBeEmpty(); |
| 122 | + await expect |
| 123 | + .poll(async () => await page.locator("#styleInput").inputValue(), { |
| 124 | + message: "check that the style input has been replaced", |
| 125 | + }) |
| 126 | + .toContain(style); |
| 127 | +}); |
| 128 | +test("should load and copy style", async ({ page, context }) => { |
| 129 | + await context.grantPermissions(["clipboard-read"]); |
| 130 | + let fileChooserPromise = page.waitForEvent("filechooser"); |
| 131 | + await page.getByRole("radio", { name: "File" }).click(); |
| 132 | + await page |
| 133 | + .locator("#updateStyle") |
| 134 | + .waitFor({ state: "visible", timeout: 10000 }); |
| 135 | + await page.locator("#updateStyle").click(); |
| 136 | + let fileChooser = await fileChooserPromise; |
| 137 | + fileChooser.setFiles(testAssetsPath + "sentence-paragr-cust-css.css"); |
| 138 | + await expect( |
| 139 | + page.getByText( |
| 140 | + "File sentence-paragr-cust-css.css processed. Content loaded in the text box.", |
| 141 | + ), |
| 142 | + "css successfully loaded", |
| 143 | + ).toBeVisible(); |
| 144 | + await expect( |
| 145 | + page.locator("#styleInput"), |
| 146 | + "style input should not be empty", |
| 147 | + ).not.toBeEmpty(); |
| 148 | + await page.getByRole("button", { name: "Copy" }).click(); |
| 149 | + const css = await page.evaluate(() => navigator.clipboard.readText()); |
| 150 | + await expect(css.length, "clipboard css should not be empty").toBeGreaterThan( |
| 151 | + 0, |
| 152 | + ); |
| 153 | +}); |
0 commit comments