From c24c53f787e9b5b281c49de6125e20d48de35dba Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 8 Sep 2019 17:23:29 +0200 Subject: [PATCH] feat(material-experimental): add harness for mat-drawer Follow-up from #16695. Adds a separate harness for `mat-drawer` and has `mat-sidenav` inherit from it. --- .../mdc-sidenav/BUILD.bazel | 1 + ...s-filters.ts => drawer-harness-filters.ts} | 2 +- .../harness/drawer-harness.spec.ts | 108 ++++++++++++++++++ .../mdc-sidenav/harness/drawer-harness.ts | 54 +++++++++ .../mdc-sidenav/harness/mdc-drawer-harness.ts | 18 +++ .../harness/mdc-sidenav-harness.ts | 4 +- .../harness/sidenav-harness.spec.ts | 53 ++------- .../mdc-sidenav/harness/sidenav-harness.ts | 41 +------ 8 files changed, 195 insertions(+), 86 deletions(-) rename src/material-experimental/mdc-sidenav/harness/{sidenav-harness-filters.ts => drawer-harness-filters.ts} (79%) create mode 100644 src/material-experimental/mdc-sidenav/harness/drawer-harness.spec.ts create mode 100644 src/material-experimental/mdc-sidenav/harness/drawer-harness.ts create mode 100644 src/material-experimental/mdc-sidenav/harness/mdc-drawer-harness.ts diff --git a/src/material-experimental/mdc-sidenav/BUILD.bazel b/src/material-experimental/mdc-sidenav/BUILD.bazel index f3e843f6c2b7..60895ca11cb4 100644 --- a/src/material-experimental/mdc-sidenav/BUILD.bazel +++ b/src/material-experimental/mdc-sidenav/BUILD.bazel @@ -57,6 +57,7 @@ sass_binary( ng_test_library( name = "sidenav_tests_lib", srcs = [ + "harness/drawer-harness.spec.ts", "harness/sidenav-harness.spec.ts", ], deps = [ diff --git a/src/material-experimental/mdc-sidenav/harness/sidenav-harness-filters.ts b/src/material-experimental/mdc-sidenav/harness/drawer-harness-filters.ts similarity index 79% rename from src/material-experimental/mdc-sidenav/harness/sidenav-harness-filters.ts rename to src/material-experimental/mdc-sidenav/harness/drawer-harness-filters.ts index dbd2f2a5fc56..da4f7e2cc260 100644 --- a/src/material-experimental/mdc-sidenav/harness/sidenav-harness-filters.ts +++ b/src/material-experimental/mdc-sidenav/harness/drawer-harness-filters.ts @@ -8,4 +8,4 @@ import {BaseHarnessFilters} from '@angular/cdk-experimental/testing'; -export interface SidenavHarnessFilters extends BaseHarnessFilters {} +export interface DrawerHarnessFilters extends BaseHarnessFilters {} diff --git a/src/material-experimental/mdc-sidenav/harness/drawer-harness.spec.ts b/src/material-experimental/mdc-sidenav/harness/drawer-harness.spec.ts new file mode 100644 index 000000000000..8d7d9f437336 --- /dev/null +++ b/src/material-experimental/mdc-sidenav/harness/drawer-harness.spec.ts @@ -0,0 +1,108 @@ +import {HarnessLoader} from '@angular/cdk-experimental/testing'; +import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed'; +import {Component} from '@angular/core'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {MatSidenavModule} from '@angular/material/sidenav'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {MatSidenavModule as MatMdcSidenavModule} from '../index'; +import {MatDrawerHarness} from './drawer-harness'; +import {MatDrawerHarness as MatMdcDrawerHarness} from './mdc-drawer-harness'; + +let fixture: ComponentFixture; +let loader: HarnessLoader; +let harness: typeof MatDrawerHarness; + +describe('MatDrawerHarness', () => { + describe('non-MDC-based', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MatSidenavModule, NoopAnimationsModule], + declarations: [DrawerHarnessTest], + }).compileComponents(); + + fixture = TestBed.createComponent(DrawerHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + harness = MatDrawerHarness; + }); + + runTests(); + }); + + describe('MDC-based', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MatMdcSidenavModule, NoopAnimationsModule], + declarations: [DrawerHarnessTest], + }).compileComponents(); + + fixture = TestBed.createComponent(DrawerHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + // Public APIs are the same as MatDrawerHarness, but cast + // is necessary because of different private fields. + harness = MatMdcDrawerHarness as any; + }); + + // TODO: enable after MDC drawer is implemented + // runTests(); + }); +}); + +/** Shared tests to run on both the original and MDC-based drawer. */ +function runTests() { + it('should load all drawer harnesses', async () => { + const drawers = await loader.getAllHarnesses(harness); + expect(drawers.length).toBe(3); + }); + + it('should be able to get whether the drawer is open', async () => { + const drawers = await loader.getAllHarnesses(harness); + + expect(await drawers[0].isOpen()).toBe(false); + expect(await drawers[1].isOpen()).toBe(false); + expect(await drawers[2].isOpen()).toBe(true); + + fixture.componentInstance.threeOpened = false; + fixture.detectChanges(); + + expect(await drawers[0].isOpen()).toBe(false); + expect(await drawers[1].isOpen()).toBe(false); + expect(await drawers[2].isOpen()).toBe(false); + }); + + it('should be able to get the position of a drawer', async () => { + const drawers = await loader.getAllHarnesses(harness); + + expect(await drawers[0].getPosition()).toBe('start'); + expect(await drawers[1].getPosition()).toBe('end'); + expect(await drawers[2].getPosition()).toBe('start'); + }); + + it('should be able to get the mode of a drawer', async () => { + const drawers = await loader.getAllHarnesses(harness); + + expect(await drawers[0].getMode()).toBe('over'); + expect(await drawers[1].getMode()).toBe('side'); + expect(await drawers[2].getMode()).toBe('push'); + }); +} + +@Component({ + template: ` + + One + Two + Content + + + + Three + Content + + ` +}) +class DrawerHarnessTest { + threeOpened = true; +} + diff --git a/src/material-experimental/mdc-sidenav/harness/drawer-harness.ts b/src/material-experimental/mdc-sidenav/harness/drawer-harness.ts new file mode 100644 index 000000000000..50b0fe05d09b --- /dev/null +++ b/src/material-experimental/mdc-sidenav/harness/drawer-harness.ts @@ -0,0 +1,54 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ComponentHarness, HarnessPredicate} from '@angular/cdk-experimental/testing'; +import {DrawerHarnessFilters} from './drawer-harness-filters'; + +/** + * Harness for interacting with a standard mat-drawer in tests. + * @dynamic + */ +export class MatDrawerHarness extends ComponentHarness { + static hostSelector = '.mat-drawer'; + + /** + * Gets a `HarnessPredicate` that can be used to search for a drawer with + * specific attributes. + * @param options Options for narrowing the search. + * @return `HarnessPredicate` configured with the given options. + */ + static with(options: DrawerHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatDrawerHarness, options); + } + + /** Gets whether the drawer is open. */ + async isOpen(): Promise { + return (await this.host()).hasClass('mat-drawer-opened'); + } + + /** Gets the position of the drawer inside its container. */ + async getPosition(): Promise<'start'|'end'> { + const host = await this.host(); + return (await host.hasClass('mat-drawer-end')) ? 'end' : 'start'; + } + + /** Gets the mode that the drawer is in. */ + async getMode(): Promise<'over'|'push'|'side'> { + const host = await this.host(); + + if (await host.hasClass('mat-drawer-push')) { + return 'push'; + } + + if (await host.hasClass('mat-drawer-side')) { + return 'side'; + } + + return 'over'; + } +} diff --git a/src/material-experimental/mdc-sidenav/harness/mdc-drawer-harness.ts b/src/material-experimental/mdc-sidenav/harness/mdc-drawer-harness.ts new file mode 100644 index 000000000000..11af4dcdb9e5 --- /dev/null +++ b/src/material-experimental/mdc-sidenav/harness/mdc-drawer-harness.ts @@ -0,0 +1,18 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ComponentHarness} from '@angular/cdk-experimental/testing'; + + +/** + * Harness for interacting with a MDC-based drawer in tests. + * @dynamic + */ +export class MatDrawerHarness extends ComponentHarness { + // TODO: implement once MDC drawer is done. +} diff --git a/src/material-experimental/mdc-sidenav/harness/mdc-sidenav-harness.ts b/src/material-experimental/mdc-sidenav/harness/mdc-sidenav-harness.ts index 7c92bce1cc4f..428a2e5174ad 100644 --- a/src/material-experimental/mdc-sidenav/harness/mdc-sidenav-harness.ts +++ b/src/material-experimental/mdc-sidenav/harness/mdc-sidenav-harness.ts @@ -6,13 +6,13 @@ * found in the LICENSE file at https://angular.io/license */ -import {ComponentHarness} from '@angular/cdk-experimental/testing'; +import {MatDrawerHarness} from './mdc-drawer-harness'; /** * Harness for interacting with a MDC-based mat-sidenav in tests. * @dynamic */ -export class MatSidenavHarness extends ComponentHarness { +export class MatSidenavHarness extends MatDrawerHarness { // TODO: implement once MDC sidenav is done. } diff --git a/src/material-experimental/mdc-sidenav/harness/sidenav-harness.spec.ts b/src/material-experimental/mdc-sidenav/harness/sidenav-harness.spec.ts index c96fb0604d95..392d73cc396a 100644 --- a/src/material-experimental/mdc-sidenav/harness/sidenav-harness.spec.ts +++ b/src/material-experimental/mdc-sidenav/harness/sidenav-harness.spec.ts @@ -6,7 +6,7 @@ import {MatSidenavModule} from '@angular/material/sidenav'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {MatSidenavModule as MatMdcSidenavModule} from '../index'; import {MatSidenavHarness} from './sidenav-harness'; -import {MatSidenavHarness as MatMdcSidenavHarness} from './mdc-sidenav-harness'; +import {MatDrawerHarness as MatMdcSidenavHarness} from './mdc-drawer-harness'; let fixture: ComponentFixture; let loader: HarnessLoader; @@ -49,44 +49,11 @@ describe('MatSidenavHarness', () => { }); }); -/** Shared tests to run on both the original and MDC-based sidenav. */ +/** + * Shared tests to run on both the original and MDC-based sidenav. Only tests logic that + * is specific to `mat-sidenav`, everything else is with the `mat-drawer` tests. + */ function runTests() { - it('should load all sidenav harnesses', async () => { - const sidenavs = await loader.getAllHarnesses(harness); - expect(sidenavs.length).toBe(3); - }); - - it('should be able to get whether the sidenav is open', async () => { - const sidenavs = await loader.getAllHarnesses(harness); - - expect(await sidenavs[0].isOpen()).toBe(false); - expect(await sidenavs[1].isOpen()).toBe(false); - expect(await sidenavs[2].isOpen()).toBe(true); - - fixture.componentInstance.threeOpened = false; - fixture.detectChanges(); - - expect(await sidenavs[0].isOpen()).toBe(false); - expect(await sidenavs[1].isOpen()).toBe(false); - expect(await sidenavs[2].isOpen()).toBe(false); - }); - - it('should be able to get the position of a sidenav', async () => { - const sidenavs = await loader.getAllHarnesses(harness); - - expect(await sidenavs[0].getPosition()).toBe('start'); - expect(await sidenavs[1].getPosition()).toBe('end'); - expect(await sidenavs[2].getPosition()).toBe('start'); - }); - - it('should be able to get the mode of a sidenav', async () => { - const sidenavs = await loader.getAllHarnesses(harness); - - expect(await sidenavs[0].getMode()).toBe('over'); - expect(await sidenavs[1].getMode()).toBe('side'); - expect(await sidenavs[2].getMode()).toBe('push'); - }); - it('should be able to get whether a sidenav is fixed in the viewport', async () => { const sidenavs = await loader.getAllHarnesses(harness); @@ -99,18 +66,16 @@ function runTests() { @Component({ template: ` - One - Two + One + Two Content - Three + Three Content ` }) -class SidenavHarnessTest { - threeOpened = true; -} +class SidenavHarnessTest {} diff --git a/src/material-experimental/mdc-sidenav/harness/sidenav-harness.ts b/src/material-experimental/mdc-sidenav/harness/sidenav-harness.ts index 0a3c5a9eaf33..4b8731d91395 100644 --- a/src/material-experimental/mdc-sidenav/harness/sidenav-harness.ts +++ b/src/material-experimental/mdc-sidenav/harness/sidenav-harness.ts @@ -6,52 +6,15 @@ * found in the LICENSE file at https://angular.io/license */ -import {ComponentHarness, HarnessPredicate} from '@angular/cdk-experimental/testing'; -import {SidenavHarnessFilters} from './sidenav-harness-filters'; +import {MatDrawerHarness} from './drawer-harness'; /** * Harness for interacting with a standard mat-sidenav in tests. * @dynamic */ -export class MatSidenavHarness extends ComponentHarness { +export class MatSidenavHarness extends MatDrawerHarness { static hostSelector = '.mat-sidenav'; - /** - * Gets a `HarnessPredicate` that can be used to search for a sidenav with - * specific attributes. - * @param options Options for narrowing the search. - * @return `HarnessPredicate` configured with the given options. - */ - static with(options: SidenavHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatSidenavHarness, options); - } - - /** Gets whether the sidenav is open. */ - async isOpen(): Promise { - return (await this.host()).hasClass('mat-drawer-opened'); - } - - /** Gets the position of the sidenav inside its container. */ - async getPosition(): Promise<'start'|'end'> { - const host = await this.host(); - return (await host.hasClass('mat-drawer-end')) ? 'end' : 'start'; - } - - /** Gets the mode that the sidenav is in. */ - async getMode(): Promise<'over'|'push'|'side'> { - const host = await this.host(); - - if (await host.hasClass('mat-drawer-push')) { - return 'push'; - } - - if (await host.hasClass('mat-drawer-side')) { - return 'side'; - } - - return 'over'; - } - /** Gets whether the sidenav is fixed in the viewport. */ async isFixedInViewport(): Promise { return (await this.host()).hasClass('mat-sidenav-fixed');