test(TABLE): add more table test (#527)

* test(table): add table utils has-common test

* chore: add global test type

* test(table): add table utils point test

* test(table): add table utils util test

* test(vdom): add tests for addVnodeStyle utility function

* test(table): add tests for isCellInFirstRow helper function

* test(table): refactor isCellInFirstRow function

* test(table): add mergeChildren to parseTableHtml

* test: fix mergeChildren property in parseTableHtml
function

packages/table-module/__tests__/helper.test.ts

@@ -0,0 +1,113 @@
+import * as core from '@wangeditor-next/core'
+import * as slate from 'slate'
+
+import createEditor from '../../../tests/utils/create-editor'
+import { TableElement } from '../src/module/custom-types'
+import { isCellInFirstRow } from '../src/module/helpers'
+
+function setEditorSelection(
+  editor: core.IDomEditor,
+  selection: slate.Selection = {
+    anchor: { path: [0, 0], offset: 0 },
+    focus: { path: [0, 0], offset: 0 },
+  },
+) {
+  editor.selection = selection
+}
+
+describe('isCellInFirstRow', () => {
+  const content = [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+      ],
+    },
+    {
+      type: 'table',
+      width: 'auto',
+      children: [
+        {
+          type: 'table-row',
+          children: [
+            {
+              type: 'table-cell',
+              children: [
+                {
+                  text: '',
+                },
+              ],
+              isHeader: true,
+            },
+            {
+              type: 'table-cell',
+              children: [
+                {
+                  text: '',
+                },
+              ],
+              isHeader: true,
+            },
+          ],
+        },
+        {
+          type: 'table-row',
+          children: [
+            {
+              type: 'table-cell',
+              children: [
+                {
+                  text: '',
+                },
+              ],
+            },
+            {
+              type: 'table-cell',
+              children: [
+                {
+                  text: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      columnWidths: [
+        60,
+        60,
+      ],
+      scrollWidth: 120,
+      height: 62,
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+      ],
+    },
+  ]
+
+  const editor = createEditor({ content })
+
+  setEditorSelection(editor)
+
+  it('should correctly identify cells in the first row', () => {
+    const result = isCellInFirstRow(editor, (editor.children[1] as TableElement).children[0].children[0])
+
+    expect(result).toBe(true)
+    // Test cell in second row
+    const secondRowCell = (editor.children[1] as TableElement).children[1].children[0]
+
+    expect(isCellInFirstRow(editor, secondRowCell)).toBe(false)
+
+    // Test non-cell element
+    const nonCellElement = editor.children[0]
+
+    expect(isCellInFirstRow(editor, nonCellElement as any)).toBe(false)
+
+  })
+})

packages/table-module/__tests__/parse-html.test.ts

@@ -97,6 +97,54 @@ describe('table - parse html', () => {
         children: [{ type: 'table-cell', children: [{ text: 'hello world' }] }],
       },
     ]
+    const mergeChildren = [
+      {
+        type: 'table-row',
+        children: [
+          {
+            type: 'table-cell',
+            isHeader: false,
+            colSpan: 2,
+            rowSpan: 1,
+            width: 'auto',
+            children: [
+              {
+                text: '',
+              },
+            ],
+            hidden: false,
+            borderWidth: '1',
+            borderStyle: 'solid',
+            borderColor: '#ccc',
+          },
+          {
+            type: 'table-cell',
+            children: [
+              {
+                text: '',
+              },
+            ],
+            hidden: true,
+          },
+          {
+            type: 'table-cell',
+            isHeader: false,
+            colSpan: 1,
+            rowSpan: 1,
+            width: 'auto',
+            children: [
+              {
+                text: '',
+              },
+            ],
+            hidden: true,
+            borderWidth: '1',
+            borderStyle: 'solid',
+            borderColor: '#ccc',
+          },
+        ],
+      },
+    ]
 
     expect($table[0].matches(parseTableHtmlConf.selector)).toBeTruthy()
 
@@ -106,5 +154,12 @@ describe('table - parse html', () => {
       children,
       height: 0,
     })
+
+    expect(parseTableHtmlConf.parseElemHtml($table[0], mergeChildren, editor)).toEqual({
+      type: 'table',
+      width: '100%',
+      children: mergeChildren,
+      height: 0,
+    })
   })
 })

packages/table-module/__tests__/utils/point.test.ts

@@ -0,0 +1,31 @@
+import { Point } from '../../src/utils/point'
+
+describe('Point', () => {
+  test('should create a point with given x and y', () => {
+    const point = new Point(1, 2)
+
+    expect(point.x).toBe(1)
+    expect(point.y).toBe(2)
+  })
+
+  test('should create a point using valueOf', () => {
+    const point = Point.valueOf(3, 4)
+
+    expect(point.x).toBe(3)
+    expect(point.y).toBe(4)
+  })
+
+  test('should return true for equal points', () => {
+    const point1 = new Point(5, 6)
+    const point2 = new Point(5, 6)
+
+    expect(Point.equals(point1, point2)).toBe(true)
+  })
+
+  test('should return false for different points', () => {
+    const point1 = new Point(7, 8)
+    const point2 = new Point(9, 10)
+
+    expect(Point.equals(point1, point2)).toBe(false)
+  })
+})

packages/table-module/__tests__/utils/util.test.ts

@@ -0,0 +1,23 @@
+import { genRandomStr } from '../../src/utils/util'
+
+describe('genRandomStr', () => {
+  it('should generate a random string with default prefix', () => {
+    const result = genRandomStr()
+
+    expect(result).toMatch(/^r-/)
+  })
+
+  it('should generate a random string with specified prefix', () => {
+    const prefix = 'test'
+    const result = genRandomStr(prefix)
+
+    expect(result).toMatch(/^test-/)
+  })
+
+  it('should generate unique strings', () => {
+    const result1 = genRandomStr()
+    const result2 = genRandomStr()
+
+    expect(result1).not.toBe(result2)
+  })
+})

packages/table-module/__tests__/utils/vdom.test.ts

@@ -0,0 +1,32 @@
+import { h, VNode } from 'snabbdom'
+
+import { addVnodeStyle } from '../../src/utils/vdom'
+
+describe('addVnodeStyle', () => {
+  it('should add style to vnode', () => {
+    const vnode: VNode = { data: {} } as VNode
+    const newStyle = { color: 'red', fontSize: '16px' }
+
+    addVnodeStyle(vnode, newStyle)
+
+    expect(vnode.data?.style).toEqual(newStyle)
+  })
+
+  it('should merge styles if vnode already has styles', () => {
+    const vnode: VNode = h('div', { style: { color: 'blue' } })
+    const newStyle = { fontSize: '16px' }
+
+    addVnodeStyle(vnode, newStyle)
+
+    expect(vnode.data?.style).toEqual({ color: 'blue', fontSize: '16px' })
+  })
+
+  it('should initialize data and style if they are not present', () => {
+    const vnode: VNode = {} as VNode
+    const newStyle = { color: 'red' }
+
+    addVnodeStyle(vnode, newStyle)
+
+    expect(vnode.data?.style).toEqual(newStyle)
+  })
+})