docs(material/sidenav): add sidenav harness example (#21788)

(cherry picked from commit 47ea05d)

Author: annieyw

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

@@ -1,17 +1,22 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
     name = "sidenav",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
     ]),
     module_name = "@angular/components-examples/material/sidenav",
     deps = [
         "//src/cdk/layout",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/icon",
@@ -21,6 +26,9 @@ ng_module(
         "//src/material/sidenav",
         "//src/material/toolbar",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 
@@ -32,3 +40,23 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":sidenav",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/sidenav",
+        "//src/material/sidenav/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)

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

@@ -21,12 +21,14 @@ import {SidenavOpenCloseExample} from './sidenav-open-close/sidenav-open-close-e
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
 import {SidenavPositionExample} from './sidenav-position/sidenav-position-example';
 import {SidenavResponsiveExample} from './sidenav-responsive/sidenav-responsive-example';
+import {SidenavHarnessExample} from './sidenav-harness/sidenav-harness-example';
 
 export {
   SidenavAutosizeExample,
   SidenavBackdropExample,
   SidenavDisableCloseExample,
   SidenavDrawerOverviewExample,
+  SidenavHarnessExample,
   SidenavFixedExample,
   SidenavModeExample,
   SidenavOpenCloseExample,
@@ -40,6 +42,7 @@ const EXAMPLES = [
   SidenavBackdropExample,
   SidenavDisableCloseExample,
   SidenavDrawerOverviewExample,
+  SidenavHarnessExample,
   SidenavFixedExample,
   SidenavModeExample,
   SidenavOpenCloseExample,

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

@@ -0,0 +1,4 @@
+<mat-drawer-container>
+  <mat-drawer mode="side">Hello from the drawer</mat-drawer>
+  <mat-drawer-content>Hello from the content</mat-drawer-content>
+</mat-drawer-container>

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

@@ -0,0 +1,63 @@
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {
+  MatDrawerHarness,
+  MatDrawerContainerHarness,
+  MatDrawerContentHarness} from '@angular/material/sidenav/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {SidenavHarnessExample} from './sidenav-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('SidenavHarnessExample', () => {
+  let fixture: ComponentFixture<SidenavHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatSidenavModule, NoopAnimationsModule],
+      declarations: [SidenavHarnessExample]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidenavHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all drawer harnesses', async () => {
+    const drawers = await loader.getAllHarnesses(MatDrawerHarness);
+    expect(drawers.length).toBe(1);
+  });
+
+  it('should be able to get the mode of a drawer', async () => {
+    const drawer = await loader.getHarness(MatDrawerHarness);
+
+    expect(await drawer.getMode()).toBe('side');
+  });
+
+  it('should get the drawers within a container', async () => {
+    const container = await loader.getHarness(MatDrawerContainerHarness);
+    const drawer = await container.getDrawers();
+
+    expect(await (await drawer[0].host()).text()).toBe('Hello from the drawer');
+  });
+
+  it('should get the content of a container', async () => {
+    const container = await loader.getHarness(MatDrawerContainerHarness);
+    const content = await container.getContent();
+    expect(await (await content.host()).text()).toBe('Hello from the content');
+  });
+
+  it('should load all drawer content harnesses', async () => {
+    const contentElements = await loader.getAllHarnesses(MatDrawerContentHarness);
+    expect(contentElements.length).toBe(1);
+  });
+});

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

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