|
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 | 1 | import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
|
7 | 2 | import {MatCheckboxHarness} from '@angular/material-experimental/mdc-checkbox/testing';
|
| 3 | +import {runTests} from '@angular/material/checkbox/testing/shared.spec'; |
8 | 4 |
|
9 | 5 | 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 |
| - }); |
| 6 | + runTests(MatCheckboxModule, MatCheckboxHarness as any); |
156 | 7 | });
|
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 |
| -} |
0 commit comments