test(code highlight): add more tests

Author: cycleccc

packages/code-highlight/__tests__/decorate.test.ts

@@ -7,6 +7,7 @@ import { IDomEditor } from '@wangeditor-next/core'
 import createEditor from '../../../tests/utils/create-editor'
 import codeHighLightDecorate from '../src/decorate/index'
 import { content, textNode, textNodePath } from './content'
+import { getPrismTokenLength } from '../src/vendor/prism'
 
 describe('code-highlight decorate', () => {
   let editor: IDomEditor | null = null
@@ -29,4 +30,18 @@ describe('code-highlight decorate', () => {
     const ranges = codeHighLightDecorate([textNode, textNodePath])
     expect(ranges.length).toBe(4) // 把 textNode 内容拆分为 4 段
   })
+
+  it('getPrismTokenLength', () => {
+    const token = {
+      type: 'example',
+      content: [
+        'hello', // length 5
+        { type: 'nested', content: 'world' }, // length 5
+        { type: 'nested', content: ['foo', { type: 'deepNested', content: 'bar' }] }, // length 3 + 3 = 6
+      ],
+    }
+
+    const result = getPrismTokenLength(token)
+    expect(result).toBe(16) // 'hello' (5) + 'world' (5) + 'foo' (3) + 'bar' (3) = 16
+  })
 })

packages/code-highlight/__tests__/elem-to-html.test.ts

@@ -6,7 +6,7 @@
 import { IDomEditor } from '@wangeditor-next/core'
 import createEditor from '../../../tests/utils/create-editor'
 import { codeToHtmlConf } from '../src/module/elem-to-html'
-import { content, codeNode, language } from './content'
+import { content, codeNode, preNode, language } from './content'
 
 describe('code-highlight elem to html', () => {
   let editor: IDomEditor | null = null
@@ -30,7 +30,9 @@ describe('code-highlight elem to html', () => {
 
     if (editor == null) throw new Error('editor is null')
     const text = 'var n = 100;'
-    const html = codeToHtmlConf.elemToHtml(codeNode, text)
+    let html = codeToHtmlConf.elemToHtml(codeNode, text)
     expect(html).toBe(`<code class="language-${language}">${text}</code>`)
+    html = codeToHtmlConf.elemToHtml(preNode, text)
+    expect(html).toBe(`<code >${text}</code>`)
   })
 })

packages/code-highlight/__tests__/select-lang-menu.test.ts

@@ -103,4 +103,20 @@ describe('code-highlight select lang menu', () => {
       done()
     })
   })
+
+  it('menu exec (without lang)', done => {
+    if (editor == null || menu == null) throw new Error('editor or menu is null')
+
+    // select codeNode
+    editor.select(codeLocation)
+    menu.exec(editor, 'hello') // change lang
+
+    setTimeout(() => {
+      if (editor == null || menu == null) return
+
+      editor.select(codeLocation)
+      expect(menu.getValue(editor)).toBe('')
+      done()
+    })
+  })
 })

packages/code-highlight/src/utils/vdom.ts

@@ -3,7 +3,7 @@
  * @author wangfupeng
  */
 
-import { VNode, VNodeStyle } from 'snabbdom'
+import { VNode } from 'snabbdom'
 
 /**
  * 给 vnode 添加 className
@@ -17,16 +17,3 @@ export function addVnodeClassName(vnode: VNode, className: string) {
 
   Object.assign(data.props, { className })
 }
-
-/**
- * 给 vnode 添加样式
- * @param vnode vnode
- * @param newStyle { key: val }
- */
-export function addVnodeStyle(vnode: VNode, newStyle: VNodeStyle) {
-  if (vnode.data == null) vnode.data = {}
-  const data = vnode.data
-  if (data.style == null) data.style = {}
-
-  Object.assign(data.style, newStyle)
-}