Skip to content

Commit 7f5fd16

Browse files
committed
Lexical: Added some general test guidance
Just to help remember the general layout/methods that we've added to make testing easier.
1 parent 0d1a237 commit 7f5fd16

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

resources/js/wysiwyg/testing.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Testing Guidance
2+
3+
This is testing guidance specific for this Lexical-based WYSIWYG editor.
4+
There is a lot of pre-existing test code carried over form the fork of lexical, but since there we've added a range of helpers and altered how testing can be done to make things a bit simpler and aligned with how we run tests.
5+
6+
This document is an attempt to document the new best options for added tests with an aim for standardisation on these approaches going forward.
7+
8+
## Utils Location
9+
10+
Most core test utils can be found in the file at path: resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
11+
12+
## Test Example
13+
14+
This is an example of a typical test using the common modern utilities to help perform actions or assertions. Comments are for this example only, and are not expected in actual test files.
15+
16+
```ts
17+
import {
18+
createTestContext,
19+
dispatchKeydownEventForNode,
20+
expectEditorStateJSONPropToEqual,
21+
expectNodeShapeToMatch
22+
} from "lexical/__tests__/utils";
23+
import {
24+
$getRoot,
25+
ParagraphNode,
26+
TextNode
27+
} from "lexical";
28+
29+
describe('A specific service or file or function', () => {
30+
test('it does thing', async () => {
31+
// Create the editor context and get an editor reference
32+
const {editor} = createTestContext();
33+
34+
// Run an action within the editor.
35+
let pNode: ParagraphNode;
36+
editor.updateAndCommit(() => {
37+
pNode = new ParagraphNode();
38+
const text = new TextNode('Hello!');
39+
pNode.append(text);
40+
$getRoot().append(pNode);
41+
});
42+
43+
// Dispatch key events via the DOM
44+
dispatchKeydownEventForNode(pNode!, editor, ' ');
45+
46+
// Check the shape (and text) of the resulting state
47+
expectNodeShapeToMatch(editor, [{type: 'paragraph', children: [
48+
{text: 'Hello!'},
49+
]}]);
50+
51+
// Check specific props in the resulting JSON state
52+
expectEditorStateJSONPropToEqual(editor, '0.0.text', 'Hello!');
53+
});
54+
});
55+
```

0 commit comments

Comments
 (0)