@crowdstrike/glide-core 0.13.0 → 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.js +11 -11
- package/dist/dropdown.option.d.ts +1 -1
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.styles.js +11 -16
- package/dist/input.styles.js +6 -1
- package/dist/styles/variables.css +1 -1
- package/dist/textarea.styles.js +6 -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 +9 -6
- 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,115 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { assert, expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import GlideCoreToasts from './toasts.js';
|
4
|
-
GlideCoreToasts.shadowRootOptions.mode = 'open';
|
5
|
-
// NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
|
6
|
-
// to manually dispatch the `transitionend` event in tests.
|
7
|
-
it('registers', async () => {
|
8
|
-
expect(window.customElements.get('glide-core-toasts')).to.equal(GlideCoreToasts);
|
9
|
-
});
|
10
|
-
it('is accessible', async () => {
|
11
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
12
|
-
component.add({
|
13
|
-
label: 'Test toast',
|
14
|
-
description: 'Test toast description',
|
15
|
-
variant: 'informational',
|
16
|
-
});
|
17
|
-
await expect(component).to.be.accessible();
|
18
|
-
});
|
19
|
-
it('sets correct role', async () => {
|
20
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
21
|
-
component.add({
|
22
|
-
label: 'Test toast',
|
23
|
-
description: 'Test toast description',
|
24
|
-
variant: 'informational',
|
25
|
-
});
|
26
|
-
expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('region');
|
27
|
-
});
|
28
|
-
it('can add a toast', async () => {
|
29
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
30
|
-
component.add({
|
31
|
-
label: 'Test toast',
|
32
|
-
description: 'Test toast description',
|
33
|
-
variant: 'informational',
|
34
|
-
});
|
35
|
-
const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
|
36
|
-
assert(toasts);
|
37
|
-
expect(toasts.length).to.equal(1);
|
38
|
-
const toast = toasts[0];
|
39
|
-
expect(toast.label).to.equal('Test toast');
|
40
|
-
expect(toast.description).to.equal('Test toast description');
|
41
|
-
expect(toast.variant).to.equal('informational');
|
42
|
-
});
|
43
|
-
it('can add a toast with duration', async () => {
|
44
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
45
|
-
component.add({
|
46
|
-
label: 'Test toast',
|
47
|
-
description: 'Test toast description',
|
48
|
-
variant: 'informational',
|
49
|
-
duration: 10_000,
|
50
|
-
});
|
51
|
-
const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
|
52
|
-
assert(toasts);
|
53
|
-
const toast = toasts[0];
|
54
|
-
expect(toast.duration).to.equal(10_000);
|
55
|
-
});
|
56
|
-
it('can add multiple toasts', async () => {
|
57
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
58
|
-
component.add({
|
59
|
-
label: 'Test toast',
|
60
|
-
description: 'Test toast description',
|
61
|
-
variant: 'informational',
|
62
|
-
});
|
63
|
-
component.add({
|
64
|
-
label: 'Test toast 2',
|
65
|
-
description: 'Test toast description 2',
|
66
|
-
variant: 'success',
|
67
|
-
});
|
68
|
-
const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
|
69
|
-
assert(toasts);
|
70
|
-
expect(toasts.length).to.equal(2);
|
71
|
-
const toast1 = toasts[0];
|
72
|
-
expect(toast1.label).to.equal('Test toast');
|
73
|
-
expect(toast1.description).to.equal('Test toast description');
|
74
|
-
expect(toast1.variant).to.equal('informational');
|
75
|
-
const toast2 = toasts[1];
|
76
|
-
expect(toast2.label).to.equal('Test toast 2');
|
77
|
-
expect(toast2.description).to.equal('Test toast description 2');
|
78
|
-
expect(toast2.variant).to.equal('success');
|
79
|
-
});
|
80
|
-
it('removes a closed toast from the DOM', async () => {
|
81
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
82
|
-
component.add({
|
83
|
-
label: 'Test toast',
|
84
|
-
description: 'Test toast description',
|
85
|
-
variant: 'informational',
|
86
|
-
});
|
87
|
-
let toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
|
88
|
-
assert(toasts);
|
89
|
-
expect(toasts.length).to.equal(1);
|
90
|
-
const toast = toasts[0];
|
91
|
-
toast.close();
|
92
|
-
toast.dispatchEvent(new Event('close', { bubbles: true }));
|
93
|
-
toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
|
94
|
-
expect(toasts?.length).to.equal(0);
|
95
|
-
});
|
96
|
-
it('is hidden unless there are toasts displayed', async () => {
|
97
|
-
const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
|
98
|
-
const shadowComponent = component.shadowRoot?.querySelector('.component');
|
99
|
-
assert(shadowComponent);
|
100
|
-
expect(shadowComponent.hasAttribute('popover')).to.be.false;
|
101
|
-
expect(getComputedStyle(shadowComponent).display).to.equal('none');
|
102
|
-
component.add({
|
103
|
-
label: 'Test toast',
|
104
|
-
description: 'Test toast description',
|
105
|
-
variant: 'informational',
|
106
|
-
});
|
107
|
-
expect(shadowComponent.getAttribute('popover')).to.equal('manual');
|
108
|
-
expect(getComputedStyle(shadowComponent).display).to.equal('flex');
|
109
|
-
const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
|
110
|
-
assert(toasts);
|
111
|
-
const toast = toasts[0];
|
112
|
-
toast.close();
|
113
|
-
toast.dispatchEvent(new Event('close', { bubbles: true }));
|
114
|
-
expect(getComputedStyle(shadowComponent).display).to.equal('none');
|
115
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,139 +0,0 @@
|
|
1
|
-
import { assert, expect, fixture, html } from '@open-wc/testing';
|
2
|
-
import GlideCoreToast from './toasts.toast.js';
|
3
|
-
import sinon from 'sinon';
|
4
|
-
GlideCoreToast.shadowRootOptions.mode = 'open';
|
5
|
-
// NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
|
6
|
-
// to manually dispatch the `transitionend` event in tests.
|
7
|
-
it('registers', async () => {
|
8
|
-
expect(window.customElements.get('glide-core-toast')).to.equal(GlideCoreToast);
|
9
|
-
});
|
10
|
-
it('is accessible', async () => {
|
11
|
-
const component = await fixture(html `<glide-core-toast
|
12
|
-
variant="informational"
|
13
|
-
label="Label"
|
14
|
-
description="Toast description"
|
15
|
-
></glide-core-toast>`);
|
16
|
-
await expect(component).to.be.accessible();
|
17
|
-
});
|
18
|
-
it('sets correct role', async () => {
|
19
|
-
const component = await fixture(html `<glide-core-toast
|
20
|
-
variant="informational"
|
21
|
-
label="Label"
|
22
|
-
description="Toast description"
|
23
|
-
></glide-core-toast>`);
|
24
|
-
expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('alert');
|
25
|
-
});
|
26
|
-
it('sets correct aria labelling', async () => {
|
27
|
-
const component = await fixture(html `<glide-core-toast
|
28
|
-
variant="informational"
|
29
|
-
label="Label"
|
30
|
-
description="Toast description"
|
31
|
-
></glide-core-toast>`);
|
32
|
-
expect(component.shadowRoot?.firstElementChild?.getAttribute('aria-labelledby')).to.equal('label description');
|
33
|
-
expect(component.shadowRoot?.firstElementChild?.querySelector('#label')
|
34
|
-
?.textContent).to.equal('Label');
|
35
|
-
expect(component.shadowRoot?.firstElementChild?.querySelector('#description')
|
36
|
-
?.textContent).to.equal('Toast description');
|
37
|
-
});
|
38
|
-
it('sets variant, label, and description', async () => {
|
39
|
-
const component = await fixture(html `<glide-core-toast
|
40
|
-
variant="informational"
|
41
|
-
label="Label"
|
42
|
-
description="Toast description"
|
43
|
-
></glide-core-toast>`);
|
44
|
-
await expect(component.variant).to.equal('informational');
|
45
|
-
await expect(component.label).to.equal('Label');
|
46
|
-
await expect(component.description).to.equal('Toast description');
|
47
|
-
});
|
48
|
-
it('opens and closes by default', async () => {
|
49
|
-
const clock = sinon.useFakeTimers();
|
50
|
-
const component = await fixture(html `<glide-core-toast
|
51
|
-
variant="informational"
|
52
|
-
label="Label"
|
53
|
-
description="Toast description"
|
54
|
-
></glide-core-toast>`);
|
55
|
-
clock.tick(3000);
|
56
|
-
const shadowElement = component.shadowRoot.firstElementChild;
|
57
|
-
await expect([...shadowElement.classList]).to.deep.equal([
|
58
|
-
'component',
|
59
|
-
'informational',
|
60
|
-
'open',
|
61
|
-
]);
|
62
|
-
clock.tick(3000);
|
63
|
-
shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
|
64
|
-
await expect([
|
65
|
-
...component.shadowRoot.firstElementChild.classList,
|
66
|
-
]).to.deep.equal(['component', 'informational', 'closed']);
|
67
|
-
clock.restore();
|
68
|
-
});
|
69
|
-
it('responds to duration', async () => {
|
70
|
-
const clock = sinon.useFakeTimers();
|
71
|
-
const component = await fixture(html `<glide-core-toast
|
72
|
-
variant="informational"
|
73
|
-
label="Label"
|
74
|
-
description="Toast description"
|
75
|
-
duration="10000"
|
76
|
-
></glide-core-toast>`);
|
77
|
-
clock.tick(9500);
|
78
|
-
const shadowElement = component.shadowRoot.firstElementChild;
|
79
|
-
await expect([...shadowElement.classList]).to.deep.equal([
|
80
|
-
'component',
|
81
|
-
'informational',
|
82
|
-
'open',
|
83
|
-
]);
|
84
|
-
clock.tick(1000);
|
85
|
-
shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
|
86
|
-
await expect([
|
87
|
-
...component.shadowRoot.firstElementChild.classList,
|
88
|
-
]).to.deep.equal(['component', 'informational', 'closed']);
|
89
|
-
clock.restore();
|
90
|
-
});
|
91
|
-
it('responds to duration of Infinity', async () => {
|
92
|
-
const clock = sinon.useFakeTimers();
|
93
|
-
const component = await fixture(html `<glide-core-toast
|
94
|
-
variant="informational"
|
95
|
-
label="Label"
|
96
|
-
description="Toast description"
|
97
|
-
duration="Infinity"
|
98
|
-
></glide-core-toast>`);
|
99
|
-
clock.tick(9500);
|
100
|
-
const shadowElement = component.shadowRoot.firstElementChild;
|
101
|
-
await expect([...shadowElement.classList]).to.deep.equal([
|
102
|
-
'component',
|
103
|
-
'informational',
|
104
|
-
'open',
|
105
|
-
]);
|
106
|
-
clock.restore();
|
107
|
-
});
|
108
|
-
it('does not allow less than 5000 duration', async () => {
|
109
|
-
const clock = sinon.useFakeTimers();
|
110
|
-
const component = await fixture(html `<glide-core-toast
|
111
|
-
variant="informational"
|
112
|
-
label="Label"
|
113
|
-
description="Toast description"
|
114
|
-
duration="3000"
|
115
|
-
></glide-core-toast>`);
|
116
|
-
clock.tick(4000);
|
117
|
-
const shadowElement = component.shadowRoot.firstElementChild;
|
118
|
-
await expect([...shadowElement.classList]).to.deep.equal([
|
119
|
-
'component',
|
120
|
-
'informational',
|
121
|
-
'open',
|
122
|
-
]);
|
123
|
-
clock.restore();
|
124
|
-
});
|
125
|
-
it('can be closed by clicking on the x icon', async () => {
|
126
|
-
const component = await fixture(html `<glide-core-toast
|
127
|
-
variant="informational"
|
128
|
-
label="Label"
|
129
|
-
description="Toast description"
|
130
|
-
></glide-core-toast>`);
|
131
|
-
const shadowElement = component.shadowRoot.firstElementChild;
|
132
|
-
const closeButton = shadowElement?.querySelector('glide-core-icon-button[label="Close"]');
|
133
|
-
assert(closeButton);
|
134
|
-
closeButton.click();
|
135
|
-
shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
|
136
|
-
await expect([
|
137
|
-
...component.shadowRoot.firstElementChild.classList,
|
138
|
-
]).to.deep.equal(['component', 'informational', 'closed']);
|
139
|
-
});
|
package/dist/toggle.stories.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,69 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import GlideCoreToggle from './toggle.js';
|
4
|
-
GlideCoreToggle.shadowRootOptions.mode = 'open';
|
5
|
-
it('registers', async () => {
|
6
|
-
expect(window.customElements.get('glide-core-toggle')).to.equal(GlideCoreToggle);
|
7
|
-
});
|
8
|
-
it('has defaults', async () => {
|
9
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
10
|
-
expect(component.hasAttribute('checked')).to.be.false;
|
11
|
-
expect(component.checked).to.be.false;
|
12
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
13
|
-
expect(input?.getAttribute('aria-checked')).to.equal('false');
|
14
|
-
expect(component.hasAttribute('disabled')).to.be.false;
|
15
|
-
expect(component.disabled).to.be.false;
|
16
|
-
expect(component.hasAttribute('hide-label')).to.be.false;
|
17
|
-
expect(component.hideLabel).to.be.false;
|
18
|
-
expect(component.getAttribute('orientation')).to.equal('horizontal');
|
19
|
-
expect(component.orientation).to.equal('horizontal');
|
20
|
-
expect(component.getAttribute('summary')).to.be.null;
|
21
|
-
expect(component.summary).to.equal(undefined);
|
22
|
-
});
|
23
|
-
it('is accessible', async () => {
|
24
|
-
const component = await fixture(html `<glide-core-toggle label="Label">
|
25
|
-
<div slot="tooltip">Tooltip</div>
|
26
|
-
<div slot="description">Description</div>
|
27
|
-
</glide-core-toggle>`);
|
28
|
-
await expect(component).to.be.accessible();
|
29
|
-
});
|
30
|
-
it('can have a label', async () => {
|
31
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle> `);
|
32
|
-
expect(component.getAttribute('label')).to.equal('Label');
|
33
|
-
expect(component.label).to.equal('Label');
|
34
|
-
});
|
35
|
-
it('can have a description', async () => {
|
36
|
-
const component = await fixture(html `<glide-core-toggle label="Label">
|
37
|
-
<div slot="description">Description</div>
|
38
|
-
</glide-core-toggle>`);
|
39
|
-
const assignedElements = component.shadowRoot
|
40
|
-
?.querySelector('slot[name="description"]')
|
41
|
-
?.assignedElements();
|
42
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Description');
|
43
|
-
});
|
44
|
-
it('can have a summary', async () => {
|
45
|
-
const component = await fixture(html `<glide-core-toggle summary="Summary"></glide-core-toggle> `);
|
46
|
-
expect(component.getAttribute('summary')).to.equal('Summary');
|
47
|
-
expect(component.summary).to.equal('Summary');
|
48
|
-
});
|
49
|
-
it('can have a tooltip', async () => {
|
50
|
-
const component = await fixture(html `<glide-core-toggle label="Label">
|
51
|
-
<div slot="tooltip">Tooltip</div>
|
52
|
-
</glide-core-toggle>`);
|
53
|
-
const assignedElements = component.shadowRoot
|
54
|
-
?.querySelector('slot[name="tooltip"]')
|
55
|
-
?.assignedElements();
|
56
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
|
57
|
-
});
|
58
|
-
it('can be checked', async () => {
|
59
|
-
const component = await fixture(html `<glide-core-toggle checked></glide-core-toggle> `);
|
60
|
-
expect(component.hasAttribute('checked')).to.be.true;
|
61
|
-
expect(component.checked).to.be.true;
|
62
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
63
|
-
expect(input?.getAttribute('aria-checked')).to.equal('true');
|
64
|
-
});
|
65
|
-
it('can be disabled', async () => {
|
66
|
-
const component = await fixture(html `<glide-core-toggle disabled></glide-core-toggle> `);
|
67
|
-
expect(component.hasAttribute('disabled')).to.be.true;
|
68
|
-
expect(component.disabled).to.be.true;
|
69
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,30 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
|
3
|
-
import GlideCoreToggle from './toggle.js';
|
4
|
-
GlideCoreToggle.shadowRootOptions.mode = 'open';
|
5
|
-
// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
|
6
|
-
// expecting it to throw would work. But it wouldn't throw until its
|
7
|
-
// timeout, which would make for a slow test. Its timeout can likely be
|
8
|
-
// configured. But waiting a turn of the event loop, after which the event
|
9
|
-
// will have been dispatched, gets the job done as well.
|
10
|
-
it('dispatches a "click" event when clicked', async () => {
|
11
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
12
|
-
setTimeout(() => component.click());
|
13
|
-
const event = await oneEvent(component, 'click');
|
14
|
-
expect(event instanceof PointerEvent).to.be.true;
|
15
|
-
expect(event.bubbles).to.be.true;
|
16
|
-
});
|
17
|
-
it('dispatches a "change" event when clicked', async () => {
|
18
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
19
|
-
setTimeout(() => component.click());
|
20
|
-
const event = await oneEvent(component, 'change');
|
21
|
-
expect(event instanceof Event).to.be.true;
|
22
|
-
expect(event.bubbles).to.be.true;
|
23
|
-
});
|
24
|
-
it('dispatches an "input" event when clicked', async () => {
|
25
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
26
|
-
setTimeout(() => component.click());
|
27
|
-
const event = await oneEvent(component, 'input');
|
28
|
-
expect(event instanceof Event).to.be.true;
|
29
|
-
expect(event.bubbles).to.be.true;
|
30
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
2
|
-
import GlideCoreToggle from './toggle.js';
|
3
|
-
GlideCoreToggle.shadowRootOptions.mode = 'open';
|
4
|
-
it('focuses the input when `focus()` is called', async () => {
|
5
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
6
|
-
component.focus();
|
7
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
8
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
9
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,81 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import GlideCoreToggle from './toggle.js';
|
4
|
-
GlideCoreToggle.shadowRootOptions.mode = 'open';
|
5
|
-
it('is checked after being clicked', async () => {
|
6
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
7
|
-
component.click();
|
8
|
-
await elementUpdated(component);
|
9
|
-
expect(component.checked).to.be.true;
|
10
|
-
expect(component.hasAttribute('checked')).to.be.false;
|
11
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
12
|
-
expect(input?.getAttribute('aria-checked')).to.equal('true');
|
13
|
-
});
|
14
|
-
it('is unchecked after being clicked', async () => {
|
15
|
-
const component = await fixture(html `<glide-core-toggle label="Label" checked></glide-core-toggle>`);
|
16
|
-
component.click();
|
17
|
-
await elementUpdated(component);
|
18
|
-
expect(component.checked).to.be.false;
|
19
|
-
expect(component.hasAttribute('checked')).to.be.true;
|
20
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
21
|
-
expect(input?.getAttribute('aria-checked')).to.equal('false');
|
22
|
-
});
|
23
|
-
it('is still checked after being clicked when checked but disabled', async () => {
|
24
|
-
const component = await fixture(html `<glide-core-toggle
|
25
|
-
label="Label"
|
26
|
-
checked
|
27
|
-
disabled
|
28
|
-
></glide-core-toggle>`);
|
29
|
-
component.click();
|
30
|
-
await elementUpdated(component);
|
31
|
-
expect(component.checked).to.be.true;
|
32
|
-
expect(component.hasAttribute('checked')).to.be.true;
|
33
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
34
|
-
expect(input?.getAttribute('aria-checked')).to.equal('true');
|
35
|
-
});
|
36
|
-
it('is still unchecked after being clicked when unchecked and disabled', async () => {
|
37
|
-
const component = await fixture(html `<glide-core-toggle label="Label" disabled></glide-core-toggle>`);
|
38
|
-
component.click();
|
39
|
-
await elementUpdated(component);
|
40
|
-
expect(component.hasAttribute('checked')).to.be.false;
|
41
|
-
expect(component.checked).to.be.false;
|
42
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
43
|
-
expect(input?.getAttribute('aria-checked')).to.equal('false');
|
44
|
-
});
|
45
|
-
it('is unchecked after being clicked then forcibly unchecked via a "change" listener', async () => {
|
46
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
47
|
-
component.addEventListener('change', async () => {
|
48
|
-
await component.updateComplete;
|
49
|
-
component.checked = false;
|
50
|
-
});
|
51
|
-
component.click();
|
52
|
-
await elementUpdated(component);
|
53
|
-
expect(component.hasAttribute('checked')).to.be.false;
|
54
|
-
expect(component.checked).to.be.false;
|
55
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
56
|
-
expect(input?.getAttribute('aria-checked')).to.equal('false');
|
57
|
-
});
|
58
|
-
it('is unchecked after being clicked then forcibly unchecked via an "input" listener', async () => {
|
59
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
60
|
-
component.addEventListener('input', async () => {
|
61
|
-
await component.updateComplete;
|
62
|
-
component.checked = false;
|
63
|
-
});
|
64
|
-
component.click();
|
65
|
-
await elementUpdated(component);
|
66
|
-
expect(component.hasAttribute('checked')).to.be.false;
|
67
|
-
expect(component.checked).to.be.false;
|
68
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
69
|
-
expect(input?.getAttribute('aria-checked')).to.equal('false');
|
70
|
-
});
|
71
|
-
it('remains unchecked when its "click" event is canceled', async () => {
|
72
|
-
const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
|
73
|
-
component.addEventListener('click', async (event) => {
|
74
|
-
event.preventDefault();
|
75
|
-
});
|
76
|
-
component.click();
|
77
|
-
expect(component.hasAttribute('checked')).to.be.false;
|
78
|
-
expect(component.checked).to.be.false;
|
79
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
80
|
-
expect(input?.getAttribute('aria-checked')).to.equal('false');
|
81
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,100 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { ArgumentError } from 'ow';
|
3
|
-
import { aTimeout, expect, fixture, html } from '@open-wc/testing';
|
4
|
-
import GlideCoreTooltip from './tooltip.js';
|
5
|
-
import sinon from 'sinon';
|
6
|
-
GlideCoreTooltip.shadowRootOptions.mode = 'open';
|
7
|
-
it('registers', async () => {
|
8
|
-
expect(window.customElements.get('glide-core-tooltip')).to.equal(GlideCoreTooltip);
|
9
|
-
});
|
10
|
-
it('is accessible', async () => {
|
11
|
-
const component = await fixture(html `<glide-core-tooltip>
|
12
|
-
Tooltip
|
13
|
-
<span slot="target" tabindex="0">Target</span>
|
14
|
-
</glide-core-tooltip>`);
|
15
|
-
// See the comment in the component's `render` method for an explanation.
|
16
|
-
await expect(component).to.be.accessible({
|
17
|
-
ignoredRules: ['aria-tooltip-name'],
|
18
|
-
});
|
19
|
-
});
|
20
|
-
it('has defaults', async () => {
|
21
|
-
const component = await fixture(html `<glide-core-tooltip>
|
22
|
-
Tooltip
|
23
|
-
<span slot="target" tabindex="0">Target</span>
|
24
|
-
</glide-core-tooltip>`);
|
25
|
-
const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
|
26
|
-
// Wait for Floating UI.
|
27
|
-
await aTimeout(0);
|
28
|
-
expect(component.offset).to.equal(4);
|
29
|
-
expect(component.open).to.be.false;
|
30
|
-
expect(component.placement).to.be.be.undefined;
|
31
|
-
expect(component.disabled).to.be.false;
|
32
|
-
expect(component.shortcut).to.be.deep.equal([]);
|
33
|
-
expect(tooltip?.checkVisibility()).to.be.false;
|
34
|
-
});
|
35
|
-
it('can be open', async () => {
|
36
|
-
const component = await fixture(html `<glide-core-tooltip open>
|
37
|
-
Tooltip
|
38
|
-
<span slot="target" tabindex="0">Target</span>
|
39
|
-
</glide-core-tooltip>`);
|
40
|
-
const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
|
41
|
-
// Wait for Floating UI.
|
42
|
-
await aTimeout(0);
|
43
|
-
expect(tooltip?.checkVisibility()).to.be.true;
|
44
|
-
});
|
45
|
-
it('can have a single-key shortcut', async () => {
|
46
|
-
const component = await fixture(html `<glide-core-tooltip .shortcut=${['Enter']}>
|
47
|
-
Tooltip
|
48
|
-
<span slot="target" tabindex="0">Target</span>
|
49
|
-
</glide-core-tooltip>`);
|
50
|
-
const shortcut = component.shadowRoot?.querySelector('[data-test="shortcut"]');
|
51
|
-
expect(shortcut?.textContent?.trim()).to.equal('Enter');
|
52
|
-
});
|
53
|
-
it('can have a multi-key shortcut', async () => {
|
54
|
-
const component = await fixture(html `<glide-core-tooltip .shortcut=${['CMD', 'K']}>
|
55
|
-
Tooltip
|
56
|
-
<span slot="target" tabindex="0">Target</span>
|
57
|
-
</glide-core-tooltip>`);
|
58
|
-
const shortcut = component.shadowRoot?.querySelector('[data-test="shortcut"]');
|
59
|
-
expect(shortcut?.textContent?.replaceAll(/\s/g, '')).to.equal('CMD+K');
|
60
|
-
});
|
61
|
-
it('is not open when disabled', async () => {
|
62
|
-
const component = await fixture(html `<glide-core-tooltip open disabled>
|
63
|
-
Tooltip
|
64
|
-
<span slot="target" tabindex="0">Target</span>
|
65
|
-
</glide-core-tooltip>`);
|
66
|
-
const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
|
67
|
-
// Wait for Floating UI.
|
68
|
-
await aTimeout(0);
|
69
|
-
expect(tooltip?.checkVisibility()).to.be.false;
|
70
|
-
});
|
71
|
-
it('throws if it does not have a default slot', async () => {
|
72
|
-
const spy = sinon.spy();
|
73
|
-
try {
|
74
|
-
await fixture(html `<glide-core-tooltip></glide-core-tooltip>`);
|
75
|
-
}
|
76
|
-
catch (error) {
|
77
|
-
if (error instanceof ArgumentError) {
|
78
|
-
spy();
|
79
|
-
}
|
80
|
-
}
|
81
|
-
expect(spy.callCount).to.equal(1);
|
82
|
-
});
|
83
|
-
it('throws if it does not have a "target" slot', async () => {
|
84
|
-
const spy = sinon.spy();
|
85
|
-
try {
|
86
|
-
await fixture(html `<glide-core-tooltip>Tooltip</glide-core-tooltip>`);
|
87
|
-
}
|
88
|
-
catch (error) {
|
89
|
-
if (error instanceof ArgumentError) {
|
90
|
-
spy();
|
91
|
-
}
|
92
|
-
}
|
93
|
-
expect(spy.callCount).to.equal(1);
|
94
|
-
});
|
95
|
-
it('has `placement` coverage', async () => {
|
96
|
-
await fixture(html `<glide-core-tooltip open placement="top">
|
97
|
-
Tooltip
|
98
|
-
<span slot="target" tabindex="0">Target</span>
|
99
|
-
</glide-core-tooltip>`);
|
100
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './tooltip.js';
|