diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel index c22efd7a7b86..938fd13ae360 100644 --- a/src/components-examples/material/card/BUILD.bazel +++ b/src/components-examples/material/card/BUILD.bazel @@ -11,8 +11,15 @@ ng_module( ]), module_name = "@angular/components-examples/material/card", deps = [ + "//src/cdk/testing", + "//src/cdk/testing/testbed", "//src/material/button", + "//src/material/button/testing", "//src/material/card", + "//src/material/card/testing", + "@npm//@angular/platform-browser", + "@npm//@angular/platform-browser-dynamic", + "@npm//@types/jasmine", ], ) diff --git a/src/components-examples/material/card/card-harness/card-harness-example.html b/src/components-examples/material/card/card-harness/card-harness-example.html new file mode 100644 index 000000000000..ceffe0502773 --- /dev/null +++ b/src/components-examples/material/card/card-harness/card-harness-example.html @@ -0,0 +1,21 @@ + + + + +
+ Shiba Inu + Dog Breed +
+
+ +

+ 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. +

+
+ + + + +
diff --git a/src/components-examples/material/card/card-harness/card-harness-example.spec.ts b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts new file mode 100644 index 000000000000..19a6643de525 --- /dev/null +++ b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts @@ -0,0 +1,50 @@ +import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing'; +import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; +import {MatButtonHarness} from '@angular/material/button/testing'; +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} from './card-harness-example'; + +describe('CardHarnessExample', () => { + let fixture: ComponentFixture; + 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(MatButtonHarness) ?? []; + expect(footerSubcomponents.length).toBe(2); + }); +}); diff --git a/src/components-examples/material/card/card-harness/card-harness-example.ts b/src/components-examples/material/card/card-harness/card-harness-example.ts new file mode 100644 index 000000000000..57313da75d70 --- /dev/null +++ b/src/components-examples/material/card/card-harness/card-harness-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Testing with MatCardHarness + */ +@Component({ + selector: 'card-harness-example', + templateUrl: 'card-harness-example.html', +}) +export class CardHarnessExample {} diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts index 63b06c4d5e9c..20532e992d9e 100644 --- a/src/components-examples/material/card/index.ts +++ b/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({