feat(material/testing): expose whether harness elements are focused (#19704)

Currently we have a bunch of test harnesses that have methods for blurring and focusing the underlying element, but they don't expose whether it currently has focus. These changes add `isFocused` methods to all of the harnesses so they're consistent between each other.

Fixes #19702.

Author: crisbeto

src/material-experimental/mdc-button/testing/button-harness.ts

@@ -62,4 +62,9 @@ export class MatButtonHarness extends ComponentHarness {
   async blur(): Promise<void> {
     return (await this.host()).blur();
   }
+
+  /** Whether the button is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
 }

src/material-experimental/mdc-checkbox/testing/checkbox-harness.ts

@@ -102,6 +102,11 @@ export class MatCheckboxHarness extends ComponentHarness {
     return (await this._input()).blur();
   }
 
+  /** Whether the checkbox is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this._input()).isFocused();
+  }
+
   /**
    * Toggle the checked state of the checkbox and returns a void promise that indicates when the
    * action is complete.

src/material-experimental/mdc-menu/testing/menu-harness.ts

@@ -56,6 +56,11 @@ export class MatMenuHarness extends ComponentHarness {
     return (await this.host()).blur();
   }
 
+  /** Whether the menu is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   async open(): Promise<void> {
     throw Error('not implemented');
   }
@@ -105,16 +110,23 @@ export class MatMenuItemHarness extends ComponentHarness {
     return (await this.host()).text();
   }
 
-  /** Focuses the menu and returns a void promise that indicates when the action is complete. */
+  /**
+   * Focuses the menu item and returns a void promise that indicates when the action is complete.
+   */
   async focus(): Promise<void> {
     return (await this.host()).focus();
   }
 
-  /** Blurs the menu and returns a void promise that indicates when the action is complete. */
+  /** Blurs the menu item and returns a void promise that indicates when the action is complete. */
   async blur(): Promise<void> {
     return (await this.host()).blur();
   }
 
+  /** Whether the menu item is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   async click(): Promise<void> {
     throw Error('not implemented');
   }

src/material-experimental/mdc-slide-toggle/testing/slide-toggle-harness.ts

@@ -90,6 +90,11 @@ export class MatSlideToggleHarness extends ComponentHarness {
     return (await this._input()).blur();
   }
 
+  /** Whether the slide-toggle is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this._input()).isFocused();
+  }
+
   /**
    * Toggle the checked state of the slide-toggle and returns a void promise that indicates when the
    * action is complete.

src/material-experimental/mdc-slider/testing/slider-harness.ts

@@ -126,6 +126,11 @@ export class MatSliderHarness extends ComponentHarness {
     return (await this.host()).blur();
   }
 
+  /** Whether the slider is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   /** Calculates the percentage of the given value. */
   private async _calculatePercentage(value: number) {
     const [min, max] = await Promise.all([this.getMinValue(), this.getMaxValue()]);

src/material/autocomplete/testing/autocomplete-harness.ts

@@ -56,6 +56,11 @@ export class MatAutocompleteHarness extends ComponentHarness {
     return (await this.host()).blur();
   }
 
+  /** Whether the autocomplete input is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   /** Enters text into the autocomplete. */
   async enterText(value: string): Promise<void> {
     return (await this.host()).sendKeys(value);

src/material/autocomplete/testing/shared.spec.ts

@@ -63,11 +63,11 @@ export function runHarnessTests(
 
   it('should focus and blur an input', async () => {
     const input = await loader.getHarness(autocompleteHarness.with({selector: '#plain'}));
-    expect(getActiveElementId()).not.toBe('plain');
+    expect(await input.isFocused()).toBe(false);
     await input.focus();
-    expect(getActiveElementId()).toBe('plain');
+    expect(await input.isFocused()).toBe(true);
     await input.blur();
-    expect(getActiveElementId()).not.toBe('plain');
+    expect(await input.isFocused()).toBe(false);
   });
 
   it('should be able to type in an input', async () => {
@@ -149,10 +149,6 @@ export function runHarnessTests(
   });
 }
 
-function getActiveElementId() {
-  return document.activeElement ? document.activeElement.id : '';
-}
-
 @Component({
   template: `
     <mat-autocomplete #autocomplete="matAutocomplete">

src/material/button-toggle/testing/button-toggle-harness.ts

@@ -85,6 +85,11 @@ export class MatButtonToggleHarness extends ComponentHarness {
     return (await this._button()).blur();
   }
 
+  /** Whether the toggle is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this._button()).isFocused();
+  }
+
   /** Toggle the checked state of the buttons toggle. */
   async toggle(): Promise<void> {
     return (await this._button()).click();

src/material/button-toggle/testing/button-toggle-shared.spec.ts

@@ -81,17 +81,17 @@ export function runHarnessTests(
 
   it('should focus the button toggle', async () => {
     const toggle = await loader.getHarness(buttonToggleHarness.with({text: 'First'}));
-    expect(getActiveElementTagName()).not.toBe('button');
+    expect(await toggle.isFocused()).toBe(false);
     await toggle.focus();
-    expect(getActiveElementTagName()).toBe('button');
+    expect(await toggle.isFocused()).toBe(true);
   });
 
   it('should blur the button toggle', async () => {
     const toggle = await loader.getHarness(buttonToggleHarness.with({text: 'First'}));
     await toggle.focus();
-    expect(getActiveElementTagName()).toBe('button');
+    expect(await toggle.isFocused()).toBe(true);
     await toggle.blur();
-    expect(getActiveElementTagName()).not.toBe('button');
+    expect(await toggle.isFocused()).toBe(false);
   });
 
   it('should toggle the button value', async () => {
@@ -122,10 +122,6 @@ export function runHarnessTests(
   });
 }
 
-function getActiveElementTagName() {
-  return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
-}
-
 @Component({
   template: `
       <mat-button-toggle

src/material/button/testing/button-harness.ts

@@ -62,4 +62,9 @@ export class MatButtonHarness extends ComponentHarness {
   async blur(): Promise<void> {
     return (await this.host()).blur();
   }
+
+  /** Whether the button is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
 }