docs(material/card): add card harness example

Author: annieyw

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

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

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

@@ -0,0 +1,24 @@
+<mat-card>
+</mat-card>
+<mat-card>
+  <mat-card-header>
+    <div mat-card-avatar></div>
+    <mat-card-title>Shiba Inu</mat-card-title>
+    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  </mat-card-header>
+  <div mat-card-image></div>
+  <mat-card-content>
+    <p>
+      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from
+      Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu
+      was originally bred for hunting.
+    </p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button>LIKE</button>
+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+  <mat-card-footer>
+    <div>Woof woof!</div>
+  </mat-card-footer>
+</mat-card>

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

@@ -0,0 +1,49 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatCardHarness} from '@angular/material/card/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatCardModule} from '@angular/material/card';
+import {CardHarnessExample, DummyHarness} from './card-harness-example';
+
+describe('CardHarnessExample', () => {
+  let fixture: ComponentFixture<CardHarnessExample>;
+  let loader: HarnessLoader;
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatCardModule],
+        declarations: [CardHarnessExample]
+      }).compileComponents();
+    }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should find card with text', async () => {
+    const cards = await loader.getAllHarnesses(MatCardHarness.with({text: /spitz breed/}));
+    expect(cards.length).toBe(1);
+    expect(await cards[0].getTitleText()).toBe('Shiba Inu');
+  });
+
+  it('should get subtitle text', async () => {
+    const cards = await loader.getAllHarnesses(MatCardHarness);
+    expect(await Promise.all(cards.map(c => c.getSubtitleText()))).toEqual([
+      '',
+      'Dog Breed'
+    ]);
+  });
+
+  it('should act as a harness loader for user content', async () => {
+    const card = await loader.getHarness(MatCardHarness.with({title: 'Shiba Inu'}));
+    const footerSubcomponents = await card.getAllHarnesses(DummyHarness) ?? [];
+    expect(footerSubcomponents.length).toBe(7);
+  });
+});

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {ComponentHarness} from '@angular/cdk/testing';
+
+/**
+ * @title Testing with MatCardHarness
+ */
+@Component({
+  selector: 'card-harness-example',
+  templateUrl: 'card-harness-example.html',
+})
+export class CardHarnessExample {}
+
+export class DummyHarness extends ComponentHarness {
+  static hostSelector = 'div, p, button';
+}

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

@@ -3,15 +3,18 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {CardFancyExample} from './card-fancy/card-fancy-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
+import {CardHarnessExample} from './card-harness/card-harness-example';
 
 export {
   CardFancyExample,
   CardOverviewExample,
+  CardHarnessExample,
 };
 
 const EXAMPLES = [
   CardFancyExample,
   CardOverviewExample,
+  CardHarnessExample,
 ];
 
 @NgModule({