docs(material/divider): add harness example for divider (#21473)

Author: annieyw

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

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

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

@@ -0,0 +1,2 @@
+<mat-divider></mat-divider>
+<mat-divider inset vertical></mat-divider>

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

@@ -0,0 +1,46 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatDividerHarness} from '@angular/material/divider/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatDividerModule} from '@angular/material/divider';
+import {DividerHarnessExample} from './divider-harness-example';
+
+describe('DividerHarnessExample', () => {
+  let fixture: ComponentFixture<DividerHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatDividerModule],
+        declarations: [DividerHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(DividerHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all divider harnesses', async () => {
+    const dividers = await loader.getAllHarnesses(MatDividerHarness);
+    expect(dividers.length).toBe(2);
+  });
+
+  it('should check if divider is inset', async () => {
+    const dividers = await loader.getAllHarnesses(MatDividerHarness);
+    expect(await dividers[0].isInset()).toBe(false);
+    expect(await dividers[1].isInset()).toBe(true);
+  });
+
+  it('should get divider orientation', async () => {
+    const dividers = await loader.getAllHarnesses(MatDividerHarness);
+    expect(await dividers[0].getOrientation()).toBe('horizontal');
+    expect(await dividers[1].getOrientation()).toBe('vertical');
+  });
+});

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

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

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

@@ -2,10 +2,12 @@ import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatListModule} from '@angular/material/list';
 import {DividerOverviewExample} from './divider-overview/divider-overview-example';
+import {DividerHarnessExample} from './divider-harness/divider-harness-example';
 
-export {DividerOverviewExample};
+export {DividerHarnessExample, DividerOverviewExample};
 
 const EXAMPLES = [
+  DividerHarnessExample,
   DividerOverviewExample,
 ];