@crowdstrike/glide-core 0.13.1 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/drawer.d.ts +2 -2
- package/dist/drawer.js +1 -1
- package/dist/drawer.styles.js +3 -14
- package/dist/dropdown.styles.js +3 -2
- package/dist/input.styles.js +1 -0
- package/dist/styles/variables.css +1 -1
- package/dist/textarea.styles.js +2 -0
- package/dist/toasts.d.ts +2 -2
- package/dist/toasts.toast.d.ts +1 -1
- package/dist/toasts.toast.js +1 -1
- package/dist/toasts.toast.styles.js +8 -0
- package/dist/tree.item.styles.js +2 -2
- package/package.json +8 -5
- package/dist/accordion.stories.d.ts +0 -6
- package/dist/accordion.test.basics.d.ts +0 -1
- package/dist/accordion.test.basics.js +0 -28
- package/dist/accordion.test.events.d.ts +0 -1
- package/dist/accordion.test.events.js +0 -28
- package/dist/accordion.test.focus.d.ts +0 -1
- package/dist/accordion.test.focus.js +0 -11
- package/dist/accordion.test.interactions.d.ts +0 -1
- package/dist/accordion.test.interactions.js +0 -75
- package/dist/button-group.button.test.basics.d.ts +0 -1
- package/dist/button-group.button.test.basics.js +0 -97
- package/dist/button-group.button.test.events.d.ts +0 -1
- package/dist/button-group.button.test.events.js +0 -15
- package/dist/button-group.button.test.focus.d.ts +0 -1
- package/dist/button-group.button.test.focus.js +0 -13
- package/dist/button-group.button.test.interactions.d.ts +0 -1
- package/dist/button-group.button.test.interactions.js +0 -42
- package/dist/button-group.stories.d.ts +0 -7
- package/dist/button-group.test.basics.d.ts +0 -1
- package/dist/button-group.test.basics.js +0 -148
- package/dist/button-group.test.events.d.ts +0 -1
- package/dist/button-group.test.events.js +0 -241
- package/dist/button-group.test.focus.d.ts +0 -1
- package/dist/button-group.test.focus.js +0 -39
- package/dist/button-group.test.interactions.d.ts +0 -1
- package/dist/button-group.test.interactions.js +0 -91
- package/dist/button.stories.d.ts +0 -7
- package/dist/button.test.basics.d.ts +0 -1
- package/dist/button.test.basics.js +0 -69
- package/dist/button.test.events.d.ts +0 -1
- package/dist/button.test.events.js +0 -102
- package/dist/checkbox-group.stories.d.ts +0 -6
- package/dist/checkbox-group.test.basics.d.ts +0 -1
- package/dist/checkbox-group.test.basics.js +0 -116
- package/dist/checkbox-group.test.events.d.ts +0 -1
- package/dist/checkbox-group.test.events.js +0 -111
- package/dist/checkbox-group.test.focus.d.ts +0 -1
- package/dist/checkbox-group.test.focus.js +0 -70
- package/dist/checkbox-group.test.form.d.ts +0 -1
- package/dist/checkbox-group.test.form.js +0 -131
- package/dist/checkbox-group.test.interactions.d.ts +0 -1
- package/dist/checkbox-group.test.interactions.js +0 -82
- package/dist/checkbox-group.test.validity.d.ts +0 -1
- package/dist/checkbox-group.test.validity.js +0 -145
- package/dist/checkbox.stories.d.ts +0 -5
- package/dist/checkbox.test.basics.d.ts +0 -1
- package/dist/checkbox.test.basics.js +0 -90
- package/dist/checkbox.test.events.d.ts +0 -1
- package/dist/checkbox.test.events.js +0 -105
- package/dist/checkbox.test.focus.d.ts +0 -1
- package/dist/checkbox.test.focus.js +0 -51
- package/dist/checkbox.test.form.d.ts +0 -1
- package/dist/checkbox.test.form.js +0 -133
- package/dist/checkbox.test.interactions.d.ts +0 -1
- package/dist/checkbox.test.interactions.js +0 -131
- package/dist/checkbox.test.validity.d.ts +0 -1
- package/dist/checkbox.test.validity.js +0 -128
- package/dist/drawer.stories.d.ts +0 -6
- package/dist/drawer.test.accessibility.d.ts +0 -1
- package/dist/drawer.test.accessibility.js +0 -22
- package/dist/drawer.test.basics.d.ts +0 -1
- package/dist/drawer.test.basics.js +0 -44
- package/dist/drawer.test.closing.d.ts +0 -1
- package/dist/drawer.test.closing.js +0 -40
- package/dist/drawer.test.events.d.ts +0 -1
- package/dist/drawer.test.events.js +0 -42
- package/dist/drawer.test.methods.d.ts +0 -1
- package/dist/drawer.test.methods.js +0 -35
- package/dist/dropdown.option.test.basics.d.ts +0 -1
- package/dist/dropdown.option.test.basics.js +0 -34
- package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
- package/dist/dropdown.option.test.basics.multiple.js +0 -36
- package/dist/dropdown.option.test.basics.single.d.ts +0 -1
- package/dist/dropdown.option.test.basics.single.js +0 -29
- package/dist/dropdown.option.test.events.d.ts +0 -1
- package/dist/dropdown.option.test.events.js +0 -36
- package/dist/dropdown.option.test.focus.d.ts +0 -1
- package/dist/dropdown.option.test.focus.js +0 -11
- package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
- package/dist/dropdown.option.test.interactions.multiple.js +0 -42
- package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
- package/dist/dropdown.option.test.interactions.single.js +0 -76
- package/dist/dropdown.stories.d.ts +0 -8
- package/dist/dropdown.test.basics.d.ts +0 -1
- package/dist/dropdown.test.basics.filterable.d.ts +0 -1
- package/dist/dropdown.test.basics.filterable.js +0 -108
- package/dist/dropdown.test.basics.js +0 -181
- package/dist/dropdown.test.basics.multiple.d.ts +0 -1
- package/dist/dropdown.test.basics.multiple.js +0 -259
- package/dist/dropdown.test.basics.single.d.ts +0 -1
- package/dist/dropdown.test.basics.single.js +0 -122
- package/dist/dropdown.test.events.d.ts +0 -1
- package/dist/dropdown.test.events.filterable.d.ts +0 -1
- package/dist/dropdown.test.events.filterable.js +0 -31
- package/dist/dropdown.test.events.js +0 -251
- package/dist/dropdown.test.events.multiple.d.ts +0 -1
- package/dist/dropdown.test.events.multiple.js +0 -446
- package/dist/dropdown.test.events.single.d.ts +0 -1
- package/dist/dropdown.test.events.single.js +0 -343
- package/dist/dropdown.test.focus.d.ts +0 -1
- package/dist/dropdown.test.focus.filterable.d.ts +0 -1
- package/dist/dropdown.test.focus.filterable.js +0 -140
- package/dist/dropdown.test.focus.js +0 -107
- package/dist/dropdown.test.focus.multiple.d.ts +0 -1
- package/dist/dropdown.test.focus.multiple.js +0 -170
- package/dist/dropdown.test.focus.single.d.ts +0 -1
- package/dist/dropdown.test.focus.single.js +0 -42
- package/dist/dropdown.test.form.d.ts +0 -1
- package/dist/dropdown.test.form.js +0 -74
- package/dist/dropdown.test.form.multiple.d.ts +0 -1
- package/dist/dropdown.test.form.multiple.js +0 -151
- package/dist/dropdown.test.form.single.d.ts +0 -1
- package/dist/dropdown.test.form.single.js +0 -129
- package/dist/dropdown.test.interactions.d.ts +0 -1
- package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
- package/dist/dropdown.test.interactions.filterable.js +0 -805
- package/dist/dropdown.test.interactions.js +0 -696
- package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
- package/dist/dropdown.test.interactions.multiple.js +0 -1026
- package/dist/dropdown.test.interactions.single.d.ts +0 -1
- package/dist/dropdown.test.interactions.single.js +0 -569
- package/dist/dropdown.test.validity.d.ts +0 -1
- package/dist/dropdown.test.validity.js +0 -181
- package/dist/form-controls-layout.stories.d.ts +0 -10
- package/dist/form-controls-layout.test.basics.d.ts +0 -2
- package/dist/form-controls-layout.test.basics.js +0 -75
- package/dist/form-controls-layout.test.interactions.d.ts +0 -2
- package/dist/form-controls-layout.test.interactions.js +0 -26
- package/dist/icon-button.stories.d.ts +0 -6
- package/dist/icon-button.test.basics.d.ts +0 -1
- package/dist/icon-button.test.basics.js +0 -43
- package/dist/icon-button.test.focus.d.ts +0 -1
- package/dist/icon-button.test.focus.js +0 -13
- package/dist/input.stories.d.ts +0 -8
- package/dist/input.test.basics.d.ts +0 -1
- package/dist/input.test.basics.js +0 -138
- package/dist/input.test.events.d.ts +0 -1
- package/dist/input.test.events.js +0 -98
- package/dist/input.test.focus.d.ts +0 -1
- package/dist/input.test.focus.js +0 -58
- package/dist/input.test.form.d.ts +0 -1
- package/dist/input.test.form.js +0 -74
- package/dist/input.test.validity.d.ts +0 -1
- package/dist/input.test.validity.js +0 -258
- package/dist/label.test.basics.d.ts +0 -1
- package/dist/label.test.basics.js +0 -136
- package/dist/menu.button.test.basics.d.ts +0 -1
- package/dist/menu.button.test.basics.js +0 -43
- package/dist/menu.link.test.basics.d.ts +0 -1
- package/dist/menu.link.test.basics.js +0 -47
- package/dist/menu.options.test.basics.d.ts +0 -2
- package/dist/menu.options.test.basics.js +0 -44
- package/dist/menu.options.test.events.d.ts +0 -1
- package/dist/menu.options.test.events.js +0 -19
- package/dist/menu.stories.d.ts +0 -11
- package/dist/menu.test.basics.d.ts +0 -1
- package/dist/menu.test.basics.js +0 -178
- package/dist/menu.test.events.d.ts +0 -3
- package/dist/menu.test.events.js +0 -125
- package/dist/menu.test.focus.d.ts +0 -2
- package/dist/menu.test.focus.js +0 -102
- package/dist/menu.test.interactions.d.ts +0 -3
- package/dist/menu.test.interactions.js +0 -1069
- package/dist/modal.icon-button.test.basics.d.ts +0 -1
- package/dist/modal.icon-button.test.basics.js +0 -46
- package/dist/modal.stories.d.ts +0 -13
- package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
- package/dist/modal.tertiary-icon.test.basics.js +0 -60
- package/dist/modal.test.accessibility.d.ts +0 -1
- package/dist/modal.test.accessibility.js +0 -38
- package/dist/modal.test.basics.d.ts +0 -3
- package/dist/modal.test.basics.js +0 -204
- package/dist/modal.test.close.d.ts +0 -1
- package/dist/modal.test.close.js +0 -35
- package/dist/modal.test.events.d.ts +0 -1
- package/dist/modal.test.events.js +0 -99
- package/dist/modal.test.lock-scroll.d.ts +0 -1
- package/dist/modal.test.lock-scroll.js +0 -67
- package/dist/modal.test.methods.d.ts +0 -1
- package/dist/modal.test.methods.js +0 -20
- package/dist/modal.test.scrollbars.d.ts +0 -1
- package/dist/modal.test.scrollbars.js +0 -18
- package/dist/radio-group.stories.d.ts +0 -6
- package/dist/radio-group.test.basics.d.ts +0 -2
- package/dist/radio-group.test.basics.js +0 -324
- package/dist/radio-group.test.events.d.ts +0 -2
- package/dist/radio-group.test.events.js +0 -278
- package/dist/radio-group.test.focus.d.ts +0 -2
- package/dist/radio-group.test.focus.js +0 -95
- package/dist/radio-group.test.form.d.ts +0 -1
- package/dist/radio-group.test.form.js +0 -124
- package/dist/radio-group.test.validity.d.ts +0 -1
- package/dist/radio-group.test.validity.js +0 -311
- package/dist/split-button.primary-button.test.basics.d.ts +0 -1
- package/dist/split-button.primary-button.test.basics.js +0 -31
- package/dist/split-button.primary-button.test.focus.d.ts +0 -1
- package/dist/split-button.primary-button.test.focus.js +0 -14
- package/dist/split-button.primary-link.test.basics.d.ts +0 -1
- package/dist/split-button.primary-link.test.basics.js +0 -30
- package/dist/split-button.primary-link.test.focus.d.ts +0 -1
- package/dist/split-button.primary-link.test.focus.js +0 -15
- package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
- package/dist/split-button.secondary-button.test.basics.js +0 -58
- package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
- package/dist/split-button.secondary-button.test.focus.js +0 -14
- package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
- package/dist/split-button.secondary-button.test.interactions.js +0 -30
- package/dist/split-button.stories.d.ts +0 -13
- package/dist/split-button.test.basics.d.ts +0 -2
- package/dist/split-button.test.basics.js +0 -87
- package/dist/split-button.test.interactions.d.ts +0 -4
- package/dist/split-button.test.interactions.js +0 -51
- package/dist/tab.group.test.basics.d.ts +0 -3
- package/dist/tab.group.test.basics.js +0 -234
- package/dist/tab.group.test.interactions.d.ts +0 -3
- package/dist/tab.group.test.interactions.js +0 -434
- package/dist/tab.test.basics.d.ts +0 -1
- package/dist/tab.test.basics.js +0 -50
- package/dist/tabs.stories.d.ts +0 -8
- package/dist/tag.stories.d.ts +0 -7
- package/dist/tag.test.basics.d.ts +0 -1
- package/dist/tag.test.basics.js +0 -28
- package/dist/tag.test.events.d.ts +0 -1
- package/dist/tag.test.events.js +0 -93
- package/dist/tag.test.focus.d.ts +0 -1
- package/dist/tag.test.focus.js +0 -10
- package/dist/tag.test.interactions.d.ts +0 -1
- package/dist/tag.test.interactions.js +0 -36
- package/dist/textarea.stories.d.ts +0 -5
- package/dist/textarea.test.basics.d.ts +0 -1
- package/dist/textarea.test.basics.js +0 -177
- package/dist/textarea.test.events.d.ts +0 -1
- package/dist/textarea.test.events.js +0 -106
- package/dist/textarea.test.form.d.ts +0 -1
- package/dist/textarea.test.form.js +0 -71
- package/dist/textarea.test.validity.d.ts +0 -1
- package/dist/textarea.test.validity.js +0 -204
- package/dist/toasts.stories.d.ts +0 -7
- package/dist/toasts.test.basics.d.ts +0 -1
- package/dist/toasts.test.basics.js +0 -115
- package/dist/toasts.toast.test.basics.d.ts +0 -1
- package/dist/toasts.toast.test.basics.js +0 -139
- package/dist/toggle.stories.d.ts +0 -4
- package/dist/toggle.test.basics.d.ts +0 -1
- package/dist/toggle.test.basics.js +0 -69
- package/dist/toggle.test.events.d.ts +0 -1
- package/dist/toggle.test.events.js +0 -30
- package/dist/toggle.test.focus.d.ts +0 -1
- package/dist/toggle.test.focus.js +0 -9
- package/dist/toggle.test.interactions.d.ts +0 -1
- package/dist/toggle.test.interactions.js +0 -81
- package/dist/tooltip.stories.d.ts +0 -7
- package/dist/tooltip.test.basics.d.ts +0 -1
- package/dist/tooltip.test.basics.js +0 -100
- package/dist/tooltip.test.interactions.d.ts +0 -1
- package/dist/tooltip.test.interactions.js +0 -203
- package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
- package/dist/tree.item.icon-button.test.basics.js +0 -22
- package/dist/tree.item.menu.test.basics.d.ts +0 -1
- package/dist/tree.item.menu.test.basics.js +0 -86
- package/dist/tree.item.test.basics.d.ts +0 -2
- package/dist/tree.item.test.basics.js +0 -138
- package/dist/tree.stories.d.ts +0 -9
- package/dist/tree.test.aria.d.ts +0 -1
- package/dist/tree.test.aria.js +0 -86
- package/dist/tree.test.basics.d.ts +0 -3
- package/dist/tree.test.basics.js +0 -130
- package/dist/tree.test.events.d.ts +0 -2
- package/dist/tree.test.events.js +0 -19
- package/dist/tree.test.focus.d.ts +0 -1
- package/dist/tree.test.focus.js +0 -383
@@ -1,145 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './checkbox.js';
|
3
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
4
|
-
import GlideCoreCheckboxGroup from './checkbox-group.js';
|
5
|
-
GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
|
6
|
-
it('is valid if not required and the checkbox is unchecked', async () => {
|
7
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
8
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
9
|
-
</glide-core-checkbox-group>`);
|
10
|
-
expect(component.validity.valid).to.be.true;
|
11
|
-
expect(component.validity?.valueMissing).to.be.false;
|
12
|
-
expect(component.checkValidity()).to.be.true;
|
13
|
-
expect(component.reportValidity()).to.be.true;
|
14
|
-
});
|
15
|
-
it('is valid if required and the checkbox is checked', async () => {
|
16
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
17
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
18
|
-
</glide-core-checkbox-group>`);
|
19
|
-
component.querySelector('glide-core-checkbox')?.click();
|
20
|
-
expect(component.validity.valid).to.be.true;
|
21
|
-
expect(component.validity?.valueMissing).to.be.false;
|
22
|
-
expect(component.checkValidity()).to.be.true;
|
23
|
-
expect(component.reportValidity()).to.be.true;
|
24
|
-
});
|
25
|
-
it('is invalid if required and the checkbox is unchecked', async () => {
|
26
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
27
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
28
|
-
</glide-core-checkbox-group>`);
|
29
|
-
expect(component.validity.valid).to.be.false;
|
30
|
-
expect(component.validity?.valueMissing).to.be.true;
|
31
|
-
expect(component.checkValidity()).to.be.false;
|
32
|
-
expect(component.reportValidity()).to.be.false;
|
33
|
-
});
|
34
|
-
it('is invalid after being unchecked when required', async () => {
|
35
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
36
|
-
<glide-core-checkbox
|
37
|
-
label="Checkbox"
|
38
|
-
value="value"
|
39
|
-
checked
|
40
|
-
></glide-core-checkbox>
|
41
|
-
</glide-core-checkbox-group>`);
|
42
|
-
component.querySelector('glide-core-checkbox')?.click();
|
43
|
-
expect(component.validity.valid).to.be.false;
|
44
|
-
expect(component.validity?.valueMissing).to.be.true;
|
45
|
-
expect(component.checkValidity()).to.be.false;
|
46
|
-
expect(component.reportValidity()).to.be.false;
|
47
|
-
});
|
48
|
-
it('is both invalid and valid if required but disabled and the checkbox is unchecked', async () => {
|
49
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
|
50
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
51
|
-
</glide-core-checkbox-group>`);
|
52
|
-
expect(component.validity.valid).to.be.false;
|
53
|
-
expect(component.validity?.valueMissing).to.be.true;
|
54
|
-
expect(component.checkValidity()).to.be.true;
|
55
|
-
expect(component.reportValidity()).to.be.true;
|
56
|
-
});
|
57
|
-
it('sets the checkbox as valid when `required` is set to `false` dynamically', async () => {
|
58
|
-
const form = document.createElement('form');
|
59
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
60
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
61
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
62
|
-
component.required = false;
|
63
|
-
await elementUpdated(component);
|
64
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
65
|
-
expect(checkbox?.validity.valid).to.be.true;
|
66
|
-
});
|
67
|
-
it('sets the checkbox as invalid when `required` is set to `true` dynamically', async () => {
|
68
|
-
const form = document.createElement('form');
|
69
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
70
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
71
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
72
|
-
component.required = true;
|
73
|
-
await elementUpdated(component);
|
74
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
75
|
-
expect(checkbox?.validity.valid).to.be.false;
|
76
|
-
});
|
77
|
-
it('sets the validity message with `setCustomValidity()`', async () => {
|
78
|
-
const form = document.createElement('form');
|
79
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
80
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
81
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
82
|
-
component.setCustomValidity('validity message');
|
83
|
-
expect(component.validity?.valid).to.be.false;
|
84
|
-
expect(component.validity?.customError).to.be.true;
|
85
|
-
expect(component.checkValidity()).to.be.false;
|
86
|
-
expect(component.reportValidity()).to.be.false;
|
87
|
-
await elementUpdated(component);
|
88
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
89
|
-
?.textContent).to.equal('validity message');
|
90
|
-
});
|
91
|
-
it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
|
92
|
-
const form = document.createElement('form');
|
93
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
94
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
95
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
96
|
-
component.setCustomValidity('validity message');
|
97
|
-
component.reportValidity();
|
98
|
-
await elementUpdated(component);
|
99
|
-
component.setCustomValidity('');
|
100
|
-
await elementUpdated(component);
|
101
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
102
|
-
?.textContent).to.be.undefined;
|
103
|
-
});
|
104
|
-
it('is invalid when `setValidity()` is called', async () => {
|
105
|
-
const form = document.createElement('form');
|
106
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
107
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
108
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
109
|
-
component.setValidity({ customError: true }, 'validity message');
|
110
|
-
expect(component.validity.valid).to.be.false;
|
111
|
-
await elementUpdated(component);
|
112
|
-
// Like native, the validity message shouldn't display until `reportValidity()` is called.
|
113
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
114
|
-
?.textContent).to.be.undefined;
|
115
|
-
expect(component.validity?.customError).to.be.true;
|
116
|
-
component.reportValidity();
|
117
|
-
await elementUpdated(component);
|
118
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
119
|
-
?.textContent).to.equal('validity message');
|
120
|
-
});
|
121
|
-
it('is valid when `setValidity()` is called', async () => {
|
122
|
-
const form = document.createElement('form');
|
123
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
124
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
125
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
126
|
-
component.setValidity({ customError: true }, 'validity message');
|
127
|
-
component.setValidity({});
|
128
|
-
await elementUpdated(component);
|
129
|
-
expect(component.validity.valid).to.be.true;
|
130
|
-
expect(component.validity.customError).to.be.false;
|
131
|
-
expect(component.reportValidity()).to.be.true;
|
132
|
-
await elementUpdated(component);
|
133
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
134
|
-
?.textContent).to.be.undefined;
|
135
|
-
});
|
136
|
-
it('retains existing validity state when `setCustomValidity()` is called', async () => {
|
137
|
-
const form = document.createElement('form');
|
138
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
139
|
-
<glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
|
140
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
141
|
-
component.setCustomValidity('validity message');
|
142
|
-
expect(component.validity?.valid).to.be.false;
|
143
|
-
expect(component.validity?.customError).to.be.true;
|
144
|
-
expect(component.validity?.valueMissing).to.be.true;
|
145
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,90 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import GlideCoreCheckbox from './checkbox.js';
|
4
|
-
GlideCoreCheckbox.shadowRootOptions.mode = 'open';
|
5
|
-
it('registers', async () => {
|
6
|
-
expect(window.customElements.get('glide-core-checkbox')).to.equal(GlideCoreCheckbox);
|
7
|
-
});
|
8
|
-
it('has defaults', async () => {
|
9
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
|
10
|
-
expect(component.checked).to.be.false;
|
11
|
-
expect(component.disabled).to.be.false;
|
12
|
-
expect(component.hideLabel).to.be.false;
|
13
|
-
expect(component.indeterminate).to.be.false;
|
14
|
-
expect(component.name).to.be.empty.string;
|
15
|
-
expect(component.orientation).to.equal('horizontal');
|
16
|
-
expect(component.required).to.be.false;
|
17
|
-
expect(component.summary).to.equal(undefined);
|
18
|
-
expect(component.value).to.be.empty.string;
|
19
|
-
});
|
20
|
-
it('is accessible', async () => {
|
21
|
-
const component = await fixture(html `<glide-core-checkbox label="Label">
|
22
|
-
<div slot="tooltip">Tooltip</div>
|
23
|
-
<div slot="description">Description</div>
|
24
|
-
</glide-core-checkbox>`);
|
25
|
-
await expect(component).to.be.accessible();
|
26
|
-
});
|
27
|
-
it('can have a label', async () => {
|
28
|
-
const component = await fixture(html `<glide-core-checkbox label="Label">
|
29
|
-
<div slot="description">Description</div>
|
30
|
-
</glide-core-checkbox>`);
|
31
|
-
const label = component.shadowRoot?.querySelector('label');
|
32
|
-
expect(label?.textContent?.trim()).to.equal('Label');
|
33
|
-
});
|
34
|
-
it('can have a description', async () => {
|
35
|
-
const component = await fixture(html `<glide-core-checkbox label="Label">
|
36
|
-
<div slot="description">Description</div>
|
37
|
-
</glide-core-checkbox>`);
|
38
|
-
const assignedElements = component.shadowRoot
|
39
|
-
?.querySelector('slot[name="description"]')
|
40
|
-
?.assignedElements();
|
41
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Description');
|
42
|
-
});
|
43
|
-
it('can have a name', async () => {
|
44
|
-
const component = await fixture(html `<glide-core-checkbox
|
45
|
-
label="Label"
|
46
|
-
name="name"
|
47
|
-
></glide-core-checkbox> `);
|
48
|
-
expect(component.getAttribute('name')).to.equal('name');
|
49
|
-
expect(component.name).to.equal('name');
|
50
|
-
});
|
51
|
-
it('can have a summary', async () => {
|
52
|
-
const component = await fixture(html `<glide-core-checkbox
|
53
|
-
label="Label"
|
54
|
-
summary="Summary"
|
55
|
-
></glide-core-checkbox> `);
|
56
|
-
expect(component.getAttribute('summary')).to.equal('Summary');
|
57
|
-
expect(component.summary).to.equal('Summary');
|
58
|
-
});
|
59
|
-
it('can have a tooltip', async () => {
|
60
|
-
const component = await fixture(html `<glide-core-checkbox label="Label">
|
61
|
-
<div slot="tooltip">Tooltip</div>
|
62
|
-
</glide-core-checkbox>`);
|
63
|
-
const assignedElements = component.shadowRoot
|
64
|
-
?.querySelector('slot[name="tooltip"]')
|
65
|
-
?.assignedElements();
|
66
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
|
67
|
-
});
|
68
|
-
it('can be checked', async () => {
|
69
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" checked></glide-core-checkbox> `);
|
70
|
-
expect(component.hasAttribute('checked')).to.be.true;
|
71
|
-
expect(component.checked).to.be.true;
|
72
|
-
});
|
73
|
-
it('can be disabled', async () => {
|
74
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" disabled></glide-core-checkbox> `);
|
75
|
-
expect(component.hasAttribute('disabled')).to.be.true;
|
76
|
-
expect(component.disabled).to.be.true;
|
77
|
-
});
|
78
|
-
it('can be indeterminate', async () => {
|
79
|
-
const component = await fixture(html `<glide-core-checkbox
|
80
|
-
label="Label"
|
81
|
-
indeterminate
|
82
|
-
></glide-core-checkbox> `);
|
83
|
-
expect(component.hasAttribute('indeterminate')).to.be.true;
|
84
|
-
expect(component.indeterminate).to.be.true;
|
85
|
-
});
|
86
|
-
it('can be required', async () => {
|
87
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox> `);
|
88
|
-
expect(component.hasAttribute('required')).to.be.true;
|
89
|
-
expect(component.required).to.be.true;
|
90
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,105 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import * as sinon from 'sinon';
|
3
|
-
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
|
4
|
-
import GlideCoreCheckbox from './checkbox.js';
|
5
|
-
GlideCoreCheckbox.shadowRootOptions.mode = 'open';
|
6
|
-
// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
|
7
|
-
// expecting it to throw would work. But it wouldn't throw until its
|
8
|
-
// timeout, which would make for a slow test. Its timeout can likely be
|
9
|
-
// configured. But waiting a turn of the event loop, after which the event
|
10
|
-
// will have been dispatched, gets the job done as well.
|
11
|
-
it('dispatches a "click" event when clicked', async () => {
|
12
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
|
13
|
-
setTimeout(() => component.click());
|
14
|
-
const event = await oneEvent(component, 'click');
|
15
|
-
expect(event instanceof PointerEvent).to.be.true;
|
16
|
-
expect(event.bubbles).to.be.true;
|
17
|
-
});
|
18
|
-
it('dispatches a "change" event when clicked', async () => {
|
19
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
|
20
|
-
setTimeout(() => component.click());
|
21
|
-
const event = await oneEvent(component, 'change');
|
22
|
-
expect(event instanceof Event).to.be.true;
|
23
|
-
expect(event.bubbles).to.be.true;
|
24
|
-
});
|
25
|
-
it('dispatches an "input" event when clicked', async () => {
|
26
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
|
27
|
-
setTimeout(() => component.click());
|
28
|
-
const event = await oneEvent(component, 'input');
|
29
|
-
expect(event instanceof Event).to.be.true;
|
30
|
-
expect(event.bubbles).to.be.true;
|
31
|
-
});
|
32
|
-
it('dispatches a "private-value-change" event when its `value` is changed programmatically', async () => {
|
33
|
-
const component = await fixture(html `<glide-core-checkbox label="One" value="one"></glide-core-checkbox>`);
|
34
|
-
setTimeout(() => (component.value = 'two'));
|
35
|
-
const event = await oneEvent(component, 'private-value-change');
|
36
|
-
expect(event instanceof CustomEvent).to.be.true;
|
37
|
-
expect(event.detail.old).to.equal('one');
|
38
|
-
expect(event.detail.new).to.equal('two');
|
39
|
-
expect(component.value).to.equal('two');
|
40
|
-
});
|
41
|
-
it('dispatches an "invalid" event on submit when required and unchecked', async () => {
|
42
|
-
const form = document.createElement('form');
|
43
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
|
44
|
-
setTimeout(() => form.requestSubmit());
|
45
|
-
const event = await oneEvent(component, 'invalid');
|
46
|
-
expect(event instanceof Event).to.be.true;
|
47
|
-
});
|
48
|
-
it('dispatches an "invalid" event after `checkValidity` is called when required and unchecked', async () => {
|
49
|
-
const form = document.createElement('form');
|
50
|
-
const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
|
51
|
-
setTimeout(() => component.checkValidity());
|
52
|
-
const event = await oneEvent(component, 'invalid');
|
53
|
-
expect(event instanceof Event).to.be.true;
|
54
|
-
});
|
55
|
-
it('dispatches an "invalid" event after `reportValidity` is called when required and unchecked', async () => {
|
56
|
-
const form = document.createElement('form');
|
57
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
|
58
|
-
setTimeout(() => component.reportValidity());
|
59
|
-
const event = await oneEvent(component, 'invalid');
|
60
|
-
expect(event instanceof Event).to.be.true;
|
61
|
-
});
|
62
|
-
it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
|
63
|
-
const form = document.createElement('form');
|
64
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
|
65
|
-
const spy = sinon.spy();
|
66
|
-
component.addEventListener('invalid', spy);
|
67
|
-
component.checkValidity();
|
68
|
-
await aTimeout(0);
|
69
|
-
expect(spy.callCount).to.equal(0);
|
70
|
-
});
|
71
|
-
it('does not dispatch an "invalid" event after `checkValidity` is called when required and unchecked but disabled', async () => {
|
72
|
-
const form = document.createElement('form');
|
73
|
-
const component = await fixture(html `<glide-core-checkbox
|
74
|
-
label="Label"
|
75
|
-
disabled
|
76
|
-
required
|
77
|
-
></glide-core-checkbox>`, { parentNode: form });
|
78
|
-
const spy = sinon.spy();
|
79
|
-
component.addEventListener('invalid', spy);
|
80
|
-
component.checkValidity();
|
81
|
-
await aTimeout(0);
|
82
|
-
expect(spy.callCount).to.equal(0);
|
83
|
-
});
|
84
|
-
it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
|
85
|
-
const form = document.createElement('form');
|
86
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
|
87
|
-
const spy = sinon.spy();
|
88
|
-
component.addEventListener('invalid', spy);
|
89
|
-
component.reportValidity();
|
90
|
-
await aTimeout(0);
|
91
|
-
expect(spy.callCount).to.equal(0);
|
92
|
-
});
|
93
|
-
it('does not dispatch an "invalid" event when `reportValidity` is called when required and unchecked but disabled', async () => {
|
94
|
-
const form = document.createElement('form');
|
95
|
-
const component = await fixture(html `<glide-core-checkbox
|
96
|
-
label="Label"
|
97
|
-
disabled
|
98
|
-
required
|
99
|
-
></glide-core-checkbox>`, { parentNode: form });
|
100
|
-
const spy = sinon.spy();
|
101
|
-
component.addEventListener('invalid', spy);
|
102
|
-
component.reportValidity();
|
103
|
-
await aTimeout(0);
|
104
|
-
expect(spy.callCount).to.equal(0);
|
105
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,51 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import GlideCoreCheckbox from './checkbox.js';
|
4
|
-
GlideCoreCheckbox.shadowRootOptions.mode = 'open';
|
5
|
-
it('focuses the input when `focus()` is called', async () => {
|
6
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
|
7
|
-
component.focus();
|
8
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
9
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
10
|
-
});
|
11
|
-
it('focuses the input after submit when required and unchecked', async () => {
|
12
|
-
const form = document.createElement('form');
|
13
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, {
|
14
|
-
parentNode: form,
|
15
|
-
});
|
16
|
-
form.requestSubmit();
|
17
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
18
|
-
expect(component.shadowRoot?.activeElement).to.be.equal(input);
|
19
|
-
});
|
20
|
-
it('focuses the input after `reportValidity` is called when required and unchecked', async () => {
|
21
|
-
const form = document.createElement('form');
|
22
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
|
23
|
-
component.reportValidity();
|
24
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
25
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
26
|
-
});
|
27
|
-
it('focuses the input after `requestSubmit` is called when required and unchecked', async () => {
|
28
|
-
const form = document.createElement('form');
|
29
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
|
30
|
-
form.requestSubmit();
|
31
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
32
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
33
|
-
});
|
34
|
-
it('does not focus the input after `checkValidity` is called', async () => {
|
35
|
-
const form = document.createElement('form');
|
36
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
|
37
|
-
component.checkValidity();
|
38
|
-
expect(component.shadowRoot?.activeElement).to.equal(null);
|
39
|
-
});
|
40
|
-
it('blurs the input and reports validity if `blur` is called', async () => {
|
41
|
-
const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
|
42
|
-
component.focus();
|
43
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
44
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
45
|
-
component.blur();
|
46
|
-
await component.updateComplete;
|
47
|
-
expect(component.shadowRoot?.activeElement).to.equal(null);
|
48
|
-
expect(component.validity.valid).to.be.false;
|
49
|
-
expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
|
50
|
-
.to.be.true;
|
51
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,133 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import { sendKeys } from '@web/test-runner-commands';
|
4
|
-
import GlideCoreCheckbox from './checkbox.js';
|
5
|
-
import sinon from 'sinon';
|
6
|
-
GlideCoreCheckbox.shadowRootOptions.mode = 'open';
|
7
|
-
it('exposes standard form control properties and methods', async () => {
|
8
|
-
const form = document.createElement('form');
|
9
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
|
10
|
-
expect(component.form).to.equal(form);
|
11
|
-
expect(component.validity instanceof ValidityState).to.be.true;
|
12
|
-
expect(component.willValidate).to.be.true;
|
13
|
-
expect(component.checkValidity).to.be.a('function');
|
14
|
-
expect(component.reportValidity).to.be.a('function');
|
15
|
-
});
|
16
|
-
it('can be reset', async () => {
|
17
|
-
const form = document.createElement('form');
|
18
|
-
const component = await fixture(html `<glide-core-checkbox
|
19
|
-
label="Label"
|
20
|
-
checked
|
21
|
-
indeterminate
|
22
|
-
></glide-core-checkbox>`, {
|
23
|
-
parentNode: form,
|
24
|
-
});
|
25
|
-
component.checked = false;
|
26
|
-
component.indeterminate = false;
|
27
|
-
form.reset();
|
28
|
-
expect(component.checked).to.be.true;
|
29
|
-
expect(component.indeterminate).to.be.true;
|
30
|
-
});
|
31
|
-
it('has `formData` value when checked', async () => {
|
32
|
-
const form = document.createElement('form');
|
33
|
-
await fixture(html `<glide-core-checkbox
|
34
|
-
label="Label"
|
35
|
-
name="name"
|
36
|
-
value="value"
|
37
|
-
checked
|
38
|
-
></glide-core-checkbox>`, {
|
39
|
-
parentNode: form,
|
40
|
-
});
|
41
|
-
const formData = new FormData(form);
|
42
|
-
expect(formData.get('name')).to.be.equal('value');
|
43
|
-
});
|
44
|
-
it('has `formData` value when checked and indeterminate', async () => {
|
45
|
-
const form = document.createElement('form');
|
46
|
-
await fixture(html `<glide-core-checkbox
|
47
|
-
label="Label"
|
48
|
-
name="name"
|
49
|
-
value="value"
|
50
|
-
checked
|
51
|
-
indeterminate
|
52
|
-
></glide-core-checkbox>`, {
|
53
|
-
parentNode: form,
|
54
|
-
});
|
55
|
-
const formData = new FormData(form);
|
56
|
-
expect(formData.get('name')).to.be.equal('value');
|
57
|
-
});
|
58
|
-
it('has no `formData` value when unchecked', async () => {
|
59
|
-
const form = document.createElement('form');
|
60
|
-
await fixture(html `<glide-core-checkbox
|
61
|
-
label="Label"
|
62
|
-
name="name"
|
63
|
-
value="value"
|
64
|
-
></glide-core-checkbox>`, {
|
65
|
-
parentNode: form,
|
66
|
-
});
|
67
|
-
const formData = new FormData(form);
|
68
|
-
expect(formData.get('name')).to.be.null;
|
69
|
-
});
|
70
|
-
it('has no `formData` value when unchecked and indeterminate', async () => {
|
71
|
-
const form = document.createElement('form');
|
72
|
-
await fixture(html `<glide-core-checkbox
|
73
|
-
label="Label"
|
74
|
-
name="name"
|
75
|
-
value="value"
|
76
|
-
indeterminate
|
77
|
-
></glide-core-checkbox>`, {
|
78
|
-
parentNode: form,
|
79
|
-
});
|
80
|
-
const formData = new FormData(form);
|
81
|
-
expect(formData.get('name')).to.be.null;
|
82
|
-
});
|
83
|
-
it('has no `formData` value when checked but disabled', async () => {
|
84
|
-
const form = document.createElement('form');
|
85
|
-
await fixture(html `<glide-core-checkbox
|
86
|
-
name="name"
|
87
|
-
value="value"
|
88
|
-
checked
|
89
|
-
disabled
|
90
|
-
></glide-core-checkbox>`, {
|
91
|
-
parentNode: form,
|
92
|
-
});
|
93
|
-
const formData = new FormData(form);
|
94
|
-
expect(formData.get('name')).to.be.null;
|
95
|
-
});
|
96
|
-
it('has no `formData` value when checked but without a `name`', async () => {
|
97
|
-
const form = document.createElement('form');
|
98
|
-
await fixture(html `<glide-core-checkbox
|
99
|
-
label="Label"
|
100
|
-
value="value"
|
101
|
-
checked
|
102
|
-
></glide-core-checkbox>`, {
|
103
|
-
parentNode: form,
|
104
|
-
});
|
105
|
-
const formData = new FormData(form);
|
106
|
-
expect(formData.get('name')).to.be.null;
|
107
|
-
});
|
108
|
-
it('has no `formData` value when checked but without a `value`', async () => {
|
109
|
-
const form = document.createElement('form');
|
110
|
-
await fixture(html `<glide-core-checkbox
|
111
|
-
label="Label"
|
112
|
-
name="name"
|
113
|
-
checked
|
114
|
-
></glide-core-checkbox>`, {
|
115
|
-
parentNode: form,
|
116
|
-
});
|
117
|
-
const formData = new FormData(form);
|
118
|
-
expect(formData.get('name')).to.be.null;
|
119
|
-
});
|
120
|
-
it('submits its form on Enter', async () => {
|
121
|
-
const form = document.createElement('form');
|
122
|
-
const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, {
|
123
|
-
parentNode: form,
|
124
|
-
});
|
125
|
-
const spy = sinon.spy();
|
126
|
-
form.addEventListener('submit', (event) => {
|
127
|
-
event.preventDefault();
|
128
|
-
spy();
|
129
|
-
});
|
130
|
-
component.focus();
|
131
|
-
await sendKeys({ press: 'Enter' });
|
132
|
-
expect(spy.callCount).to.equal(1);
|
133
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|