opensource/lexical
1
0
Fork 0
mirror of https://github.com/facebook/lexical.git synced 2025-05-22 01:27:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix assert (#1505)

Browse Source 
* fix assertHTML

* remove unused

* lint

* fix history

* add back retries
This commit is contained in:
Acy Watson
2022-03-22 17:19:56 -07:00
committed by acywatson
parent 654611dc94
commit d57876077a
8 changed files with 1616 additions and 1089 deletions
Download Patch File Download Diff File Expand all files Collapse all files

825
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -123,6 +123,7 @@
"gzip-size": "^6.0.0", "gzip-size": "^6.0.0",
"husky": "^7.0.1", "husky": "^7.0.1",
"jest": "26.6.0", "jest": "26.6.0",
"jsdom": "^19.0.0",
"lint-staged": "^11.1.0", "lint-staged": "^11.1.0",
"minimist": "^1.2.5", "minimist": "^1.2.5",
"playwright": "1.16.0-next-alpha-trueadm-fork", "playwright": "1.16.0-next-alpha-trueadm-fork",

143
packages/lexical-playground/__tests__/e2e/History.spec.mjs
View File

@ -7,19 +7,23 @@
*/ */
import {redo, toggleBold, undo} from '../keyboardShortcuts/index.mjs'; import {redo, toggleBold, undo} from '../keyboardShortcuts/index.mjs';
import { assertHTML, import {
assertHTML,
assertSelection, assertSelection,
focusEditor, focusEditor,
initialize , initialize,
repeat, repeat,
sleep, sleep,
test} from '../utils/index.mjs'; test,
} from '../utils/index.mjs';
test.describe('History', () => { test.describe('History', () => {
test.beforeEach(({isCollab, page }) => initialize({ isCollab, page })); test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
test( test(`Can type two paragraphs of text and correctly undo and redo`, async ({
`Can type two paragraphs of text and correctly undo and redo`, isRichText,
async ({isRichText, page, isCollab}) => { page,
isCollab,
}) => {
test.skip(isCollab); test.skip(isCollab);
await page.focus('div[contenteditable="true"]'); await page.focus('div[contenteditable="true"]');
await page.keyboard.type('hello'); await page.keyboard.type('hello');
@ -33,7 +37,10 @@ test.describe('History', () => {
await page.keyboard.type(', again and'); await page.keyboard.type(', again and');
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 22, anchorOffset: 22,
anchorPath: [1, 0, 0], anchorPath: [1, 0, 0],
@ -41,7 +48,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0], focusPath: [1, 0, 0],
}); });
} else { } else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 22, anchorOffset: 22,
anchorPath: [0, 2, 0], anchorPath: [0, 2, 0],
@ -53,7 +63,10 @@ test.describe('History', () => {
await undo(page); await undo(page);
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 11, anchorOffset: 11,
anchorPath: [1, 0, 0], anchorPath: [1, 0, 0],
@ -61,7 +74,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0], focusPath: [1, 0, 0],
}); });
} else { } else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 11, anchorOffset: 11,
anchorPath: [0, 2, 0], anchorPath: [0, 2, 0],
@ -73,8 +89,10 @@ test.describe('History', () => {
await undo(page); await undo(page);
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><br /></p> await assertHTML(
`); page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br /></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 0, anchorOffset: 0,
anchorPath: [1], anchorPath: [1],
@ -82,7 +100,10 @@ test.describe('History', () => {
focusPath: [1], focusPath: [1],
}); });
} else { } else {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><br/></p>`); assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><br/></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 2, anchorOffset: 2,
anchorPath: [0], anchorPath: [0],
@ -93,8 +114,9 @@ test.describe('History', () => {
await undo(page); await undo(page);
await assertHTML(page, await assertHTML(
`<p dir="ltr"><span data-lexical-text="true">hello world</span></p>`, page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
); );
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 11, anchorOffset: 11,
@ -105,8 +127,9 @@ test.describe('History', () => {
await undo(page); await undo(page);
await assertHTML(page, await assertHTML(
`<p dir="ltr"><span data-lexical-text="true">hello</span></p>`, page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
); );
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 5, anchorOffset: 5,
@ -117,7 +140,10 @@ test.describe('History', () => {
await undo(page); await undo(page);
await assertHTML(page, `<p><br /></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 0, anchorOffset: 0,
anchorPath: [0], anchorPath: [0],
@ -127,8 +153,9 @@ test.describe('History', () => {
await redo(page); await redo(page);
await assertHTML(page, await assertHTML(
`<p dir="ltr"><span data-lexical-text="true">hello</span></p>`, page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
); );
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 5, anchorOffset: 5,
@ -139,8 +166,9 @@ test.describe('History', () => {
await redo(page); await redo(page);
await assertHTML(page, await assertHTML(
`<p dir="ltr"><span data-lexical-text="true">hello world</span></p>`, page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
); );
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 11, anchorOffset: 11,
@ -152,7 +180,10 @@ test.describe('History', () => {
await redo(page); await redo(page);
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p><br /></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 0, anchorOffset: 0,
anchorPath: [1], anchorPath: [1],
@ -160,7 +191,10 @@ test.describe('History', () => {
focusPath: [1], focusPath: [1],
}); });
} else { } else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 2, anchorOffset: 2,
anchorPath: [0], anchorPath: [0],
@ -172,7 +206,10 @@ test.describe('History', () => {
await redo(page); await redo(page);
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 17, anchorOffset: 17,
anchorPath: [1, 0, 0], anchorPath: [1, 0, 0],
@ -180,7 +217,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0], focusPath: [1, 0, 0],
}); });
} else { } else {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><spandata-lexical-text="true">helloworldagain</span></p>`); assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 17, anchorOffset: 17,
anchorPath: [0, 2, 0], anchorPath: [0, 2, 0],
@ -192,7 +232,10 @@ test.describe('History', () => {
await redo(page); await redo(page);
if (isRichText) { if (isRichText) {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span></p><pdir="ltr"><spandata-lexical-text="true">helloworld,againandagain</span></p>`); assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 22, anchorOffset: 22,
anchorPath: [1, 0, 0], anchorPath: [1, 0, 0],
@ -200,7 +243,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0], focusPath: [1, 0, 0],
}); });
} else { } else {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><spandata-lexical-text="true">helloworld,againandagain</span></p>`); assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 22, anchorOffset: 22,
anchorPath: [0, 2, 0], anchorPath: [0, 2, 0],
@ -214,7 +260,10 @@ test.describe('History', () => {
}); });
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 18, anchorOffset: 18,
anchorPath: [1, 0, 0], anchorPath: [1, 0, 0],
@ -222,7 +271,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0], focusPath: [1, 0, 0],
}); });
} else { } else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 18, anchorOffset: 18,
anchorPath: [0, 2, 0], anchorPath: [0, 2, 0],
@ -234,7 +286,10 @@ test.describe('History', () => {
await undo(page); await undo(page);
if (isRichText) { if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 22, anchorOffset: 22,
anchorPath: [1, 0, 0], anchorPath: [1, 0, 0],
@ -242,7 +297,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0], focusPath: [1, 0, 0],
}); });
} else { } else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, { await assertSelection(page, {
anchorOffset: 22, anchorOffset: 22,
anchorPath: [0, 2, 0], anchorPath: [0, 2, 0],
@ -250,13 +308,14 @@ test.describe('History', () => {
focusPath: [0, 2, 0], focusPath: [0, 2, 0],
}); });
} }
}, });
);
test( test('Can coalesce when switching inline styles (#1151)', async ({
'Can coalesce when switching inline styles (#1151)', page,
async ({page, isCollab, isPlainText}) => { isCollab,
test.skip(isCollab || isPlainText) isPlainText,
}) => {
test.skip(isCollab || isPlainText);
await focusEditor(page); await focusEditor(page);
await toggleBold(page); await toggleBold(page);
@ -272,8 +331,7 @@ test.describe('History', () => {
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span></p>'; '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span></p>';
const step3HTML = const step3HTML =
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong></p>'; '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong></p>';
const step4HTML = const step4HTML = '<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
'<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
await assertHTML(page, step1HTML); await assertHTML(page, step1HTML);
await undo(page); await undo(page);
@ -288,6 +346,5 @@ test.describe('History', () => {
await assertHTML(page, step2HTML); await assertHTML(page, step2HTML);
await redo(page); await redo(page);
await assertHTML(page, step1HTML); await assertHTML(page, step1HTML);
}, });
);
}); });

21
packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View File

@ -94,13 +94,16 @@ test.describe('Tables', () => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
await assertHTML(page, `<p><br /></p>`); await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
);
await insertTable(page); await insertTable(page);
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br/></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br/></p>`,
); );
}); });
@ -114,7 +117,7 @@ test.describe('Tables', () => {
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">abc</span></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
); );
}); });
@ -128,7 +131,7 @@ test.describe('Tables', () => {
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><td><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
); );
}); });
@ -146,14 +149,14 @@ test.describe('Tables', () => {
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true, true,
); );
// Check that the highlight styles are applied. // Check that the highlight styles are applied.
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><td><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
); );
}); });
@ -189,7 +192,7 @@ test.describe('Tables', () => {
await assertHTML( await assertHTML(
page, page,
'<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>', `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true, true,
); );
}); });
@ -213,7 +216,7 @@ test.describe('Tables', () => {
// Check that the character styles are applied. // Check that the character styles are applied.
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">a</strong></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">bb</strong></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">d</strong></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">e</strong></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">a</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">bb</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">d</strong></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">e</strong></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true, true,
); );
}); });
@ -232,7 +235,7 @@ test.describe('Tables', () => {
// Check that the text was cleared. // Check that the text was cleared.
await assertHTML( await assertHTML(
page, page,
`<p><br/></p><table><tr><th><p><br/></p></th><th><p><br/></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`, `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true, true,
); );
}); });

111
packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs
View File

@ -7,23 +7,26 @@
*/ */
import {moveToLineBeginning} from '../keyboardShortcuts/index.mjs'; import {moveToLineBeginning} from '../keyboardShortcuts/index.mjs';
import { assertHTML, import {
assertHTML,
assertSelection, assertSelection,
click, click,
focusEditor, focusEditor,
initialize , initialize,
keyDownCtrlOrMeta, keyDownCtrlOrMeta,
keyUpCtrlOrMeta, keyUpCtrlOrMeta,
repeat, repeat,
selectOption, selectOption,
test, test,
waitForSelector} from '../utils/index.mjs'; waitForSelector,
} from '../utils/index.mjs';
test.describe('TextFormatting', () => { test.describe('TextFormatting', () => {
test.beforeEach(({isCollab, page }) => initialize({ isCollab, page })); test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
test( test(`Can create bold text using the shortcut`, async ({
`Can create bold text using the shortcut`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -57,12 +60,12 @@ test.describe('TextFormatting', () => {
focusOffset: 1, focusOffset: 1,
focusPath: [0, 2, 0], focusPath: [0, 2, 0],
}); });
}, });
);
test( test(`Can create italic text using the shortcut`, async ({
`Can create italic text using the shortcut`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -96,12 +99,12 @@ test.describe('TextFormatting', () => {
focusOffset: 1, focusOffset: 1,
focusPath: [0, 2, 0], focusPath: [0, 2, 0],
}); });
}, });
);
test( test(`Can select text and boldify it with the shortcut`, async ({
`Can select text and boldify it with the shortcut`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -146,12 +149,12 @@ test.describe('TextFormatting', () => {
focusOffset: 11, focusOffset: 11,
focusPath: [0, 0, 0], focusPath: [0, 0, 0],
}); });
}, });
);
test( test('Should not format the text in the subsequent paragraph after a triple click selection event.', async ({
'Should not format the text in the subsequent paragraph after a triple click selection event.', page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -179,12 +182,12 @@ test.describe('TextFormatting', () => {
page, page,
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">hello world</strong></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>', '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">hello world</strong></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
); );
}, });
);
test( test(`Can select text and italicify it with the shortcut`, async ({
`Can select text and italicify it with the shortcut`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -229,12 +232,12 @@ test.describe('TextFormatting', () => {
focusOffset: 11, focusOffset: 11,
focusPath: [0, 0, 0], focusPath: [0, 0, 0],
}); });
}, });
);
test( test(`Can select text and underline+strikethrough`, async ({
`Can select text and underline+strikethrough`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -311,12 +314,12 @@ test.describe('TextFormatting', () => {
focusOffset: 5, focusOffset: 5,
focusPath: [0, 1, 0], focusPath: [0, 1, 0],
}); });
}, });
);
test( test(`Can select text and change the font-size`, async ({
`Can select text and change the font-size`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -349,12 +352,12 @@ test.describe('TextFormatting', () => {
focusOffset: 5, focusOffset: 5,
focusPath: [0, 1, 0], focusPath: [0, 1, 0],
}); });
}, });
);
test( test(`Can select text and change the font-size and font-family`, async ({
`Can select text and change the font-size and font-family`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -417,12 +420,13 @@ test.describe('TextFormatting', () => {
focusOffset: 5, focusOffset: 5,
focusPath: [0, 1, 0], focusPath: [0, 1, 0],
}); });
}, });
);
test( test(`Can select multiple text parts and format them with shortcuts`, async ({
`Can select multiple text parts and format them with shortcuts`, page,
async ({page, isPlainText, browserName}) => { isPlainText,
browserName,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -560,12 +564,12 @@ test.describe('TextFormatting', () => {
focusOffset: 11, focusOffset: 11,
focusPath: [0, 0, 0], focusPath: [0, 0, 0],
}); });
}, });
);
test( test(`Can insert range of formatted text and select part and replace with character`, async ({
`Can insert range of formatted text and select part and replace with character`, page,
async ({page, isPlainText}) => { isPlainText,
}) => {
test.skip(isPlainText); test.skip(isPlainText);
await focusEditor(page); await focusEditor(page);
@ -639,6 +643,5 @@ test.describe('TextFormatting', () => {
focusOffset: 3, focusOffset: 3,
focusPath: [0, 0, 0], focusPath: [0, 0, 0],
}); });
}, });
);
}); });

18
packages/lexical-playground/__tests__/regression/1384-insert-nodes.spec.mjs
View File

@ -13,14 +13,16 @@ import {
focusEditor, focusEditor,
initialize, initialize,
pasteFromClipboard, pasteFromClipboard,
test test,
} from '../utils/index.mjs'; } from '../utils/index.mjs';
test.describe('Regression test #1384', () => { test.describe('Regression test #1384', () => {
test.beforeEach(({isCollab, page }) => initialize({ isCollab, page })); test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
test( test(`Properly pastes in code blocks`, async ({
`Properly pastes in code blocks`, page,
async ({ page, isPlainText, isCollab }) => { isPlainText,
isCollab,
}) => {
test.skip(isPlainText || isCollab); test.skip(isPlainText || isCollab);
await focusEditor(page); await focusEditor(page);
await page.keyboard.type('``` alert(1);'); await page.keyboard.type('``` alert(1);');
@ -35,7 +37,9 @@ test.describe('Regression test #1384', () => {
const clipboard = await copyToClipboard(page); const clipboard = await copyToClipboard(page);
await page.keyboard.press('ArrowLeft'); await page.keyboard.press('ArrowLeft');
await pasteFromClipboard(page, clipboard); await pasteFromClipboard(page, clipboard);
await assertHTML(page, `<codespellcheck="false"dir="ltr"><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">1</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">1</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span><br/><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">2</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span><br/><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">3</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span></code>`); await assertHTML(
}, page,
`<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">2</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">3</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>`,
); );
});
}); });

42
packages/lexical-playground/__tests__/utils/index.mjs
View File

@ -7,8 +7,9 @@
* @flow strict * @flow strict
*/ */
import { expect,test as base } from '@playwright/test'; import {expect, test as base} from '@playwright/test';
import jestSnapshot from 'jest-snapshot'; import jestSnapshot from 'jest-snapshot';
import {JSDOM} from 'jsdom';
import prettier from 'prettier'; import prettier from 'prettier';
import {URLSearchParams} from 'url'; import {URLSearchParams} from 'url';
import {v4 as uuidv4} from 'uuid'; import {v4 as uuidv4} from 'uuid';
@ -22,14 +23,17 @@ export const E2E_BROWSER = process.env.E2E_BROWSER;
export const IS_MAC = process.platform === 'darwin'; export const IS_MAC = process.platform === 'darwin';
export const IS_WINDOWS = process.platform === 'win32'; export const IS_WINDOWS = process.platform === 'win32';
export const IS_LINUX = !IS_MAC && !IS_WINDOWS; export const IS_LINUX = !IS_MAC && !IS_WINDOWS;
export const IS_COLLAB = process.env.E2E_EDITOR_MODE === 'rich-text-with-collab'; export const IS_COLLAB =
process.env.E2E_EDITOR_MODE === 'rich-text-with-collab';
const IS_RICH_TEXT = process.env.E2E_EDITOR_MODE !== 'plain-text'; const IS_RICH_TEXT = process.env.E2E_EDITOR_MODE !== 'plain-text';
const IS_PLAIN_TEXT = process.env.E2E_EDITOR_MODE === 'plain-text'; const IS_PLAIN_TEXT = process.env.E2E_EDITOR_MODE === 'plain-text';
export async function initialize({ page, isCollab, isCharLimit, isCharLimitUtf8 }) { export async function initialize({
page.exposeFunction('expectToBeEqual', (actual, expected) => { page,
return expect(actual).toEqual(expected); isCollab,
}); isCharLimit,
isCharLimitUtf8,
}) {
const appSettings = {}; const appSettings = {};
appSettings.isRichText = IS_RICH_TEXT; appSettings.isRichText = IS_RICH_TEXT;
appSettings.disableBeforeInput = appSettings.disableBeforeInput =
@ -56,10 +60,10 @@ export const test = base.extend({
isCharLimitUtf8: false, isCharLimitUtf8: false,
isCollab: IS_COLLAB, isCollab: IS_COLLAB,
isPlainText: IS_PLAIN_TEXT, isPlainText: IS_PLAIN_TEXT,
isRichText: IS_RICH_TEXT isRichText: IS_RICH_TEXT,
}); });
export { expect } from '@playwright/test'; export {expect} from '@playwright/test';
function appSettingsToURLParams(appSettings) { function appSettingsToURLParams(appSettings) {
const params = new URLSearchParams(); const params = new URLSearchParams();
@ -84,24 +88,12 @@ export async function clickSelectors(page, selectors) {
async function assertHTMLOnPageOrFrame(page, pageOrFrame, expectedHtml) { async function assertHTMLOnPageOrFrame(page, pageOrFrame, expectedHtml) {
const actualHtml = await pageOrFrame.innerHTML('div[contenteditable="true"]'); const actualHtml = await pageOrFrame.innerHTML('div[contenteditable="true"]');
await page.evaluate(async (args) => { const {document} = new JSDOM().window;
const actualHtmlString = args.actualHtml;
const expectedHtmlString = args.expectedHtml;
// Assert HTML of the editor matches the given html
if (expectedHtmlString === '') {
// eslint-disable-next-line no-console
console.log('Output HTML:\n\n' + actualHtml);
throw new Error('Empty HTML assertion!');
}
// HTML might differ between browsers, so we use attach
// outputs to an element using JSDOM to normalize and prettify
// the output.
const actual = document.createElement('div'); const actual = document.createElement('div');
actual.innerHTML = actualHtmlString; actual.innerHTML = actualHtml;
const expected = document.createElement('div'); const expected = document.createElement('div');
expected.innerHTML = expectedHtmlString; expected.innerHTML = expectedHtml;
await window.expectToBeEqual(actual, expected); expect(actual).toEqual(expected);
}, {actualHtml, expectedHtml});
} }
export async function assertHTML(page, expectedHtml, ignoreSecondFrame) { export async function assertHTML(page, expectedHtml, ignoreSecondFrame) {
@ -326,7 +318,7 @@ export async function sleep(delay) {
export async function focusEditor(page, parentSelector = '.editor-shell') { export async function focusEditor(page, parentSelector = '.editor-shell') {
const selector = `${parentSelector} div[contenteditable="true"]`; const selector = `${parentSelector} div[contenteditable="true"]`;
if (IS_COLLAB) { if (IS_COLLAB) {
await page.waitForSelector('iframe[name="left"]') await page.waitForSelector('iframe[name="left"]');
const leftFrame = page.frame('left'); const leftFrame = page.frame('left');
if ((await leftFrame.$$('.loading').length) !== 0) { if ((await leftFrame.$$('.loading').length) !== 0) {
await leftFrame.waitForSelector('.loading', { await leftFrame.waitForSelector('.loading', {

2
playwright.config.js
View File

@ -20,7 +20,7 @@ const config = {
use: {...devices['Desktop Safari']}, use: {...devices['Desktop Safari']},
}, },
], ],
retries: 5, retries: process.env.CI ? 5 : 1,
timeout: 60000, timeout: 60000,
use: { use: {
// this causes issues in the CI on on current version. // this causes issues in the CI on on current version.