build: add autocomplete example to mdc-migration integration test

Author: amysorto

integration/mdc-migration/golden/src/app/app.component.html

@@ -1,3 +1,4 @@
+<autocomplete-example></autocomplete-example>
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>

integration/mdc-migration/golden/src/app/app.module.ts

@@ -3,6 +3,8 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -12,6 +14,7 @@ import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
 import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
+import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
@@ -23,6 +26,7 @@ import {SelectComponent} from './components/select/select.component';
 
 @NgModule({
   declarations: [
+    AutocompleteComponent,
     AppComponent,
     ChipsComponent,
     FormFieldComponent,
@@ -36,6 +40,7 @@ import {SelectComponent} from './components/select/select.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    MatAutocompleteModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,
@@ -45,6 +50,7 @@ import {SelectComponent} from './components/select/select.component';
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatSelectModule,
+    ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

integration/mdc-migration/golden/src/app/components/autocomplete/autocomplete.component.html

@@ -0,0 +1,17 @@
+<h2>Autocomplete example</h2>
+<form>
+  <mat-form-field appearance="fill">
+    <mat-label>Number</mat-label>
+    <input type="text"
+      placeholder="Pick one"
+      aria-label="Number"
+      matInput
+      [formControl]="myControl"
+      [matAutocomplete]="auto">
+    <mat-autocomplete #auto="matAutocomplete">
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+        {{option}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>

integration/mdc-migration/golden/src/app/components/autocomplete/autocomplete.component.scss

@@ -0,0 +1,8 @@
+.mat-mdc-autocomplete { padding: 16px; }
+
+/* TODO: The following rule targets internal classes of autocomplete that may no longer apply for the MDC version. */
+
+::ng-deep .mat-autocomplete-panel {
+  background-color: lavenderblush;
+}
+

integration/mdc-migration/golden/src/app/components/autocomplete/autocomplete.component.spec.ts

@@ -0,0 +1,27 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {AutocompleteComponent} from './autocomplete.component';
+
+describe('AutocompleteComponent', () => {
+  let component: AutocompleteComponent;
+  let fixture: ComponentFixture<AutocompleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, BrowserAnimationsModule, MatAutocompleteModule],
+      declarations: [AutocompleteComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

integration/mdc-migration/golden/src/app/components/autocomplete/autocomplete.component.ts

@@ -0,0 +1,28 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable, of} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+
+@Component({
+  selector: 'autocomplete-example',
+  templateUrl: './autocomplete.component.html',
+  styleUrls: ['./autocomplete.component.scss'],
+})
+export class AutocompleteComponent implements OnInit {
+  myControl = new FormControl('');
+  options: string[] = ['One', 'Two', 'Three'];
+  filteredOptions: Observable<string[]> = of([]);
+
+  ngOnInit() {
+    this.filteredOptions = this.myControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || '')),
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.options.filter(option => option.toLowerCase().includes(filterValue));
+  }
+}

integration/mdc-migration/golden/src/styles.scss

@@ -28,6 +28,8 @@ $sample-project-theme: mat.define-light-theme((
   )
 ));
 
+@include mat.mdc-autocomplete-theme($sample-project-theme);
+@include mat.mdc-autocomplete-typography($sample-project-theme);
 @include mat.mdc-chips-theme($sample-project-theme);
 @include mat.mdc-chips-typography($sample-project-theme);
 @include mat.mdc-form-field-theme($sample-project-theme);

integration/mdc-migration/sample-project/src/app/app.component.html

@@ -1,3 +1,4 @@
+<autocomplete-example></autocomplete-example>
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -3,6 +3,8 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -12,6 +14,7 @@ import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSelectModule} from '@angular/material/select';
+import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
@@ -23,6 +26,7 @@ import {SelectComponent} from './components/select/select.component';
 
 @NgModule({
   declarations: [
+    AutocompleteComponent,
     AppComponent,
     ChipsComponent,
     FormFieldComponent,
@@ -36,6 +40,7 @@ import {SelectComponent} from './components/select/select.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    MatAutocompleteModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,
@@ -45,6 +50,7 @@ import {SelectComponent} from './components/select/select.component';
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatSelectModule,
+    ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

integration/mdc-migration/sample-project/src/app/components/autocomplete/autocomplete.component.html

@@ -0,0 +1,17 @@
+<h2>Autocomplete example</h2>
+<form>
+  <mat-form-field appearance="fill">
+    <mat-label>Number</mat-label>
+    <input type="text"
+      placeholder="Pick one"
+      aria-label="Number"
+      matInput
+      [formControl]="myControl"
+      [matAutocomplete]="auto">
+    <mat-autocomplete #auto="matAutocomplete">
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+        {{option}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>