Skip to content

Commit e511b84

Browse files
crisbetocrisbeto
committed
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.
1 parent c8ceae5 commit e511b84

File tree

8 files changed

+199
-78
lines changed

8 files changed

+199
-78
lines changed

‎src/material-experimental/mdc-sidenav/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ sass_binary(
5757
ng_test_library(
5858
name = "sidenav_tests_lib",
5959
srcs = [
60+
"harness/drawer-harness.spec.ts",
6061
"harness/sidenav-harness.spec.ts",
6162
],
6263
deps = [

‎src/material-experimental/mdc-sidenav/harness/sidenav-harness-filters.ts renamed to ‎src/material-experimental/mdc-sidenav/harness/drawer-harness-filters.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88

99
import {BaseHarnessFilters} from '@angular/cdk-experimental/testing';
1010

11-
export interface SidenavHarnessFilters extends BaseHarnessFilters {}
11+
export interface DrawerHarnessFilters extends BaseHarnessFilters {}

‎src/material-experimental/mdc-sidenav/harness/drawer-harness.spec.ts

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import {HarnessLoader} from '@angular/cdk-experimental/testing';
2+
import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
3+
import {Component} from '@angular/core';
4+
import {ComponentFixture, TestBed} from '@angular/core/testing';
5+
import {MatSidenavModule} from '@angular/material/sidenav';
6+
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
7+
import {MatSidenavModule as MatMdcSidenavModule} from '../index';
8+
import {MatDrawerHarness} from './drawer-harness';
9+
import {MatDrawerHarness as MatMdcDrawerHarness} from './mdc-drawer-harness';
10+
11+
let fixture: ComponentFixture<DrawerHarnessTest>;
12+
let loader: HarnessLoader;
13+
let harness: typeof MatDrawerHarness;
14+
15+
describe('MatDrawerHarness', () => {
16+
describe('non-MDC-based', () => {
17+
beforeEach(async () => {
18+
await TestBed.configureTestingModule({
19+
imports: [MatSidenavModule, NoopAnimationsModule],
20+
declarations: [DrawerHarnessTest],
21+
}).compileComponents();
22+
23+
fixture = TestBed.createComponent(DrawerHarnessTest);
24+
fixture.detectChanges();
25+
loader = TestbedHarnessEnvironment.loader(fixture);
26+
harness = MatDrawerHarness;
27+
});
28+
29+
runTests();
30+
});
31+
32+
describe('MDC-based', () => {
33+
beforeEach(async () => {
34+
await TestBed.configureTestingModule({
35+
imports: [MatMdcSidenavModule, NoopAnimationsModule],
36+
declarations: [DrawerHarnessTest],
37+
}).compileComponents();
38+
39+
fixture = TestBed.createComponent(DrawerHarnessTest);
40+
fixture.detectChanges();
41+
loader = TestbedHarnessEnvironment.loader(fixture);
42+
// Public APIs are the same as MatDrawerHarness, but cast
43+
// is necessary because of different private fields.
44+
harness = MatMdcDrawerHarness as any;
45+
});
46+
47+
// TODO: enable after MDC drawer is implemented
48+
// runTests();
49+
});
50+
});
51+
52+
/** Shared tests to run on both the original and MDC-based drawer. */
53+
function runTests() {
54+
it('should load all drawer harnesses', async () => {
55+
const drawers = await loader.getAllHarnesses(harness);
56+
expect(drawers.length).toBe(3);
57+
});
58+
59+
it('should be able to get whether the drawer is open', async () => {
60+
const drawers = await loader.getAllHarnesses(harness);
61+
62+
expect(await drawers[0].isOpen()).toBe(false);
63+
expect(await drawers[1].isOpen()).toBe(false);
64+
expect(await drawers[2].isOpen()).toBe(true);
65+
66+
fixture.componentInstance.threeOpened = false;
67+
fixture.detectChanges();
68+
69+
expect(await drawers[0].isOpen()).toBe(false);
70+
expect(await drawers[1].isOpen()).toBe(false);
71+
expect(await drawers[2].isOpen()).toBe(false);
72+
});
73+
74+
it('should be able to get the position of a drawer', async () => {
75+
const drawers = await loader.getAllHarnesses(harness);
76+
77+
expect(await drawers[0].getPosition()).toBe('start');
78+
expect(await drawers[1].getPosition()).toBe('end');
79+
expect(await drawers[2].getPosition()).toBe('start');
80+
});
81+
82+
it('should be able to get the mode of a drawer', async () => {
83+
const drawers = await loader.getAllHarnesses(harness);
84+
85+
expect(await drawers[0].getMode()).toBe('over');
86+
expect(await drawers[1].getMode()).toBe('side');
87+
expect(await drawers[2].getMode()).toBe('push');
88+
});
89+
}
90+
91+
@Component({
92+
template: `
93+
<mat-drawer-container>
94+
<mat-drawer id="one" [opened]="oneOpened" position="start">One</mat-drawer>
95+
<mat-drawer id="two" mode="side" position="end">Two</mat-drawer>
96+
<mat-drawer-content>Content</mat-drawer-content>
97+
</mat-drawer-container>
98+
99+
<mat-drawer-container>
100+
<mat-drawer id="three" mode="push" [opened]="threeOpened">Three</mat-drawer>
101+
<mat-drawer-content>Content</mat-drawer-content>
102+
</mat-drawer-container>
103+
`
104+
})
105+
class DrawerHarnessTest {
106+
threeOpened = true;
107+
}
108+

‎src/material-experimental/mdc-sidenav/harness/drawer-harness.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {ComponentHarness, HarnessPredicate} from '@angular/cdk-experimental/testing';
10+
import {DrawerHarnessFilters} from './drawer-harness-filters';
11+
12+
/**
13+
* Harness for interacting with a standard mat-drawer in tests.
14+
* @dynamic
15+
*/
16+
export class MatDrawerHarness extends ComponentHarness {
17+
static hostSelector = '.mat-drawer';
18+
19+
/**
20+
* Gets a `HarnessPredicate` that can be used to search for a drawer with
21+
* specific attributes.
22+
* @param options Options for narrowing the search.
23+
* @return `HarnessPredicate` configured with the given options.
24+
*/
25+
static with(options: DrawerHarnessFilters = {}): HarnessPredicate<MatDrawerHarness> {
26+
return new HarnessPredicate(MatDrawerHarness, options);
27+
}
28+
29+
/** Gets whether the drawer is open. */
30+
async isOpen(): Promise<boolean> {
31+
return (await this.host()).hasClass('mat-drawer-opened');
32+
}
33+
34+
/** Gets the position of the drawer inside its container. */
35+
async getPosition(): Promise<'start'|'end'> {
36+
const host = await this.host();
37+
return (await host.hasClass('mat-drawer-end')) ? 'end' : 'start';
38+
}
39+
40+
/** Gets the mode that the drawer is in. */
41+
async getMode(): Promise<'over'|'push'|'side'> {
42+
const host = await this.host();
43+
44+
if (await host.hasClass('mat-drawer-push')) {
45+
return 'push';
46+
}
47+
48+
if (await host.hasClass('mat-drawer-side')) {
49+
return 'side';
50+
}
51+
52+
return 'over';
53+
}
54+
}

‎src/material-experimental/mdc-sidenav/harness/mdc-drawer-harness.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {ComponentHarness} from '@angular/cdk-experimental/testing';
10+
11+
12+
/**
13+
* Harness for interacting with a MDC-based drawer in tests.
14+
* @dynamic
15+
*/
16+
export class MatDrawerHarness extends ComponentHarness {
17+
// TODO: implement once MDC drawer is done.
18+
}

‎src/material-experimental/mdc-sidenav/harness/mdc-sidenav-harness.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {ComponentHarness} from '@angular/cdk-experimental/testing';
9+
import {MatDrawerHarness} from './mdc-drawer-harness';
1010

1111

1212
/**
1313
* Harness for interacting with a MDC-based mat-sidenav in tests.
1414
* @dynamic
1515
*/
16-
export class MatSidenavHarness extends ComponentHarness {
16+
export class MatSidenavHarness extends MatDrawerHarness {
1717
// TODO: implement once MDC sidenav is done.
1818
}

‎src/material-experimental/mdc-sidenav/harness/sidenav-harness.spec.ts

Lines changed: 9 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
66
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
77
import {MatSidenavModule as MatMdcSidenavModule} from '../index';
88
import {MatSidenavHarness} from './sidenav-harness';
9-
import {MatSidenavHarness as MatMdcSidenavHarness} from './mdc-sidenav-harness';
9+
import {MatDrawerHarness as MatMdcSidenavHarness} from './mdc-drawer-harness';
1010

1111
let fixture: ComponentFixture<SidenavHarnessTest>;
1212
let loader: HarnessLoader;
@@ -49,44 +49,11 @@ describe('MatSidenavHarness', () => {
4949
});
5050
});
5151

52-
/** Shared tests to run on both the original and MDC-based sidenav. */
52+
/**
53+
* Shared tests to run on both the original and MDC-based sidenav. Only tests logic that
54+
* is specific to `mat-sidenav`, everything else is with the `mat-drawer` tests.
55+
*/
5356
function runTests() {
54-
it('should load all sidenav harnesses', async () => {
55-
const sidenavs = await loader.getAllHarnesses(harness);
56-
expect(sidenavs.length).toBe(3);
57-
});
58-
59-
it('should be able to get whether the sidenav is open', async () => {
60-
const sidenavs = await loader.getAllHarnesses(harness);
61-
62-
expect(await sidenavs[0].isOpen()).toBe(false);
63-
expect(await sidenavs[1].isOpen()).toBe(false);
64-
expect(await sidenavs[2].isOpen()).toBe(true);
65-
66-
fixture.componentInstance.threeOpened = false;
67-
fixture.detectChanges();
68-
69-
expect(await sidenavs[0].isOpen()).toBe(false);
70-
expect(await sidenavs[1].isOpen()).toBe(false);
71-
expect(await sidenavs[2].isOpen()).toBe(false);
72-
});
73-
74-
it('should be able to get the position of a sidenav', async () => {
75-
const sidenavs = await loader.getAllHarnesses(harness);
76-
77-
expect(await sidenavs[0].getPosition()).toBe('start');
78-
expect(await sidenavs[1].getPosition()).toBe('end');
79-
expect(await sidenavs[2].getPosition()).toBe('start');
80-
});
81-
82-
it('should be able to get the mode of a sidenav', async () => {
83-
const sidenavs = await loader.getAllHarnesses(harness);
84-
85-
expect(await sidenavs[0].getMode()).toBe('over');
86-
expect(await sidenavs[1].getMode()).toBe('side');
87-
expect(await sidenavs[2].getMode()).toBe('push');
88-
});
89-
9057
it('should be able to get whether a sidenav is fixed in the viewport', async () => {
9158
const sidenavs = await loader.getAllHarnesses(harness);
9259

@@ -99,18 +66,16 @@ function runTests() {
9966
@Component({
10067
template: `
10168
<mat-sidenav-container>
102-
<mat-sidenav id="one" [opened]="oneOpened" position="start">One</mat-sidenav>
103-
<mat-sidenav id="two" mode="side" position="end">Two</mat-sidenav>
69+
<mat-sidenav id="one" position="start">One</mat-sidenav>
70+
<mat-sidenav id="two" position="end">Two</mat-sidenav>
10471
<mat-sidenav-content>Content</mat-sidenav-content>
10572
</mat-sidenav-container>
10673
10774
<mat-sidenav-container>
108-
<mat-sidenav id="three" mode="push" [opened]="threeOpened" fixedInViewport>Three</mat-sidenav>
75+
<mat-sidenav id="three" fixedInViewport>Three</mat-sidenav>
10976
<mat-sidenav-content>Content</mat-sidenav-content>
11077
</mat-sidenav-container>
11178
`
11279
})
113-
class SidenavHarnessTest {
114-
threeOpened = true;
115-
}
80+
class SidenavHarnessTest {}
11681

‎src/material-experimental/mdc-sidenav/harness/sidenav-harness.ts

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {ComponentHarness, HarnessPredicate} from '@angular/cdk-experimental/testing';
10-
import {SidenavHarnessFilters} from './sidenav-harness-filters';
9+
import {HarnessPredicate} from '@angular/cdk-experimental/testing';
10+
import {MatDrawerHarness} from './drawer-harness';
11+
import {DrawerHarnessFilters} from './drawer-harness-filters';
1112

1213
/**
1314
* Harness for interacting with a standard mat-sidenav in tests.
1415
* @dynamic
1516
*/
16-
export class MatSidenavHarness extends ComponentHarness {
17+
export class MatSidenavHarness extends MatDrawerHarness {
1718
static hostSelector = '.mat-sidenav';
1819

1920
/**
@@ -22,34 +23,8 @@ export class MatSidenavHarness extends ComponentHarness {
2223
* @param options Options for narrowing the search.
2324
* @return `HarnessPredicate` configured with the given options.
2425
*/
25-
static with(options: SidenavHarnessFilters = {}): HarnessPredicate<MatSidenavHarness> {
26-
return new HarnessPredicate(MatSidenavHarness, options);
27-
}
28-
29-
/** Gets whether the sidenav is open. */
30-
async isOpen(): Promise<boolean> {
31-
return (await this.host()).hasClass('mat-drawer-opened');
32-
}
33-
34-
/** Gets the position of the sidenav inside its container. */
35-
async getPosition(): Promise<'start'|'end'> {
36-
const host = await this.host();
37-
return (await host.hasClass('mat-drawer-end')) ? 'end' : 'start';
38-
}
39-
40-
/** Gets the mode that the sidenav is in. */
41-
async getMode(): Promise<'over'|'push'|'side'> {
42-
const host = await this.host();
43-
44-
if (await host.hasClass('mat-drawer-push')) {
45-
return 'push';
46-
}
47-
48-
if (await host.hasClass('mat-drawer-side')) {
49-
return 'side';
50-
}
51-
52-
return 'over';
26+
static with(options: DrawerHarnessFilters = {}): HarnessPredicate<MatDrawerHarness> {
27+
return new HarnessPredicate(MatDrawerHarness, options);
5328
}
5429

5530
/** Gets whether the sidenav is fixed in the viewport. */

0 commit comments

Comments
 (0)