(test): add e2e tests for autocomplete (#4491)

Author: Ann40a

e2e/components/autocomplete-e2e.spec.ts

@@ -0,0 +1,50 @@
+import {browser, by, element} from 'protractor';
+import {screenshot} from '../screenshot';
+import {expectToExist} from '../util/index';
+
+
+describe('autocomplete', () => {
+  const autocompletePanelSelector = '.mat-autocomplete-panel.mat-autocomplete-visible';
+  let page: AutocompletePage;
+
+  beforeEach(() => page = new AutocompletePage());
+
+  it('should open the panel when the input is focused', async () => {
+    expectToExist(autocompletePanelSelector, false);
+    page.autocompleteInput().click();
+
+    expectToExist(autocompletePanelSelector);
+    expect(await page.autocompletePanel().getText()).toEqual('One\nTwo\nThree\nFour');
+    screenshot();
+  });
+
+  it('should close the panel when an option is clicked', async () => {
+    page.autocompleteInput().click();
+    page.option('One').click();
+
+    expectToExist(autocompletePanelSelector, false);
+    screenshot();
+  });
+
+  it('should set the selected option text to the input', async () => {
+    page.autocompleteInput().click();
+    page.option('One').click();
+
+    expect(await page.getInputText()).toEqual('One');
+  });
+
+  it('should trigger filtering with proper key', async () => {
+    page.autocompleteInput().sendKeys('T');
+
+    expect(await page.autocompletePanel().getText()).toEqual('Two\nThree');
+    screenshot();
+  });
+});
+
+class AutocompletePage {
+  constructor() { browser.get('/autocomplete'); }
+  autocompleteInput = () => element(by.id('autocomplete-input'));
+  autocompletePanel = () => element(by.css('.mat-autocomplete-panel'));
+  option = (text: string) => element(by.cssContainingText('mat-option', text));
+  getInputText = () => this.autocompleteInput().getAttribute('value');
+}

src/cdk/accordion/public-api.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- export {CdkAccordionItem} from './accordion-item';
+export {CdkAccordionItem} from './accordion-item';
 export {CdkAccordion} from './accordion';
 export * from './accordion-module';

src/e2e-app/autocomplete/autocomplete-e2e.html

@@ -0,0 +1,11 @@
+<section>
+  <mat-form-field>
+    <input id="autocomplete-input" matInput placeholder="Choose" [matAutocomplete]="auto" [formControl]="optionCtrl">
+  </mat-form-field>
+
+  <mat-autocomplete #auto="matAutocomplete">
+    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+      {{option}}
+    </mat-option>
+  </mat-autocomplete>
+</section>

src/e2e-app/autocomplete/autocomplete-e2e.ts

@@ -0,0 +1,37 @@
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
+import {
+  Component,
+  QueryList,
+  ViewChild,
+  ViewChildren
+} from '@angular/core';
+import {
+  MatAutocompleteTrigger,
+  MatOption
+} from '@angular/material';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'autocomplete-e2e',
+  templateUrl: 'autocomplete-e2e.html',
+})
+export class AutocompleteE2E {
+  optionCtrl = new FormControl();
+  filteredOptions: Observable<string[]>;
+  options = ['One', 'Two', 'Three', 'Four'];
+
+  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
+  @ViewChildren(MatOption) matOptions: QueryList<MatOption>;
+
+  constructor() {
+    this.filteredOptions = this.optionCtrl.valueChanges.pipe(
+      startWith(null),
+      map((val: string) => {
+        return val ? this.options.filter(option => option.startsWith(val)) : this.options.slice();
+      }));
+  }
+}

src/e2e-app/e2e-app-module.ts

@@ -19,7 +19,9 @@ import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
 import {InputE2E} from './input/input-e2e';
 import {SidenavE2E} from './sidenav/sidenav-e2e';
 import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e';
+import {AutocompleteE2E} from './autocomplete/autocomplete-e2e';
 import {
+  MatAutocompleteModule,
   MatButtonModule,
   MatCheckboxModule,
   MatDialogModule,
@@ -47,6 +49,7 @@ import {ReactiveFormsModule} from '@angular/forms';
  */
 @NgModule({
   exports: [
+    MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,
@@ -78,8 +81,10 @@ export class E2eMaterialModule {}
     ReactiveFormsModule
   ],
   declarations: [
+    AutocompleteE2E,
     BasicTabs,
     ButtonE2E,
+    BlockScrollStrategyE2E,
     DialogE2E,
     E2EApp,
     FullscreenE2E,
@@ -95,8 +100,7 @@ export class E2eMaterialModule {}
     SimpleRadioButtons,
     SlideToggleE2E,
     TestDialog,
-    TestDialogFullScreen,
-    BlockScrollStrategyE2E
+    TestDialogFullScreen
   ],
   bootstrap: [E2EApp],
   providers: [

src/e2e-app/e2e-app/e2e-app.html

@@ -1,6 +1,7 @@
 <button (click)="showLinks = !showLinks">Toggle Navigation Links</button>
 
 <mat-nav-list *ngIf="showLinks">
+  <a mat-list-item [routerLink]="['autocomplete']">Autocomplete</a>
   <a mat-list-item [routerLink]="['block-scroll-strategy']">Block scroll strategy</a>
   <a mat-list-item [routerLink]="['button']">Button</a>
   <a mat-list-item [routerLink]="['button-toggle']">Button Toggle</a>

src/e2e-app/e2e-app/routes.ts

@@ -15,6 +15,7 @@ import {FullscreenE2E} from '../fullscreen/fullscreen-e2e';
 import {InputE2E} from '../input/input-e2e';
 import {SidenavE2E} from '../sidenav/sidenav-e2e';
 import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
+import {AutocompleteE2E} from '../autocomplete/autocomplete-e2e';
 import {
   CardFancyExample,
   ListOverviewExample,
@@ -26,6 +27,7 @@ import {
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
+  {path: 'autocomplete', component: AutocompleteE2E},
   {path: 'block-scroll-strategy', component: BlockScrollStrategyE2E},
   {path: 'button', component: ButtonE2E},
   {path: 'button-toggle', component: ButtonToggleOverviewExample},

src/lib/autocomplete/autocomplete-trigger.ts

@@ -104,7 +104,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
     'aria-autocomplete': 'list',
     '[attr.aria-activedescendant]': 'activeOption?.id',
     '[attr.aria-expanded]': 'panelOpen.toString()',
-    '[attr.aria-owns]': 'autocomplete?.id',
+    '[attr.aria-owns]': '(autocomplete && autocomplete._isOpen) ? autocomplete.id : null',
     // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
     // a little earlier. This avoids issues where IE delays the focusing of the input.
     '(focusin)': '_handleFocus()',