Skip to content

Commit a84e406

Browse files
huangshuweihuangshuwei
committed
developing
1 parent e053e2d commit a84e406

File tree

2 files changed

+301
-0
lines changed

2 files changed

+301
-0
lines changed

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`veTable contextmenu render 1`] = `
4+
<div class="ve-table ve-table-border-around">
5+
<div class="ve-table-container" style="height: 0px;">
6+
<table class="ve-table-content ve-table-border-x">
7+
<colgroup>
8+
<col style="width: 50px;">
9+
<col style="width: 15%;">
10+
<col style="width: 15%;">
11+
<col style="width: 30%;">
12+
<col style="width: 40%;">
13+
</colgroup>
14+
<thead class="ve-table-fixed-header ve-table-header">
15+
<tr class="ve-table-header-tr">
16+
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;"></th>
17+
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Name</th>
18+
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Date</th>
19+
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: right; top: 0px;">Number</th>
20+
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-last-column" style="text-align: left; top: 0px;">Address</th>
21+
</tr>
22+
</thead>
23+
<tbody class="ve-table-body ve-table-row-hover ve-table-row-highlight">
24+
<tr style="height: 0px;">
25+
<td style="padding: 0px; border: 0px; height: 0px;"></td>
26+
<td style="padding: 0px; border: 0px; height: 0px;"></td>
27+
<td style="padding: 0px; border: 0px; height: 0px;"></td>
28+
<td style="padding: 0px; border: 0px; height: 0px;"></td>
29+
<td style="padding: 0px; border: 0px; height: 0px;"></td>
30+
</tr>
31+
<tr row-key="0" class="ve-table-body-tr">
32+
<td rowspan="1" colspan="1" col-key="a" class="ve-table-body-td" style="text-align: center;">1</td>
33+
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">John</td>
34+
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">1900-05-20</td>
35+
<td rowspan="1" colspan="1" col-key="number" class="ve-table-body-td" style="text-align: right;">32</td>
36+
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Shanghai</td>
37+
</tr>
38+
<tr row-key="1" class="ve-table-body-tr">
39+
<td rowspan="1" colspan="1" col-key="a" class="ve-table-body-td" style="text-align: center;">2</td>
40+
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Dickerson</td>
41+
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">1910-06-20</td>
42+
<td rowspan="1" colspan="1" col-key="number" class="ve-table-body-td" style="text-align: right;">676</td>
43+
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Beijing</td>
44+
</tr>
45+
<tr row-key="2" class="ve-table-body-tr">
46+
<td rowspan="1" colspan="1" col-key="a" class="ve-table-body-td" style="text-align: center;">3</td>
47+
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Larsen</td>
48+
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">2000-07-20</td>
49+
<td rowspan="1" colspan="1" col-key="number" class="ve-table-body-td" style="text-align: right;">76</td>
50+
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Chongqing</td>
51+
</tr>
52+
<tr row-key="3" class="ve-table-body-tr">
53+
<td rowspan="1" colspan="1" col-key="a" class="ve-table-body-td" style="text-align: center;">4</td>
54+
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Geneva</td>
55+
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">2010-08-20</td>
56+
<td rowspan="1" colspan="1" col-key="number" class="ve-table-body-td" style="text-align: right;">7797</td>
57+
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Xiamen</td>
58+
</tr>
59+
<tr row-key="4" class="ve-table-body-tr">
60+
<td rowspan="1" colspan="1" col-key="a" class="ve-table-body-td" style="text-align: center;">5</td>
61+
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Jami</td>
62+
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">2020-09-20</td>
63+
<td rowspan="1" colspan="1" col-key="number" class="ve-table-body-td" style="text-align: right;">8978</td>
64+
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Shenzhen</td>
65+
</tr>
66+
</tbody>
67+
<tfoot class="ve-table-fixed-footer ve-table-footer"></tfoot>
68+
</table>
69+
</div>
70+
<div class="ve-contextmenu" style="display: none;" on="[object Object]">
71+
<div class="ve-contextmenu-panel">
72+
<ul class="ve-contextmenu-list">
73+
<li class="ve-contextmenu-node"><span class="ve-contextmenu-node-label">insert row above</span></li>
74+
<li class="ve-contextmenu-node"><span class="ve-contextmenu-node-label">insert row below</span></li>
75+
<li class="ve-contextmenu-node-separator"></li>
76+
<li class="ve-contextmenu-node"><span class="ve-contextmenu-node-label">remove row</span></li>
77+
<li class="ve-contextmenu-node"><span class="ve-contextmenu-node-label">hide column</span></li>
78+
</ul>
79+
</div>
80+
</div>
81+
</div>
82+
`;

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

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
import { mount } from "@vue/test-utils";
2+
import veTable from "@/ve-table";
3+
import { later } from "../util";
4+
5+
describe("veTable contextmenu", () => {
6+
const TABLE_DATA = [
7+
{
8+
name: "John",
9+
date: "1900-05-20",
10+
number: "32",
11+
address: "No.1 Century Avenue, Shanghai",
12+
rowKey: 0,
13+
},
14+
{
15+
name: "Dickerson",
16+
date: "1910-06-20",
17+
number: "676",
18+
address: "No.1 Century Avenue, Beijing",
19+
rowKey: 1,
20+
},
21+
{
22+
name: "Larsen",
23+
date: "2000-07-20",
24+
number: "76",
25+
address: "No.1 Century Avenue, Chongqing",
26+
rowKey: 2,
27+
},
28+
{
29+
name: "Geneva",
30+
date: "2010-08-20",
31+
number: "7797",
32+
address: "No.1 Century Avenue, Xiamen",
33+
rowKey: 3,
34+
},
35+
{
36+
name: "Jami",
37+
date: "2020-09-20",
38+
number: "8978",
39+
address: "No.1 Century Avenue, Shenzhen",
40+
rowKey: 4,
41+
},
42+
];
43+
44+
const COLUMNS = [
45+
{
46+
field: "",
47+
key: "a",
48+
title: "",
49+
width: 50,
50+
align: "center",
51+
renderBodyCell: ({ row, column, rowIndex }, h) => {
52+
return ++rowIndex;
53+
},
54+
},
55+
{
56+
field: "name",
57+
key: "name",
58+
title: "Name",
59+
align: "left",
60+
width: "15%",
61+
},
62+
{
63+
field: "date",
64+
key: "date",
65+
title: "Date",
66+
align: "left",
67+
width: "15%",
68+
},
69+
{
70+
field: "number",
71+
key: "number",
72+
title: "Number",
73+
align: "right",
74+
width: "30%",
75+
},
76+
{
77+
field: "address",
78+
key: "address",
79+
title: "Address",
80+
align: "left",
81+
width: "40%",
82+
},
83+
];
84+
85+
const CONTEXTMENUS = [
86+
{
87+
type: "INSERT_ROW_ABOVE",
88+
},
89+
{
90+
type: "INSERT_ROW_BELOW",
91+
},
92+
{
93+
type: "SEPARATOR",
94+
},
95+
{
96+
type: "REMOVE_ROW",
97+
},
98+
{
99+
type: "HIDE_COLUMN",
100+
},
101+
];
102+
103+
it("render", () => {
104+
const wrapper = mount(veTable, {
105+
propsData: {
106+
columns: COLUMNS,
107+
tableData: TABLE_DATA,
108+
rowKeyFieldName: "rowKey",
109+
contextmenuBodyOption: {
110+
callback: ({ type, selection }) => {
111+
console.log("type::", type);
112+
console.log("selection::", selection);
113+
},
114+
contextmenus: CONTEXTMENUS,
115+
},
116+
},
117+
});
118+
119+
expect(wrapper.html()).toMatchSnapshot();
120+
});
121+
122+
const mockFn = jest.fn();
123+
124+
const WRAPPER = mount(
125+
{
126+
render() {
127+
return (
128+
<div>
129+
<ve-table
130+
row-key-field-name="rowKey"
131+
columns={COLUMNS}
132+
table-data={TABLE_DATA}
133+
contextmenu-body-option={this.contextmenuBodyOption}
134+
/>
135+
</div>
136+
);
137+
},
138+
data() {
139+
return {
140+
contextmenuBodyOption: {
141+
callback: ({ type, selection }) => {
142+
console.log(11111111111111);
143+
mockFn({ type, selection });
144+
},
145+
contextmenus: CONTEXTMENUS,
146+
},
147+
};
148+
},
149+
},
150+
// need attach to documnet
151+
{ attachTo: document.body },
152+
);
153+
154+
it("callback event", async () => {
155+
/* const tdEl = document.querySelector(
156+
".ve-table-body tr[row-key='2'] td[col-key='number']",
157+
);
158+
159+
const clickEvent = new MouseEvent("click", {
160+
view: window, // window
161+
bubbles: true,
162+
cancelable: true,
163+
});
164+
165+
tdEl.dispatchEvent(clickEvent); */
166+
167+
const firstTrTdEl = WRAPPER.findAll(".ve-table-body-tr")
168+
.at(2)
169+
.findAll(".ve-table-body-td")
170+
.at(2);
171+
172+
firstTrTdEl.trigger("click");
173+
174+
await later();
175+
176+
expect(firstTrTdEl.classes()).toContain("ve-table-cell-selection");
177+
178+
/* const bodyEl = document.querySelector(".ve-table-body");
179+
180+
const contextmenuEvent = new MouseEvent("contextmenu", {
181+
view: window, // window
182+
bubbles: true,
183+
cancelable: true,
184+
});
185+
186+
bodyEl.dispatchEvent(contextmenuEvent); */
187+
const bodyEl = WRAPPER.find(".ve-table-body");
188+
bodyEl.trigger("contextmenu");
189+
190+
await later();
191+
192+
const contextmenuPopper = document.querySelector(
193+
".ve-contextmenu-popper",
194+
);
195+
196+
const contextmenuNodes = contextmenuPopper.querySelectorAll(
197+
".ve-contextmenu-node",
198+
);
199+
200+
const event2 = new MouseEvent("click", {
201+
view: window, // window
202+
bubbles: true,
203+
cancelable: true,
204+
});
205+
206+
contextmenuNodes[0].dispatchEvent(event2);
207+
208+
console.log(contextmenuNodes[0].innerHTML);
209+
210+
await later();
211+
212+
expect(TABLE_DATA.length).toBe(5);
213+
214+
// expect(mockFn).toHaveBeenCalled();
215+
// expect(mockFn).toHaveBeenCalledWith("menu1-type");
216+
217+
//expect(mockClickFn).toBeCalledWith(0, expect.any(Object));
218+
});
219+
});

0 commit comments

Comments
 (0)