Skip to content

Commit e053e2d

Browse files
huangshuweihuangshuwei
committed
Update ve-contextmenu.spec.js
1 parent d931a07 commit e053e2d

File tree

1 file changed

+116
-45
lines changed

1 file changed

+116
-45
lines changed

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

Lines changed: 116 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,25 @@ describe("veContextmenu", () => {
7979
},
8080
];
8181

82+
beforeEach(() => {
83+
return new Promise((resolve) => {
84+
let containerEl = document.createElement("div");
85+
containerEl.setAttribute("id", "contextmenu-target");
86+
document.body.appendChild(containerEl);
87+
88+
resolve();
89+
});
90+
});
91+
92+
afterEach(() => {
93+
return new Promise((resolve) => {
94+
const containerEl = document.querySelector("#contextmenu-target");
95+
containerEl.remove();
96+
97+
resolve();
98+
});
99+
});
100+
82101
it("render", () => {
83102
const wrapper = mount({
84103
template: `
@@ -102,11 +121,10 @@ describe("veContextmenu", () => {
102121
render() {
103122
return (
104123
<div>
105-
<div id="contextmenu-target">
106-
Right click this area
107-
</div>
108124
<ve-contextmenu
109-
eventTarget="#contextmenu-target"
125+
eventTarget={document.querySelector(
126+
"#contextmenu-target",
127+
)}
110128
options={this.options}
111129
/>
112130
</div>
@@ -122,11 +140,18 @@ describe("veContextmenu", () => {
122140
{ attachTo: document.body },
123141
);
124142

125-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
143+
const contextmenuTargetEl = document.querySelector(
144+
"#contextmenu-target",
145+
);
126146

127-
expect(contextmenuTargetEl.exists()).toBe(true);
147+
//trigger element hover
148+
const event = new MouseEvent("contextmenu", {
149+
view: window, // window
150+
bubbles: true,
151+
cancelable: true,
152+
});
128153

129-
contextmenuTargetEl.trigger("contextmenu");
154+
contextmenuTargetEl.dispatchEvent(event);
130155

131156
await later();
132157

@@ -139,18 +164,14 @@ describe("veContextmenu", () => {
139164
});
140165

141166
it("contextmenu eventTarget", async () => {
142-
let containerEl = document.createElement("div");
143-
containerEl.setAttribute("id", "contextmenu-target2");
144-
document.body.appendChild(containerEl);
145-
146167
const wrapper = mount(
147168
{
148169
render() {
149170
return (
150171
<div>
151172
<ve-contextmenu
152173
eventTarget={document.querySelector(
153-
"#contextmenu-target2",
174+
"#contextmenu-target",
154175
)}
155176
options={this.options}
156177
/>
@@ -168,7 +189,7 @@ describe("veContextmenu", () => {
168189
);
169190

170191
const contextmenuTargetEl = document.querySelector(
171-
"#contextmenu-target2",
192+
"#contextmenu-target",
172193
);
173194

174195
//trigger element hover
@@ -196,11 +217,10 @@ describe("veContextmenu", () => {
196217
render() {
197218
return (
198219
<div>
199-
<div id="contextmenu-target">
200-
Right click this area
201-
</div>
202220
<ve-contextmenu
203-
eventTarget="#contextmenu-target"
221+
eventTarget={document.querySelector(
222+
"#contextmenu-target",
223+
)}
204224
options={this.options}
205225
/>
206226
</div>
@@ -216,11 +236,18 @@ describe("veContextmenu", () => {
216236
{ attachTo: document.body },
217237
);
218238

219-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
239+
const contextmenuTargetEl = document.querySelector(
240+
"#contextmenu-target",
241+
);
220242

221-
expect(contextmenuTargetEl.exists()).toBe(true);
243+
//trigger element hover
244+
const event1 = new MouseEvent("contextmenu", {
245+
view: window, // window
246+
bubbles: true,
247+
cancelable: true,
248+
});
222249

223-
contextmenuTargetEl.trigger("contextmenu");
250+
contextmenuTargetEl.dispatchEvent(event1);
224251

225252
await later();
226253

@@ -233,13 +260,13 @@ describe("veContextmenu", () => {
233260
);
234261

235262
//trigger element hover
236-
const event = new MouseEvent("mouseover", {
263+
const event2 = new MouseEvent("mouseover", {
237264
view: window, // window
238265
bubbles: true,
239266
cancelable: true,
240267
});
241268

242-
contextmenuNodes[1].dispatchEvent(event);
269+
contextmenuNodes[1].dispatchEvent(event2);
243270

244271
await later(500);
245272

@@ -251,12 +278,12 @@ describe("veContextmenu", () => {
251278
await later();
252279

253280
// remove panel by hover or click parent node
254-
const event2 = new MouseEvent("click", {
281+
const event3 = new MouseEvent("click", {
255282
view: window, // window
256283
bubbles: true,
257284
cancelable: true,
258285
});
259-
contextmenuNodes[0].dispatchEvent(event2);
286+
contextmenuNodes[0].dispatchEvent(event3);
260287

261288
await later(500);
262289

@@ -293,11 +320,18 @@ describe("veContextmenu", () => {
293320
{ attachTo: document.body },
294321
);
295322

296-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
323+
const contextmenuTargetEl = document.querySelector(
324+
"#contextmenu-target",
325+
);
297326

298-
expect(contextmenuTargetEl.exists()).toBe(true);
327+
//trigger element hover
328+
const event1 = new MouseEvent("contextmenu", {
329+
view: window, // window
330+
bubbles: true,
331+
cancelable: true,
332+
});
299333

300-
contextmenuTargetEl.trigger("contextmenu");
334+
contextmenuTargetEl.dispatchEvent(event1);
301335

302336
await later();
303337

@@ -309,13 +343,13 @@ describe("veContextmenu", () => {
309343
".ve-contextmenu-node",
310344
);
311345

312-
const event = new MouseEvent("click", {
346+
const event2 = new MouseEvent("click", {
313347
view: window, // window
314348
bubbles: true,
315349
cancelable: true,
316350
});
317351

318-
contextmenuNodes[0].dispatchEvent(event);
352+
contextmenuNodes[0].dispatchEvent(event2);
319353

320354
expect(mockFn).toHaveBeenCalled();
321355
expect(mockFn).toHaveBeenCalledWith("menu1-type");
@@ -348,11 +382,18 @@ describe("veContextmenu", () => {
348382
{ attachTo: document.body },
349383
);
350384

351-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
385+
const contextmenuTargetEl = document.querySelector(
386+
"#contextmenu-target",
387+
);
352388

353-
expect(contextmenuTargetEl.exists()).toBe(true);
389+
//trigger element hover
390+
const event1 = new MouseEvent("contextmenu", {
391+
view: window, // window
392+
bubbles: true,
393+
cancelable: true,
394+
});
354395

355-
contextmenuTargetEl.trigger("contextmenu");
396+
contextmenuTargetEl.dispatchEvent(event1);
356397

357398
await later();
358399

@@ -365,13 +406,13 @@ describe("veContextmenu", () => {
365406
);
366407

367408
//trigger element hover
368-
const event = new MouseEvent("mouseover", {
409+
const event2 = new MouseEvent("mouseover", {
369410
view: window, // window
370411
bubbles: true,
371412
cancelable: true,
372413
});
373414

374-
contextmenuNodes[1].dispatchEvent(event);
415+
contextmenuNodes[1].dispatchEvent(event2);
375416

376417
await later(500);
377418

@@ -424,11 +465,18 @@ describe("veContextmenu", () => {
424465
{ attachTo: document.body },
425466
);
426467

427-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
468+
const contextmenuTargetEl = document.querySelector(
469+
"#contextmenu-target",
470+
);
428471

429-
expect(contextmenuTargetEl.exists()).toBe(true);
472+
//trigger element hover
473+
const event1 = new MouseEvent("contextmenu", {
474+
view: window, // window
475+
bubbles: true,
476+
cancelable: true,
477+
});
430478

431-
contextmenuTargetEl.trigger("contextmenu");
479+
contextmenuTargetEl.dispatchEvent(event1);
432480

433481
await later();
434482

@@ -479,11 +527,18 @@ describe("veContextmenu", () => {
479527
{ attachTo: document.body },
480528
);
481529

482-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
530+
const contextmenuTargetEl = document.querySelector(
531+
"#contextmenu-target",
532+
);
483533

484-
expect(contextmenuTargetEl.exists()).toBe(true);
534+
//trigger element hover
535+
const event1 = new MouseEvent("contextmenu", {
536+
view: window, // window
537+
bubbles: true,
538+
cancelable: true,
539+
});
485540

486-
contextmenuTargetEl.trigger("contextmenu");
541+
contextmenuTargetEl.dispatchEvent(event1);
487542

488543
await later();
489544

@@ -531,11 +586,18 @@ describe("veContextmenu", () => {
531586

532587
const veContextmenuComp = wrapper.findComponent(veContextmenu);
533588

534-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
589+
const contextmenuTargetEl = document.querySelector(
590+
"#contextmenu-target",
591+
);
535592

536-
expect(contextmenuTargetEl.exists()).toBe(true);
593+
//trigger element hover
594+
const event1 = new MouseEvent("contextmenu", {
595+
view: window, // window
596+
bubbles: true,
597+
cancelable: true,
598+
});
537599

538-
contextmenuTargetEl.trigger("contextmenu");
600+
contextmenuTargetEl.dispatchEvent(event1);
539601

540602
veContextmenuComp.setData({
541603
isPanelRightDirection: false,
@@ -600,9 +662,18 @@ describe("veContextmenu", () => {
600662
{ attachTo: document.body },
601663
);
602664

603-
const contextmenuTargetEl = wrapper.find("#contextmenu-target");
665+
const contextmenuTargetEl = document.querySelector(
666+
"#contextmenu-target",
667+
);
668+
669+
//trigger element hover
670+
const event1 = new MouseEvent("contextmenu", {
671+
view: window, // window
672+
bubbles: true,
673+
cancelable: true,
674+
});
604675

605-
contextmenuTargetEl.trigger("contextmenu");
676+
contextmenuTargetEl.dispatchEvent(event1);
606677

607678
const veContextmenuComp = wrapper.findComponent(veContextmenu);
608679

0 commit comments

Comments
 (0)