test: 完善了表格菜单的单元测试

test/unit/menus/table/create-table.test.ts

@@ -0,0 +1,56 @@
+/**
+ * @description 创建 table 测试
+ * @author luochao
+ */
+import CreateTable from '../../../../src/menus/table/create-table'
+import createEditor from '../../../helpers/create-editor'
+import mockCommand from '../../../helpers/command-mock'
+import $ from '../../../../src/utils/dom-core'
+
+let editor: ReturnType<typeof createEditor>
+let createTableInstance: CreateTable
+let id = 1
+
+describe('Create Table Util', () => {
+    beforeEach(() => {
+        editor = createEditor(document, `div${id++}`)
+        createTableInstance = new CreateTable(editor)
+
+        mockCommand(document)
+        document.queryCommandSupported = jest.fn().mockReturnValue(true)
+    })
+
+    test('调用 createAction 能创建指定行和列的表格', () => {
+        createTableInstance.createAction(2, 1)
+
+        expect(document.execCommand).toBeCalledWith(
+            'insertHTML',
+            false,
+            `<table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><th></th></tr><tr><td></td></tr></tbody></table><p><br></p>`
+        )
+    })
+
+    test('如果当前选区在无序序列中，调用 createAction 将不会执行插入表格操作', () => {
+        const liParent = $('<ul></ul>')
+        const li = $('<li></li>')
+        liParent.append(li)
+
+        jest.spyOn(editor.selection, 'getSelectionContainerElem').mockReturnValue(li)
+
+        createTableInstance.createAction(1, 1)
+
+        expect(document.execCommand).not.toBeCalledWith()
+    })
+
+    test('如果当前选区在有序序列中，调用 createAction 将不会执行插入表格操作', () => {
+        const liParent = $('<ol></ol>')
+        const li = $('<li></li>')
+        liParent.append(li)
+
+        jest.spyOn(editor.selection, 'getSelectionContainerElem').mockReturnValue(li)
+
+        createTableInstance.createAction(1, 1)
+
+        expect(document.execCommand).not.toBeCalledWith()
+    })
+})

test/unit/menus/table/getNode.test.ts

@@ -0,0 +1,98 @@
+/**
+ * @description table tooltip 测试
+ * @author luochao
+ */
+import createEditor from '../../../helpers/create-editor'
+import GetNode from '../../../../src/menus/table/bind-event/event/getNode'
+
+let getNodeUtil: GetNode
+
+describe('Table getNode Util', () => {
+    beforeAll(() => {
+        const editor = createEditor(document, 'div1')
+        getNodeUtil = new GetNode(editor)
+    })
+
+    test('getRowNode 获取当前dom节点的行元素', () => {
+        const td = document.createElement('td')
+        const tr = document.createElement('tr')
+        tr.appendChild(td)
+        document.body.appendChild(tr)
+
+        expect(getNodeUtil.getRowNode(td)).toEqual(tr)
+    })
+
+    test('getRowNode 如果当前焦点没有父元素，直接返回当前元素', () => {
+        const div = document.createElement('div')
+        document.body.appendChild(div)
+
+        Object.defineProperty(div, 'parentNode', {
+            value: null,
+        })
+
+        expect(getNodeUtil.getRowNode(div)).toEqual(div)
+    })
+
+    test('getCurrentRowIndex 获取当前表格行的序号', () => {
+        const table = document.createElement('table')
+        const body = document.createElement('tbody')
+        const td = document.createElement('td')
+        const tr0 = document.createElement('tr')
+        const tr1 = document.createElement('tr')
+        tr0.appendChild(td)
+        tr1.appendChild(td)
+        body.appendChild(tr0)
+        body.appendChild(tr1)
+        table.appendChild(body)
+        document.body.appendChild(table)
+
+        expect(getNodeUtil.getCurrentRowIndex(table, tr1)).toEqual(1)
+    })
+
+    test('getCurrentRowIndex 获取当前表格行的序号，如果表格有 colgroup 也不会受影响', () => {
+        const table = document.createElement('table')
+        const body = document.createElement('tbody')
+        const group = document.createElement('colgroup')
+        const td = document.createElement('td')
+        const tr0 = document.createElement('tr')
+        const tr1 = document.createElement('tr')
+        tr0.appendChild(td)
+        tr1.appendChild(td)
+        body.appendChild(tr0)
+        body.appendChild(tr1)
+        table.appendChild(group)
+        table.appendChild(body)
+        document.body.appendChild(table)
+
+        expect(getNodeUtil.getCurrentRowIndex(table, tr1)).toEqual(1)
+    })
+
+    test('getCurrentColIndex 获取当前表格列的序号', () => {
+        const table = document.createElement('table')
+        const body = document.createElement('tbody')
+        const td0 = document.createElement('td')
+        const td1 = document.createElement('td')
+        const tr = document.createElement('tr')
+        tr.appendChild(td0)
+        tr.appendChild(td1)
+        body.appendChild(tr)
+        table.appendChild(body)
+        document.body.appendChild(table)
+
+        expect(getNodeUtil.getCurrentColIndex(td1)).toEqual(1)
+    })
+
+    test('getTableHtml 获取当前表格 html 内容', () => {
+        const table = document.createElement('table')
+        const body = document.createElement('tbody')
+        const td = document.createElement('td')
+        const tr = document.createElement('tr')
+        tr.appendChild(td)
+        body.appendChild(tr)
+        table.appendChild(body)
+
+        expect(getNodeUtil.getTableHtml(table)).toEqual(
+            `<table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>`
+        )
+    })
+})

test/unit/menus/table/operation-event.test.ts

@@ -0,0 +1,74 @@
+/**
+ * @description table operation-event 测试
+ * @author luochao
+ */
+import $ from '../../../../src/utils/dom-core'
+import operationEventUtil from '../../../../src/menus/table/bind-event/event/operating-event'
+
+const createTable = (
+    id: string,
+    option: { withColgroup: boolean } = { withColgroup: false }
+): HTMLTableElement => {
+    const table = document.createElement('table')
+    table.id = id
+    const body = document.createElement('tbody')
+    const td0 = document.createElement('td')
+    const td1 = document.createElement('td')
+    const tr = document.createElement('tr')
+    tr.appendChild(td0)
+    tr.appendChild(td1)
+    body.appendChild(tr)
+    // 测试有 colgroup 的 case
+    if (option.withColgroup) {
+        const group = document.createElement('colgroup')
+        const col = document.createElement('col')
+        group.appendChild(col)
+        table.appendChild(group)
+    }
+    table.appendChild(body)
+    document.body.appendChild(table)
+
+    return table
+}
+
+describe('Table Operation Event Util', () => {
+    test('ProcessingRow 在表格的指定行序号位置添加新的行', () => {
+        const table = createTable('table1', { withColgroup: true })
+
+        operationEventUtil.ProcessingRow($('#table1'), 1)
+
+        expect(table.childNodes[0].childNodes.length).toEqual(1)
+    })
+
+    test('ProcessingCol 在表格的指定列序号位置添加新的列', () => {
+        const table = createTable('table2')
+
+        operationEventUtil.ProcessingCol($('#table2'), 1)
+
+        expect(table.childNodes[0].childNodes[0].childNodes.length).toEqual(3)
+    })
+
+    test('DeleteRow 删除表格的指定行序号的表格行', () => {
+        const table = createTable('table3')
+
+        operationEventUtil.DeleteRow($('#table3'), 0)
+
+        expect(table.childNodes[0].childNodes.length).toEqual(0)
+    })
+
+    test('DeleteCol 删除表格的指定列序号的表格列', () => {
+        const table = createTable('table4')
+
+        operationEventUtil.DeleteCol($('#table4'), 0)
+
+        expect(table.childNodes[0].childNodes[0].childNodes.length).toEqual(1)
+    })
+
+    test('setTheHeader 设置表格表头', () => {
+        const table = createTable('table5')
+
+        operationEventUtil.setTheHeader($('#table5'), 0, 'th')
+
+        expect(table.childNodes[0].childNodes[0].childNodes[0].nodeName).toEqual('TH')
+    })
+})

test/unit/menus/table/table.test.ts

@@ -0,0 +1,17 @@
+/**
+ * @description table menu 测试
+ * @author luochao
+ */
+import Table from '../../../../src/menus/table'
+import createEditor from '../../../helpers/create-editor'
+
+describe('Table Menu', () => {
+    test('点击 table menu 会展示创建 table panel', () => {
+        const editor = createEditor(document, 'div1')
+        const tableMenu = new Table(editor)
+
+        tableMenu.clickHandler()
+
+        expect(tableMenu.panel).not.toBeNull()
+    })
+})

test/unit/menus/table/tooltip-event.test.ts

@@ -0,0 +1,153 @@
+/**
+ * @description table tooltip 测试
+ * @author luochao
+ */
+import createEditor from '../../../helpers/create-editor'
+import $ from '../../../../src/utils/dom-core'
+import dispatchEvent from '../../../helpers/mock-dispatch-event'
+import mockCommand from '../../../helpers/command-mock'
+
+jest.mock('../../../../src/menus/table/bind-event/event/getNode.ts', () => {
+    return jest.fn().mockImplementation(() => {
+        return {
+            getRowNode: jest.fn().mockReturnValue(document.createElement('p')),
+            getCurrentRowIndex: jest.fn().mockReturnValue(0),
+            getCurrentColIndex: jest.fn().mockReturnValue(0),
+            getTableHtml: jest
+                .fn()
+                .mockReturnValue(
+                    '<table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>'
+                ),
+        }
+    })
+})
+
+const showTooltip = (editorId: string) => {
+    const editor = createEditor(document, editorId)
+    const fns = editor.txt.eventHooks.tableClickEvents
+    const fakeDom = $('<p></p>')
+    document.body.appendChild(fakeDom.elems[0])
+
+    fns.forEach(fn => {
+        fn(fakeDom)
+    })
+}
+
+describe('Table Tooltip Event', () => {
+    test('创建编辑器表格菜单会绑定 tooltip event', () => {
+        const editor = createEditor(document, 'div1')
+
+        expect(editor.txt.eventHooks.tableClickEvents.length).toBeGreaterThanOrEqual(1)
+    })
+
+    test('执行 tooltip event 函数会展示 table tooltip', () => {
+        const editor = createEditor(document, 'div2')
+
+        const fns = editor.txt.eventHooks.tableClickEvents
+        const fakeDom = $('<p></p>')
+        document.body.appendChild(fakeDom.elems[0])
+
+        fns.forEach(fn => {
+            fn(fakeDom)
+        })
+
+        const tooltip = $('.w-e-tooltip')
+        expect(tooltip.elems.length).toBeGreaterThanOrEqual(1)
+    })
+
+    test('展示 table tooltip 后，点击其它地方会隐藏 tooltip', () => {
+        const editor = createEditor(document, 'div3')
+
+        const fns = editor.txt.eventHooks.tableClickEvents
+        const fakeDom = $('<p></p>')
+        document.body.appendChild(fakeDom.elems[0])
+
+        fns.forEach(fn => {
+            fn(fakeDom)
+        })
+
+        $('#div3').elems[0].click()
+
+        const tooltip = $('.w-e-tooltip')
+        expect(tooltip.elems.length).toEqual(0)
+    })
+
+    describe('Table Tooltip click', () => {
+        let id = 4
+
+        beforeEach(() => {
+            mockCommand(document)
+            document.queryCommandSupported = jest.fn().mockReturnValue(true)
+
+            showTooltip(`div${id++}`)
+        })
+
+        afterEach(() => {
+            $(`#div${id - 1}`).elems[0].click()
+        })
+
+        test('点击 tooltip 删除表格按钮，会执行删除表格操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[0]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 添加行按钮，会执行添加行操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[1]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 删除行按钮，会执行删除操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[2]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 删除行按钮，会执行删除操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[2]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 添加列按钮，会执行添加列操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[3]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 删除列按钮，会执行删除列操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[4]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 设置表头按钮，会执行设置表头操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[5]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+
+        test('点击 tooltip 取消表头按钮，会执行取消表头操作', () => {
+            const tooltipChildren = $('.w-e-tooltip').elems[0].childNodes
+
+            dispatchEvent($(tooltipChildren[6]).children()!, 'click')
+
+            expect(document.execCommand).toBeCalled()
+        })
+    })
+})