fix(cdk/testing): dispatch mouseover and mouseout events in UnitTestElement (#24490)

Fixes that the `UnitTestElement` wasn't dispatching `mouseover` and `mouseout` on `hover`/`mouseAway` like the browser would.

Fixes #24486.

(cherry picked from commit 552103b)

Author: crisbeto

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

@@ -143,13 +143,15 @@ 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();
   }
 
   /** 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();
   }

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

@@ -470,25 +470,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 () => {

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>

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;