docs(material/paginator): add harness example for paginator (#21454)

Author: annieyw

src/components-examples/material/paginator/BUILD.bazel

@@ -11,9 +11,15 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/paginator",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/input",
         "//src/material/paginator",
+        "//src/material/paginator/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/paginator/index.ts

@@ -7,14 +7,17 @@ import {
   PaginatorConfigurableExample
 } from './paginator-configurable/paginator-configurable-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
+import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
 
 export {
   PaginatorConfigurableExample,
+  PaginatorHarnessExample,
   PaginatorOverviewExample,
 };
 
 const EXAMPLES = [
   PaginatorConfigurableExample,
+  PaginatorHarnessExample,
   PaginatorOverviewExample,
 ];
 

src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html

@@ -0,0 +1,8 @@
+<mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="length"
+    [pageSize]="pageSize"
+    [showFirstLastButtons]="showFirstLastButtons"
+    [pageSizeOptions]="pageSizeOptions"
+    [pageIndex]="pageIndex">
+</mat-paginator>

src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts

@@ -0,0 +1,63 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatPaginatorHarness} from '@angular/material/paginator/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {PaginatorHarnessExample} from './paginator-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('PaginatorHarnessExample', () => {
+  let fixture: ComponentFixture<PaginatorHarnessExample>;
+  let loader: HarnessLoader;
+  let instance: PaginatorHarnessExample;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatPaginatorModule, NoopAnimationsModule],
+        declarations: [PaginatorHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(PaginatorHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      instance = fixture.componentInstance;
+    })
+  );
+
+  it('should load all paginator harnesses', async () => {
+    const paginators = await loader.getAllHarnesses(MatPaginatorHarness);
+    expect(paginators.length).toBe(1);
+  });
+
+  it('should be able to navigate between pages', async () => {
+    const paginator = await loader.getHarness(MatPaginatorHarness);
+
+    expect(instance.pageIndex).toBe(0);
+    await paginator.goToNextPage();
+    expect(instance.pageIndex).toBe(1);
+    await paginator.goToPreviousPage();
+    expect(instance.pageIndex).toBe(0);
+  });
+
+  it('should be able to go to the last page', async () => {
+    const paginator = await loader.getHarness(MatPaginatorHarness);
+
+    expect(instance.pageIndex).toBe(0);
+    await paginator.goToLastPage();
+    expect(instance.pageIndex).toBe(49);
+  });
+
+  it('should be able to set the page size', async () => {
+    const paginator = await loader.getHarness(MatPaginatorHarness);
+
+    expect(instance.pageSize).toBe(10);
+    await paginator.setPageSize(25);
+    expect(instance.pageSize).toBe(25);
+  });
+});

src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {PageEvent} from '@angular/material/paginator';
+
+/**
+ * @title Testing with MatPaginatorHarness
+ */
+@Component({
+  selector: 'paginator-harness-example',
+  templateUrl: 'paginator-harness-example.html'
+})
+export class PaginatorHarnessExample {
+  length = 500;
+  pageSize = 10;
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+  showFirstLastButtons = true;
+
+  handlePageEvent(event: PageEvent) {
+    this.length = event.length;
+    this.pageSize = event.pageSize;
+    this.pageIndex = event.pageIndex;
+  }
+}