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

Author: annieyw

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

@@ -11,10 +11,18 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/select",
     deps = [
+        "//src/cdk/overlay",
+        "//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,79 @@
+import {TestBed, ComponentFixture, waitForAsync, inject} 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 {MatFormFieldModule} from '@angular/material/form-field';
+import {ReactiveFormsModule} from '@angular/forms';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {OverlayContainer} from '@angular/cdk/overlay';
+
+describe('SelectHarnessExample', () => {
+  let fixture: ComponentFixture<SelectHarnessExample>;
+  let loader: HarnessLoader;
+  let overlayContainer: OverlayContainer;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatSelectModule, MatFormFieldModule, ReactiveFormsModule, NoopAnimationsModule],
+        declarations: [SelectHarnessExample]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    inject([OverlayContainer], (oc: OverlayContainer) => {
+      overlayContainer = oc;
+    })();
+  });
+
+  afterEach(() => {
+    // Angular won't call this for us so we need to do it ourselves to avoid leaks.
+    overlayContainer.ngOnDestroy();
+    overlayContainer = null!;
+  });
+
+  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,21 @@
+import {Component} from '@angular/core';
+
+interface Food {
+  value: string;
+  viewValue: string;
+}
+
+/**
+ * @title Testing with MatSelectHarness
+ */
+@Component({
+  selector: 'select-harness-example',
+  templateUrl: 'select-harness-example.html',
+})
+export class SelectHarnessExample {
+  foods: Food[] = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos'}
+  ];
+}