Fix test error (#236)

* test(code element): add language property * style: comply with new ESLint rules * test: add more null value checks * fix: merge error * Create rotten-bags-remain.md
cycleccc · Oct 9, 2024 · f111276 · f111276
1 parent 75c7366
commit f111276
Show file tree

Hide file tree

Showing 28 changed files with 339 additions and 252 deletions.
diff --git a/.changeset/rotten-bags-remain.md b/.changeset/rotten-bags-remain.md
@@ -0,0 +1,7 @@
+---
+"@wangeditor-next/basic-modules": patch
+"@wangeditor-next/code-highlight": patch
+"@wangeditor-next/core": patch
+---
+
+Fix test error
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -30,8 +30,9 @@ module.exports = {
         'cypress/globals': true,
       },
       globals: {
-        globalThis:'readonly',
-        vi: "readonly"
+        globalThis: 'readonly',
+        vi: 'readonly',
+        expect: 'readonly',
       },
       extends: [
         'plugin:@typescript-eslint/eslint-recommended',

diff --git a/packages/basic-modules/__tests__/code-block/code-block-menu.test.ts b/packages/basic-modules/__tests__/code-block/code-block-menu.test.ts
@@ -6,23 +6,14 @@
 import { Editor, Element, Transforms } from 'slate'
 
 import createEditor from '../../../../tests/utils/create-editor'
+import { content } from '../../../code-highlight/__tests__/content'
 import CodeBlockMenu from '../../src/modules/code-block/menu/CodeBlockMenu'
 
 describe('code-block menu', () => {
   const menu = new CodeBlockMenu()
   let editor: any
   let startLocation: any
 
-  const codeElem = {
-    type: 'code',
-    language: 'javascript',
-    children: [{ text: 'var' }],
-  }
-  const preElem = {
-    type: 'pre',
-    children: [codeElem],
-  }
-
   beforeEach(() => {
     editor = createEditor()
     startLocation = Editor.start(editor, [])
@@ -34,19 +25,19 @@ describe('code-block menu', () => {
   })
 
   it('getValue and isActive', async () => {
-    editor.select(startLocation)
-    expect(menu.isActive(editor)).toBeFalsy()
-    expect(menu.getValue(editor)).toBe('')
+    const editor1 = createEditor({
+      content,
+    })
 
-    editor.insertNode(preElem) // 插入 code node
-    editor.select({
+    editor.select(startLocation)
+    editor1.select({
       path: [1, 0, 0], // 选中 code node
-      offset: 3,
-    })
-    setTimeout(() => {
-      expect(menu.isActive(editor)).toBeTruthy()
-      expect(menu.getValue(editor)).toBe('javascript')
+      offset: 0,
     })
+    expect(menu.isActive(editor1)).toBeTruthy()
+    expect(menu.getValue(editor1)).toBe('javascript')
+    expect(menu.isActive(editor)).toBeFalsy()
+    expect(menu.getValue(editor)).toBe('')
   })
 
   it('is disabled', () => {
@@ -56,7 +47,7 @@ describe('code-block menu', () => {
     Transforms.setNodes(editor, { type: 'header1' } as Partial<Element>)
     expect(menu.isDisabled(editor)).toBeTruthy() // 非 p pre ，则禁用
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: 'javascript' }] })
     expect(menu.isDisabled(editor)).toBeFalsy()
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })
@@ -74,18 +65,20 @@ describe('code-block menu', () => {
   })
 
   it('exec - to paragraph', () => {
-    editor.select(startLocation)
-    editor.insertNode(preElem) // 插入 code node
-    editor.select({
+    const editor1 = createEditor({
+      content,
+    })
+
+    editor1.select({
       path: [1, 0, 0], // 选中 code node
       offset: 3,
     })
 
-    menu.exec(editor, '') // 取消 code-block
-    const preList = editor.getElemsByTypePrefix('pre')
+    menu.exec(editor1, '') // 取消 code-block
+    const preList = editor1.getElemsByTypePrefix('pre')
 
     expect(preList.length).toBe(0)
-    const codeLis = editor.getElemsByTypePrefix('code')
+    const codeLis = editor1.getElemsByTypePrefix('code')
 
     expect(codeLis.length).toBe(0)
   })

diff --git a/packages/basic-modules/__tests__/code-block/elem-to-html.test.ts b/packages/basic-modules/__tests__/code-block/elem-to-html.test.ts
@@ -8,7 +8,7 @@ import { codeToHtmlConf, preToHtmlConf } from '../../src/modules/code-block/elem
 describe('code-block - elem to html', () => {
   it('code to html', () => {
     expect(codeToHtmlConf.type).toBe('code')
-    const elem = { type: 'code', children: [] }
+    const elem = { type: 'code', children: [], language: '' }
     const html = codeToHtmlConf.elemToHtml(elem, 'hello')
 
     expect(html).toBe('<code>hello</code>')

diff --git a/packages/basic-modules/__tests__/code-block/plugin.test.ts b/packages/basic-modules/__tests__/code-block/plugin.test.ts
@@ -28,6 +28,7 @@ describe('code-block plugin', () => {
   const codeElem = {
     type: 'code',
     children: [{ text: ' var' }],
+    language: '',
   }
   const preElem = {
     type: 'pre',
@@ -81,6 +82,7 @@ describe('code-block plugin', () => {
     const codeElem = {
       type: 'code',
       children: [{ text: 'var' }],
+      language: '',
     }
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const preElem = {
@@ -137,7 +139,7 @@ describe('code-block plugin', () => {
 
   it('normalizeNode - pre node 不能是第一个节点，否则前面插入 p', () => {
     editor.select(startLocation)
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
 
     const pList = editor.getElemsByTypePrefix('paragraph')
 

diff --git a/packages/basic-modules/__tests__/code-block/render-elem.test.ts b/packages/basic-modules/__tests__/code-block/render-elem.test.ts
@@ -12,7 +12,7 @@ describe('code-block render elem', () => {
   it('render code elem', () => {
     expect(renderCodeConf.type).toBe('code')
 
-    const elem = { type: 'code', children: [] }
+    const elem = { type: 'code', children: [], language: '' }
     const vnode = renderCodeConf.renderElem(elem, null, editor)
 
     expect(vnode.sel).toBe('code')

diff --git a/packages/basic-modules/__tests__/color/color-menus.test.ts b/packages/basic-modules/__tests__/color/color-menus.test.ts
@@ -7,6 +7,7 @@ import { Editor } from 'slate'
 
 import { isHTMLElememt } from '../../../../packages/core/src/utils/dom'
 import createEditor from '../../../../tests/utils/create-editor'
+import { preNode } from '../../../code-highlight/__tests__/content'
 import BgColorMenu from '../../src/modules/color/menu/BgColorMenu'
 import ColorMenu from '../../src/modules/color/menu/ColorMenu'
 
@@ -60,7 +61,7 @@ describe('color menus', () => {
       expect(menu.isDisabled(editor)).toBeFalsy()
     })
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode(preNode)
     menus.forEach(({ menu }) => {
       expect(menu.isDisabled(editor)).toBeTruthy()
     })

diff --git a/packages/basic-modules/__tests__/emotion/emotion-menu.test.ts b/packages/basic-modules/__tests__/emotion/emotion-menu.test.ts
@@ -36,7 +36,7 @@ describe('font family menu', () => {
     editor.select(startLocation)
     expect(menu.isDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(menu.isDisabled(editor)).toBeTruthy()
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })

diff --git a/packages/basic-modules/__tests__/font-size-family/menu/font-family-menu.test.ts b/packages/basic-modules/__tests__/font-size-family/menu/font-family-menu.test.ts
@@ -47,7 +47,7 @@ describe('font family menu', () => {
     editor.select(startLocation)
     expect(menu.isDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(menu.isDisabled(editor)).toBeTruthy()
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })

diff --git a/packages/basic-modules/__tests__/font-size-family/menu/font-size-menu.test.ts b/packages/basic-modules/__tests__/font-size-family/menu/font-size-menu.test.ts
@@ -47,7 +47,7 @@ describe('font family menu', () => {
     editor.select(startLocation)
     expect(menu.isDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(menu.isDisabled(editor)).toBeTruthy()
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })

diff --git a/packages/basic-modules/__tests__/format-painter/plugin.test.ts b/packages/basic-modules/__tests__/format-painter/plugin.test.ts
@@ -6,13 +6,14 @@ describe('format painter plugin', () => {
   let editor: any
 
   beforeEach(() => {
-    editor = withFormatPainter(createEditor())
+    editor = withFormatPainter(createEditor(
+      { content: [{ type: 'paragraph', children: [{ text: 'Hello World' }] }] },
+    ))
 
     vi.spyOn(document, 'addEventListener')
     vi.spyOn(document, 'removeEventListener')
 
     editor.focus()
-    editor.insertText('Hello World')
     editor.select({
       anchor: { path: [0, 0], offset: 0 },
       focus: { path: [0, 0], offset: 5 },

diff --git a/packages/basic-modules/__tests__/header/helper.test.ts b/packages/basic-modules/__tests__/header/helper.test.ts
@@ -37,7 +37,7 @@ describe('header helper', () => {
     Transforms.setNodes(editor, { type: 'header1' })
     expect(isMenuDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(isMenuDisabled(editor)).toBeTruthy() // 只能用于 p header
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })

diff --git a/packages/basic-modules/__tests__/indent/menu/decrease-indent-menu.test.ts b/packages/basic-modules/__tests__/indent/menu/decrease-indent-menu.test.ts
@@ -31,7 +31,7 @@ describe('decrease indent menu', () => {
     Transforms.setNodes(editor, { type: 'header1', children: [] })
     expect(menu.isDisabled(editor)).toBeTruthy() // 没有 indent 则 disabled
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(menu.isDisabled(editor)).toBeTruthy() // 除了 p header 之外，其他 type 不可用 indent
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })

diff --git a/packages/basic-modules/__tests__/indent/menu/increase-indent-menu.test.ts b/packages/basic-modules/__tests__/indent/menu/increase-indent-menu.test.ts
@@ -31,7 +31,7 @@ describe('increase indent menu', () => {
     Transforms.setNodes(editor, { type: 'header1', children: [] })
     expect(menu.isDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(menu.isDisabled(editor)).toBeTruthy() // 除了 p header 之外，其他 type 不可用 indent
     Transforms.setNodes(editor, { type: 'header1', children: [{ text: 'hello' }] })
     menu.exec(editor, '')

diff --git a/packages/basic-modules/__tests__/justify/menus.test.ts b/packages/basic-modules/__tests__/justify/menus.test.ts
@@ -45,7 +45,7 @@ describe('justify menus', () => {
     editor.select(startLocation)
     expect(centerMenu.isDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(centerMenu.isDisabled(editor)).toBeTruthy()
     Transforms.removeNodes(editor, { mode: 'highest' })
 

diff --git a/packages/basic-modules/__tests__/line-height/line-height-menu.test.ts b/packages/basic-modules/__tests__/line-height/line-height-menu.test.ts
@@ -63,7 +63,7 @@ describe('line-height menu', () => {
     Transforms.setNodes(editor, { type: 'list-item' })
     expect(menu.isDisabled(editor)).toBeFalsy()
 
-    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }] }] })
+    editor.insertNode({ type: 'pre', children: [{ type: 'code', children: [{ text: 'var' }], language: '' }] })
     expect(menu.isDisabled(editor)).toBeTruthy()
     // Transforms.removeNodes(editor, { mode: 'highest' }) // 移除 pre/code
   })

diff --git a/packages/basic-modules/__tests__/link/helper.test.ts b/packages/basic-modules/__tests__/link/helper.test.ts
@@ -71,6 +71,7 @@ describe('link module helper', () => {
         {
           type: 'code',
           children: [{ text: 'var' }],
+          language: 'javascript',
         },
       ],
     })

diff --git a/packages/basic-modules/__tests__/text-style/menu/menus.test.ts b/packages/basic-modules/__tests__/text-style/menu/menus.test.ts
@@ -67,6 +67,7 @@ describe('text style menus', () => {
           {
             type: 'code',
             children: [{ text: 'var' }],
+            language: '',
           } as Element,
         ],
       } as Element)

diff --git a/packages/basic-modules/__tests__/todo/menu/todo-menu.test.ts b/packages/basic-modules/__tests__/todo/menu/todo-menu.test.ts
@@ -86,6 +86,7 @@ describe('todo-menu', () => {
         {
           type: 'code',
           children: [{ text: 'hello' }],
+          language: '',
         },
       ],
     })

diff --git a/packages/basic-modules/src/modules/image/render-elem.tsx b/packages/basic-modules/src/modules/image/render-elem.tsx
@@ -183,7 +183,7 @@ function renderResizeContainer(
 
           if (parentNode == null) { return }
           const parentNodeDom = DomEditor.toDOMNode(editor, parentNode)
-          const rect = parentNodeDom.getBoundingClientRect()
+          const rect = parentNodeDom.getBoundingClientRect ? parentNodeDom.getBoundingClientRect() : { width: 0 }
           // 获取元素的计算样式
           const style = window.getComputedStyle(parentNodeDom)
           // 获取左右 padding 和 border 的宽度

diff --git a/packages/code-highlight/__tests__/parse-html.test.ts b/packages/code-highlight/__tests__/parse-html.test.ts
@@ -13,7 +13,7 @@ describe('code highlight - parse style html', () => {
 
   it('v5 format', () => {
     const $code = $('<code class="language-javascript"></code>') // v5 html format
-    const code = { type: 'code', children: [{ text: 'var a = 100;' }] }
+    const code = { type: 'code', children: [{ text: 'var a = 100;' }], language: '' }
 
     const res = parseCodeStyleHtml($code[0], code, editor)
 
@@ -26,7 +26,7 @@ describe('code highlight - parse style html', () => {
 
   it('v4 format', () => {
     const $code = $('<code class="Javascript"></code>') // v4 html format
-    const code = { type: 'code', children: [{ text: 'var a = 100;' }] }
+    const code = { type: 'code', children: [{ text: 'var a = 100;' }], language: '' }
 
     const res = parseCodeStyleHtml($code[0], code, editor)
 

diff --git a/packages/core/__tests__/config/editor-config.test.ts b/packages/core/__tests__/config/editor-config.test.ts
@@ -147,6 +147,6 @@ describe('editor config', () => {
 
     setTimeout(() => {
       expect(fn).toHaveBeenCalledWith(editor)
-    }, 20)
+    }, 100)
   })
 })
diff --git a/packages/core/__tests__/editor/plugins/with-dom.test.ts b/packages/core/__tests__/editor/plugins/with-dom.test.ts
@@ -104,10 +104,10 @@ describe('editor DOM API', () => {
   })
 
   it('foucus', () => {
-    const editor = createEditor()
+    const editor = createEditor(
+      { content: [{ type: 'paragraph', children: [{ text: 'Hello' }] }] },
+    )
 
-    editor.focus()
-    editor.insertText('hello')
     editor.focus()
     // 测试选区定位到开始
     expect(editor.selection).toStrictEqual({

diff --git a/packages/core/src/editor/dom-editor.ts b/packages/core/src/editor/dom-editor.ts
@@ -520,9 +520,11 @@ export const DomEditor = {
 
       // Calculate how far into the text node the `nearestNode` is, so that we
       // can determine what the offset relative to the text node is.
-      if (leafNode) {
+      const window = DomEditor.getWindow(editor)
+
+      if (leafNode && window.document.createRange) {
         textNode = leafNode.closest('[data-slate-node="text"]')!
-        const window = DomEditor.getWindow(editor)
+
         const range = window.document.createRange()
 
         range.setStart(textNode, 0)