feat(material/slide-toggle/testing): polish harness API (#17416)

Author: mmalerba

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

@@ -28,7 +28,11 @@ export class MatSlideToggleHarness extends ComponentHarness {
   static with(options: SlideToggleHarnessFilters = {}): HarnessPredicate<MatSlideToggleHarness> {
     return new HarnessPredicate(MatSlideToggleHarness, options)
         .addOption('label', options.label,
-            (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
+            (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
+        // We want to provide a filter option for "name" because the name of the slide-toggle is
+        // only set on the underlying input. This means that it's not possible for developers
+        // to retrieve the harness of a specific checkbox with name through a CSS selector.
+        .addOption('name', options.name, async (harness, name) => await harness.getName() === name);
   }
 
   private _label = this.locatorFor('label');

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

@@ -43,6 +43,13 @@ export function runHarnessTests(
     expect(await slideToggles[0].getLabelText()).toBe('Second');
   });
 
+  it('should load slide-toggle with name', async () => {
+    const slideToggles = await loader.getAllHarnesses(
+        slideToggleHarness.with({name: 'first-name'}));
+    expect(slideToggles.length).toBe(1);
+    expect(await slideToggles[0].getLabelText()).toBe('First');
+  });
+
   it('should get checked state', async () => {
     const [checkedToggle, uncheckedToggle] = await loader.getAllHarnesses(slideToggleHarness);
     expect(await checkedToggle.isChecked()).toBe(true);

src/material/slide-toggle/testing/slide-toggle-harness-filters.ts

@@ -10,4 +10,5 @@ import {BaseHarnessFilters} from '@angular/cdk/testing';
 
 export interface SlideToggleHarnessFilters extends BaseHarnessFilters {
   label?: string | RegExp;
+  name?: string;
 }

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

@@ -28,7 +28,11 @@ export class MatSlideToggleHarness extends ComponentHarness {
   static with(options: SlideToggleHarnessFilters = {}): HarnessPredicate<MatSlideToggleHarness> {
     return new HarnessPredicate(MatSlideToggleHarness, options)
         .addOption('label', options.label,
-            (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
+            (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
+        // We want to provide a filter option for "name" because the name of the slide-toggle is
+        // only set on the underlying input. This means that it's not possible for developers
+        // to retrieve the harness of a specific checkbox with name through a CSS selector.
+        .addOption('name', options.name, async (harness, name) => await harness.getName() === name);
   }
 
   private _label = this.locatorFor('label');