build: add paginator example to mdc-migration integration test

Author: amysorto

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

@@ -1,2 +1,3 @@
 <chips-example></chips-example>
 <menu-example></menu-example>
+<paginator-example></paginator-example>

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

@@ -1,9 +1,11 @@
 import {TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
       declarations: [AppComponent],
     }).compileComponents();
   });
@@ -19,13 +21,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('sample-project');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain(
-      'sample-project app is running!',
-    );
-  });
 });

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

@@ -7,18 +7,21 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
+import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
 import {ChipsComponent} from './components/chips/chips.component';
 import {MenuComponent} from './components/menu/menu.component';
+import {PaginatorComponent} from './components/paginator/paginator.component';
 
 @NgModule({
-  declarations: [AppComponent, ChipsComponent, MenuComponent],
+  declarations: [AppComponent, ChipsComponent, MenuComponent, PaginatorComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,
     MatMenuModule,
+    MatPaginatorModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -1,4 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+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 {ChipsComponent} from './chips.component';
 
@@ -8,6 +12,7 @@ describe('ChipsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatChipsModule, MatFormFieldModule, MatIconModule],
       declarations: [ChipsComponent],
     }).compileComponents();
   });

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

@@ -1,4 +1,7 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
 
 import {MenuComponent} from './menu.component';
 
@@ -8,6 +11,7 @@ describe('MenuComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatIconModule, MatMenuModule],
       declarations: [MenuComponent],
     }).compileComponents();
   });

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

@@ -0,0 +1,7 @@
+<h2>Paginator example</h2>
+<mat-paginator
+  [length]="100"
+  [pageSize]="10"
+  [pageSizeOptions]="[5, 10, 25, 100]"
+  aria-label="Select page">
+</mat-paginator>

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

@@ -0,0 +1,13 @@
+.mat-mdc-paginator {
+  background: lavender;
+}
+
+::ng-deep.mat-mdc-paginator .mat-mdc-paginator-container{
+  justify-content: flex-start;
+}
+
+/* TODO: The following rule targets internal classes of paginator that may no longer apply for the MDC version. */
+
+.mat-paginator-increment {
+  padding: 4px;
+}

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

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

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

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

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

@@ -1,2 +1,3 @@
 <chips-example></chips-example>
 <menu-example></menu-example>
+<paginator-example></paginator-example>