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();
+  }
 }

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

@@ -67,11 +67,11 @@ export function runHarnessTests(
 
   it('should focus and blur a button', async () => {
     const button = await loader.getHarness(buttonHarness.with({text: 'Basic button'}));
-    expect(getActiveElementId()).not.toBe('basic');
+    expect(await button.isFocused()).toBe(false);
     await button.focus();
-    expect(getActiveElementId()).toBe('basic');
+    expect(await button.isFocused()).toBe(true);
     await button.blur();
-    expect(getActiveElementId()).not.toBe('basic');
+    expect(await button.isFocused()).toBe(false);
   });
 
   it('should click a button', async () => {
@@ -98,10 +98,6 @@ export function runHarnessTests(
   });
 }
 
-function getActiveElementId() {
-  return document.activeElement ? document.activeElement.id : '';
-}
-
 @Component({
   // Include one of each type of button selector to ensure that they're all captured by
   // the harness's selector.

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

@@ -101,6 +101,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();
+  }
+
   /**
    * Toggles the checked state of the checkbox.
    *

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

@@ -114,17 +114,17 @@ export function runHarnessTests(
 
   it('should focus checkbox', async () => {
     const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
-    expect(getActiveElementTagName()).not.toBe('input');
+    expect(await checkbox.isFocused()).toBe(false);
     await checkbox.focus();
-    expect(getActiveElementTagName()).toBe('input');
+    expect(await checkbox.isFocused()).toBe(true);
   });
 
   it('should blur checkbox', async () => {
     const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'}));
     await checkbox.focus();
-    expect(getActiveElementTagName()).toBe('input');
+    expect(await checkbox.isFocused()).toBe(true);
     await checkbox.blur();
-    expect(getActiveElementTagName()).not.toBe('input');
+    expect(await checkbox.isFocused()).toBe(false);
   });
 
   it('should toggle checkbox', async () => {
@@ -167,10 +167,6 @@ export function runHarnessTests(
   });
 }
 
-function getActiveElementTagName() {
-  return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
-}
-
 @Component({
   template: `
       <mat-checkbox

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

@@ -125,6 +125,11 @@ export class MatExpansionPanelHarness extends ComponentHarness {
     return (await this._header()).blur();
   }
 
+  /** Whether the panel is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this._header()).isFocused();
+  }
+
   /** Whether the panel has a toggle indicator displayed. */
   async hasToggleIndicator(): Promise<boolean> {
     return (await this._expansionIndicator()) !== null;

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

@@ -98,6 +98,11 @@ export class MatInputHarness extends MatFormFieldControlHarness {
     return (await this.host()).blur();
   }
 
+  /** Whether the input is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   /**
    * Sets the value of the input. The value will be set by simulating
    * keypresses that correspond to the given value.

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

@@ -168,18 +168,18 @@ export function runHarnessTests(
 
   it('should be able to focus input', async () => {
     const input = await loader.getHarness(inputHarness.with({selector: '[name="favorite-food"]'}));
-    expect(getActiveElementTagName()).not.toBe('input');
+    expect(await input.isFocused()).toBe(false);
     await input.focus();
-    expect(getActiveElementTagName()).toBe('input');
+    expect(await input.isFocused()).toBe(true);
   });
 
   it('should be able to blur input', async () => {
     const input = await loader.getHarness(inputHarness.with({selector: '[name="favorite-food"]'}));
-    expect(getActiveElementTagName()).not.toBe('input');
+    expect(await input.isFocused()).toBe(false);
     await input.focus();
-    expect(getActiveElementTagName()).toBe('input');
+    expect(await input.isFocused()).toBe(true);
     await input.blur();
-    expect(getActiveElementTagName()).not.toBe('input');
+    expect(await input.isFocused()).toBe(false);
   });
 
   it('should be able to set the value of a control that cannot be typed in', async () => {
@@ -195,10 +195,6 @@ export function runHarnessTests(
   });
 }
 
-function getActiveElementTagName() {
-  return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
-}
-
 @Component({
   template: `
     <mat-form-field>

src/material/list/testing/action-list-harness.ts

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

src/material/list/testing/nav-list-harness.ts

@@ -68,4 +68,9 @@ export class MatNavListItemHarness extends MatListItemHarnessBase {
   async blur(): Promise<void> {
     return (await this.host()).blur();
   }
+
+  /** Whether the nav list item is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
 }

src/material/list/testing/selection-list-harness.ts

@@ -112,6 +112,11 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
     return (await this.host()).blur();
   }
 
+  /** Whether the list option is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   /** Toggles the checked state of the checkbox. */
   async toggle() {
     return (await this.host()).click();

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

@@ -57,6 +57,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();
+  }
+
   /** Opens the menu. */
   async open(): Promise<void> {
     if (!await this.isOpen()) {
@@ -168,6 +173,11 @@ export class MatMenuItemHarness extends ComponentHarness {
     return (await this.host()).blur();
   }
 
+  /** Whether the menu item is focused. */
+  async isFocused(): Promise<boolean> {
+    return (await this.host()).isFocused();
+  }
+
   /** Clicks the menu item. */
   async click(): Promise<void> {
     return (await this.host()).click();

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

@@ -62,11 +62,11 @@ export function runHarnessTests(
 
     it('should focus and blur a menu', async () => {
       const menu = await loader.getHarness(menuHarness.with({triggerText: 'Settings'}));
-      expect(getActiveElementId()).not.toBe('settings');
+      expect(await menu.isFocused()).toBe(false);
       await menu.focus();
-      expect(getActiveElementId()).toBe('settings');
+      expect(await menu.isFocused()).toBe(true);
       await menu.blur();
-      expect(getActiveElementId()).not.toBe('settings');
+      expect(await menu.isFocused()).toBe(false);
     });
 
     it('should open and close', async () => {
@@ -172,10 +172,6 @@ export function runHarnessTests(
   });
 }
 
-function getActiveElementId() {
-  return document.activeElement ? document.activeElement.id : '';
-}
-
 @Component({
   template: `
       <button type="button" id="settings" [matMenuTriggerFor]="settingsMenu">Settings</button>