docs(material/sort): add harness example for sort (#21469)

(cherry picked from commit 5f9ef44)

Author: annieyw

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

@@ -11,7 +11,13 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/sort",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/sort",
+        "//src/material/sort/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

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

@@ -2,10 +2,12 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatSortModule} from '@angular/material/sort';
 import {SortOverviewExample} from './sort-overview/sort-overview-example';
+import {SortHarnessExample} from './sort-harness/sort-harness-example';
 
-export {SortOverviewExample};
+export {SortHarnessExample, SortOverviewExample};
 
 const EXAMPLES = [
+  SortHarnessExample,
   SortOverviewExample,
 ];
 

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

@@ -0,0 +1,17 @@
+<table matSort (matSortChange)="sortData($event)">
+  <tr>
+    <th mat-sort-header="name">Dessert</th>
+    <th mat-sort-header="calories">Calories</th>
+    <th mat-sort-header="fat" [disabled]="disableThirdHeader">Fat</th>
+    <th mat-sort-header="carbs">Carbs</th>
+    <th mat-sort-header="protein">Protein</th>
+  </tr>
+
+  <tr *ngFor="let dessert of sortedData">
+    <td>{{dessert.name}}</td>
+    <td>{{dessert.calories}}</td>
+    <td>{{dessert.fat}}</td>
+    <td>{{dessert.carbs}}</td>
+    <td>{{dessert.protein}}</td>
+  </tr>
+</table>

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

@@ -0,0 +1,79 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatSortHarness} from '@angular/material/sort/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatSortModule} from '@angular/material/sort';
+import {SortHarnessExample} from './sort-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('SortHarnessExample', () => {
+  let fixture: ComponentFixture<SortHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatSortModule, NoopAnimationsModule],
+        declarations: [SortHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(SortHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load harness for mat-sort', async () => {
+    const sorts = await loader.getAllHarnesses(MatSortHarness);
+    expect(sorts.length).toBe(1);
+  });
+
+  it('should be able to filter headers by their sorted state', async () => {
+    const sort = await loader.getHarness(MatSortHarness);
+    let headers = await sort.getSortHeaders({sortDirection: ''});
+    expect(headers.length).toBe(5);
+
+    await headers[0].click();
+
+    headers = await sort.getSortHeaders({sortDirection: 'asc'});
+
+    expect(headers.length).toBe(1);
+  });
+
+  it('should be able to get the label of a header', async () => {
+    const sort = await loader.getHarness(MatSortHarness);
+    const headers = await sort.getSortHeaders();
+    const labels = await parallel(() => headers.map(header => header.getLabel()));
+    expect(labels).toEqual(['Dessert', 'Calories', 'Fat', 'Carbs', 'Protein']);
+  });
+
+  it('should get the disabled state of a header', async () => {
+    const sort = await loader.getHarness(MatSortHarness);
+    const thirdHeader = (await sort.getSortHeaders())[2];
+
+    expect(await thirdHeader.isDisabled()).toBe(false);
+
+    fixture.componentInstance.disableThirdHeader = true;
+    fixture.detectChanges();
+
+    expect(await thirdHeader.isDisabled()).toBe(true);
+  });
+
+  it('should get the sorted direction of a header', async () => {
+    const sort = await loader.getHarness(MatSortHarness);
+    const secondHeader = (await sort.getSortHeaders())[1];
+
+    expect(await secondHeader.getSortDirection()).toBe('');
+
+    await secondHeader.click();
+    expect(await secondHeader.getSortDirection()).toBe('asc');
+
+    await secondHeader.click();
+    expect(await secondHeader.getSortDirection()).toBe('desc');
+  });
+});

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

@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+import {Sort} from '@angular/material/sort';
+
+/**
+ * @title Testing with MatSortHarness
+ */
+@Component({
+  selector: 'sort-harness-example',
+  templateUrl: 'sort-harness-example.html',
+})
+export class SortHarnessExample {
+  disableThirdHeader = false;
+  desserts = [
+    {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
+    {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
+    {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6},
+    {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4},
+    {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4},
+  ];
+
+  sortedData = this.desserts.slice();
+
+  sortData(sort: Sort) {
+    const data = this.desserts.slice();
+
+    if (!sort.active || sort.direction === '') {
+      this.sortedData = data;
+    } else {
+      this.sortedData = data.sort((a, b) => {
+        const aValue = (a as any)[sort.active];
+        const bValue = (b as any)[sort.active];
+        return (aValue < bValue ? -1 : 1) * (sort.direction === 'asc' ? 1 : -1);
+      });
+    }
+  }
+}