build: add tooltip example to mdc-migration integration test

Author: amysorto

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

@@ -17,3 +17,4 @@
 <snack-bar-example></snack-bar-example>
 <table-example></table-example>
 <tabs-example></tabs-example>
+<tooltip-example></tooltip-example>

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

@@ -24,6 +24,7 @@ import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material-experimental/mdc-table';
 import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -43,6 +44,7 @@ import {SliderComponent} from './components/slider/slider.component';
 import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
 import {TableComponent} from './components/table/table.component';
 import {TabsComponent} from './components/tabs/tabs.component';
+import {TooltipComponent} from './components/tooltip/tooltip.component';
 
 @NgModule({
   declarations: [
@@ -66,6 +68,7 @@ import {TabsComponent} from './components/tabs/tabs.component';
     SnackBarComponent,
     TableComponent,
     TabsComponent,
+    TooltipComponent,
   ],
   imports: [
     BrowserModule,
@@ -90,6 +93,7 @@ import {TabsComponent} from './components/tabs/tabs.component';
     MatSnackBarModule,
     MatTableModule,
     MatTabsModule,
+    MatTooltipModule,
     ReactiveFormsModule,
   ],
   providers: [],

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

@@ -0,0 +1,4 @@
+<h2>Tooltip example</h2>
+<button mat-stroked-button matTooltip="Here are more details!">
+  Learn more
+</button>

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

@@ -0,0 +1,15 @@
+::ng-deep {
+  .mat-mdc-tooltip {
+    font-size: 16px;
+  }
+
+  .mat-mdc-tooltip-panel {
+    margin: 4px;
+  }
+}
+
+/* TODO: The following rule targets internal classes of tooltip that may no longer apply for the MDC version. */
+
+.mat-tooltip-handset {
+  font-size: 12px;
+}

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

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

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

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'tooltip-example',
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.scss'],
+})
+export class TooltipComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -72,6 +72,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-table-typography($sample-project-theme);
 @include mat.mdc-tabs-theme($sample-project-theme);
 @include mat.mdc-tabs-typography($sample-project-theme);
+@include mat.mdc-tooltip-theme($sample-project-theme);
+@include mat.mdc-tooltip-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

@@ -17,3 +17,4 @@
 <snack-bar-example></snack-bar-example>
 <table-example></table-example>
 <tabs-example></tabs-example>
+<tooltip-example></tooltip-example>

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

@@ -24,6 +24,7 @@ import {MatSliderModule} from '@angular/material/slider';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -43,6 +44,7 @@ import {SliderComponent} from './components/slider/slider.component';
 import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
 import {TableComponent} from './components/table/table.component';
 import {TabsComponent} from './components/tabs/tabs.component';
+import {TooltipComponent} from './components/tooltip/tooltip.component';
 
 @NgModule({
   declarations: [
@@ -66,6 +68,7 @@ import {TabsComponent} from './components/tabs/tabs.component';
     SnackBarComponent,
     TableComponent,
     TabsComponent,
+    TooltipComponent,
   ],
   imports: [
     BrowserModule,
@@ -90,6 +93,7 @@ import {TabsComponent} from './components/tabs/tabs.component';
     MatSnackBarModule,
     MatTableModule,
     MatTabsModule,
+    MatTooltipModule,
     ReactiveFormsModule,
   ],
   providers: [],

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

@@ -0,0 +1,4 @@
+<h2>Tooltip example</h2>
+<button mat-stroked-button matTooltip="Here are more details!">
+  Learn more
+</button>

integration/mdc-migration/sample-project/src/app/components/tooltip/tooltip.component.scss

@@ -0,0 +1,13 @@
+::ng-deep {
+  .mat-tooltip {
+    font-size: 16px;
+  }
+
+  .mat-tooltip-panel {
+    margin: 4px;
+  }
+}
+
+.mat-tooltip-handset {
+  font-size: 12px;
+}

integration/mdc-migration/sample-project/src/app/components/tooltip/tooltip.component.spec.ts

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

integration/mdc-migration/sample-project/src/app/components/tooltip/tooltip.component.ts

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'tooltip-example',
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.scss'],
+})
+export class TooltipComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

integration/mdc-migration/sample-project/src/styles.scss

@@ -47,6 +47,7 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.snack-bar-theme($sample-project-theme);
 @include mat.table-theme($sample-project-theme);
 @include mat.tabs-theme($sample-project-theme);
+@include mat.tooltip-theme($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */