feat(material/tabs): add a harness filter for tab selected state (#25806)

Author: mmalerba

src/material/legacy-tabs/testing/tab-group-harness.spec.ts

@@ -1,7 +1,12 @@
 import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {runTabGroupHarnessTests} from '@angular/material/tabs/testing/tab-group-shared.spec';
 import {MatLegacyTabGroupHarness} from './tab-group-harness';
+import {MatLegacyTabHarness} from './tab-harness';
 
 describe('Non-MDC-based MatTabGroupHarness', () => {
-  runTabGroupHarnessTests(MatLegacyTabsModule, MatLegacyTabGroupHarness as any);
+  runTabGroupHarnessTests(
+    MatLegacyTabsModule,
+    MatLegacyTabGroupHarness as any,
+    MatLegacyTabHarness as any,
+  );
 });

src/material/legacy-tabs/testing/tab-harness-filters.ts

@@ -15,6 +15,8 @@ import {BaseHarnessFilters} from '@angular/cdk/testing';
 export interface LegacyTabHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose label matches the given value. */
   label?: string | RegExp;
+  /** Only find instances whose selected state matches the given value. */
+  selected?: boolean;
 }
 
 /**

src/material/legacy-tabs/testing/tab-harness.ts

@@ -29,11 +29,15 @@ export class MatLegacyTabHarness extends ContentContainerComponentHarness<string
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: LegacyTabHarnessFilters = {}): HarnessPredicate<MatLegacyTabHarness> {
-    return new HarnessPredicate(MatLegacyTabHarness, options).addOption(
-      'label',
-      options.label,
-      (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label),
-    );
+    return new HarnessPredicate(MatLegacyTabHarness, options)
+      .addOption('label', options.label, (harness, label) =>
+        HarnessPredicate.stringMatches(harness.getLabel(), label),
+      )
+      .addOption(
+        'selected',
+        options.selected,
+        async (harness, selected) => (await harness.isSelected()) == selected,
+      );
   }
 
   /** Gets the label of the tab. */

src/material/tabs/testing/tab-group-harness.spec.ts

@@ -1,7 +1,8 @@
 import {MatTabsModule} from '@angular/material/tabs';
 import {runTabGroupHarnessTests} from './tab-group-shared.spec';
 import {MatTabGroupHarness} from './tab-group-harness';
+import {MatTabHarness} from './tab-harness';
 
 describe('MDC-based MatTabGroupHarness', () => {
-  runTabGroupHarnessTests(MatTabsModule, MatTabGroupHarness);
+  runTabGroupHarnessTests(MatTabsModule, MatTabGroupHarness, MatTabHarness);
 });

src/material/tabs/testing/tab-group-shared.spec.ts

@@ -1,15 +1,17 @@
-import {ComponentHarness, HarnessLoader} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessLoader, parallel} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatTabsModule} from '@angular/material/tabs';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatTabGroupHarness} from './tab-group-harness';
+import {MatTabHarness} from './tab-harness';
 
 /** Shared tests to run on both the original and MDC-based tab-group's. */
 export function runTabGroupHarnessTests(
   tabsModule: typeof MatTabsModule,
   tabGroupHarness: typeof MatTabGroupHarness,
+  tabHarness: typeof MatTabHarness,
 ) {
   let fixture: ComponentFixture<TabGroupHarnessTest>;
   let loader: HarnessLoader;
@@ -151,6 +153,16 @@ export function runTabGroupHarnessTests(
     expect(await tabs[1].isSelected()).toBe(false);
     expect(await tabs[2].isSelected()).toBe(true);
   });
+
+  it('should be able to get tabs by selected state', async () => {
+    const selectedTabs = await loader.getAllHarnesses(tabHarness.with({selected: true}));
+    const unselectedTabs = await loader.getAllHarnesses(tabHarness.with({selected: false}));
+    expect(await parallel(() => selectedTabs.map(t => t.getLabel()))).toEqual(['First']);
+    expect(await parallel(() => unselectedTabs.map(t => t.getLabel()))).toEqual([
+      'Second',
+      'Third',
+    ]);
+  });
 }
 
 @Component({

src/material/tabs/testing/tab-harness-filters.ts

@@ -7,13 +7,15 @@
  */
 import {BaseHarnessFilters} from '@angular/cdk/testing';
 
-/** A set of criteria that can be used to filter a list of `MatRadioButtonHarness` instances. */
+/** A set of criteria that can be used to filter a list of `MatTabHarness` instances. */
 export interface TabHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose label matches the given value. */
   label?: string | RegExp;
+  /** Only find instances whose selected state matches the given value. */
+  selected?: boolean;
 }
 
-/** A set of criteria that can be used to filter a list of `MatRadioButtonHarness` instances. */
+/** A set of criteria that can be used to filter a list of `MatTabGroupHarness` instances. */
 export interface TabGroupHarnessFilters extends BaseHarnessFilters {
   /** Only find instances whose selected tab label matches the given value. */
   selectedTabLabel?: string | RegExp;
@@ -28,5 +30,5 @@ export interface TabLinkHarnessFilters extends BaseHarnessFilters {
 /** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
 export interface TabNavBarHarnessFilters extends BaseHarnessFilters {}
 
-/** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
+/** A set of criteria that can be used to filter a list of `MatTabNavPanelHarness` instances. */
 export interface TabNavPanelHarnessFilters extends BaseHarnessFilters {}

src/material/tabs/testing/tab-harness.ts

@@ -28,9 +28,15 @@ export class MatTabHarness extends ContentContainerComponentHarness<string> {
     this: ComponentHarnessConstructor<T>,
     options: TabHarnessFilters = {},
   ): HarnessPredicate<T> {
-    return new HarnessPredicate(this, options).addOption('label', options.label, (harness, label) =>
-      HarnessPredicate.stringMatches(harness.getLabel(), label),
-    );
+    return new HarnessPredicate(this, options)
+      .addOption('label', options.label, (harness, label) =>
+        HarnessPredicate.stringMatches(harness.getLabel(), label),
+      )
+      .addOption(
+        'selected',
+        options.selected,
+        async (harness, selected) => (await harness.isSelected()) == selected,
+      );
   }
 
   /** Gets the label of the tab. */

tools/public_api_guard/material/legacy-tabs-testing.md

@@ -18,6 +18,7 @@ export interface LegacyTabGroupHarnessFilters extends BaseHarnessFilters {
 // @public @deprecated
 export interface LegacyTabHarnessFilters extends BaseHarnessFilters {
     label?: string | RegExp;
+    selected?: boolean;
 }
 
 // @public @deprecated

tools/public_api_guard/material/tabs-testing.md

@@ -63,6 +63,7 @@ export interface TabGroupHarnessFilters extends BaseHarnessFilters {
 // @public
 export interface TabHarnessFilters extends BaseHarnessFilters {
     label?: string | RegExp;
+    selected?: boolean;
 }
 
 // @public