docs(material/expansion): add harness example for expansion (#21472)

(cherry picked from commit 2c73a4c)

Author: annieyw

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

@@ -11,11 +11,17 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/expansion",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/datepicker",
         "//src/material/expansion",
+        "//src/material/expansion/testing",
         "//src/material/icon",
         "//src/material/input",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

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

@@ -0,0 +1,10 @@
+<mat-accordion>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Welcome
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <p>I am the content!</p>
+  </mat-expansion-panel>
+</mat-accordion>

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

@@ -0,0 +1,58 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatExpansionPanelHarness, MatAccordionHarness} from '@angular/material/expansion/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {ExpansionHarnessExample} from './expansion-harness-example';
+
+describe('ExpansionHarnessExample', () => {
+  let fixture: ComponentFixture<ExpansionHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatExpansionModule],
+        declarations: [ExpansionHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(ExpansionHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should be able to load accordion', async () => {
+    const accordions = await loader.getAllHarnesses(MatAccordionHarness);
+    expect(accordions.length).toBe(1);
+  });
+
+  it('should be able to load expansion panels', async () => {
+    const panels = await loader.getAllHarnesses(MatExpansionPanelHarness);
+    expect(panels.length).toBe(1);
+  });
+
+  it('should be able to toggle expansion state of panel', async () => {
+    const panel = await loader.getHarness(MatExpansionPanelHarness);
+    expect(await panel.isExpanded()).toBe(false);
+    await panel.toggle();
+    expect(await panel.isExpanded()).toBe(true);
+  });
+
+  it('should be able to get text content of expansion panel', async () => {
+    const panel = await loader.getHarness(MatExpansionPanelHarness);
+    expect(await panel.getTextContent()).toBe('I am the content!');
+  });
+
+  it('should be able to get expansion panels of accordion', async () => {
+    const accordion = await loader.getHarness(MatAccordionHarness);
+    const panels = await accordion.getExpansionPanels();
+    expect(panels.length).toBe(1);
+    expect(await panels[0].getTitle()).toBe('Welcome');
+  });
+});

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

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

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

@@ -10,15 +10,18 @@ import {
 } from './expansion-expand-collapse-all/expansion-expand-collapse-all-example';
 import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example';
 import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example';
+import {ExpansionHarnessExample} from './expansion-harness/expansion-harness-example';
 
 export {
   ExpansionExpandCollapseAllExample,
+  ExpansionHarnessExample,
   ExpansionOverviewExample,
   ExpansionStepsExample,
 };
 
 const EXAMPLES = [
   ExpansionExpandCollapseAllExample,
+  ExpansionHarnessExample,
   ExpansionOverviewExample,
   ExpansionStepsExample,
 ];