docs(material/snack-bar): add harness example for snack bar (#21790)

Author: annieyw

src/components-examples/material/snack-bar/BUILD.bazel

@@ -1,21 +1,30 @@
-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 = "snack-bar",
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
     assets = glob([
         "**/*.html",
         "**/*.css",
     ]),
     module_name = "@angular/components-examples/material/snack-bar",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/input",
         "//src/material/select",
         "//src/material/snack-bar",
+        "//src/material/snack-bar/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 
@@ -27,3 +36,23 @@ filegroup(
         "**/*.ts",
     ]),
 )
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":snack-bar",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/snack-bar",
+        "//src/material/snack-bar/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/snack-bar/index.ts

@@ -10,16 +10,19 @@ import {
 } from './snack-bar-component/snack-bar-component-example';
 import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
 import {SnackBarPositionExample} from './snack-bar-position/snack-bar-position-example';
+import {SnackBarHarnessExample} from './snack-bar-harness/snack-bar-harness-example';
 
 export {
   SnackBarComponentExample,
+  SnackBarHarnessExample,
   SnackBarOverviewExample,
   SnackBarPositionExample,
   PizzaPartyComponent,
 };
 
 const EXAMPLES = [
   SnackBarComponentExample,
+  SnackBarHarnessExample,
   SnackBarOverviewExample,
   SnackBarPositionExample,
 ];

src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.html

@@ -0,0 +1 @@
+<ng-template>Hello from the snackbar</ng-template>

src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts

@@ -0,0 +1,64 @@
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatSnackBarHarness} from '@angular/material/snack-bar/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {SnackBarHarnessExample} from './snack-bar-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+
+describe('SnackBarHarnessExample', () => {
+  let fixture: ComponentFixture<SnackBarHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatSnackBarModule, NoopAnimationsModule],
+      declarations: [SnackBarHarnessExample]
+    }).compileComponents();
+    fixture = TestBed.createComponent(SnackBarHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  it('should load harness for simple snack-bar', async () => {
+    const snackBarRef = fixture.componentInstance.open('Hi!', '');
+    let snackBars = await loader.getAllHarnesses(MatSnackBarHarness);
+
+    expect(snackBars.length).toBe(1);
+
+    snackBarRef.dismiss();
+    snackBars = await loader.getAllHarnesses(MatSnackBarHarness);
+    expect(snackBars.length).toBe(0);
+  });
+
+  it('should be able to get message of simple snack-bar', async () => {
+    fixture.componentInstance.open('Subscribed to newsletter.');
+    let snackBar = await loader.getHarness(MatSnackBarHarness);
+    expect(await snackBar.getMessage()).toBe('Subscribed to newsletter.');
+  });
+
+  it('should be able to get action description of simple snack-bar', async () => {
+    fixture.componentInstance.open('Hello', 'Unsubscribe');
+    let snackBar = await loader.getHarness(MatSnackBarHarness);
+    expect(await snackBar.getActionDescription()).toBe('Unsubscribe');
+  });
+
+  it('should be able to check whether simple snack-bar has action', async () => {
+    fixture.componentInstance.open('With action', 'Unsubscribe');
+    let snackBar = await loader.getHarness(MatSnackBarHarness);
+    expect(await snackBar.hasAction()).toBe(true);
+
+    fixture.componentInstance.open('No action');
+    snackBar = await loader.getHarness(MatSnackBarHarness);
+    expect(await snackBar.hasAction()).toBe(false);
+  });
+});

src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar';
+
+/**
+ * @title Testing with MatSnackBarHarness
+ */
+@Component({
+  selector: 'snack-bar-harness-example',
+  templateUrl: 'snack-bar-harness-example.html',
+})
+export class SnackBarHarnessExample {
+  constructor(readonly snackBar: MatSnackBar) {}
+
+  open(message: string, action = '', config?: MatSnackBarConfig) {
+    return this.snackBar.open(message, action, config);
+  }
+}