docs(material/grid-list): add harness example for grid-list (#21470)

Author: annieyw

src/components-examples/material/grid-list/BUILD.bazel

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

src/components-examples/material/grid-list/grid-list-harness/grid-list-harness-example.html

@@ -0,0 +1,13 @@
+<mat-grid-list cols="2" rowHeight="100px">
+  <mat-grid-tile>Tile 1 (no header, no footer)</mat-grid-tile>
+  <mat-grid-tile>
+    <mat-grid-tile-header>Tile 2</mat-grid-tile-header>
+  </mat-grid-tile>
+  <mat-grid-tile colspan="2">
+    <mat-grid-tile-header>Tile 3</mat-grid-tile-header>
+    <mat-grid-tile-footer>Tile 3 footer</mat-grid-tile-footer>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <mat-grid-tile-header>Tile 4</mat-grid-tile-header>
+  </mat-grid-tile>
+</mat-grid-list>

src/components-examples/material/grid-list/grid-list-harness/grid-list-harness-example.spec.ts

@@ -0,0 +1,57 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatGridListHarness, MatGridTileHarness} from '@angular/material/grid-list/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {GridListHarnessExample} from './grid-list-harness-example';
+
+describe('GridListHarnessExample', () => {
+  let fixture: ComponentFixture<GridListHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatGridListModule],
+        declarations: [GridListHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(GridListHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should be able to load grid-list harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(MatGridListHarness);
+    expect(harnesses.length).toBe(1);
+  });
+
+  it('should be able to load grid-tile harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(MatGridTileHarness);
+    expect(harnesses.length).toBe(4);
+  });
+
+  it('should be able to get tiles of grid-list with filters', async () => {
+    const gridList = await loader.getHarness(MatGridListHarness);
+    const tiles = await gridList.getTiles({headerText: /Tile [34]/});
+    expect(tiles.length).toBe(2);
+  });
+
+  it('should be able to check whether tile has header', async () => {
+    const tiles = await loader.getAllHarnesses(MatGridTileHarness);
+    expect(await tiles[0].hasHeader()).toBe(false);
+    expect(await (await tiles[0].host()).text()).toBe('Tile 1 (no header, no footer)');
+  });
+
+  it('should be able to check whether tile has footer', async () => {
+    const tiles = await loader.getAllHarnesses(MatGridTileHarness);
+    expect(await tiles[2].hasFooter()).toBe(true);
+    expect(await tiles[2].getFooterText()).toBe('Tile 3 footer');
+  });
+});

src/components-examples/material/grid-list/grid-list-harness/grid-list-harness-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatGridListHarness
+ */
+@Component({
+  selector: 'grid-list-harness-example',
+  templateUrl: 'grid-list-harness-example.html',
+})
+export class GridListHarnessExample {}

src/components-examples/material/grid-list/index.ts

@@ -3,14 +3,17 @@ import {NgModule} from '@angular/core';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
+import {GridListHarnessExample} from './grid-list-harness/grid-list-harness-example';
 
 export {
   GridListDynamicExample,
+  GridListHarnessExample,
   GridListOverviewExample,
 };
 
 const EXAMPLES = [
   GridListDynamicExample,
+  GridListHarnessExample,
   GridListOverviewExample,
 ];