BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/lexical/core/nodes/__tests__/unit/LexicalParagraphNode.test.ts

   1 /**
   2  * Copyright (c) Meta Platforms, Inc. and affiliates.
   3  *
   4  * This source code is licensed under the MIT license found in the
   5  * LICENSE file in the root directory of this source tree.
   6  *
   7  */
   8
   9 import {
  10   $createParagraphNode,
  11   $getRoot,
  12   $isParagraphNode,
  13   ParagraphNode,
  14   RangeSelection,
  15 } from 'lexical';
  16
  17 import {initializeUnitTest} from '../../../__tests__/utils';
  18
  19 const editorConfig = Object.freeze({
  20   namespace: '',
  21   theme: {
  22     paragraph: 'my-paragraph-class',
  23   },
  24 });
  25
  26 describe('LexicalParagraphNode tests', () => {
  27   initializeUnitTest((testEnv) => {
  28     test('ParagraphNode.constructor', async () => {
  29       const {editor} = testEnv;
  30
  31       await editor.update(() => {
  32         const paragraphNode = new ParagraphNode();
  33
  34         expect(paragraphNode.getType()).toBe('paragraph');
  35         expect(paragraphNode.getTextContent()).toBe('');
  36       });
  37       expect(() => new ParagraphNode()).toThrow();
  38     });
  39
  40     test('ParagraphNode.exportJSON() should return and object conforming to the expected schema', async () => {
  41       const {editor} = testEnv;
  42
  43       await editor.update(() => {
  44         const node = $createParagraphNode();
  45
  46         // If you broke this test, you changed the public interface of a
  47         // serialized Lexical Core Node. Please ensure the correct adapter
  48         // logic is in place in the corresponding importJSON  method
  49         // to accomodate these changes.
  50         expect(node.exportJSON()).toStrictEqual({
  51           alignment: '',
  52           children: [],
  53           direction: null,
  54           id: '',
  55           inset: 0,
  56           textStyle: '',
  57           type: 'paragraph',
  58           version: 1,
  59         });
  60       });
  61     });
  62
  63     test('ParagraphNode.createDOM()', async () => {
  64       const {editor} = testEnv;
  65
  66       await editor.update(() => {
  67         const paragraphNode = new ParagraphNode();
  68
  69         expect(paragraphNode.createDOM(editorConfig).outerHTML).toBe(
  70           '<p class="my-paragraph-class"></p>',
  71         );
  72         expect(
  73           paragraphNode.createDOM({
  74             namespace: '',
  75             theme: {},
  76           }).outerHTML,
  77         ).toBe('<p></p>');
  78       });
  79     });
  80
  81     test('ParagraphNode.updateDOM()', async () => {
  82       const {editor} = testEnv;
  83
  84       await editor.update(() => {
  85         const paragraphNode = new ParagraphNode();
  86         const domElement = paragraphNode.createDOM(editorConfig);
  87
  88         expect(domElement.outerHTML).toBe('<p class="my-paragraph-class"></p>');
  89
  90         const newParagraphNode = new ParagraphNode();
  91         const result = newParagraphNode.updateDOM(
  92           paragraphNode,
  93           domElement,
  94           editorConfig,
  95         );
  96
  97         expect(result).toBe(false);
  98         expect(domElement.outerHTML).toBe('<p class="my-paragraph-class"></p>');
  99       });
 100     });
 101
 102     test('ParagraphNode.insertNewAfter()', async () => {
 103       const {editor} = testEnv;
 104       let paragraphNode: ParagraphNode;
 105
 106       await editor.update(() => {
 107         const root = $getRoot();
 108         paragraphNode = new ParagraphNode();
 109         root.append(paragraphNode);
 110       });
 111
 112       expect(testEnv.outerHTML).toBe(
 113         '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p></div>',
 114       );
 115
 116       await editor.update(() => {
 117         const selection = paragraphNode.select();
 118         const result = paragraphNode.insertNewAfter(
 119           selection as RangeSelection,
 120           false,
 121         );
 122         expect(result).toBeInstanceOf(ParagraphNode);
 123         expect(result.getDirection()).toEqual(paragraphNode.getDirection());
 124         expect(testEnv.outerHTML).toBe(
 125           '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p><br></p></div>',
 126         );
 127       });
 128     });
 129
 130     test('id is supported', async () => {
 131       const {editor} = testEnv;
 132       let paragraphNode: ParagraphNode;
 133
 134       await editor.update(() => {
 135         paragraphNode = new ParagraphNode();
 136         paragraphNode.setId('testid')
 137         $getRoot().append(paragraphNode);
 138       });
 139
 140       expect(testEnv.innerHTML).toBe(
 141           '<p id="testid"><br></p>',
 142       );
 143     });
 144
 145     test('$createParagraphNode()', async () => {
 146       const {editor} = testEnv;
 147
 148       await editor.update(() => {
 149         const paragraphNode = new ParagraphNode();
 150         const createdParagraphNode = $createParagraphNode();
 151
 152         expect(paragraphNode.__type).toEqual(createdParagraphNode.__type);
 153         expect(paragraphNode.__parent).toEqual(createdParagraphNode.__parent);
 154         expect(paragraphNode.__key).not.toEqual(createdParagraphNode.__key);
 155       });
 156     });
 157
 158     test('$isParagraphNode()', async () => {
 159       const {editor} = testEnv;
 160
 161       await editor.update(() => {
 162         const paragraphNode = new ParagraphNode();
 163
 164         expect($isParagraphNode(paragraphNode)).toBe(true);
 165       });
 166     });
 167   });
 168 });