Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-25 12:22:30 +01:00
Code Issues Releases Wiki Activity

Lexical: Finished conversion/update of test files

Browse Source
This commit is contained in:
Dan Brown 2024-09-20 15:31:19 +01:00
parent 787e06e3d8
commit dba8ab947f
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
15 changed files with 578 additions and 1244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
jest.config.ts
View File

@ -21,7 +21,7 @@ const config: Config = {
clearMocks: true,
// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,
collectCoverage: false,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,
@ -164,10 +164,9 @@ const config: Config = {
// testLocationInResults: false,
// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ],
testMatch: [
"**/__tests__/**/*.test.[jt]s",
],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [

8
resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
View File

@ -717,3 +717,11 @@ export function html(
}
return output;
}
export function expectHtmlToBeEqual(expected: string, actual: string): void {
expect(formatHtml(expected)).toBe(formatHtml(actual));
}
function formatHtml(s: string): string {
return s.replace(/>\s+</g, '><').replace(/\s*\n\s*/g, ' ').trim();
}

1
resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalTextNode.test.ts
View File

@ -21,7 +21,6 @@ import {
TextModeType,
TextNode,
} from 'lexical';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {
$createTestSegmentedNode,

18
resources/js/wysiwyg/lexical/core/shared/react-test-utils.ts
View File

@ -1,18 +0,0 @@
/**
* 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 * as React from 'react';
import * as ReactTestUtils from 'react-dom/test-utils';
/**
* React 19 moved act from react-dom/test-utils to react
* https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
*/
export const act =
'act' in React
? (React.act as typeof ReactTestUtils.act)
: ReactTestUtils.act;

2
resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalAutoLinkNode.test.ts
View File

@ -19,7 +19,7 @@ import {
ParagraphNode,
SerializedParagraphNode,
TextNode,
} from 'lexical/src';
} from 'lexical';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({

2
resources/js/wysiwyg/lexical/link/__tests__/unit/LexicalLinkNode.test.ts
View File

@ -19,7 +19,7 @@ import {
ParagraphNode,
SerializedParagraphNode,
TextNode,
} from 'lexical/src';
} from 'lexical';
import {initializeUnitTest} from 'lexical/__tests__/utils';
const editorConfig = Object.freeze({

182
resources/js/wysiwyg/lexical/list/__tests__/unit/LexicalListItemNode.test.ts
View File

@ -62,7 +62,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual(
listItemNode.createDOM(editorConfig).outerHTML,
html`
<li class="my-listItem-item-class" value="1"></li>
<li value="1" class="my-listItem-item-class"></li>
`,
);
@ -90,7 +90,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual(
domElement.outerHTML,
html`
<li class="my-listItem-item-class" value="1"></li>
<li value="1" class="my-listItem-item-class"></li>
`,
);
const newListItemNode = new ListItemNode();
@ -106,7 +106,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual(
domElement.outerHTML,
html`
<li class="my-listItem-item-class" value="1"></li>
<li value="1" class="my-listItem-item-class"></li>
`,
);
});
@ -125,7 +125,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual(
domElement.outerHTML,
html`
<li class="my-listItem-item-class" value="1"></li>
<li value="1" class="my-listItem-item-class"></li>
`,
);
const nestedListNode = new ListNode('bullet', 1);
@ -142,9 +142,7 @@ describe('LexicalListItemNode tests', () => {
expectHtmlToBeEqual(
domElement.outerHTML,
html`
<li
class="my-listItem-item-class my-nested-list-listItem-class"
value="1"></li>
<li value="1" class="my-listItem-item-class my-nested-list-listItem-class"></li>
`,
);
});
@ -184,13 +182,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -217,13 +215,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">bar</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -247,13 +245,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -273,12 +271,12 @@ describe('LexicalListItemNode tests', () => {
contenteditable="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<p><br /></p>
<p><br></p>
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -303,14 +301,14 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
</ul>
<p><br /></p>
<p><br></p>
</div>
`,
);
@ -332,13 +330,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
</ul>
<p><br /></p>
<p><br></p>
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -363,7 +361,7 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
</ul>
@ -383,7 +381,7 @@ describe('LexicalListItemNode tests', () => {
contenteditable="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<p><br /></p>
<p><br></p>
</div>
`,
);
@ -423,13 +421,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -447,10 +445,10 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -497,15 +495,15 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -525,12 +523,12 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -575,15 +573,15 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li value="3">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -603,12 +601,12 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -661,17 +659,17 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -693,10 +691,10 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -757,24 +755,24 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A1</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A2</span>
</li>
</ul>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -796,17 +794,17 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A1</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A2</span>
</li>
</ul>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B</span>
</li>
</ul>
@ -867,24 +865,24 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li value="2">
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B1</span>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B2</span>
</li>
</ul>
@ -906,17 +904,17 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B1</span>
</li>
</ul>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B2</span>
</li>
</ul>
@ -985,31 +983,31 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A1</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A2</span>
</li>
</ul>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">x</span>
</li>
<li value="2">
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B1</span>
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">B2</span>
</li>
</ul>
@ -1031,20 +1029,20 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A1</span>
</li>
<li value="2">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">A2</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B1</span>
</li>
</ul>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">B2</span>
</li>
</ul>
@ -1089,13 +1087,13 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -1119,14 +1117,14 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li value="2"><br /></li>
<li dir="ltr" value="3">
<li value="2"><br></li>
<li value="3" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="4">
<li value="4" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
</ul>
@ -1150,16 +1148,16 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
<li value="4"><br /></li>
<li value="4"><br></li>
</ul>
</div>
`,
@ -1181,16 +1179,16 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
<li dir="ltr" value="3">
<li value="3" dir="ltr">
<span data-lexical-text="true">three</span>
</li>
<li value="4"><br /></li>
<li value="4"><br></li>
</ul>
</div>
`,
@ -1213,7 +1211,7 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
</ul>
@ -1233,10 +1231,10 @@ describe('LexicalListItemNode tests', () => {
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li value="2"><br /></li>
<li value="2"><br></li>
</ul>
</div>
`,
@ -1310,7 +1308,7 @@ describe('LexicalListItemNode tests', () => {
<ul>
<li value="1">
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
</ul>
@ -1319,7 +1317,7 @@ describe('LexicalListItemNode tests', () => {
</li>
</ul>
</li>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
</ul>
@ -1338,10 +1336,10 @@ describe('LexicalListItemNode tests', () => {
editor.getRootElement()!.innerHTML,
html`
<ul>
<li dir="ltr" value="1">
<li value="1" dir="ltr">
<span data-lexical-text="true">one</span>
</li>
<li dir="ltr" value="2">
<li value="2" dir="ltr">
<span data-lexical-text="true">two</span>
</li>
</ul>

33
resources/js/wysiwyg/lexical/list/__tests__/utils.ts
View File

@ -1,33 +0,0 @@
/**
* 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 {expect} from '@playwright/test';
import prettier from 'prettier';
// This tag function is just used to trigger prettier auto-formatting.
// (https://prettier.io/blog/2020/08/24/2.1.0.html#api)
export function html(
partials: TemplateStringsArray,
...params: string[]
): string {
let output = '';
for (let i = 0; i < partials.length; i++) {
output += partials[i];
if (i < partials.length - 1) {
output += params[i];
}
}
return output;
}
export function expectHtmlToBeEqual(expected: string, actual: string): void {
expect(prettifyHtml(expected)).toBe(prettifyHtml(actual));
}
export function prettifyHtml(s: string): string {
return prettier.format(s.replace(/\n/g, ''), {parser: 'html'});
}

1074
resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.tsx → resources/js/wysiwyg/lexical/selection/__tests__/unit/LexicalSelection.test.ts
View File

File diff suppressed because it is too large Load Diff

206
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.tsx → resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableNode.test.ts
View File

@ -7,22 +7,14 @@
*/
import {$insertDataTransferForRichText} from '@lexical/clipboard';
import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
import {
$createTableNode,
$createTableNodeWithDimensions,
$createTableSelection,
} from '@lexical/table';
import {
$createParagraphNode,
$createTextNode,
$getRoot,
$getSelection,
$isRangeSelection,
$selectAll,
$setSelection,
CUT_COMMAND,
ParagraphNode,
} from 'lexical';
import {
DataTransferMock,
@ -30,8 +22,6 @@ import {
invariant,
} from 'lexical/__tests__/utils';
import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
export class ClipboardDataMock {
getData: jest.Mock<string, [string]>;
setData: jest.Mock<void, [string, string]>;
@ -149,203 +139,7 @@ describe('LexicalTableNode tests', () => {
`<table><tr style="height: 21px;"><td><p dir="ltr"><strong data-lexical-text="true">Surface</strong></p></td><td><p dir="ltr"><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td><p style="text-align: right;"><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td><p dir="ltr"><span data-lexical-text="true">Lexical</span></p></td><td><p dir="ltr"><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p dir="ltr"><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
);
});
test('Cut table in the middle of a range selection', async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const paragraph = root.getFirstChild<ParagraphNode>();
const beforeText = $createTextNode('text before the table');
const table = $createTableNodeWithDimensions(4, 4, true);
const afterText = $createTextNode('text after the table');
paragraph?.append(beforeText);
paragraph?.append(table);
paragraph?.append(afterText);
});
await editor.update(() => {
editor.focus();
$selectAll();
});
await editor.update(() => {
editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
});
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
});
test('Cut table as last node in range selection ', async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const paragraph = root.getFirstChild<ParagraphNode>();
const beforeText = $createTextNode('text before the table');
const table = $createTableNodeWithDimensions(4, 4, true);
paragraph?.append(beforeText);
paragraph?.append(table);
});
await editor.update(() => {
editor.focus();
$selectAll();
});
await editor.update(() => {
editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
});
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
});
test('Cut table as first node in range selection ', async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const paragraph = root.getFirstChild<ParagraphNode>();
const table = $createTableNodeWithDimensions(4, 4, true);
const afterText = $createTextNode('text after the table');
paragraph?.append(table);
paragraph?.append(afterText);
});
await editor.update(() => {
editor.focus();
$selectAll();
});
await editor.update(() => {
editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
});
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
});
test('Cut table is whole selection, should remove it', async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const table = $createTableNodeWithDimensions(4, 4, true);
root.append(table);
});
await editor.update(() => {
const root = $getRoot();
const table = root.getLastChild<TableNode>();
if (table) {
const DOMTable = $getElementForTableNode(editor, table);
if (DOMTable) {
table
?.getCellNodeFromCords(0, 0, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode('some text'));
const selection = $createTableSelection();
selection.set(
table.__key,
table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
table?.getCellNodeFromCords(3, 3, DOMTable)?.__key || '',
);
$setSelection(selection);
editor.dispatchCommand(CUT_COMMAND, {
preventDefault: () => {},
stopPropagation: () => {},
} as ClipboardEvent);
}
}
});
expect(testEnv.innerHTML).toBe(`<p><br></p>`);
});
test('Cut subsection of table cells, should just clear contents', async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const table = $createTableNodeWithDimensions(4, 4, true);
root.append(table);
});
await editor.update(() => {
const root = $getRoot();
const table = root.getLastChild<TableNode>();
if (table) {
const DOMTable = $getElementForTableNode(editor, table);
if (DOMTable) {
table
?.getCellNodeFromCords(0, 0, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode('some text'));
const selection = $createTableSelection();
selection.set(
table.__key,
table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
table?.getCellNodeFromCords(2, 2, DOMTable)?.__key || '',
);
$setSelection(selection);
editor.dispatchCommand(CUT_COMMAND, {
preventDefault: () => {},
stopPropagation: () => {},
} as ClipboardEvent);
}
}
});
expect(testEnv.innerHTML).toBe(
`<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></tr><tr><th><p><br></p></th><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></tr><tr><th><p><br></p></th><td><p><br></p></td><td><p><br></p></td><td><p><br></p></td></tr></table>`,
);
});
test('Table plain text output validation', async () => {
const {editor} = testEnv;
await editor.update(() => {
const root = $getRoot();
const table = $createTableNodeWithDimensions(4, 4, true);
root.append(table);
});
await editor.update(() => {
const root = $getRoot();
const table = root.getLastChild<TableNode>();
if (table) {
const DOMTable = $getElementForTableNode(editor, table);
if (DOMTable) {
table
?.getCellNodeFromCords(0, 0, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode('1'));
table
?.getCellNodeFromCords(1, 0, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode(''));
table
?.getCellNodeFromCords(2, 0, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode('2'));
table
?.getCellNodeFromCords(0, 1, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode('3'));
table
?.getCellNodeFromCords(1, 1, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode('4'));
table
?.getCellNodeFromCords(2, 1, DOMTable)
?.getLastChild<ParagraphNode>()
?.append($createTextNode(''));
const selection = $createTableSelection();
selection.set(
table.__key,
table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
table?.getCellNodeFromCords(2, 1, DOMTable)?.__key || '',
);
expect(selection.getTextContent()).toBe(`1\t\t2\n3\t4\t\n`);
}
}
});
});
},
undefined,
<TablePlugin />,
);
});

61
resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.tsx → resources/js/wysiwyg/lexical/table/__tests__/unit/LexicalTableSelection.test.ts
View File

@ -19,9 +19,6 @@ import {
TextNode,
} from 'lexical';
import {createTestEditor} from 'lexical/__tests__/utils';
import {createRef, useEffect, useMemo} from 'react';
import {createRoot, Root} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
describe('table selection', () => {
let originalText: TextNode;
@ -31,57 +28,35 @@ describe('table selection', () => {
let paragraphKey: string;
let textKey: string;
let parsedEditorState: EditorState;
let reactRoot: Root;
let root: HTMLDivElement;
let container: HTMLDivElement | null = null;
let editor: LexicalEditor | null = null;
beforeEach(() => {
container = document.createElement('div');
reactRoot = createRoot(container);
root = document.createElement('div');
root.setAttribute('contenteditable', 'true');
document.body.appendChild(container);
});
function useLexicalEditor(
rootElementRef: React.RefObject<HTMLDivElement>,
onError?: () => void,
) {
const editorInHook = useMemo(
() =>
createTestEditor({
nodes: [],
onError: onError || jest.fn(),
theme: {
text: {
bold: 'editor-text-bold',
italic: 'editor-text-italic',
underline: 'editor-text-underline',
},
},
}),
[onError],
);
useEffect(() => {
const rootElement = rootElementRef.current;
editorInHook.setRootElement(rootElement);
}, [rootElementRef, editorInHook]);
return editorInHook;
}
afterEach(() => {
container?.remove();
});
function init(onError?: () => void) {
const ref = createRef<HTMLDivElement>();
editor = createTestEditor({
nodes: [],
onError: onError || jest.fn(),
theme: {
text: {
bold: 'editor-text-bold',
italic: 'editor-text-italic',
underline: 'editor-text-underline',
},
},
})
function TestBase() {
editor = useLexicalEditor(ref, onError);
return <div ref={ref} contentEditable={true} />;
}
ReactTestUtils.act(() => {
reactRoot.render(<TestBase />);
});
editor.setRootElement(root);
}
async function update(fn: () => void) {

191
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.tsx → resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalEventHelpers.test.ts
View File

@ -5,27 +5,16 @@
* LICENSE file in the root directory of this source tree.
*
*/
import {CodeHighlightNode, CodeNode} from '@lexical/code';
import {HashtagNode} from '@lexical/hashtag';
import {AutoLinkNode, LinkNode} from '@lexical/link';
import {ListItemNode, ListNode} from '@lexical/list';
import {OverflowNode} from '@lexical/overflow';
import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
import {HeadingNode, QuoteNode} from '@lexical/rich-text';
import {HeadingNode, QuoteNode, registerRichText} from '@lexical/rich-text';
import {
applySelectionInputs,
pasteHTML,
} from '@lexical/selection/src/__tests__/utils';
} from '@lexical/selection/__tests__/utils';
import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
import {LexicalEditor} from 'lexical';
import {initializeClipboard, TestComposer} from 'lexical/__tests__/utils';
import {createRoot} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {$createParagraphNode, $insertNodes, LexicalEditor} from 'lexical';
import {createTestEditor, initializeClipboard} from 'lexical/__tests__/utils';
jest.mock('lexical/shared/environment', () => {
const originalModule = jest.requireActual('lexical/shared/environment');
@ -89,85 +78,69 @@ describe('LexicalEventHelpers', () => {
let editor: LexicalEditor | null = null;
async function init() {
function TestBase() {
function TestPlugin(): null {
[editor] = useLexicalComposerContext();
return null;
}
const config = {
nodes: [
LinkNode,
HeadingNode,
ListNode,
ListItemNode,
QuoteNode,
TableNode,
TableCellNode,
TableRowNode,
AutoLinkNode,
],
theme: {
code: 'editor-code',
heading: {
h1: 'editor-heading-h1',
h2: 'editor-heading-h2',
h3: 'editor-heading-h3',
h4: 'editor-heading-h4',
h5: 'editor-heading-h5',
h6: 'editor-heading-h6',
},
image: 'editor-image',
list: {
listitem: 'editor-listitem',
olDepth: ['editor-list-ol'],
ulDepth: ['editor-list-ul'],
},
paragraph: 'editor-paragraph',
placeholder: 'editor-placeholder',
quote: 'editor-quote',
text: {
bold: 'editor-text-bold',
code: 'editor-text-code',
hashtag: 'editor-text-hashtag',
italic: 'editor-text-italic',
link: 'editor-text-link',
strikethrough: 'editor-text-strikethrough',
underline: 'editor-text-underline',
underlineStrikethrough: 'editor-text-underlineStrikethrough',
},
},
};
return (
<TestComposer
config={{
nodes: [
LinkNode,
HeadingNode,
ListNode,
ListItemNode,
QuoteNode,
CodeNode,
TableNode,
TableCellNode,
TableRowNode,
HashtagNode,
CodeHighlightNode,
AutoLinkNode,
OverflowNode,
],
theme: {
code: 'editor-code',
heading: {
h1: 'editor-heading-h1',
h2: 'editor-heading-h2',
h3: 'editor-heading-h3',
h4: 'editor-heading-h4',
h5: 'editor-heading-h5',
h6: 'editor-heading-h6',
},
image: 'editor-image',
list: {
listitem: 'editor-listitem',
olDepth: ['editor-list-ol'],
ulDepth: ['editor-list-ul'],
},
paragraph: 'editor-paragraph',
placeholder: 'editor-placeholder',
quote: 'editor-quote',
text: {
bold: 'editor-text-bold',
code: 'editor-text-code',
hashtag: 'editor-text-hashtag',
italic: 'editor-text-italic',
link: 'editor-text-link',
strikethrough: 'editor-text-strikethrough',
underline: 'editor-text-underline',
underlineStrikethrough: 'editor-text-underlineStrikethrough',
},
},
}}>
<RichTextPlugin
contentEditable={
// eslint-disable-next-line jsx-a11y/aria-role, @typescript-eslint/no-explicit-any
<ContentEditable role={null as any} spellCheck={null as any} />
}
placeholder={null}
ErrorBoundary={LexicalErrorBoundary}
/>
<AutoFocusPlugin />
<TestPlugin />
</TestComposer>
);
}
editor = createTestEditor(config);
registerRichText(editor);
ReactTestUtils.act(() => {
createRoot(container!).render(<TestBase />);
const root = document.createElement('div');
root.setAttribute('contenteditable', 'true');
container?.append(root);
editor.setRootElement(root);
editor.update(() => {
$insertNodes([$createParagraphNode()])
});
editor.commitUpdates();
}
async function update(fn: () => void) {
await ReactTestUtils.act(async () => {
await editor!.update(fn);
});
await editor!.update(fn);
editor?.commitUpdates();
return Promise.resolve().then();
}
@ -549,24 +522,6 @@ describe('LexicalEventHelpers', () => {
],
name: 'collapsible spaces with nested structures',
},
// TODO no proper support for divs #4465
// {
// expectedHTML:
// '<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">a</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">b</span></p>',
// inputs: [
// pasteHTML(`
// <div>
// <div>
// a
// </div>
// <div>
// b
// </div>
// </div>
// `),
// ],
// name: 'collapsible spaces with nested structures (2)',
// },
{
expectedHTML:
'<p class="editor-paragraph" dir="ltr"><strong class="editor-text-bold" data-lexical-text="true">a b</strong></p>',
@ -612,32 +567,6 @@ describe('LexicalEventHelpers', () => {
],
name: 'forced line break with tabs',
},
// The 3 below are not correct, they're missing the first \n -> <br> but that's a fault with
// the implementation of DOMParser, it works correctly in Safari
{
expectedHTML:
'<code class="editor-code" spellcheck="false" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></code>',
inputs: [pasteHTML(`<pre>\na\r\nb\r\n</pre>`)],
name: 'pre (no touchy) (1)',
},
{
expectedHTML:
'<code class="editor-code" spellcheck="false" dir="ltr"><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></code>',
inputs: [
pasteHTML(`
<pre>\na\r\nb\r\n</pre>
`),
],
name: 'pre (no touchy) (2)',
},
{
expectedHTML:
'<p class="editor-paragraph" dir="ltr"><br><span data-lexical-text="true">a</span><br><span data-lexical-text="true">b</span><br><br></p>',
inputs: [
pasteHTML(`<span style="white-space: pre">\na\r\nb\r\n</span>`),
],
name: 'white-space: pre (no touchy) (2)',
},
{
expectedHTML:
'<p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph1</span></p><p class="editor-paragraph" dir="ltr"><span data-lexical-text="true">paragraph2</span></p>',

35
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalRootHelpers.test.ts
View File

@ -6,14 +6,39 @@
*
*/
import {
$isRootTextContentEmpty,
$isRootTextContentEmptyCurry,
$rootTextContent,
} from '@lexical/text';
import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
import {initializeUnitTest} from 'lexical/__tests__/utils';
export function $rootTextContent(): string {
const root = $getRoot();
return root.getTextContent();
}
export function $isRootTextContentEmpty(
isEditorComposing: boolean,
trim = true,
): boolean {
if (isEditorComposing) {
return false;
}
let text = $rootTextContent();
if (trim) {
text = text.trim();
}
return text === '';
}
export function $isRootTextContentEmptyCurry(
isEditorComposing: boolean,
trim?: boolean,
): () => boolean {
return () => $isRootTextContentEmpty(isEditorComposing, trim);
}
describe('LexicalRootHelpers tests', () => {
initializeUnitTest((testEnv) => {
it('textContent', async () => {

0
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.tsx → resources/js/wysiwyg/lexical/utils/__tests__/unit/LexicalUtilsSplitNode.test.ts
View File

0
resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.tsx → resources/js/wysiwyg/lexical/utils/__tests__/unit/LexlcaiUtilsInsertNodeToNearestRoot.test.ts
View File