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
parent
ccd486f2a9
commit
787e06e3d8
@ -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
@ -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);
|
||||
|
||||
@ -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(() => {
|
||||
@ -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(() => {
|
||||
@ -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(() => {
|
||||
@ -112,7 +112,6 @@ describe('HTML', () => {
|
||||
ListNode,
|
||||
ListItemNode,
|
||||
QuoteNode,
|
||||
CodeNode,
|
||||
LinkNode,
|
||||
],
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user