Skip to content

Commit 485f44b

Browse files
43081j43081j
committed
mwc-checkbox: normalise tests
1 parent 347110f commit 485f44b

File tree

1 file changed

+136
-82
lines changed

1 file changed

+136
-82
lines changed

‎packages/checkbox/test/mwc-checkbox.test.ts‎

Lines changed: 136 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -16,109 +16,163 @@
1616
*/
1717

1818
import {Checkbox} from '@material/mwc-checkbox';
19+
import {html} from 'lit-html';
1920

20-
import {Fake, rafPromise} from '../../../test/src/util/helpers';
21+
import {Fake, fixture, rafPromise, TestFixture} from '../../../test/src/util/helpers';
2122

2223
interface CheckboxInternals {
2324
formElement: HTMLInputElement;
2425
animationClass: string;
2526
}
2627

28+
interface CheckboxProps {
29+
checked: boolean;
30+
indeterminate: boolean;
31+
disabled: boolean;
32+
value: string;
33+
reduceTouchTarget: boolean;
34+
}
35+
36+
const defaultCheckbox = html`<mwc-checkbox></mwc-checkbox>`;
37+
38+
const checkbox = (propsInit: Partial<CheckboxProps>) => {
39+
return html`
40+
<mwc-checkbox
41+
?checked=${propsInit.checked === true}
42+
?indeterminate=${propsInit.indeterminate === true}
43+
?disabled=${propsInit.disabled === true}
44+
value=${propsInit.value ?? ''}
45+
?reduceTouchTarget=${propsInit.reduceTouchTarget === true}>
46+
</mwc-checkbox>
47+
`;
48+
};
49+
2750
suite('mwc-checkbox', () => {
51+
let fixt: TestFixture;
2852
let element: Checkbox;
2953
let internals: CheckboxInternals;
3054

31-
setup(() => {
32-
element = document.createElement('mwc-checkbox');
33-
internals = element as unknown as CheckboxInternals;
34-
document.body.appendChild(element);
35-
});
36-
3755
teardown(() => {
38-
document.body.removeChild(element);
56+
fixt.remove();
3957
});
4058

41-
test('initializes as an mwc-checkbox', () => {
42-
assert.instanceOf(element, Checkbox);
59+
suite('basic', () => {
60+
setup(async () => {
61+
fixt = await fixture(defaultCheckbox);
62+
element = fixt.root.querySelector('mwc-checkbox')!;
63+
internals = element as unknown as CheckboxInternals;
64+
});
65+
66+
test('initializes as an mwc-checkbox', () => {
67+
assert.instanceOf(element, Checkbox);
68+
assert.equal(element.checked, false);
69+
assert.equal(element.indeterminate, false);
70+
assert.equal(element.disabled, false);
71+
assert.equal(element.value, '');
72+
});
73+
74+
test(
75+
'element.formElement returns the native checkbox element', async () => {
76+
await element.updateComplete;
77+
assert.instanceOf(internals.formElement, HTMLElement);
78+
assert.equal(internals.formElement.localName, 'input');
79+
});
80+
81+
test('user input emits `change` event', async () => {
82+
const callback = new Fake<[], void>();
83+
element.addEventListener('change', callback.handler);
84+
element.click();
85+
assert.equal(callback.callCount, 1);
86+
});
87+
88+
test('user input updates checked state', async () => {
89+
element.click();
90+
await element.updateComplete;
91+
assert.equal(element.checked, true);
92+
});
93+
94+
test('does not animate after being hidden', async () => {
95+
element.checked = true;
96+
await element.updateComplete;
97+
element.style.display = 'hidden';
98+
await rafPromise();
99+
element.style.display = '';
100+
await rafPromise();
101+
assert.equal(internals.animationClass, '');
102+
});
43103
});
44104

45-
46-
test('element.formElement returns the native checkbox element', async () => {
47-
await element.updateComplete;
48-
assert.instanceOf(internals.formElement, HTMLElement);
49-
assert.equal(internals.formElement.localName, 'input');
105+
suite('checked', () => {
106+
setup(async () => {
107+
fixt = await fixture(checkbox({checked: true}));
108+
element = fixt.root.querySelector('mwc-checkbox')!;
109+
internals = element as unknown as CheckboxInternals;
110+
await element.updateComplete;
111+
});
112+
113+
test(
114+
'get/set updates the checked property on the native checkbox element',
115+
async () => {
116+
assert.equal(internals.formElement.checked, true);
117+
element.checked = false;
118+
await element.updateComplete;
119+
assert.equal(internals.formElement.checked, false);
120+
});
50121
});
51122

52-
test(
53-
'get/set checked updates the checked property on the native checkbox element',
54-
async () => {
55-
element.checked = true;
56-
await element.updateComplete;
57-
assert.equal(internals.formElement.checked, true);
58-
element.checked = false;
59-
await element.updateComplete;
60-
assert.equal(internals.formElement.checked, false);
61-
});
62-
63-
test(
64-
'get/set indeterminate updates the indeterminate property on the native checkbox element',
65-
async () => {
66-
element.indeterminate = true;
67-
await element.updateComplete;
68-
assert.equal(internals.formElement.indeterminate, true);
69-
element.indeterminate = false;
70-
await element.updateComplete;
71-
assert.equal(internals.formElement.indeterminate, false);
72-
});
73-
74-
test(
75-
'get/set disabled updates the disabled property on the native checkbox element',
76-
async () => {
77-
element.disabled = true;
78-
await element.updateComplete;
79-
assert.equal(internals.formElement.disabled, true);
80-
element.disabled = false;
81-
await element.updateComplete;
82-
assert.equal(internals.formElement.disabled, false);
83-
});
84-
85-
test(
86-
'get/set value updates the value of the native checkbox element',
87-
async () => {
88-
let value = 'new value';
89-
element.value = value;
90-
await element.updateComplete;
91-
assert.equal(internals.formElement.value, value);
92-
value = 'new value 2';
93-
element.value = value;
94-
await element.updateComplete;
95-
assert.equal(internals.formElement.value, value);
96-
});
97-
98-
test('user input emits `change` event', async () => {
99-
const callback = new Fake<[], void>();
100-
document.body.addEventListener('change', callback.handler);
101-
element.checked = false;
102-
await element.updateComplete;
103-
element.click();
104-
assert.equal(callback.callCount, 1);
123+
suite('indeterminate', () => {
124+
setup(async () => {
125+
fixt = await fixture(checkbox({indeterminate: true}));
126+
element = fixt.root.querySelector('mwc-checkbox')!;
127+
internals = element as unknown as CheckboxInternals;
128+
await element.updateComplete;
129+
});
130+
131+
test(
132+
'get/set updates the indeterminate property on the native checkbox element',
133+
async () => {
134+
assert.equal(internals.formElement.indeterminate, true);
135+
assert.equal(
136+
internals.formElement.getAttribute('aria-checked'), 'mixed');
137+
element.indeterminate = false;
138+
await element.updateComplete;
139+
assert.equal(internals.formElement.indeterminate, false);
140+
});
105141
});
106142

107-
test('user input updates checked state', async () => {
108-
element.checked = false;
109-
await element.updateComplete;
110-
element.click();
111-
await element.updateComplete;
112-
assert.equal(element.checked, true);
143+
suite('disabled', () => {
144+
setup(async () => {
145+
fixt = await fixture(checkbox({disabled: true}));
146+
element = fixt.root.querySelector('mwc-checkbox')!;
147+
internals = element as unknown as CheckboxInternals;
148+
await element.updateComplete;
149+
});
150+
151+
test(
152+
'get/set updates the disabled property on the native checkbox element',
153+
async () => {
154+
assert.equal(internals.formElement.disabled, true);
155+
element.disabled = false;
156+
await element.updateComplete;
157+
assert.equal(internals.formElement.disabled, false);
158+
});
113159
});
114160

115-
test('does not animate after being hidden', async () => {
116-
element.checked = true;
117-
await element.updateComplete;
118-
element.style.display = 'hidden';
119-
await rafPromise();
120-
element.style.display = '';
121-
await rafPromise();
122-
assert.equal(internals.animationClass, '');
161+
suite('value', () => {
162+
setup(async () => {
163+
fixt = await fixture(checkbox({value: 'new value'}));
164+
element = fixt.root.querySelector('mwc-checkbox')!;
165+
internals = element as unknown as CheckboxInternals;
166+
await element.updateComplete;
167+
});
168+
169+
test(
170+
'get/set updates the value of the native checkbox element',
171+
async () => {
172+
assert.equal(internals.formElement.value, 'new value');
173+
element.value = 'new value 2';
174+
await element.updateComplete;
175+
assert.equal(internals.formElement.value, 'new value 2');
176+
});
123177
});
124178
});

0 commit comments

Comments
 (0)