Skip to content

Commit 81e3599

Browse files
vursenclaude
vursen
and
claude
authored
test: use real mouse events in context-menu tooltip tests (#11660)
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 43f8994 commit 81e3599

1 file changed

Lines changed: 54 additions & 66 deletions

File tree

‎test/integration/context-menu-tooltip.test.js‎

Lines changed: 54 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { resetMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
3-
import { arrowDownKeyDown, arrowUpKeyDown, fire, fixtureSync, nextRender } from '@vaadin/testing-helpers';
2+
import { resetMouse, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
3+
import { arrowDownKeyDown, arrowUpKeyDown, fixtureSync, nextRender } from '@vaadin/testing-helpers';
44
import './not-animated-styles.js';
55
import '@vaadin/context-menu/src/vaadin-context-menu.js';
6-
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
7-
import { getMenuItems, getSubMenu, openMenu } from '@vaadin/context-menu/test/helpers.js';
6+
import { getMenuItems, getSubMenu } from '@vaadin/context-menu/test/helpers.js';
87
import { Tooltip } from '@vaadin/tooltip/src/vaadin-tooltip.js';
98

109
describe('context-menu with tooltip', () => {
@@ -23,7 +22,7 @@ describe('context-menu with tooltip', () => {
2322
<button id="target"></button>
2423
</vaadin-context-menu>
2524
`);
26-
contextMenu.openOn = isTouch ? 'click' : 'mouseover';
25+
contextMenu.openOn = 'click';
2726
target = contextMenu.querySelector('#target');
2827
tooltip = contextMenu.querySelector('vaadin-tooltip');
2928
tooltipOverlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
@@ -46,51 +45,51 @@ describe('context-menu with tooltip', () => {
4645
});
4746

4847
it('should show tooltip when hovering an item with a tooltip', async () => {
49-
await openMenu(target);
50-
const [item0] = getMenuItems(contextMenu);
51-
await sendMouseToElement({ type: 'move', element: item0 });
48+
await sendMouseToElement({ type: 'click', element: target });
49+
await nextRender();
50+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
5251
await nextRender();
5352
expect(tooltipOverlay.opened).to.be.true;
5453
expect(tooltipContent.textContent.trim()).to.equal('Tooltip 0');
5554
});
5655

5756
it('should not show tooltip when hovering an item without a tooltip', async () => {
58-
await openMenu(target);
59-
const [, item1] = getMenuItems(contextMenu);
60-
await sendMouseToElement({ type: 'move', element: item1 });
57+
await sendMouseToElement({ type: 'click', element: target });
58+
await nextRender();
59+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[1] });
6160
await nextRender();
6261
expect(tooltipOverlay.opened).to.be.not.ok;
6362
});
6463

6564
it('should hide tooltip when hovering from a tooltipped item to a non-tooltipped item', async () => {
66-
await openMenu(target);
67-
const [item0, item1] = getMenuItems(contextMenu);
65+
await sendMouseToElement({ type: 'click', element: target });
66+
await nextRender();
6867

69-
await sendMouseToElement({ type: 'move', element: item0 });
68+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
7069
await nextRender();
7170
expect(tooltipOverlay.opened).to.be.true;
7271

73-
await sendMouseToElement({ type: 'move', element: item1 });
72+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[1] });
7473
await nextRender();
7574
expect(tooltipOverlay.opened).to.be.not.ok;
7675
});
7776

7877
it('should hide tooltip when mouse leaves the list box', async () => {
79-
await openMenu(target);
80-
const [item0] = getMenuItems(contextMenu);
81-
await sendMouseToElement({ type: 'move', element: item0 });
78+
await sendMouseToElement({ type: 'click', element: target });
79+
await nextRender();
80+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
8281
await nextRender();
8382
expect(tooltipOverlay.opened).to.be.true;
8483

85-
fire(contextMenu._listBox, 'mouseleave');
84+
await sendMouse({ type: 'move', position: [0, 0] });
8685
await nextRender();
8786
expect(tooltipOverlay.opened).to.be.not.ok;
8887
});
8988

9089
it('should hide tooltip when the menu closes', async () => {
91-
await openMenu(target);
92-
const [item0] = getMenuItems(contextMenu);
93-
await sendMouseToElement({ type: 'move', element: item0 });
90+
await sendMouseToElement({ type: 'click', element: target });
91+
await nextRender();
92+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
9493
await nextRender();
9594
expect(tooltipOverlay.opened).to.be.true;
9695

@@ -100,7 +99,8 @@ describe('context-menu with tooltip', () => {
10099
});
101100

102101
it('should show tooltip on keyboard focus', async () => {
103-
await openMenu(target);
102+
await sendMouseToElement({ type: 'click', element: target });
103+
await nextRender();
104104
const items = getMenuItems(contextMenu);
105105

106106
items[1].focus();
@@ -112,7 +112,8 @@ describe('context-menu with tooltip', () => {
112112
});
113113

114114
it('should hide tooltip when keyboard focus moves to an item without a tooltip', async () => {
115-
await openMenu(target);
115+
await sendMouseToElement({ type: 'click', element: target });
116+
await nextRender();
116117
const items = getMenuItems(contextMenu);
117118

118119
items[1].focus();
@@ -127,71 +128,65 @@ describe('context-menu with tooltip', () => {
127128

128129
it('should pass the hovered item to the tooltip generator context', async () => {
129130
tooltip.generator = ({ item }) => (item ? `custom: ${item.text}` : '');
130-
await openMenu(target);
131-
const [item0] = getMenuItems(contextMenu);
131+
await sendMouseToElement({ type: 'click', element: target });
132+
await nextRender();
132133

133-
await sendMouseToElement({ type: 'move', element: item0 });
134+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
134135
await nextRender();
135136
expect(tooltipContent.textContent.trim()).to.equal('custom: Item 0');
136137
});
137138

138139
it('should not override a custom tooltip generator', async () => {
139140
tooltip.generator = () => 'Custom tooltip';
140-
await openMenu(target);
141-
const [item0] = getMenuItems(contextMenu);
141+
await sendMouseToElement({ type: 'click', element: target });
142+
await nextRender();
142143

143-
await sendMouseToElement({ type: 'move', element: item0 });
144+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
144145
await nextRender();
145146
expect(tooltipContent.textContent.trim()).to.equal('Custom tooltip');
146147
});
147148

148149
it('should default tooltip position to end for items without a sub-menu', async () => {
149-
await openMenu(target);
150-
const [item0] = getMenuItems(contextMenu);
151-
await sendMouseToElement({ type: 'move', element: item0 });
150+
await sendMouseToElement({ type: 'click', element: target });
151+
await nextRender();
152+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
152153
await nextRender();
153154
expect(tooltipOverlay.position).to.equal('end');
154155
});
155156

156157
it('should default tooltip position to start for items with a sub-menu', async () => {
157158
contextMenu.items = [{ text: 'Item 0', tooltip: 'Tooltip 0', children: [{ text: 'Child 0' }] }, { text: 'Item 1' }];
158-
contextMenu.requestContentUpdate();
159+
await sendMouseToElement({ type: 'click', element: target });
159160
await nextRender();
160-
await openMenu(target);
161-
const [item0] = getMenuItems(contextMenu);
162-
await sendMouseToElement({ type: 'move', element: item0 });
161+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
163162
await nextRender();
164163
expect(tooltipOverlay.position).to.equal('start');
165164
});
166165

167166
it('should use per-item tooltipPosition over the default', async () => {
168167
contextMenu.items = [{ text: 'Item 0', tooltip: 'Tooltip 0', tooltipPosition: 'top-start' }, { text: 'Item 1' }];
169-
contextMenu.requestContentUpdate();
168+
await sendMouseToElement({ type: 'click', element: target });
170169
await nextRender();
171-
await openMenu(target);
172-
const [item0] = getMenuItems(contextMenu);
173-
await sendMouseToElement({ type: 'move', element: item0 });
170+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
174171
await nextRender();
175172
expect(tooltipOverlay.position).to.equal('top-start');
176173
});
177174

178175
it('should respect the position set on the tooltip element over the default', async () => {
179176
tooltip.position = 'top';
180-
await openMenu(target);
181-
const [item0] = getMenuItems(contextMenu);
182-
await sendMouseToElement({ type: 'move', element: item0 });
177+
await sendMouseToElement({ type: 'click', element: target });
178+
await nextRender();
179+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
183180
await nextRender();
184181
expect(tooltipOverlay.position).to.equal('top');
185182
});
186183

187184
it('should respect the position set on the tooltip element over per-item tooltipPosition', async () => {
188185
tooltip.position = 'top';
189186
contextMenu.items = [{ text: 'Item 0', tooltip: 'Tooltip 0', tooltipPosition: 'bottom-end' }];
190-
contextMenu.requestContentUpdate();
187+
await sendMouseToElement({ type: 'click', element: target });
191188
await nextRender();
192-
await openMenu(target);
193-
const [item0] = getMenuItems(contextMenu);
194-
await sendMouseToElement({ type: 'move', element: item0 });
189+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
195190
await nextRender();
196191
expect(tooltipOverlay.position).to.equal('top');
197192
});
@@ -207,11 +202,10 @@ describe('context-menu with tooltip', () => {
207202
});
208203

209204
it('should show tooltip for disabled item on hover', async () => {
210-
await openMenu(target);
211-
const items = getMenuItems(contextMenu);
212-
const disabledItem = items[2];
205+
await sendMouseToElement({ type: 'click', element: target });
206+
await nextRender();
213207

214-
await sendMouseToElement({ type: 'move', element: disabledItem });
208+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[2] });
215209
await nextRender();
216210
expect(tooltipOverlay.opened).to.be.true;
217211
expect(tooltipContent.textContent.trim()).to.equal('Disabled tooltip');
@@ -222,11 +216,9 @@ describe('context-menu with tooltip', () => {
222216
{ text: 'Item 0', tooltip: 'Tooltip 0', disabled: true, children: [{ text: 'Child 0' }] },
223217
{ text: 'Item 1' },
224218
];
225-
contextMenu.requestContentUpdate();
219+
await sendMouseToElement({ type: 'click', element: target });
226220
await nextRender();
227-
await openMenu(target);
228-
const [item0] = getMenuItems(contextMenu);
229-
await sendMouseToElement({ type: 'move', element: item0 });
221+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
230222
await nextRender();
231223
expect(tooltipOverlay.position).to.equal('end');
232224
});
@@ -246,11 +238,10 @@ describe('context-menu with tooltip', () => {
246238
],
247239
},
248240
];
249-
contextMenu.requestContentUpdate();
241+
await sendMouseToElement({ type: 'click', element: target });
242+
await nextRender();
243+
await sendMouseToElement({ type: 'move', element: getMenuItems(contextMenu)[0] });
250244
await nextRender();
251-
await openMenu(target);
252-
const [parent] = getMenuItems(contextMenu);
253-
await openMenu(parent);
254245
subMenu = getSubMenu(contextMenu);
255246
});
256247

@@ -259,24 +250,21 @@ describe('context-menu with tooltip', () => {
259250
});
260251

261252
it('should show tooltip when hovering a sub-menu item with a tooltip', async () => {
262-
const [child0] = getMenuItems(subMenu);
263-
await sendMouseToElement({ type: 'move', element: child0 });
253+
await sendMouseToElement({ type: 'move', element: getMenuItems(subMenu)[0] });
264254
await nextRender();
265255

266256
expect(tooltipOverlay.opened).to.be.true;
267257
expect(tooltipContent.textContent.trim()).to.equal('Child tooltip 0');
268258
});
269259

270260
it('should not show tooltip when hovering a sub-menu item without a tooltip', async () => {
271-
const [, child1] = getMenuItems(subMenu);
272-
await sendMouseToElement({ type: 'move', element: child1 });
261+
await sendMouseToElement({ type: 'move', element: getMenuItems(subMenu)[1] });
273262
await nextRender();
274263
expect(tooltipOverlay.opened).to.be.not.ok;
275264
});
276265

277266
it('should use per-item tooltipPosition for sub-menu items', async () => {
278-
const items = getMenuItems(subMenu);
279-
await sendMouseToElement({ type: 'move', element: items[2] });
267+
await sendMouseToElement({ type: 'move', element: getMenuItems(subMenu)[2] });
280268
await nextRender();
281269
expect(tooltipOverlay.position).to.equal('top');
282270
});

0 commit comments

Comments
 (0)