diff --git a/src/components-examples/material/snack-bar/BUILD.bazel b/src/components-examples/material/snack-bar/BUILD.bazel index d3ba759e76eb..fc24335256fd 100644 --- a/src/components-examples/material/snack-bar/BUILD.bazel +++ b/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"], +) diff --git a/src/components-examples/material/snack-bar/index.ts b/src/components-examples/material/snack-bar/index.ts index 4b571bf38fa5..de39bd2dca17 100644 --- a/src/components-examples/material/snack-bar/index.ts +++ b/src/components-examples/material/snack-bar/index.ts @@ -10,9 +10,11 @@ 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, @@ -20,6 +22,7 @@ export { const EXAMPLES = [ SnackBarComponentExample, + SnackBarHarnessExample, SnackBarOverviewExample, SnackBarPositionExample, ]; diff --git a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.html b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.html new file mode 100644 index 000000000000..c81ef0c26c08 --- /dev/null +++ b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.html @@ -0,0 +1 @@ +Hello from the snackbar diff --git a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.spec.ts new file mode 100644 index 000000000000..1f1a20f1c2e1 --- /dev/null +++ b/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; + 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); + }); +}); diff --git a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts new file mode 100644 index 000000000000..2c0ce7762035 --- /dev/null +++ b/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); + } +}