Skip to content

Commit 0ae79b0

Browse files
mmalerbammalerba
committed
feat(checkbox): move checkbox harness out of experimental
1 parent b454e38 commit 0ae79b0

File tree

11 files changed

+334
-71
lines changed

11 files changed

+334
-71
lines changed

‎src/material-experimental/mdc-checkbox/testing/BUILD.bazel

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ng_module")
4+
5+
ng_module(
6+
name = "testing",
7+
module_name = "@angular/material-experimental/mdc-checkbox/testing",
8+
srcs = glob(
9+
["**/*.ts"],
10+
exclude = ["**/*.spec.ts"],
11+
),
12+
deps = [
13+
"//src/material/checkbox/testing",
14+
"//src/cdk/coercion",
15+
"//src/cdk/testing",
16+
],
17+
)
18+
19+
ng_test_library(
20+
name = "unit_tests_lib",
21+
srcs = glob(["**/*.spec.ts"]),
22+
deps = [
23+
":testing",
24+
"//src/cdk/testing",
25+
"//src/cdk/testing/testbed",
26+
"//src/material-experimental/mdc-checkbox",
27+
"@npm//@angular/forms",
28+
"@npm//@angular/platform-browser",
29+
],
30+
)
31+
32+
ng_web_test_suite(
33+
name = "unit_tests",
34+
static_files = [
35+
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
36+
"@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
37+
],
38+
deps = [
39+
":unit_tests_lib",
40+
"//src/material-experimental:mdc_require_config.js",
41+
],
42+
)

‎src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import {HarnessLoader} from '@angular/cdk/testing';
2+
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3+
import {Component} from '@angular/core';
4+
import {ComponentFixture, TestBed} from '@angular/core/testing';
5+
import {FormControl, ReactiveFormsModule} from '@angular/forms';
6+
import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
7+
import {MatCheckboxHarness} from '@angular/material-experimental/mdc-checkbox/testing';
8+
9+
describe('MDC-based MatCheckboxHarness', () => {
10+
let fixture: ComponentFixture<CheckboxHarnessTest>;
11+
let loader: HarnessLoader;
12+
13+
beforeEach(async () => {
14+
await TestBed
15+
.configureTestingModule({
16+
imports: [MatCheckboxModule, ReactiveFormsModule],
17+
declarations: [CheckboxHarnessTest],
18+
})
19+
.compileComponents();
20+
21+
fixture = TestBed.createComponent(CheckboxHarnessTest);
22+
fixture.detectChanges();
23+
loader = TestbedHarnessEnvironment.loader(fixture);
24+
});
25+
26+
it('should load all checkbox harnesses', async () => {
27+
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
28+
expect(checkboxes.length).toBe(2);
29+
});
30+
31+
it('should load checkbox with exact label', async () => {
32+
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: 'First'}));
33+
expect(checkboxes.length).toBe(1);
34+
expect(await checkboxes[0].getLabelText()).toBe('First');
35+
});
36+
37+
it('should load checkbox with name', async () => {
38+
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'}));
39+
expect(checkboxes.length).toBe(1);
40+
expect(await checkboxes[0].getLabelText()).toBe('First');
41+
});
42+
43+
it('should load checkbox with regex label match', async () => {
44+
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: /^s/i}));
45+
expect(checkboxes.length).toBe(1);
46+
expect(await checkboxes[0].getLabelText()).toBe('Second');
47+
});
48+
49+
it('should get checked state', async () => {
50+
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
51+
expect(await checkedCheckbox.isChecked()).toBe(true);
52+
expect(await uncheckedCheckbox.isChecked()).toBe(false);
53+
});
54+
55+
it('should get indeterminate state', async () => {
56+
const [checkedCheckbox, indeterminateCheckbox] =
57+
await loader.getAllHarnesses(MatCheckboxHarness);
58+
expect(await checkedCheckbox.isIndeterminate()).toBe(false);
59+
expect(await indeterminateCheckbox.isIndeterminate()).toBe(true);
60+
});
61+
62+
it('should get disabled state', async () => {
63+
const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
64+
expect(await enabledCheckbox.isDisabled()).toBe(false);
65+
expect(await disabledCheckbox.isDisabled()).toBe(true);
66+
});
67+
68+
it('should get required state', async () => {
69+
const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
70+
expect(await requiredCheckbox.isRequired()).toBe(true);
71+
expect(await optionalCheckbox.isRequired()).toBe(false);
72+
});
73+
74+
it('should get valid state', async () => {
75+
const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
76+
expect(await optionalCheckbox.isValid()).toBe(true);
77+
expect(await requiredCheckbox.isValid()).toBe(true);
78+
await requiredCheckbox.uncheck();
79+
expect(await requiredCheckbox.isValid()).toBe(false);
80+
});
81+
82+
it('should get name', async () => {
83+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
84+
expect(await checkbox.getName()).toBe('first-name');
85+
});
86+
87+
it('should get value', async () => {
88+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
89+
expect(await checkbox.getValue()).toBe('first-value');
90+
});
91+
92+
it('should get aria-label', async () => {
93+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
94+
expect(await checkbox.getAriaLabel()).toBe('First checkbox');
95+
});
96+
97+
it('should get aria-labelledby', async () => {
98+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'}));
99+
expect(await checkbox.getAriaLabelledby()).toBe('second-label');
100+
});
101+
102+
it('should get label text', async () => {
103+
const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
104+
expect(await firstCheckbox.getLabelText()).toBe('First');
105+
expect(await secondCheckbox.getLabelText()).toBe('Second');
106+
});
107+
108+
it('should focus checkbox', async () => {
109+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
110+
expect(getActiveElementTagName()).not.toBe('input');
111+
await checkbox.focus();
112+
expect(getActiveElementTagName()).toBe('input');
113+
});
114+
115+
it('should blur checkbox', async () => {
116+
const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'}));
117+
await checkbox.focus();
118+
expect(getActiveElementTagName()).toBe('input');
119+
await checkbox.blur();
120+
expect(getActiveElementTagName()).not.toBe('input');
121+
});
122+
123+
it('should toggle checkbox', async () => {
124+
fixture.componentInstance.disabled = false;
125+
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
126+
await checkedCheckbox.toggle();
127+
await uncheckedCheckbox.toggle();
128+
expect(await checkedCheckbox.isChecked()).toBe(false);
129+
expect(await uncheckedCheckbox.isChecked()).toBe(true);
130+
});
131+
132+
it('should check checkbox', async () => {
133+
fixture.componentInstance.disabled = false;
134+
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
135+
await checkedCheckbox.check();
136+
await uncheckedCheckbox.check();
137+
expect(await checkedCheckbox.isChecked()).toBe(true);
138+
expect(await uncheckedCheckbox.isChecked()).toBe(true);
139+
});
140+
141+
it('should uncheck checkbox', async () => {
142+
fixture.componentInstance.disabled = false;
143+
const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness);
144+
await checkedCheckbox.uncheck();
145+
await uncheckedCheckbox.uncheck();
146+
expect(await checkedCheckbox.isChecked()).toBe(false);
147+
expect(await uncheckedCheckbox.isChecked()).toBe(false);
148+
});
149+
150+
it('should not toggle disabled checkbox', async () => {
151+
const disabledCheckbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'}));
152+
expect(await disabledCheckbox.isChecked()).toBe(false);
153+
await disabledCheckbox.toggle();
154+
expect(await disabledCheckbox.isChecked()).toBe(false);
155+
});
156+
});
157+
158+
function getActiveElementTagName() {
159+
return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
160+
}
161+
162+
@Component({
163+
template: `
164+
<mat-checkbox
165+
[formControl]="ctrl"
166+
required
167+
name="first-name"
168+
value="first-value"
169+
aria-label="First checkbox">
170+
First
171+
</mat-checkbox>
172+
<mat-checkbox indeterminate="true" [disabled]="disabled" aria-labelledby="second-label">
173+
Second
174+
</mat-checkbox>
175+
<span id="second-label">Second checkbox</span>
176+
`
177+
})
178+
class CheckboxHarnessTest {
179+
ctrl = new FormControl(true);
180+
disabled = true;
181+
}

‎src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts renamed to ‎src/material-experimental/mdc-checkbox/testing/checkbox-harness.ts

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

99
import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
1010
import {coerceBooleanProperty} from '@angular/cdk/coercion';
11-
import {CheckboxHarnessFilters} from './checkbox-harness-filters';
11+
import {CheckboxHarnessFilters} from '@angular/material/checkbox/testing';
1212

1313
/**
1414
* Harness for interacting with a MDC-based mat-checkbox in tests.

‎src/material-experimental/mdc-checkbox/testing/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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+
export * from './public-api';

‎src/material-experimental/mdc-checkbox/testing/public-api.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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+
export * from './checkbox-harness';

‎src/material/checkbox/testing/BUILD.bazel

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ng_module")
4+
5+
ng_module(
6+
name = "testing",
7+
module_name = "@angular/material/checkbox/testing",
8+
srcs = glob(
9+
["**/*.ts"],
10+
exclude = ["**/*.spec.ts"],
11+
),
12+
deps = [
13+
"//src/cdk/coercion",
14+
"//src/cdk/testing",
15+
],
16+
)
17+
18+
ng_test_library(
19+
name = "unit_tests_lib",
20+
srcs = glob(["**/*.spec.ts"]),
21+
deps = [
22+
":testing",
23+
"//src/cdk/testing",
24+
"//src/cdk/testing/testbed",
25+
"//src/material/checkbox",
26+
"@npm//@angular/forms",
27+
"@npm//@angular/platform-browser",
28+
],
29+
)
30+
31+
ng_web_test_suite(
32+
name = "unit_tests",
33+
deps = [":unit_tests_lib"],
34+
)

‎src/material-experimental/mdc-checkbox/harness/checkbox-harness-filters.ts renamed to ‎src/material/checkbox/testing/checkbox-harness-filters.ts

File renamed without changes.

0 commit comments

Comments
 (0)