From 18a49ba3f13b10c0fa90edfdb191389072d51c3b Mon Sep 17 00:00:00 2001 From: sahejkm Date: Tue, 28 May 2024 17:30:53 +0900 Subject: [PATCH 1/2] Move the codeblock unit tests in the correct folder --- .../src/__tests__/unit/CodeBlock.test.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/{lexical-table => lexical}/src/__tests__/unit/CodeBlock.test.ts (100%) diff --git a/packages/lexical-table/src/__tests__/unit/CodeBlock.test.ts b/packages/lexical/src/__tests__/unit/CodeBlock.test.ts similarity index 100% rename from packages/lexical-table/src/__tests__/unit/CodeBlock.test.ts rename to packages/lexical/src/__tests__/unit/CodeBlock.test.ts From 7106e91902c86411bdacf9cd21aa3af5ba6a5374 Mon Sep 17 00:00:00 2001 From: sahejkm Date: Tue, 28 May 2024 18:16:51 +0900 Subject: [PATCH 2/2] Move Copy and Paste e2e tests to unit tests --- .../html/HTMLCopyAndPaste.spec.mjs | 281 ------------------ .../__tests__/unit/HTMLCopyAndPaste.test.ts | 134 +++++++++ 2 files changed, 134 insertions(+), 281 deletions(-) create mode 100644 packages/lexical/src/__tests__/unit/HTMLCopyAndPaste.test.ts diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs index e2543ec0e1e..f7543d46c21 100644 --- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs @@ -22,62 +22,6 @@ import { test.describe('HTML CopyAndPaste', () => { test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); - test('Copy + paste a plain DOM text node', async ({page, isPlainText}) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = {'text/html': 'Hello!'}; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- Hello! -

- `, - ); - await assertSelection(page, { - anchorOffset: 6, - anchorPath: [0, 0, 0], - focusOffset: 6, - focusPath: [0, 0, 0], - }); - }); - - test('Copy + paste a paragraph element', async ({page, isPlainText}) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = {'text/html': '

Hello!

'}; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- Hello! -

-


- `, - ); - - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [1], - focusOffset: 0, - focusPath: [1], - }); - }); - test('Copy + paste multi line html with extra newlines', async ({ page, isPlainText, @@ -290,229 +234,4 @@ test.describe('HTML CopyAndPaste', () => { `, ); }); - - test('Copy + paste single div', async ({page, isPlainText}) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = { - 'text/html': ` - 123 -
- 456 -
`, - }; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- 123 -

-

- 456 -

- `, - ); - await assertSelection(page, { - anchorOffset: 3, - anchorPath: [1, 0, 0], - focusOffset: 3, - focusPath: [1, 0, 0], - }); - }); - - test('Copy + paste nested divs', async ({page, isPlainText}) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = { - 'text/html': html` -
- a -
- b b -
- c -
-
- z -
-
- d e -
- fg -
- `, - }; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- a -

-

- b b -

-

- c -

-

- z -

-

- d e -

-

- fg -

- `, - ); - await assertSelection(page, { - anchorOffset: 2, - anchorPath: [5, 0, 0], - focusOffset: 2, - focusPath: [5, 0, 0], - }); - }); - - test('Copy + paste nested div in a span', async ({page, isPlainText}) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = { - 'text/html': html` - - 123 -
456
- - `, - }; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- 123 -

-

- 456 -

- `, - ); - await assertSelection(page, { - anchorOffset: 3, - anchorPath: [1, 0, 0], - focusOffset: 3, - focusPath: [1, 0, 0], - }); - }); - - test('Copy + paste nested span in a div', async ({page, isPlainText}) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = { - 'text/html': html` -
- - 123 -
456
- -
- `, - }; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- 123 -

-

- 456 -

- `, - ); - await assertSelection(page, { - anchorOffset: 3, - anchorPath: [1, 0, 0], - focusOffset: 3, - focusPath: [1, 0, 0], - }); - }); - - test('Copy + paste multiple nested spans and divs', async ({ - page, - isPlainText, - }) => { - test.skip(isPlainText); - - await focusEditor(page); - - const clipboard = { - 'text/html': html` -
- a b - - c d - e - -
- f - g h -
-
- `, - }; - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -

- a b c d e -

-

- f g h -

- `, - ); - await assertSelection(page, { - anchorOffset: 5, - anchorPath: [1, 0, 0], - focusOffset: 5, - focusPath: [1, 0, 0], - }); - }); }); diff --git a/packages/lexical/src/__tests__/unit/HTMLCopyAndPaste.test.ts b/packages/lexical/src/__tests__/unit/HTMLCopyAndPaste.test.ts new file mode 100644 index 00000000000..2aac21ad475 --- /dev/null +++ b/packages/lexical/src/__tests__/unit/HTMLCopyAndPaste.test.ts @@ -0,0 +1,134 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import {$insertDataTransferForRichText} from '@lexical/clipboard'; +import { + $createParagraphNode, + $getRoot, + $getSelection, + $isRangeSelection, +} from 'lexical'; +import { + DataTransferMock, + initializeUnitTest, + invariant, +} from 'lexical/src/__tests__/utils'; + +describe('HTMLCopyAndPaste tests', () => { + initializeUnitTest( + (testEnv) => { + beforeEach(async () => { + const {editor} = testEnv; + await editor.update(() => { + const root = $getRoot(); + const paragraph = $createParagraphNode(); + root.append(paragraph); + paragraph.select(); + }); + }); + + const HTML_COPY_PASTING_TESTS = [ + { + expectedHTML: `

Hello!

`, + name: 'plain DOM text node', + pastedHTML: `Hello!`, + }, + { + expectedHTML: `

Hello!


`, + name: 'a paragraph element', + pastedHTML: `

Hello!

`, + }, + { + expectedHTML: `

123

456

`, + name: 'a single div', + pastedHTML: `123 +
+ 456 +
`, + }, + { + expectedHTML: `

a

b b

c

z

d e

fg

`, + name: 'nested divs', + pastedHTML: `
+ a +
+ b b +
+ c +
+
+ z +
+
+ d e +
+ fg +
`, + }, + { + expectedHTML: `

a b c d e

f g h

`, + name: 'multiple nested spans and divs', + pastedHTML: `
+ a b + + c d + e + +
+ f + g h +
+
`, + }, + { + expectedHTML: `

123

456

`, + name: 'nested span in a div', + pastedHTML: `
+ + 123 +
456
+ +
`, + }, + { + expectedHTML: `

123

456

`, + name: 'nested div in a span', + pastedHTML: ` 123
456
`, + }, + ]; + + HTML_COPY_PASTING_TESTS.forEach((testCase, i) => { + test(`HTML copy paste: ${testCase.name}`, async () => { + const {editor} = testEnv; + + const dataTransfer = new DataTransferMock(); + dataTransfer.setData('text/html', testCase.pastedHTML); + await editor.update(() => { + const selection = $getSelection(); + invariant( + $isRangeSelection(selection), + 'isRangeSelection(selection)', + ); + $insertDataTransferForRichText(dataTransfer, selection, editor); + }); + expect(testEnv.innerHTML).toBe(testCase.expectedHTML); + }); + }); + }, + { + namespace: 'test', + theme: { + text: { + bold: 'editor-text-bold', + italic: 'editor-text-italic', + underline: 'editor-text-underline', + }, + }, + }, + ); +});