Skip to content

Commit 537e53f

Browse files
committed
fix(cdk/testing): dispatch mouseover and mouseout events in UnitTestElement
Fixes that the `UnitTestElement` wasn't dispatching `mouseover` and `mouseout` on `hover`/`mouseAway` like the browser would. Fixes #24486.
1 parent 29ac6cf commit 537e53f

File tree

4 files changed

+12
-2
lines changed

4 files changed

+12
-2
lines changed

src/cdk/testing/testbed/unit-test-element.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,13 +143,15 @@ export class UnitTestElement implements TestElement {
143143
/** Hovers the mouse over the element. */
144144
async hover(): Promise<void> {
145145
this._dispatchPointerEventIfSupported('pointerenter');
146+
dispatchMouseEvent(this.element, 'mouseover');
146147
dispatchMouseEvent(this.element, 'mouseenter');
147148
await this._stabilize();
148149
}
149150

150151
/** Moves the mouse away from the element. */
151152
async mouseAway(): Promise<void> {
152153
this._dispatchPointerEventIfSupported('pointerleave');
154+
dispatchMouseEvent(this.element, 'mouseout');
153155
dispatchMouseEvent(this.element, 'mouseleave');
154156
await this._stabilize();
155157
}

src/cdk/testing/tests/cross-environment.spec.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -468,25 +468,29 @@ export function crossEnvironmentSpecs(
468468
expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));
469469
});
470470

471-
it('should be able to hover', async () => {
471+
it('should dispatch `mouseenter` and `mouseover` on hover', async () => {
472472
const box = await harness.hoverTest();
473473
let classAttr = await box.getAttribute('class');
474474
expect(classAttr).not.toContain('hovering');
475+
expect(classAttr).not.toContain('pointer-over');
475476
await box.hover();
476477
classAttr = await box.getAttribute('class');
477478
expect(classAttr).toContain('hovering');
479+
expect(classAttr).toContain('pointer-over');
478480
});
479481

480-
it('should be able to stop hovering', async () => {
482+
it('should dispatch `mouseleave` and `mouseout` on mouseAway', async () => {
481483
const box = await harness.hoverTest();
482484
let classAttr = await box.getAttribute('class');
483485
expect(classAttr).not.toContain('hovering');
484486
await box.hover();
485487
classAttr = await box.getAttribute('class');
486488
expect(classAttr).toContain('hovering');
489+
expect(classAttr).toContain('pointer-over');
487490
await box.mouseAway();
488491
classAttr = await box.getAttribute('class');
489492
expect(classAttr).not.toContain('hovering');
493+
expect(classAttr).not.toContain('pointer-over');
490494
});
491495

492496
it('should be able to getAttribute', async () => {

src/cdk/testing/tests/test-main-component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,10 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
7878
<div
7979
id="hover-box"
8080
[class.hovering]="isHovering"
81+
[class.pointer-over]="isPointerOver"
8182
(mouseenter)="isHovering = true"
8283
(mouseleave)="isHovering = false"
84+
(mouseover)="isPointerOver = true"
85+
(mouseout)="isPointerOver = true"
8386
style="width: 50px; height: 50px; background: hotpink;"></div>
8487
<div class="hidden-element" style="display: none;">Hello</div>

src/cdk/testing/tests/test-main-component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export class TestMainComponent implements OnDestroy {
3535
testTools: string[];
3636
testMethods: string[];
3737
isHovering = false;
38+
isPointerOver = false;
3839
specialKey = '';
3940
modifiers: string;
4041
singleSelect: string;

0 commit comments

Comments
 (0)