build: add input example to mdc-migration integration test

amysorto · mmalerba · commit 09d034bca424 · 2022-07-15T09:08:30.000-07:00
diff --git a/integration/mdc-migration/golden/src/app/app.component.html b/integration/mdc-migration/golden/src/app/app.component.html
@@ -1,4 +1,5 @@
 <chips-example></chips-example>
+<input-example></input-example>
 <menu-example></menu-example>
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>
diff --git a/integration/mdc-migration/golden/src/app/app.module.ts b/integration/mdc-migration/golden/src/app/app.module.ts
@@ -6,11 +6,13 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
 import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
 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 {ChipsComponent} from './components/chips/chips.component';
+import {InputComponent} from './components/input/input.component';
 import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
@@ -20,6 +22,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
   declarations: [
     AppComponent,
     ChipsComponent,
+    InputComponent,
     MenuComponent,
     PaginatorComponent,
     ProgressBarComponent,
@@ -31,6 +34,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatMenuModule,
     MatPaginatorModule,
     MatProgressBarModule,
diff --git a/integration/mdc-migration/golden/src/app/components/input/input.component.html b/integration/mdc-migration/golden/src/app/components/input/input.component.html
@@ -0,0 +1,7 @@
+<h2>Input example</h2>
+<form class="example-form">
+  <mat-form-field appearance="fill">
+    <mat-label>Favorite food</mat-label>
+    <input matInput placeholder="Ex. Pizza" value="Sushi">
+  </mat-form-field>
+</form>
diff --git a/integration/mdc-migration/golden/src/app/components/input/input.component.scss b/integration/mdc-migration/golden/src/app/components/input/input.component.scss
@@ -0,0 +1,10 @@
+.example-form .mat-mdc-input-element {
+  color: midnightblue;
+}
+
+
+/* TODO: The following rule targets internal classes of input that may no longer apply for the MDC version. */
+
+.mat-input-server {
+  color: red;
+}
diff --git a/integration/mdc-migration/golden/src/app/components/input/input.component.spec.ts b/integration/mdc-migration/golden/src/app/components/input/input.component.spec.ts
@@ -0,0 +1,26 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatInputModule} from '@angular/material/input';
+import {InputComponent} from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatInputModule],
+      declarations: [InputComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/integration/mdc-migration/golden/src/app/components/input/input.component.ts b/integration/mdc-migration/golden/src/app/components/input/input.component.ts
@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'input-example',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+})
+export class InputComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/integration/mdc-migration/golden/src/styles.scss b/integration/mdc-migration/golden/src/styles.scss
@@ -32,6 +32,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-chips-typography($sample-project-theme);
 @include mat.mdc-menu-theme($sample-project-theme);
 @include mat.mdc-menu-typography($sample-project-theme);
+@include mat.mdc-input-theme($sample-project-theme);
+@include mat.mdc-input-typography($sample-project-theme);
 @include mat.mdc-paginator-theme($sample-project-theme);
 @include mat.mdc-paginator-typography($sample-project-theme);
 @include mat.mdc-progress-bar-theme($sample-project-theme);
diff --git a/integration/mdc-migration/sample-project/src/app/app.component.html b/integration/mdc-migration/sample-project/src/app/app.component.html
@@ -1,4 +1,5 @@
 <chips-example></chips-example>
+<input-example></input-example>
 <menu-example></menu-example>
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>
diff --git a/integration/mdc-migration/sample-project/src/app/app.module.ts b/integration/mdc-migration/sample-project/src/app/app.module.ts
@@ -6,11 +6,13 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ChipsComponent} from './components/chips/chips.component';
+import {InputComponent} from './components/input/input.component';
 import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
@@ -20,6 +22,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
   declarations: [
     AppComponent,
     ChipsComponent,
+    InputComponent,
     MenuComponent,
     PaginatorComponent,
     ProgressBarComponent,
@@ -31,6 +34,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatMenuModule,
     MatPaginatorModule,
     MatProgressBarModule,
diff --git a/integration/mdc-migration/sample-project/src/app/components/input/input.component.html b/integration/mdc-migration/sample-project/src/app/components/input/input.component.html
@@ -0,0 +1,7 @@
+<h2>Input example</h2>
+<form class="example-form">
+  <mat-form-field appearance="fill">
+    <mat-label>Favorite food</mat-label>
+    <input matInput placeholder="Ex. Pizza" value="Sushi">
+  </mat-form-field>
+</form>
diff --git a/integration/mdc-migration/sample-project/src/app/components/input/input.component.scss b/integration/mdc-migration/sample-project/src/app/components/input/input.component.scss
@@ -0,0 +1,8 @@
+.example-form .mat-input-element {
+  color: midnightblue;
+}
+
+
+.mat-input-server {
+  color: red;
+}
diff --git a/integration/mdc-migration/sample-project/src/app/components/input/input.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/input/input.component.spec.ts
@@ -0,0 +1,26 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatInputModule} from '@angular/material/input';
+import {InputComponent} from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatInputModule],
+      declarations: [InputComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/integration/mdc-migration/sample-project/src/app/components/input/input.component.ts b/integration/mdc-migration/sample-project/src/app/components/input/input.component.ts
@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'input-example',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+})
+export class InputComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/integration/mdc-migration/sample-project/src/styles.scss b/integration/mdc-migration/sample-project/src/styles.scss
@@ -30,6 +30,7 @@ $sample-project-theme: mat.define-light-theme((
 
 @include mat.chips-theme($sample-project-theme);
 @include mat.menu-theme($sample-project-theme);
+@include mat.input-theme($sample-project-theme);
 @include mat.paginator-theme($sample-project-theme);
 @include mat.progress-bar-theme($sample-project-theme);
 @include mat.progress-spinner-theme($sample-project-theme);

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<chips-example></chips-example>`
	`2`	`+<input-example></input-example>`
`2`	`3`	`<menu-example></menu-example>`
`3`	`4`	`<paginator-example></paginator-example>`
`4`	`5`	`<progress-bar-example></progress-bar-example>`