1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-29 23:22:34 +01:00

Lexical: Adapted a range of further existing tests

This commit is contained in:
Dan Brown 2024-09-20 13:05:29 +01:00
parent ccd486f2a9
commit 787e06e3d8
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
9 changed files with 17 additions and 399 deletions

View File

@ -1,212 +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 {ListItemNode, ListNode} from '@lexical/list';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
import {ListPlugin} from '@lexical/react/LexicalListPlugin';
import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
import {
INDENT_CONTENT_COMMAND,
LexicalEditor,
OUTDENT_CONTENT_COMMAND,
} from 'lexical';
import {
expectHtmlToBeEqual,
html,
TestComposer,
} from 'lexical/__tests__/utils';
import {createRoot, Root} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {
INSERT_UNORDERED_LIST_COMMAND,
REMOVE_LIST_COMMAND,
} from '../../../../lexical-list/src/index';
describe('@lexical/list tests', () => {
let container: HTMLDivElement;
let reactRoot: Root;
beforeEach(() => {
container = document.createElement('div');
reactRoot = createRoot(container);
document.body.appendChild(container);
});
afterEach(() => {
container.remove();
// @ts-ignore
container = null;
jest.restoreAllMocks();
});
// Shared instance across tests
let editor: LexicalEditor;
function Test(): JSX.Element {
function TestPlugin() {
// Plugin used just to get our hands on the Editor object
[editor] = useLexicalComposerContext();
return null;
}
return (
<TestComposer config={{nodes: [ListNode, ListItemNode], theme: {}}}>
<RichTextPlugin
contentEditable={<ContentEditable />}
placeholder={
<div className="editor-placeholder">Enter some text...</div>
}
ErrorBoundary={LexicalErrorBoundary}
/>
<TestPlugin />
<ListPlugin />
</TestComposer>
);
}
test('Toggle an empty list on/off', async () => {
ReactTestUtils.act(() => {
reactRoot.render(<Test key="MegaSeeds, Morty!" />);
});
await ReactTestUtils.act(async () => {
await editor.update(() => {
editor.focus();
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
});
});
expectHtmlToBeEqual(
container.innerHTML,
html`
<div
contenteditable="true"
role="textbox"
spellcheck="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li value="1">
<br />
</li>
</ul>
</div>
`,
);
await ReactTestUtils.act(async () => {
await editor.update(() => {
editor.focus();
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
});
});
expectHtmlToBeEqual(
container.innerHTML,
html`
<div
contenteditable="true"
role="textbox"
spellcheck="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<p>
<br />
</p>
</div>
<div class="editor-placeholder">Enter some text...</div>
`,
);
});
test('Can create a list and indent/outdent it', async () => {
ReactTestUtils.act(() => {
reactRoot.render(<Test key="MegaSeeds, Morty!" />);
});
await ReactTestUtils.act(async () => {
await editor.update(() => {
editor.focus();
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
});
});
expectHtmlToBeEqual(
container.innerHTML,
html`
<div
contenteditable="true"
role="textbox"
spellcheck="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li value="1">
<br />
</li>
</ul>
</div>
`,
);
await ReactTestUtils.act(async () => {
await editor.update(() => {
editor.focus();
editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
});
});
expectHtmlToBeEqual(
container.innerHTML,
html`
<div
contenteditable="true"
role="textbox"
spellcheck="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li value="1">
<ul>
<li value="1"><br /></li>
</ul>
</li>
</ul>
</div>
`,
);
await ReactTestUtils.act(async () => {
await editor.update(() => {
editor.focus();
editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
});
});
expectHtmlToBeEqual(
container.innerHTML,
html`
<div
contenteditable="true"
role="textbox"
spellcheck="true"
style="user-select: text; white-space: pre-wrap; word-break: break-word;"
data-lexical-editor="true">
<ul>
<li value="1">
<br />
</li>
</ul>
</div>
`,
);
});
});

File diff suppressed because one or more lines are too long

View File

@ -89,7 +89,7 @@ export function initializeUnitTest(
document.body.appendChild(testEnv.container);
const editorEl = document.createElement('div');
editorEl.contentEditable = 'true';
editorEl.setAttribute('contenteditable', 'true');
testEnv.container.append(editorEl);
const lexicalEditor = createTestEditor(editorConfig);

View File

@ -16,10 +16,6 @@ import {
LexicalNode,
TextNode,
} from 'lexical';
import * as React from 'react';
import {createRef, useEffect} from 'react';
import {createRoot} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {
$createTestElementNode,
@ -44,34 +40,20 @@ describe('LexicalElementNode tests', () => {
async function update(fn: () => void) {
editor.update(fn);
editor.commitUpdates();
return Promise.resolve().then();
}
function useLexicalEditor(rootElementRef: React.RefObject<HTMLDivElement>) {
const editor = React.useMemo(() => createTestEditor(), []);
useEffect(() => {
const rootElement = rootElementRef.current;
editor.setRootElement(rootElement);
}, [rootElementRef, editor]);
return editor;
}
let editor: LexicalEditor;
async function init() {
const ref = createRef<HTMLDivElement>();
const root = document.createElement('div');
root.setAttribute('contenteditable', 'true');
container.innerHTML = '';
container.appendChild(root);
function TestBase() {
editor = useLexicalEditor(ref);
return <div ref={ref} contentEditable={true} />;
}
ReactTestUtils.act(() => {
createRoot(container).render(<TestBase />);
});
editor = createTestEditor();
editor.setRootElement(root);
// Insert initial block
await update(() => {

View File

@ -11,7 +11,6 @@ import {
$insertDataTransferForRichText,
} from '@lexical/clipboard';
import {$createListItemNode, $createListNode} from '@lexical/list';
import {registerTabIndentation} from '@lexical/react/LexicalTabIndentationPlugin';
import {$createHeadingNode, registerRichText} from '@lexical/rich-text';
import {
$createParagraphNode,
@ -112,134 +111,6 @@ describe('LexicalTabNode tests', () => {
);
});
test('element indents when selection at the start of the block', async () => {
const {editor} = testEnv;
registerRichText(editor);
registerTabIndentation(editor);
await editor.update(() => {
const selection = $getSelection()!;
selection.insertText('foo');
$getRoot().selectStart();
});
await editor.dispatchCommand(
KEY_TAB_COMMAND,
new KeyboardEvent('keydown'),
);
expect(testEnv.innerHTML).toBe(
'<p dir="ltr" style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">foo</span></p>',
);
});
test('elements indent when selection spans across multiple blocks', async () => {
const {editor} = testEnv;
registerRichText(editor);
registerTabIndentation(editor);
await editor.update(() => {
const root = $getRoot();
const paragraph = root.getFirstChild();
invariant($isElementNode(paragraph));
const heading = $createHeadingNode('h1');
const list = $createListNode('number');
const listItem = $createListItemNode();
const paragraphText = $createTextNode('foo');
const headingText = $createTextNode('bar');
const listItemText = $createTextNode('xyz');
root.append(heading, list);
paragraph.append(paragraphText);
heading.append(headingText);
list.append(listItem);
listItem.append(listItemText);
const selection = $createRangeSelection();
selection.focus.set(paragraphText.getKey(), 1, 'text');
selection.anchor.set(listItemText.getKey(), 1, 'text');
$setSelection(selection);
});
await editor.dispatchCommand(
KEY_TAB_COMMAND,
new KeyboardEvent('keydown'),
);
expect(testEnv.innerHTML).toBe(
'<p dir="ltr" style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">foo</span></p><h1 dir="ltr" style="padding-inline-start: calc(1 * 40px);"><span data-lexical-text="true">bar</span></h1><ol><li value="1"><ol><li value="1" dir="ltr"><span data-lexical-text="true">xyz</span></li></ol></li></ol>',
);
});
test('element tabs when selection is not at the start (1)', async () => {
const {editor} = testEnv;
registerRichText(editor);
registerTabIndentation(editor);
await editor.update(() => {
$getSelection()!.insertText('foo');
});
await editor.dispatchCommand(
KEY_TAB_COMMAND,
new KeyboardEvent('keydown'),
);
expect(testEnv.innerHTML).toBe(
'<p dir="ltr"><span data-lexical-text="true">foo</span><span data-lexical-text="true">\t</span></p>',
);
});
test('element tabs when selection is not at the start (2)', async () => {
const {editor} = testEnv;
registerRichText(editor);
registerTabIndentation(editor);
await editor.update(() => {
$getSelection()!.insertText('foo');
const textNode = $getRoot().getLastDescendant();
invariant($isTextNode(textNode));
textNode.select(1, 1);
});
await editor.dispatchCommand(
KEY_TAB_COMMAND,
new KeyboardEvent('keydown'),
);
expect(testEnv.innerHTML).toBe(
'<p dir="ltr"><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">oo</span></p>',
);
});
test('element tabs when selection is not at the start (3)', async () => {
const {editor} = testEnv;
registerRichText(editor);
registerTabIndentation(editor);
await editor.update(() => {
$getSelection()!.insertText('foo');
const textNode = $getRoot().getLastDescendant();
invariant($isTextNode(textNode));
textNode.select(1, 2);
});
await editor.dispatchCommand(
KEY_TAB_COMMAND,
new KeyboardEvent('keydown'),
);
expect(testEnv.innerHTML).toBe(
'<p dir="ltr"><span data-lexical-text="true">f</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">o</span></p>',
);
});
test('elements tabs when selection is not at the start and overlaps another tab', async () => {
const {editor} = testEnv;
registerRichText(editor);
registerTabIndentation(editor);
await editor.update(() => {
$getSelection()!.insertRawText('hello\tworld');
const root = $getRoot();
const firstTextNode = root.getFirstDescendant();
const lastTextNode = root.getLastDescendant();
const selection = $createRangeSelection();
selection.anchor.set(firstTextNode!.getKey(), 'hell'.length, 'text');
selection.focus.set(lastTextNode!.getKey(), 'wo'.length, 'text');
$setSelection(selection);
});
await editor.dispatchCommand(
KEY_TAB_COMMAND,
new KeyboardEvent('keydown'),
);
expect(testEnv.innerHTML).toBe(
'<p dir="ltr"><span data-lexical-text="true">hell</span><span data-lexical-text="true">\t</span><span data-lexical-text="true">rld</span></p>',
);
});
test('can type between two (leaf nodes) canInsertBeforeAfter false', async () => {
const {editor} = testEnv;
await editor.update(() => {

View File

@ -21,9 +21,6 @@ import {
TextModeType,
TextNode,
} from 'lexical';
import * as React from 'react';
import {createRef, useEffect, useMemo} from 'react';
import {createRoot} from 'react-dom/client';
import * as ReactTestUtils from 'lexical/shared/react-test-utils';
import {
@ -78,35 +75,20 @@ describe('LexicalTextNode tests', () => {
async function update(fn: () => void) {
editor.update(fn);
editor.commitUpdates();
return Promise.resolve().then();
}
function useLexicalEditor(rootElementRef: React.RefObject<HTMLDivElement>) {
const editor = useMemo(() => createTestEditor(editorConfig), []);
useEffect(() => {
const rootElement = rootElementRef.current;
editor.setRootElement(rootElement);
}, [rootElementRef, editor]);
return editor;
}
let editor: LexicalEditor;
async function init() {
const ref = createRef<HTMLDivElement>();
const root = document.createElement('div');
root.setAttribute('contenteditable', 'true');
container.innerHTML = '';
container.appendChild(root);
function TestBase() {
editor = useLexicalEditor(ref);
return <div ref={ref} contentEditable={true} />;
}
ReactTestUtils.act(() => {
createRoot(container).render(<TestBase />);
});
editor = createTestEditor();
editor.setRootElement(root);
// Insert initial block
await update(() => {

View File

@ -112,7 +112,6 @@ describe('HTML', () => {
ListNode,
ListItemNode,
QuoteNode,
CodeNode,
LinkNode,
],
});