docs(material/select): add harness example for select (#21464)

(cherry picked from commit dc5b773)

Author: annieyw

src/components-examples/material/select/BUILD.bazel

@@ -11,10 +11,17 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/select",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/checkbox",
+        "//src/material/form-field",
         "//src/material/input",
         "//src/material/select",
+        "//src/material/select/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/select/index.ts

@@ -20,12 +20,15 @@ import {SelectResetExample} from './select-reset/select-reset-example';
 import {SelectValueBindingExample} from './select-value-binding/select-value-binding-example';
 import {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example';
 import {SelectInitialValueExample} from './select-initial-value/select-initial-value-example';
+import {SelectHarnessExample} from './select-harness/select-harness-example';
+import {MatFormFieldModule} from '@angular/material/form-field';
 
 export {
   SelectCustomTriggerExample,
   SelectDisabledExample,
   SelectErrorStateMatcherExample,
   SelectFormExample,
+  SelectHarnessExample,
   SelectHintErrorExample,
   SelectInitialValueExample,
   SelectMultipleExample,
@@ -43,6 +46,7 @@ const EXAMPLES = [
   SelectDisabledExample,
   SelectErrorStateMatcherExample,
   SelectFormExample,
+  SelectHarnessExample,
   SelectHintErrorExample,
   SelectInitialValueExample,
   SelectMultipleExample,
@@ -63,6 +67,7 @@ const EXAMPLES = [
     MatInputModule,
     MatSelectModule,
     ReactiveFormsModule,
+    MatFormFieldModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

src/components-examples/material/select/select-harness/select-harness-example.html

@@ -0,0 +1,8 @@
+<mat-form-field appearance="fill">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
+    <mat-option *ngFor="let food of foods" [value]="food.value">
+      {{food.viewValue}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/components-examples/material/select/select-harness/select-harness-example.spec.ts

@@ -0,0 +1,63 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatSelectHarness} from '@angular/material/select/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatSelectModule} from '@angular/material/select';
+import {SelectHarnessExample} from './select-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('SelectHarnessExample', () => {
+  let fixture: ComponentFixture<SelectHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatSelectModule, NoopAnimationsModule],
+        declarations: [SelectHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(SelectHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all select harnesses', async () => {
+    const selects = await loader.getAllHarnesses(MatSelectHarness);
+    expect(selects.length).toBe(1);
+  });
+
+  it('should be able to check whether a select is in multi-selection mode', async () => {
+    const select = await loader.getHarness(MatSelectHarness);
+
+    expect(await select.isMultiple()).toBe(false);
+  });
+
+  it('should be able to open and close a select', async () => {
+    const select = await loader.getHarness(MatSelectHarness);
+
+    expect(await select.isOpen()).toBe(false);
+
+    await select.open();
+    expect(await select.isOpen()).toBe(true);
+
+    await select.close();
+    expect(await select.isOpen()).toBe(false);
+  });
+
+  it('should be able to get the value text from a select', async () => {
+    const select = await loader.getHarness(MatSelectHarness);
+    await select.open();
+    const options = await select.getOptions();
+
+    await options[2].click();
+
+    expect(await select.getValueText()).toBe('Tacos');
+  });
+});

src/components-examples/material/select/select-harness/select-harness-example.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatSelectHarness
+ */
+@Component({
+  selector: 'select-harness-example',
+  templateUrl: 'select-harness-example.html',
+})
+export class SelectHarnessExample {
+  foods = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos'}
+  ];
+}