build: add snack-bar example to mdc-migration integration test

Author: amysorto

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

@@ -13,3 +13,4 @@
 <select-example></select-example>
 <slide-toggle-example></slide-toggle-example>
 <slider-example></slider-example>
+<snack-bar-example></snack-bar-example>

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

@@ -20,6 +20,7 @@ import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
 import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -35,6 +36,7 @@ import {RadioComponent} from './components/radio/radio.component';
 import {SelectComponent} from './components/select/select.component';
 import {SlideToggleComponent} from './components/slide-toggle/slide-toggle.component';
 import {SliderComponent} from './components/slider/slider.component';
+import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
 
 @NgModule({
   declarations: [
@@ -54,6 +56,7 @@ import {SliderComponent} from './components/slider/slider.component';
     SelectComponent,
     SlideToggleComponent,
     SliderComponent,
+    SnackBarComponent,
   ],
   imports: [
     BrowserModule,
@@ -74,6 +77,7 @@ import {SliderComponent} from './components/slider/slider.component';
     MatSelectModule,
     MatSlideToggleModule,
     MatSliderModule,
+    MatSnackBarModule,
     ReactiveFormsModule,
   ],
   providers: [],

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

@@ -0,0 +1,6 @@
+<h2>Snackbar example</h2>
+<mat-form-field appearance="fill">
+  <mat-label>Message</mat-label>
+  <input matInput value="Disco party!" #message>
+</mat-form-field>
+<button mat-stroked-button (click)="openSnackBar(message.value)">Show snack-bar</button>

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

@@ -0,0 +1,6 @@
+::ng-deep {
+  .mat-mdc-snack-bar-container { background: lavender; }
+  .mat-mdc-simple-snack-bar {
+    color: darkblue;
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'snack-bar-example',
+  templateUrl: './snack-bar.component.html',
+  styleUrls: ['./snack-bar.component.scss'],
+})
+export class SnackBarComponent {
+  constructor(private _snackBar: MatSnackBar) {}
+
+  openSnackBar(message: string) {
+    this._snackBar.open(message, 'Dismiss');
+  }
+}

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

@@ -64,6 +64,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-slide-toggle-typography($sample-project-theme);
 @include mat.mdc-slider-theme($sample-project-theme);
 @include mat.mdc-slider-typography($sample-project-theme);
+@include mat.mdc-snack-bar-theme($sample-project-theme);
+@include mat.mdc-snack-bar-typography($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */
 

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

@@ -13,3 +13,4 @@
 <select-example></select-example>
 <slide-toggle-example></slide-toggle-example>
 <slider-example></slider-example>
+<snack-bar-example></snack-bar-example>

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

@@ -20,6 +20,7 @@ import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -35,6 +36,7 @@ import {RadioComponent} from './components/radio/radio.component';
 import {SelectComponent} from './components/select/select.component';
 import {SlideToggleComponent} from './components/slide-toggle/slide-toggle.component';
 import {SliderComponent} from './components/slider/slider.component';
+import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
 
 @NgModule({
   declarations: [
@@ -54,6 +56,7 @@ import {SliderComponent} from './components/slider/slider.component';
     SelectComponent,
     SlideToggleComponent,
     SliderComponent,
+    SnackBarComponent,
   ],
   imports: [
     BrowserModule,
@@ -74,6 +77,7 @@ import {SliderComponent} from './components/slider/slider.component';
     MatSelectModule,
     MatSlideToggleModule,
     MatSliderModule,
+    MatSnackBarModule,
     ReactiveFormsModule,
   ],
   providers: [],

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

@@ -0,0 +1,6 @@
+<h2>Snackbar example</h2>
+<mat-form-field appearance="fill">
+  <mat-label>Message</mat-label>
+  <input matInput value="Disco party!" #message>
+</mat-form-field>
+<button mat-stroked-button (click)="openSnackBar(message.value)">Show snack-bar</button>