@crowdstrike/glide-core 0.13.1 → 0.14.0
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 -3
- 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,102 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './button.js';
|
3
|
-
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
|
4
|
-
import { sendKeys } from '@web/test-runner-commands';
|
5
|
-
import GlideCoreButton from './button.js';
|
6
|
-
GlideCoreButton.shadowRootOptions.mode = 'open';
|
7
|
-
it('dispatches a "click" event when clicked', async () => {
|
8
|
-
const component = await fixture(html `
|
9
|
-
<glide-core-button label="Label" type="button"></glide-core-button>
|
10
|
-
`);
|
11
|
-
setTimeout(() => {
|
12
|
-
component.click();
|
13
|
-
});
|
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 "click" event on Enter', async () => {
|
19
|
-
const component = await fixture(html `
|
20
|
-
<glide-core-button label="Label" type="button"></glide-core-button>
|
21
|
-
`);
|
22
|
-
component.focus();
|
23
|
-
sendKeys({ press: 'Enter' });
|
24
|
-
const event = await oneEvent(component, 'click');
|
25
|
-
expect(event instanceof PointerEvent).to.be.true;
|
26
|
-
expect(event.bubbles).to.be.true;
|
27
|
-
});
|
28
|
-
it('dispatches a "click" event on Space', async () => {
|
29
|
-
const component = await fixture(html `
|
30
|
-
<glide-core-button label="Label" type="button"></glide-core-button>
|
31
|
-
`);
|
32
|
-
component.focus();
|
33
|
-
sendKeys({ press: ' ' });
|
34
|
-
const event = await oneEvent(component, 'click');
|
35
|
-
expect(event instanceof PointerEvent).to.be.true;
|
36
|
-
expect(event.bubbles).to.be.true;
|
37
|
-
});
|
38
|
-
it('dispatches a "reset" event on click', async () => {
|
39
|
-
const form = document.createElement('form');
|
40
|
-
const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
|
41
|
-
parentNode: form,
|
42
|
-
});
|
43
|
-
setTimeout(() => {
|
44
|
-
component.click();
|
45
|
-
});
|
46
|
-
const event = await oneEvent(form, 'reset');
|
47
|
-
expect(event instanceof Event).to.be.true;
|
48
|
-
});
|
49
|
-
it('dispatches a "reset" event on Enter', async () => {
|
50
|
-
const form = document.createElement('form');
|
51
|
-
const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
|
52
|
-
parentNode: form,
|
53
|
-
});
|
54
|
-
component.focus();
|
55
|
-
sendKeys({ press: 'Enter' });
|
56
|
-
const event = await oneEvent(form, 'reset');
|
57
|
-
expect(event instanceof Event).to.be.true;
|
58
|
-
});
|
59
|
-
it('dispatches a "reset" event on Space', async () => {
|
60
|
-
const form = document.createElement('form');
|
61
|
-
const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
|
62
|
-
parentNode: form,
|
63
|
-
});
|
64
|
-
component.focus();
|
65
|
-
sendKeys({ press: ' ' });
|
66
|
-
const event = await oneEvent(form, 'reset');
|
67
|
-
expect(event instanceof Event).to.be.true;
|
68
|
-
});
|
69
|
-
it('dispatches a "submit" event on click', async () => {
|
70
|
-
const form = document.createElement('form');
|
71
|
-
const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
|
72
|
-
parentNode: form,
|
73
|
-
});
|
74
|
-
form.addEventListener('submit', (event) => event.preventDefault());
|
75
|
-
setTimeout(() => {
|
76
|
-
component.click();
|
77
|
-
});
|
78
|
-
const event = await oneEvent(form, 'submit');
|
79
|
-
expect(event instanceof Event).to.be.true;
|
80
|
-
});
|
81
|
-
it('dispatches a "submit" event on Enter', async () => {
|
82
|
-
const form = document.createElement('form');
|
83
|
-
const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
|
84
|
-
parentNode: form,
|
85
|
-
});
|
86
|
-
form.addEventListener('submit', (event) => event.preventDefault());
|
87
|
-
component.focus();
|
88
|
-
sendKeys({ press: 'Enter' });
|
89
|
-
const event = await oneEvent(form, 'submit');
|
90
|
-
expect(event instanceof Event).to.be.true;
|
91
|
-
});
|
92
|
-
it('dispatches a "submit" event on Space', async () => {
|
93
|
-
const form = document.createElement('form');
|
94
|
-
const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
|
95
|
-
parentNode: form,
|
96
|
-
});
|
97
|
-
form.addEventListener('submit', (event) => event.preventDefault());
|
98
|
-
component.focus();
|
99
|
-
sendKeys({ press: ' ' });
|
100
|
-
const event = await oneEvent(form, 'submit');
|
101
|
-
expect(event instanceof Event).to.be.true;
|
102
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './checkbox.js';
|
@@ -1,116 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './checkbox.js';
|
3
|
-
import { ArgumentError } from 'ow';
|
4
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
5
|
-
import GlideCoreCheckboxGroup from './checkbox-group.js';
|
6
|
-
import expectArgumentError from './library/expect-argument-error.js';
|
7
|
-
import sinon from 'sinon';
|
8
|
-
GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
|
9
|
-
it('registers', async () => {
|
10
|
-
expect(window.customElements.get('glide-core-checkbox-group')).to.equal(GlideCoreCheckboxGroup);
|
11
|
-
});
|
12
|
-
it('has defaults', async () => {
|
13
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
14
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
15
|
-
</glide-core-checkbox-group>`);
|
16
|
-
expect(component.disabled).to.be.false;
|
17
|
-
expect(component.hideLabel).to.be.false;
|
18
|
-
expect(component.name).to.be.empty.string;
|
19
|
-
expect(component.required).to.be.false;
|
20
|
-
// Not reflected, so no attribute assertion is necessary.
|
21
|
-
expect(component.value).to.deep.equal([]);
|
22
|
-
});
|
23
|
-
it('is accessible', async () => {
|
24
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
25
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
26
|
-
<div slot="tooltip">Tooltip</div>
|
27
|
-
<div slot="description">Description</div>
|
28
|
-
</glide-core-checkbox-group>`);
|
29
|
-
await expect(component).to.be.accessible();
|
30
|
-
});
|
31
|
-
it('can have a label', async () => {
|
32
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
33
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
34
|
-
</glide-core-checkbox-group>`);
|
35
|
-
expect(component.getAttribute('label')).to.equal('Checkbox Group');
|
36
|
-
expect(component.label).to.equal('Checkbox Group');
|
37
|
-
});
|
38
|
-
it('can have a description', async () => {
|
39
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
40
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
41
|
-
<div slot="description">Description</div>
|
42
|
-
</glide-core-checkbox-group>`);
|
43
|
-
const assignedElements = component.shadowRoot
|
44
|
-
?.querySelector('slot[name="description"]')
|
45
|
-
?.assignedElements();
|
46
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Description');
|
47
|
-
});
|
48
|
-
it('can have a name', async () => {
|
49
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
|
50
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
51
|
-
</glide-core-checkbox-group>`);
|
52
|
-
expect(component.getAttribute('name')).to.equal('name');
|
53
|
-
expect(component.name).to.equal('name');
|
54
|
-
});
|
55
|
-
it('can have a tooltip', async () => {
|
56
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
57
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
58
|
-
<div slot="tooltip">Tooltip</div>
|
59
|
-
</glide-core-checkbox-group>`);
|
60
|
-
const assignedElements = component.shadowRoot
|
61
|
-
?.querySelector('slot[name="tooltip"]')
|
62
|
-
?.assignedElements();
|
63
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
|
64
|
-
});
|
65
|
-
it('can be disabled initially', async () => {
|
66
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled>
|
67
|
-
<glide-core-checkbox label="One"></glide-core-checkbox>
|
68
|
-
<glide-core-checkbox label="Two"></glide-core-checkbox>
|
69
|
-
</glide-core-checkbox-group>`);
|
70
|
-
const checkboxes = component.querySelectorAll('glide-core-checkbox');
|
71
|
-
expect(checkboxes[0].disabled).to.be.true;
|
72
|
-
expect(checkboxes[1].disabled).to.be.true;
|
73
|
-
expect(component.hasAttribute('disabled')).to.be.true;
|
74
|
-
expect(component.disabled).to.be.true;
|
75
|
-
});
|
76
|
-
it('can be disabled dynamically', async () => {
|
77
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
78
|
-
<glide-core-checkbox label="One"></glide-core-checkbox>
|
79
|
-
<glide-core-checkbox label="Two"></glide-core-checkbox>
|
80
|
-
</glide-core-checkbox-group>`);
|
81
|
-
component.disabled = true;
|
82
|
-
await elementUpdated(component);
|
83
|
-
const checkboxes = component.querySelectorAll('glide-core-checkbox');
|
84
|
-
expect(checkboxes[0].disabled).to.be.true;
|
85
|
-
expect(checkboxes[1].disabled).to.be.true;
|
86
|
-
expect(component.hasAttribute('disabled')).to.be.true;
|
87
|
-
expect(component.disabled).to.be.true;
|
88
|
-
});
|
89
|
-
it('can be required', async () => {
|
90
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
91
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
92
|
-
</glide-core-checkbox-group>`);
|
93
|
-
expect(component.hasAttribute('required')).to.be.true;
|
94
|
-
expect(component.required).to.be.true;
|
95
|
-
});
|
96
|
-
it('throws if it does not have a default slot', async () => {
|
97
|
-
const spy = sinon.spy();
|
98
|
-
try {
|
99
|
-
await fixture(html `<glide-core-checkbox-group
|
100
|
-
label="Checkbox Group"
|
101
|
-
></glide-core-checkbox-group>`);
|
102
|
-
}
|
103
|
-
catch (error) {
|
104
|
-
if (error instanceof ArgumentError) {
|
105
|
-
spy();
|
106
|
-
}
|
107
|
-
}
|
108
|
-
expect(spy.callCount).to.equal(1);
|
109
|
-
});
|
110
|
-
it('throws if the default slot is the incorrect type', async () => {
|
111
|
-
await expectArgumentError(() => {
|
112
|
-
return fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
113
|
-
<button>Button</button>
|
114
|
-
</glide-core-checkbox-group>`);
|
115
|
-
});
|
116
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './checkbox.js';
|
@@ -1,111 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './checkbox.js';
|
3
|
-
import * as sinon from 'sinon';
|
4
|
-
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
|
5
|
-
import GlideCoreCheckboxGroup from './checkbox-group.js';
|
6
|
-
GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
|
7
|
-
// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
|
8
|
-
// expecting it to throw would work. But it wouldn't throw until its
|
9
|
-
// timeout, which would make for a slow test. Its timeout can likely be
|
10
|
-
// configured. But waiting a turn of the event loop, after which the event
|
11
|
-
// will have been dispatched, gets the job done as well.
|
12
|
-
it('dispatches a "click" event when clicked', async () => {
|
13
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
14
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
15
|
-
</glide-core-checkbox-group>`);
|
16
|
-
setTimeout(() => component.click());
|
17
|
-
const event = await oneEvent(component, 'click');
|
18
|
-
expect(event instanceof PointerEvent).to.be.true;
|
19
|
-
expect(event.bubbles).to.be.true;
|
20
|
-
});
|
21
|
-
it('dispatches a "change" event when clicked', async () => {
|
22
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
23
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
24
|
-
</glide-core-checkbox-group>`);
|
25
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
26
|
-
setTimeout(() => checkbox?.click());
|
27
|
-
const event = await oneEvent(component, 'change');
|
28
|
-
expect(event instanceof Event).to.be.true;
|
29
|
-
expect(event.bubbles).to.be.true;
|
30
|
-
});
|
31
|
-
it('dispatches an "input" event when clicked', async () => {
|
32
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
33
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
34
|
-
</glide-core-checkbox-group>`);
|
35
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
36
|
-
setTimeout(() => checkbox?.click());
|
37
|
-
const event = await oneEvent(component, 'input');
|
38
|
-
expect(event instanceof Event).to.be.true;
|
39
|
-
expect(event.bubbles).to.be.true;
|
40
|
-
});
|
41
|
-
it('dispatches an "invalid" event on submit when required and the checkbox is unchecked', async () => {
|
42
|
-
const form = document.createElement('form');
|
43
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
44
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
45
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
46
|
-
setTimeout(() => form.requestSubmit());
|
47
|
-
const event = await oneEvent(component, 'invalid');
|
48
|
-
expect(event instanceof Event).to.be.true;
|
49
|
-
});
|
50
|
-
it('dispatches an "invalid" event after `checkValidity` is called when required and the checkbox is unchecked', async () => {
|
51
|
-
const form = document.createElement('form');
|
52
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
53
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
54
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
55
|
-
setTimeout(() => component.checkValidity());
|
56
|
-
const event = await oneEvent(component, 'invalid');
|
57
|
-
expect(event instanceof Event).to.be.true;
|
58
|
-
});
|
59
|
-
it('dispatches an "invalid" event after `reportValidity` is called when required and the checkbox is unchecked', async () => {
|
60
|
-
const form = document.createElement('form');
|
61
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
62
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
63
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
64
|
-
setTimeout(() => component.reportValidity());
|
65
|
-
const event = await oneEvent(component, 'invalid');
|
66
|
-
expect(event instanceof Event).to.be.true;
|
67
|
-
});
|
68
|
-
it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
|
69
|
-
const form = document.createElement('form');
|
70
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
71
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
72
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
73
|
-
const spy = sinon.spy();
|
74
|
-
component.addEventListener('invalid', spy);
|
75
|
-
component.checkValidity();
|
76
|
-
await aTimeout(0);
|
77
|
-
expect(spy.callCount).to.equal(0);
|
78
|
-
});
|
79
|
-
it('does not dispatch an "invalid" event after `checkValidity` is called when disabled but required and the checkbox is unchecked', async () => {
|
80
|
-
const form = document.createElement('form');
|
81
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
|
82
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
83
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
84
|
-
const spy = sinon.spy();
|
85
|
-
component.addEventListener('invalid', spy);
|
86
|
-
component.checkValidity();
|
87
|
-
await aTimeout(0);
|
88
|
-
expect(spy.callCount).to.equal(0);
|
89
|
-
});
|
90
|
-
it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
|
91
|
-
const form = document.createElement('form');
|
92
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
93
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
94
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
95
|
-
const spy = sinon.spy();
|
96
|
-
component.addEventListener('invalid', spy);
|
97
|
-
component.reportValidity();
|
98
|
-
await aTimeout(0);
|
99
|
-
expect(spy.callCount).to.equal(0);
|
100
|
-
});
|
101
|
-
it('does not dispatch an "invalid" event when `reportValidity` is called when disabled but required and the checkbox is unchecked', async () => {
|
102
|
-
const form = document.createElement('form');
|
103
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
|
104
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
105
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
106
|
-
const spy = sinon.spy();
|
107
|
-
component.addEventListener('invalid', spy);
|
108
|
-
component.reportValidity();
|
109
|
-
await aTimeout(0);
|
110
|
-
expect(spy.callCount).to.equal(0);
|
111
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './checkbox.js';
|
@@ -1,70 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './checkbox.js';
|
3
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
4
|
-
import { sendKeys } from '@web/test-runner-commands';
|
5
|
-
import GlideCoreCheckbox from './checkbox.js';
|
6
|
-
import GlideCoreCheckboxGroup from './checkbox-group.js';
|
7
|
-
GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
|
8
|
-
GlideCoreCheckbox.shadowRootOptions.mode = 'open';
|
9
|
-
it('focuses the first enabled checkbox when `focus()` is called', async () => {
|
10
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
11
|
-
<glide-core-checkbox label="One" disabled></glide-core-checkbox>
|
12
|
-
<glide-core-checkbox label="Two"></glide-core-checkbox>
|
13
|
-
</glide-core-checkbox-group>`);
|
14
|
-
component.focus();
|
15
|
-
expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox:last-of-type'));
|
16
|
-
});
|
17
|
-
it('focuses the first checkbox after submit when required but the checkbox is unchecked', async () => {
|
18
|
-
const form = document.createElement('form');
|
19
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
20
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
21
|
-
</glide-core-checkbox-group>`, {
|
22
|
-
parentNode: form,
|
23
|
-
});
|
24
|
-
form.requestSubmit();
|
25
|
-
expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
|
26
|
-
});
|
27
|
-
it('focuses the first checkbox after `reportValidity` is called when required but the checkbox is unchecked', async () => {
|
28
|
-
const form = document.createElement('form');
|
29
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
30
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
31
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
32
|
-
component.reportValidity();
|
33
|
-
expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
|
34
|
-
});
|
35
|
-
it('focuses the first checkbox after `requestSubmit` is called when required but the checkbox is unchecked', async () => {
|
36
|
-
const form = document.createElement('form');
|
37
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
38
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
39
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
40
|
-
form.requestSubmit();
|
41
|
-
expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
|
42
|
-
});
|
43
|
-
it('does not focus the input after `checkValidity` is called', async () => {
|
44
|
-
const form = document.createElement('form');
|
45
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
46
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
47
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
48
|
-
component.checkValidity();
|
49
|
-
expect(document.activeElement).to.not.equal(component.querySelector('glide-core-checkbox'));
|
50
|
-
});
|
51
|
-
it('reports validity of checkboxes if blurred', async () => {
|
52
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
|
53
|
-
<glide-core-checkbox label="Checkbox1"></glide-core-checkbox>
|
54
|
-
<glide-core-checkbox label="Checkbox2"></glide-core-checkbox>
|
55
|
-
</glide-core-checkbox-group>`);
|
56
|
-
component.focus();
|
57
|
-
const checkboxes = component.querySelectorAll('glide-core-checkbox');
|
58
|
-
expect(document.activeElement === checkboxes[0]).to.be.true;
|
59
|
-
await sendKeys({ press: 'Tab' });
|
60
|
-
expect(document.activeElement === checkboxes[1]).to.be.true;
|
61
|
-
expect(checkboxes[0].isReportValidityOrSubmit).to.be.false;
|
62
|
-
expect(checkboxes[1].isReportValidityOrSubmit).to.be.false;
|
63
|
-
await sendKeys({ press: 'Tab' });
|
64
|
-
expect(document.activeElement === document.body).to.be.true;
|
65
|
-
expect(component.validity.valid).to.be.false;
|
66
|
-
expect(checkboxes[0].validity.valid).to.be.false;
|
67
|
-
expect(checkboxes[0].isReportValidityOrSubmit).to.be.true;
|
68
|
-
expect(checkboxes[1].validity.valid).to.be.false;
|
69
|
-
expect(checkboxes[1].isReportValidityOrSubmit).to.be.true;
|
70
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './checkbox.js';
|
@@ -1,131 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './checkbox.js';
|
3
|
-
import { assert, expect, fixture, html } from '@open-wc/testing';
|
4
|
-
import GlideCoreCheckboxGroup from './checkbox-group.js';
|
5
|
-
GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
|
6
|
-
it('exposes standard form control properties and methods', async () => {
|
7
|
-
const form = document.createElement('form');
|
8
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
9
|
-
<glide-core-checkbox label="Checkbox"></glide-core-checkbox>
|
10
|
-
</glide-core-checkbox-group>`, { parentNode: form });
|
11
|
-
expect(component.form).to.equal(form);
|
12
|
-
expect(component.validity instanceof ValidityState).to.be.true;
|
13
|
-
expect(component.willValidate).to.be.true;
|
14
|
-
expect(component.checkValidity).to.be.a('function');
|
15
|
-
expect(component.reportValidity).to.be.a('function');
|
16
|
-
});
|
17
|
-
it('can be reset', async () => {
|
18
|
-
const form = document.createElement('form');
|
19
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
20
|
-
<glide-core-checkbox
|
21
|
-
label="Checkbox"
|
22
|
-
value="value"
|
23
|
-
checked
|
24
|
-
></glide-core-checkbox>
|
25
|
-
</glide-core-checkbox-group>`, {
|
26
|
-
parentNode: form,
|
27
|
-
});
|
28
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
29
|
-
assert(checkbox);
|
30
|
-
checkbox.checked = false;
|
31
|
-
form.reset();
|
32
|
-
expect(component.value).to.deep.equal(['value']);
|
33
|
-
});
|
34
|
-
it('has `formData` when the checkboxes are checked', async () => {
|
35
|
-
const form = document.createElement('form');
|
36
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
|
37
|
-
<glide-core-checkbox
|
38
|
-
label="One"
|
39
|
-
value="one"
|
40
|
-
checked
|
41
|
-
></glide-core-checkbox>
|
42
|
-
<glide-core-checkbox
|
43
|
-
label="Two"
|
44
|
-
value="two"
|
45
|
-
checked
|
46
|
-
></glide-core-checkbox>
|
47
|
-
</glide-core-checkbox-group>`, {
|
48
|
-
parentNode: form,
|
49
|
-
});
|
50
|
-
const formData = new FormData(form);
|
51
|
-
expect(formData.get('name')).to.be.equal('["one","two"]');
|
52
|
-
});
|
53
|
-
it('has `formData` when the checkbox is checked and indeterminate', async () => {
|
54
|
-
const form = document.createElement('form');
|
55
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
|
56
|
-
<glide-core-checkbox
|
57
|
-
label="Checkbox"
|
58
|
-
value="value"
|
59
|
-
checked
|
60
|
-
indeterminate
|
61
|
-
></glide-core-checkbox>
|
62
|
-
</glide-core-checkbox-group>`, {
|
63
|
-
parentNode: form,
|
64
|
-
});
|
65
|
-
const formData = new FormData(form);
|
66
|
-
expect(formData.get('name')).to.be.equal('["value"]');
|
67
|
-
});
|
68
|
-
it('has no `formData` when the checkboxes are unchecked', async () => {
|
69
|
-
const form = document.createElement('form');
|
70
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
|
71
|
-
<glide-core-checkbox label="One" value="one"></glide-core-checkbox>
|
72
|
-
<glide-core-checkbox label="Two" value="two"></glide-core-checkbox>
|
73
|
-
</glide-core-checkbox-group>`, {
|
74
|
-
parentNode: form,
|
75
|
-
});
|
76
|
-
const formData = new FormData(form);
|
77
|
-
expect(formData.get('name')).to.be.null;
|
78
|
-
});
|
79
|
-
it('has no `formData` when disabled and the checkbox is checked', async () => {
|
80
|
-
const form = document.createElement('form');
|
81
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name" disabled>
|
82
|
-
<glide-core-checkbox
|
83
|
-
label="Checkbox"
|
84
|
-
value="value"
|
85
|
-
checked
|
86
|
-
></glide-core-checkbox>
|
87
|
-
</glide-core-checkbox-group>`, {
|
88
|
-
parentNode: form,
|
89
|
-
});
|
90
|
-
const formData = new FormData(form);
|
91
|
-
expect(formData.get('name')).to.be.null;
|
92
|
-
});
|
93
|
-
it('has no `formData` when the checkbox is checked but disabled', async () => {
|
94
|
-
const form = document.createElement('form');
|
95
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
|
96
|
-
<glide-core-checkbox
|
97
|
-
label="Checkbox"
|
98
|
-
value="value"
|
99
|
-
checked
|
100
|
-
disabled
|
101
|
-
></glide-core-checkbox>
|
102
|
-
</glide-core-checkbox-group>`, {
|
103
|
-
parentNode: form,
|
104
|
-
});
|
105
|
-
const formData = new FormData(form);
|
106
|
-
expect(formData.get('name')).to.be.null;
|
107
|
-
});
|
108
|
-
it('has no `formData` when without a `name` but the checkbox is checked', async () => {
|
109
|
-
const form = document.createElement('form');
|
110
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
111
|
-
<glide-core-checkbox
|
112
|
-
label="Checkbox"
|
113
|
-
value="value"
|
114
|
-
checked
|
115
|
-
></glide-core-checkbox>
|
116
|
-
</glide-core-checkbox-group>`, {
|
117
|
-
parentNode: form,
|
118
|
-
});
|
119
|
-
const formData = new FormData(form);
|
120
|
-
expect(formData.get('name')).to.be.null;
|
121
|
-
});
|
122
|
-
it('has no `formData` value when the checkbox is checked but without a `value`', async () => {
|
123
|
-
const form = document.createElement('form');
|
124
|
-
await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
|
125
|
-
<glide-core-checkbox label="Checkbox" checked></glide-core-checkbox>
|
126
|
-
</glide-core-checkbox-group>`, {
|
127
|
-
parentNode: form,
|
128
|
-
});
|
129
|
-
const formData = new FormData(form);
|
130
|
-
expect(formData.get('name')).to.be.null;
|
131
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './checkbox.js';
|
@@ -1,82 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './checkbox.js';
|
3
|
-
import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
|
4
|
-
import GlideCoreCheckboxGroup from './checkbox-group.js';
|
5
|
-
GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
|
6
|
-
it('checks and unchecks Checkboxes when `value` is changed programmatically', async () => {
|
7
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
8
|
-
<glide-core-checkbox label="One" value="one"></glide-core-checkbox>
|
9
|
-
<glide-core-checkbox label="Two" checked></glide-core-checkbox>
|
10
|
-
|
11
|
-
<glide-core-checkbox
|
12
|
-
label="Three"
|
13
|
-
value="three"
|
14
|
-
checked
|
15
|
-
></glide-core-checkbox>
|
16
|
-
</glide-core-checkbox-group>`);
|
17
|
-
component.value = ['one'];
|
18
|
-
const checkboxes = component.querySelectorAll('glide-core-checkbox');
|
19
|
-
expect(checkboxes[0].checked).to.be.true;
|
20
|
-
expect(checkboxes[1].checked).to.be.true;
|
21
|
-
expect(checkboxes[2].checked).to.be.false;
|
22
|
-
});
|
23
|
-
it('updates `value` when the `value` of a checked Checkbox is changed programmatically', async () => {
|
24
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
25
|
-
<glide-core-checkbox
|
26
|
-
label="One"
|
27
|
-
value="one"
|
28
|
-
checked
|
29
|
-
></glide-core-checkbox>
|
30
|
-
|
31
|
-
<glide-core-checkbox
|
32
|
-
label="Two"
|
33
|
-
value="two"
|
34
|
-
checked
|
35
|
-
></glide-core-checkbox>
|
36
|
-
</glide-core-checkbox-group>`);
|
37
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
38
|
-
assert(checkbox);
|
39
|
-
checkbox.value = 'three';
|
40
|
-
await elementUpdated(component);
|
41
|
-
expect(component.value).to.deep.equal(['three', 'two']);
|
42
|
-
expect(component.getAttribute('value')).to.equal('["three","two"]');
|
43
|
-
});
|
44
|
-
it('updates `value` when the `value` of a checked Checkbox is emptied programmatically', async () => {
|
45
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
46
|
-
<glide-core-checkbox
|
47
|
-
label="One"
|
48
|
-
value="one"
|
49
|
-
checked
|
50
|
-
></glide-core-checkbox>
|
51
|
-
|
52
|
-
<glide-core-checkbox
|
53
|
-
label="Two"
|
54
|
-
value="two"
|
55
|
-
checked
|
56
|
-
></glide-core-checkbox>
|
57
|
-
</glide-core-checkbox-group>`);
|
58
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
59
|
-
assert(checkbox);
|
60
|
-
checkbox.value = '';
|
61
|
-
await elementUpdated(component);
|
62
|
-
expect(component.value).to.deep.equal(['two']);
|
63
|
-
expect(component.getAttribute('value')).to.equal('["two"]');
|
64
|
-
});
|
65
|
-
it('enables disabled Checkboxes when `value` is set programmatically', async () => {
|
66
|
-
const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
|
67
|
-
<glide-core-checkbox
|
68
|
-
label="One"
|
69
|
-
value="one"
|
70
|
-
disabled
|
71
|
-
></glide-core-checkbox>
|
72
|
-
|
73
|
-
<glide-core-checkbox
|
74
|
-
label="Two"
|
75
|
-
value="two"
|
76
|
-
checked
|
77
|
-
></glide-core-checkbox>
|
78
|
-
</glide-core-checkbox-group>`);
|
79
|
-
component.value = ['one', 'two'];
|
80
|
-
const checkbox = component.querySelector('glide-core-checkbox');
|
81
|
-
expect(checkbox?.disabled).to.be.false;
|
82
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './checkbox.js';
|