developing

Author: huangshuwei

tests/unit/specs/__snapshots__/ve-table-contextmenu.spec.js.snap

@@ -67,7 +67,7 @@ exports[`veTable contextmenu render 1`] = `
       <tfoot class="ve-table-fixed-footer ve-table-footer"></tfoot>
     </table>
   </div>
-  <div class="ve-contextmenu" style="display: none;" on="[object Object]">
+  <div class="ve-contextmenu" style="display: none;">
     <div class="ve-contextmenu-panel">
       <ul class="ve-contextmenu-list">
         <li class="ve-contextmenu-node"><span class="ve-contextmenu-node-label">insert row above</span></li>

tests/unit/specs/ve-table-contextmenu.spec.js

@@ -1,6 +1,7 @@
 import { mount } from "@vue/test-utils";
 import veTable from "@/ve-table";
 import { later } from "../util";
+import { cloneDeep } from "lodash";
 
 describe("veTable contextmenu", () => {
     const TABLE_DATA = [
@@ -100,6 +101,17 @@ describe("veTable contextmenu", () => {
         },
     ];
 
+    afterEach(() => {
+        return new Promise((resolve) => {
+            const contextmenuPopper = document.querySelector(
+                ".ve-contextmenu-popper",
+            );
+            contextmenuPopper && contextmenuPopper.remove();
+
+            resolve();
+        });
+    });
+
     it("render", () => {
         const wrapper = mount(veTable, {
             propsData: {
@@ -119,50 +131,120 @@ describe("veTable contextmenu", () => {
         expect(wrapper.html()).toMatchSnapshot();
     });
 
-    const mockFn = jest.fn();
+    it("contextmenu INSERT_ROW_ABOVE", async () => {
+        const mockFn = jest.fn();
 
-    const WRAPPER = mount(
-        {
-            render() {
-                return (
-                    <div>
-                        <ve-table
-                            row-key-field-name="rowKey"
-                            columns={COLUMNS}
-                            table-data={TABLE_DATA}
-                            contextmenu-body-option={this.contextmenuBodyOption}
-                        />
-                    </div>
-                );
-            },
-            data() {
-                return {
-                    contextmenuBodyOption: {
-                        callback: ({ type, selection }) => {
-                            console.log(11111111111111);
-                            mockFn({ type, selection });
+        let tableData = cloneDeep(TABLE_DATA);
+
+        const WRAPPER = mount(
+            {
+                render() {
+                    return (
+                        <div>
+                            <ve-table
+                                row-key-field-name="rowKey"
+                                columns={COLUMNS}
+                                table-data={tableData}
+                                contextmenu-body-option={
+                                    this.contextmenuBodyOption
+                                }
+                            />
+                        </div>
+                    );
+                },
+                data() {
+                    return {
+                        contextmenuBodyOption: {
+                            callback: ({ type, selection }) => {
+                                mockFn({ type, selection });
+                            },
+                            contextmenus: CONTEXTMENUS,
                         },
-                        contextmenus: CONTEXTMENUS,
-                    },
-                };
+                    };
+                },
             },
-        },
-        // need attach to documnet
-        { attachTo: document.body },
-    );
+            // need attach to documnet
+            { attachTo: document.body },
+        );
+
+        const firstTrTdEl = WRAPPER.findAll(".ve-table-body-tr")
+            .at(2)
+            .findAll(".ve-table-body-td")
+            .at(2);
+
+        firstTrTdEl.trigger("click");
+
+        await later();
+
+        expect(firstTrTdEl.classes()).toContain("ve-table-cell-selection");
+
+        const bodyEl = WRAPPER.find(".ve-table-body");
+        bodyEl.trigger("contextmenu");
+
+        await later();
+
+        const contextmenuPopper = document.querySelector(
+            ".ve-contextmenu-popper",
+        );
 
-    it("callback event", async () => {
-        /* const tdEl = document.querySelector(
-            ".ve-table-body tr[row-key='2'] td[col-key='number']",
+        const contextmenuNodes = contextmenuPopper.querySelectorAll(
+            ".ve-contextmenu-node",
         );
 
-        const clickEvent = new MouseEvent("click", {
+        const event2 = new MouseEvent("click", {
             view: window, // window
             bubbles: true,
             cancelable: true,
         });
 
-        tdEl.dispatchEvent(clickEvent); */
+        contextmenuNodes[0].dispatchEvent(event2);
+
+        await later();
+
+        expect(tableData.length).toBe(6);
+
+        expect(mockFn).toHaveBeenCalled();
+        expect(mockFn).toHaveBeenCalledWith({
+            selection: { colKey: "date", rowKey: 2 },
+            type: "INSERT_ROW_ABOVE",
+        });
+    });
+
+    it("contextmenu INSERT_ROW_BELOW", async () => {
+        const mockFn = jest.fn();
+
+        let tableData = cloneDeep(TABLE_DATA);
+
+        const WRAPPER = mount(
+            {
+                render() {
+                    return (
+                        <div>
+                            <ve-table
+                                row-key-field-name="rowKey"
+                                columns={COLUMNS}
+                                table-data={tableData}
+                                contextmenu-body-option={
+                                    this.contextmenuBodyOption
+                                }
+                            />
+                        </div>
+                    );
+                },
+                data() {
+                    return {
+                        contextmenuBodyOption: {
+                            callback: ({ type, selection }) => {
+                                mockFn({ type, selection });
+                            },
+                            contextmenus: CONTEXTMENUS,
+                        },
+                    };
+                },
+            },
+            // need attach to documnet
+            { attachTo: document.body },
+        );
 
         const firstTrTdEl = WRAPPER.findAll(".ve-table-body-tr")
             .at(2)
@@ -175,15 +257,6 @@ describe("veTable contextmenu", () => {
 
         expect(firstTrTdEl.classes()).toContain("ve-table-cell-selection");
 
-        /*     const bodyEl = document.querySelector(".ve-table-body");
-
-        const contextmenuEvent = new MouseEvent("contextmenu", {
-            view: window, // window
-            bubbles: true,
-            cancelable: true,
-        });
-
-        bodyEl.dispatchEvent(contextmenuEvent); */
         const bodyEl = WRAPPER.find(".ve-table-body");
         bodyEl.trigger("contextmenu");
 
@@ -203,17 +276,16 @@ describe("veTable contextmenu", () => {
             cancelable: true,
         });
 
-        contextmenuNodes[0].dispatchEvent(event2);
-
-        console.log(contextmenuNodes[0].innerHTML);
+        contextmenuNodes[1].dispatchEvent(event2);
 
         await later();
 
-        expect(TABLE_DATA.length).toBe(5);
+        expect(tableData.length).toBe(6);
 
-        // expect(mockFn).toHaveBeenCalled();
-        // expect(mockFn).toHaveBeenCalledWith("menu1-type");
-
-        //expect(mockClickFn).toBeCalledWith(0, expect.any(Object));
+        expect(mockFn).toHaveBeenCalled();
+        expect(mockFn).toHaveBeenCalledWith({
+            selection: { colKey: "date", rowKey: 2 },
+            type: "INSERT_ROW_BELOW",
+        });
     });
 });