From 303e03087cc279255be3573c5e96aa882b65765a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 28 Feb 2022 11:26:42 +0100
Subject: [PATCH] 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.
---
 src/cdk/testing/testbed/unit-test-element.ts    | 2 ++
 src/cdk/testing/tests/cross-environment.spec.ts | 8 ++++++--
 src/cdk/testing/tests/test-main-component.html  | 3 +++
 src/cdk/testing/tests/test-main-component.ts    | 1 +
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/cdk/testing/testbed/unit-test-element.ts b/src/cdk/testing/testbed/unit-test-element.ts
index 2b47bc3f70af..915ce72980cb 100644
--- a/src/cdk/testing/testbed/unit-test-element.ts
+++ b/src/cdk/testing/testbed/unit-test-element.ts
@@ -143,6 +143,7 @@ export class UnitTestElement implements TestElement {
   /** Hovers the mouse over the element. */
   async hover(): Promise<void> {
     this._dispatchPointerEventIfSupported('pointerenter');
+    dispatchMouseEvent(this.element, 'mouseover');
     dispatchMouseEvent(this.element, 'mouseenter');
     await this._stabilize();
   }
@@ -150,6 +151,7 @@ export class UnitTestElement implements TestElement {
   /** Moves the mouse away from the element. */
   async mouseAway(): Promise<void> {
     this._dispatchPointerEventIfSupported('pointerleave');
+    dispatchMouseEvent(this.element, 'mouseout');
     dispatchMouseEvent(this.element, 'mouseleave');
     await this._stabilize();
   }
diff --git a/src/cdk/testing/tests/cross-environment.spec.ts b/src/cdk/testing/tests/cross-environment.spec.ts
index 553b3b916da7..da1892aba474 100644
--- a/src/cdk/testing/tests/cross-environment.spec.ts
+++ b/src/cdk/testing/tests/cross-environment.spec.ts
@@ -468,25 +468,29 @@ export function crossEnvironmentSpecs(
       expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));
     });
 
-    it('should be able to hover', async () => {
+    it('should dispatch `mouseenter` and `mouseover` on hover', async () => {
       const box = await harness.hoverTest();
       let classAttr = await box.getAttribute('class');
       expect(classAttr).not.toContain('hovering');
+      expect(classAttr).not.toContain('pointer-over');
       await box.hover();
       classAttr = await box.getAttribute('class');
       expect(classAttr).toContain('hovering');
+      expect(classAttr).toContain('pointer-over');
     });
 
-    it('should be able to stop hovering', async () => {
+    it('should dispatch `mouseleave` and `mouseout` on mouseAway', async () => {
       const box = await harness.hoverTest();
       let classAttr = await box.getAttribute('class');
       expect(classAttr).not.toContain('hovering');
       await box.hover();
       classAttr = await box.getAttribute('class');
       expect(classAttr).toContain('hovering');
+      expect(classAttr).toContain('pointer-over');
       await box.mouseAway();
       classAttr = await box.getAttribute('class');
       expect(classAttr).not.toContain('hovering');
+      expect(classAttr).not.toContain('pointer-over');
     });
 
     it('should be able to getAttribute', async () => {
diff --git a/src/cdk/testing/tests/test-main-component.html b/src/cdk/testing/tests/test-main-component.html
index 2296f37ac845..67ee70e091bc 100644
--- a/src/cdk/testing/tests/test-main-component.html
+++ b/src/cdk/testing/tests/test-main-component.html
@@ -78,7 +78,10 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
 <div
   id="hover-box"
   [class.hovering]="isHovering"
+  [class.pointer-over]="isPointerOver"
   (mouseenter)="isHovering = true"
   (mouseleave)="isHovering = false"
+  (mouseover)="isPointerOver = true"
+  (mouseout)="isPointerOver = false"
   style="width: 50px; height: 50px; background: hotpink;"></div>
 <div class="hidden-element" style="display: none;">Hello</div>
diff --git a/src/cdk/testing/tests/test-main-component.ts b/src/cdk/testing/tests/test-main-component.ts
index 45c58e6b053a..740094e16ef9 100644
--- a/src/cdk/testing/tests/test-main-component.ts
+++ b/src/cdk/testing/tests/test-main-component.ts
@@ -35,6 +35,7 @@ export class TestMainComponent implements OnDestroy {
   testTools: string[];
   testMethods: string[];
   isHovering = false;
+  isPointerOver = false;
   specialKey = '';
   modifiers: string;
   singleSelect: string;