docs(material/list): add harness example for list (#21450)

(cherry picked from commit 15c4175)

Author: annieyw

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

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

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

@@ -6,15 +6,18 @@ import {ListOverviewExample} from './list-overview/list-overview-example';
 import {ListSectionsExample} from './list-sections/list-sections-example';
 import {ListSelectionExample} from './list-selection/list-selection-example';
 import {ListSingleSelectionExample} from './list-single-selection/list-single-selection-example';
+import {ListHarnessExample} from './list-harness/list-harness-example';
 
 export {
+  ListHarnessExample,
   ListOverviewExample,
   ListSectionsExample,
   ListSelectionExample,
   ListSingleSelectionExample,
 };
 
 const EXAMPLES = [
+  ListHarnessExample,
   ListOverviewExample,
   ListSectionsExample,
   ListSelectionExample,

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

@@ -0,0 +1,14 @@
+<mat-list>
+  <mat-list-item>
+    <div matLine>Item </div>
+    <div matLine>1</div>
+    <div matListIcon>icon</div>
+    <div matListAvatar>Avatar</div>
+  </mat-list-item>
+  <div matSubheader>Section 1</div>
+  <a mat-list-item>
+    <span>Item 2</span>
+  </a>
+  <button mat-list-item>Item 3</button>
+  <div matSubheader>Section 2</div>
+</mat-list>

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

@@ -0,0 +1,67 @@
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatListHarness} from '@angular/material/list/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatListModule} from '@angular/material/list';
+import {ListHarnessExample} from './list-harness-example';
+
+describe('ListHarnessExample', () => {
+  let fixture: ComponentFixture<ListHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatListModule],
+        declarations: [ListHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(ListHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should get all items', async () => {
+    const list = await loader.getHarness(MatListHarness);
+    const items = await list.getItems();
+    expect(await parallel(() => items.map(i => i.getText())))
+      .toEqual(['Item 1', 'Item 2', 'Item 3']);
+  });
+
+  it('should get all items matching text', async () => {
+    const list = await loader.getHarness(MatListHarness);
+    const items = await list.getItems({text: /[13]/});
+    expect(await parallel(() => items.map(i => i.getText()))).toEqual(['Item 1', 'Item 3']);
+  });
+
+  it('should get items by subheader', async () => {
+    const list = await loader.getHarness(MatListHarness);
+    const sections = await list.getItemsGroupedBySubheader();
+    expect(sections.length).toBe(3);
+    expect(sections[0].heading).toBeUndefined();
+    expect(await parallel(() => sections[0].items.map(i => i.getText()))).toEqual(['Item 1']);
+    expect(sections[1].heading).toBe('Section 1');
+    expect(await parallel(() => sections[1].items.map(i => i.getText())))
+      .toEqual(['Item 2', 'Item 3']);
+    expect(sections[2].heading).toBe('Section 2');
+    expect(sections[2].items.length).toEqual(0);
+  });
+
+  it('should get list item text and lines', async () => {
+    const list = await loader.getHarness(MatListHarness);
+    const items = await list.getItems();
+    expect(items.length).toBe(3);
+    expect(await items[0].getText()).toBe('Item 1');
+    expect(await items[0].getLinesText()).toEqual(['Item', '1']);
+    expect(await items[1].getText()).toBe('Item 2');
+    expect(await items[1].getLinesText()).toEqual([]);
+    expect(await items[2].getText()).toBe('Item 3');
+    expect(await items[2].getLinesText()).toEqual([]);
+  });
+});

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

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