docs(material/autocomplete): add autocomplete harness example

Author: annieyw

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

@@ -11,11 +11,18 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/autocomplete",
     deps = [
+        "//src/cdk/overlay",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/autocomplete",
+        "//src/material/autocomplete/testing",
         "//src/material/form-field",
         "//src/material/input",
         "//src/material/slide-toggle",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/autocomplete/autocomplete-harness/autcocomplete-harness-example.html

@@ -0,0 +1,6 @@
+<mat-autocomplete #autocomplete="matAutocomplete">
+  <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
+</mat-autocomplete>
+
+<input id="plain" [matAutocomplete]="autocomplete">
+<input id="disabled" disabled [matAutocomplete]="autocomplete">

src/components-examples/material/autocomplete/autocomplete-harness/autcomplete-harness-example.spec.ts

@@ -0,0 +1,78 @@
+import {TestBed, ComponentFixture, waitForAsync, inject} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {AutocompleteHarnessExample} from './autocomplete-harness-example';
+import {OverlayContainer} from '@angular/cdk/overlay';
+
+describe('AutocompleteHarnessExample', () => {
+  let fixture: ComponentFixture<AutocompleteHarnessExample>;
+  let loader: HarnessLoader;
+  let overlayContainer: OverlayContainer;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatAutocompleteModule],
+        declarations: [AutocompleteHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(AutocompleteHarnessExample);
+      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 autocomplete harnesses', async () => {
+      const autocompletes = await loader.getAllHarnesses(MatAutocompleteHarness);
+      expect(autocompletes.length).toBe(2);
+    }
+  );
+
+  it('should get disabled state', async () => {
+    const enabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
+    const disabled = await loader.getHarness(MatAutocompleteHarness.with({selector: '#disabled'}));
+
+    expect(await enabled.isDisabled()).toBe(false);
+    expect(await disabled.isDisabled()).toBe(true);
+  });
+
+  it('should focus and blur an input', async () => {
+    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
+    expect(await input.isFocused()).toBe(false);
+    await input.focus();
+    expect(await input.isFocused()).toBe(true);
+    await input.blur();
+    expect(await input.isFocused()).toBe(false);
+  });
+
+  it('should be able to type in an input', async () => {
+    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
+    await input.enterText('Hello there');
+    expect(await input.getValue()).toBe('Hello there');
+  });
+
+  it('should be able to get filtered options', async () => {
+    const input = await loader.getHarness(MatAutocompleteHarness.with({selector: '#plain'}));
+    await input.focus();
+    const options = await input.getOptions({text: /New/});
+
+    expect(options.length).toBe(1);
+    expect(await options[0].getText()).toBe('New York');
+  });
+});

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

@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatAutocompleteHarness
+ */
+@Component({
+  selector: 'autocomplete-harness-example',
+  templateUrl: 'autocomplete-harness-example.html'
+})
+export class AutocompleteHarnessExample {
+  states = [
+    {code: 'AL', name: 'Alabama'},
+    {code: 'CA', name: 'California'},
+    {code: 'FL', name: 'Florida'},
+    {code: 'KS', name: 'Kansas'},
+    {code: 'MA', name: 'Massachusetts'},
+    {code: 'NY', name: 'New York'},
+    {code: 'OR', name: 'Oregon'},
+    {code: 'PA', name: 'Pennsylvania'},
+    {code: 'TN', name: 'Tennessee'},
+    {code: 'VA', name: 'Virginia'},
+    {code: 'WY', name: 'Wyoming'},
+  ];
+}

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

@@ -16,11 +16,13 @@ import {
   AutocompletePlainInputExample
 } from './autocomplete-plain-input/autocomplete-plain-input-example';
 import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simple-example';
+import {AutocompleteHarnessExample} from './autocomplete-harness/autocomplete-harness-example';
 
 export {
   AutocompleteAutoActiveFirstOptionExample,
   AutocompleteDisplayExample,
   AutocompleteFilterExample,
+  AutocompleteHarnessExample,
   AutocompleteOptgroupExample,
   AutocompleteOverviewExample,
   AutocompletePlainInputExample,
@@ -31,6 +33,7 @@ const EXAMPLES = [
   AutocompleteAutoActiveFirstOptionExample,
   AutocompleteDisplayExample,
   AutocompleteFilterExample,
+  AutocompleteHarnessExample,
   AutocompleteOptgroupExample,
   AutocompleteOverviewExample,
   AutocompletePlainInputExample,