57 lines
2.9 KiB
TypeScript
57 lines
2.9 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
for (const mode of ["visual", "source"] as const) {
|
|
test(`rich-text ${mode} editor stays clean until a real content edit`, async ({ page }) => {
|
|
const pageErrors: string[] = [];
|
|
page.on("pageerror", (error) => pageErrors.push(error.message));
|
|
await page.goto(`/?wysiwyg-lifecycle&mode=${mode}`);
|
|
const changeCount = page.getByTestId("wysiwyg-change-count");
|
|
const value = page.getByTestId("wysiwyg-controlled-value");
|
|
const editor = mode === "visual"
|
|
? page.locator(".wysiwyg-prosemirror")
|
|
: page.locator(".wysiwyg-editor-source");
|
|
const original = mode === "visual"
|
|
? "<p>Legacy <i>template</i></p>"
|
|
: '<table style="width: 100%"><tbody><tr><td>Legacy template</td></tr></tbody></table>';
|
|
|
|
await expect(editor).toBeVisible();
|
|
// <i> is supported visually but normalized to <em> inside Tiptap. That
|
|
// normalization must not leak into controlled content without a real edit.
|
|
if (mode === "visual") await expect(editor.locator("em")).toHaveText("template");
|
|
await expect(value).toHaveText(original);
|
|
await expect(changeCount).toHaveText("0");
|
|
|
|
await page.getByRole("button", { name: "Toggle read-only", exact: true }).click();
|
|
if (mode === "visual") await expect(editor).toHaveAttribute("contenteditable", "false");
|
|
else await expect(editor).toBeDisabled();
|
|
await expect(value).toHaveText(original);
|
|
await expect(changeCount).toHaveText("0");
|
|
await page.getByRole("button", { name: "Toggle read-only", exact: true }).click();
|
|
|
|
await page.getByRole("button", { name: "Load another value", exact: true }).click();
|
|
await expect(value).toHaveText(original.replace("Legacy", "Reloaded"));
|
|
await expect(changeCount).toHaveText("0");
|
|
|
|
await page.getByRole("button", { name: "Toggle editor mount", exact: true }).click();
|
|
await expect(editor).toHaveCount(0);
|
|
await page.getByRole("button", { name: "Toggle editor mount", exact: true }).click();
|
|
await expect(editor).toBeVisible();
|
|
await expect(value).toHaveText(original.replace("Legacy", "Reloaded"));
|
|
await expect(changeCount).toHaveText("0");
|
|
|
|
if (mode === "visual") {
|
|
await page.getByRole("tab", { name: "Source fixture mode", exact: true }).click();
|
|
await expect(page.locator(".wysiwyg-editor-source")).toHaveValue(original.replace("Legacy", "Reloaded"));
|
|
await expect(changeCount).toHaveText("0");
|
|
await page.getByRole("tab", { name: "Visual fixture mode", exact: true }).click();
|
|
await expect(editor).toBeVisible();
|
|
await expect(changeCount).toHaveText("0");
|
|
}
|
|
|
|
await editor.fill(mode === "source" ? "<p>Edited content</p>" : "Edited content");
|
|
await expect.poll(async () => Number(await changeCount.textContent())).toBeGreaterThan(0);
|
|
await expect(value).toContainText("Edited content");
|
|
expect(pageErrors).toEqual([]);
|
|
});
|
|
}
|