@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,343 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './dropdown.option.js';
|
3
|
-
import * as sinon from 'sinon';
|
4
|
-
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
|
5
|
-
import { sendKeys } from '@web/test-runner-commands';
|
6
|
-
import GlideCoreDropdown from './dropdown.js';
|
7
|
-
GlideCoreDropdown.shadowRootOptions.mode = 'open';
|
8
|
-
it('dispatches one "change" event when an option is selected via click', async () => {
|
9
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
10
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
11
|
-
|
12
|
-
<glide-core-dropdown-option
|
13
|
-
label="Two"
|
14
|
-
selected
|
15
|
-
></glide-core-dropdown-option>
|
16
|
-
</glide-core-dropdown>`);
|
17
|
-
const spy = sinon.spy();
|
18
|
-
component.addEventListener('change', spy);
|
19
|
-
setTimeout(() => {
|
20
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
21
|
-
});
|
22
|
-
const event = await oneEvent(component, 'change');
|
23
|
-
expect(event instanceof Event).to.be.true;
|
24
|
-
expect(event.bubbles).to.be.true;
|
25
|
-
expect(spy.callCount).to.equal(1);
|
26
|
-
});
|
27
|
-
it('dispatches one "change" event when an option is selected via Enter', async () => {
|
28
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
29
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
30
|
-
|
31
|
-
<glide-core-dropdown-option
|
32
|
-
label="Two"
|
33
|
-
selected
|
34
|
-
></glide-core-dropdown-option>
|
35
|
-
</glide-core-dropdown>`);
|
36
|
-
const spy = sinon.spy();
|
37
|
-
component.addEventListener('change', spy);
|
38
|
-
// Activate the first option before selecting it. The second option is
|
39
|
-
// currently active because it's selected.
|
40
|
-
component
|
41
|
-
.querySelector('glide-core-dropdown-option')
|
42
|
-
?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
43
|
-
component.focus();
|
44
|
-
sendKeys({ press: 'Enter' });
|
45
|
-
const event = await oneEvent(component, 'change');
|
46
|
-
expect(event instanceof Event).to.be.true;
|
47
|
-
expect(event.bubbles).to.be.true;
|
48
|
-
expect(spy.callCount).to.equal(1);
|
49
|
-
});
|
50
|
-
it('dispatches one "change" event when an option is selected via Space', async () => {
|
51
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
52
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
53
|
-
|
54
|
-
<glide-core-dropdown-option
|
55
|
-
label="Two"
|
56
|
-
selected
|
57
|
-
></glide-core-dropdown-option>
|
58
|
-
</glide-core-dropdown>`);
|
59
|
-
const spy = sinon.spy();
|
60
|
-
component.addEventListener('change', spy);
|
61
|
-
// Activate the first option before selecting it. The second option is
|
62
|
-
// currently active because it's selected.
|
63
|
-
component
|
64
|
-
.querySelector('glide-core-dropdown-option')
|
65
|
-
?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
66
|
-
component.focus();
|
67
|
-
sendKeys({ press: ' ' });
|
68
|
-
const event = await oneEvent(component, 'change');
|
69
|
-
expect(event instanceof Event).to.be.true;
|
70
|
-
expect(event.bubbles).to.be.true;
|
71
|
-
expect(spy.callCount).to.equal(1);
|
72
|
-
});
|
73
|
-
it('dispatches an "edit" event on click', async () => {
|
74
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
|
75
|
-
<glide-core-dropdown-option
|
76
|
-
label="Label"
|
77
|
-
editable
|
78
|
-
selected
|
79
|
-
></glide-core-dropdown-option>
|
80
|
-
</glide-core-dropdown>`);
|
81
|
-
setTimeout(() => {
|
82
|
-
component?.shadowRoot
|
83
|
-
?.querySelector('[data-test="edit-button"]')
|
84
|
-
?.click();
|
85
|
-
});
|
86
|
-
const event = await oneEvent(component, 'edit');
|
87
|
-
const option = component.querySelector('glide-core-dropdown-option');
|
88
|
-
expect(event instanceof Event).to.be.true;
|
89
|
-
expect(event.bubbles).to.be.true;
|
90
|
-
expect(event.composed).to.be.true;
|
91
|
-
expect(event.target).to.equal(option);
|
92
|
-
});
|
93
|
-
it('dispatches an "edit" event on Enter', async () => {
|
94
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
|
95
|
-
<glide-core-dropdown-option
|
96
|
-
label="Label"
|
97
|
-
editable
|
98
|
-
selected
|
99
|
-
></glide-core-dropdown-option>
|
100
|
-
</glide-core-dropdown>`);
|
101
|
-
component?.shadowRoot
|
102
|
-
?.querySelector('[data-test="edit-button"]')
|
103
|
-
?.focus();
|
104
|
-
sendKeys({ press: 'Enter' });
|
105
|
-
const event = await oneEvent(component, 'edit');
|
106
|
-
const option = component.querySelector('glide-core-dropdown-option');
|
107
|
-
expect(event instanceof Event).to.be.true;
|
108
|
-
expect(event.bubbles).to.be.true;
|
109
|
-
expect(event.composed).to.be.true;
|
110
|
-
expect(event.target).to.equal(option);
|
111
|
-
});
|
112
|
-
it('dispatches an "edit" event on Space', async () => {
|
113
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
|
114
|
-
<glide-core-dropdown-option
|
115
|
-
label="Label"
|
116
|
-
editable
|
117
|
-
selected
|
118
|
-
></glide-core-dropdown-option>
|
119
|
-
</glide-core-dropdown>`);
|
120
|
-
component?.shadowRoot
|
121
|
-
?.querySelector('[data-test="edit-button"]')
|
122
|
-
?.focus();
|
123
|
-
sendKeys({ press: ' ' });
|
124
|
-
const event = await oneEvent(component, 'edit');
|
125
|
-
const option = component.querySelector('glide-core-dropdown-option');
|
126
|
-
expect(event instanceof Event).to.be.true;
|
127
|
-
expect(event.bubbles).to.be.true;
|
128
|
-
expect(event.target).to.equal(option);
|
129
|
-
});
|
130
|
-
it('does not dispatch an "edit" event when `disabled`', async () => {
|
131
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
|
132
|
-
<glide-core-dropdown-option
|
133
|
-
label="Label"
|
134
|
-
editable
|
135
|
-
selected
|
136
|
-
></glide-core-dropdown-option>
|
137
|
-
</glide-core-dropdown>`);
|
138
|
-
const spy = sinon.spy();
|
139
|
-
component.addEventListener('edit', spy);
|
140
|
-
component?.shadowRoot
|
141
|
-
?.querySelector('[data-test="edit-button"]')
|
142
|
-
?.click();
|
143
|
-
expect(spy.callCount).to.equal(0);
|
144
|
-
});
|
145
|
-
it('does not dispatch an "edit" event when `readonly`', async () => {
|
146
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
|
147
|
-
<glide-core-dropdown-option
|
148
|
-
label="Label"
|
149
|
-
editable
|
150
|
-
selected
|
151
|
-
></glide-core-dropdown-option>
|
152
|
-
</glide-core-dropdown>`);
|
153
|
-
const spy = sinon.spy();
|
154
|
-
component.addEventListener('edit', spy);
|
155
|
-
component?.shadowRoot
|
156
|
-
?.querySelector('[data-test="edit-button"]')
|
157
|
-
?.click();
|
158
|
-
expect(spy.callCount).to.equal(0);
|
159
|
-
});
|
160
|
-
it('dispatches one "input" event when an option is selected via click', async () => {
|
161
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
162
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
163
|
-
|
164
|
-
<glide-core-dropdown-option
|
165
|
-
label="Two"
|
166
|
-
selected
|
167
|
-
></glide-core-dropdown-option>
|
168
|
-
</glide-core-dropdown>`);
|
169
|
-
const spy = sinon.spy();
|
170
|
-
component.addEventListener('input', spy);
|
171
|
-
setTimeout(() => {
|
172
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
173
|
-
});
|
174
|
-
const event = await oneEvent(component, 'input');
|
175
|
-
expect(event instanceof Event).to.be.true;
|
176
|
-
expect(event.bubbles).to.be.true;
|
177
|
-
expect(spy.callCount).to.equal(1);
|
178
|
-
});
|
179
|
-
it('dispatches one "input" event when an option is selected via Enter', async () => {
|
180
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
181
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
182
|
-
|
183
|
-
<glide-core-dropdown-option
|
184
|
-
label="Two"
|
185
|
-
selected
|
186
|
-
></glide-core-dropdown-option>
|
187
|
-
</glide-core-dropdown>`);
|
188
|
-
const spy = sinon.spy();
|
189
|
-
component.addEventListener('input', spy);
|
190
|
-
// Activate the first option before selecting it. The second option is
|
191
|
-
// currently active because it's selected.
|
192
|
-
component
|
193
|
-
.querySelector('glide-core-dropdown-option')
|
194
|
-
?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
195
|
-
component.focus();
|
196
|
-
sendKeys({ press: 'Enter' });
|
197
|
-
const event = await oneEvent(component, 'input');
|
198
|
-
expect(event instanceof Event).to.be.true;
|
199
|
-
expect(event.bubbles).to.be.true;
|
200
|
-
expect(spy.callCount).to.equal(1);
|
201
|
-
});
|
202
|
-
it('dispatches one "input" event when an option is selected via Space', async () => {
|
203
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
204
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
205
|
-
|
206
|
-
<glide-core-dropdown-option
|
207
|
-
label="Two"
|
208
|
-
selected
|
209
|
-
></glide-core-dropdown-option>
|
210
|
-
</glide-core-dropdown>`);
|
211
|
-
const spy = sinon.spy();
|
212
|
-
component.addEventListener('input', spy);
|
213
|
-
// Activate the first option before selecting it. The second option is
|
214
|
-
// currently active because it's selected.
|
215
|
-
component
|
216
|
-
.querySelector('glide-core-dropdown-option')
|
217
|
-
?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
218
|
-
component.focus();
|
219
|
-
sendKeys({ press: ' ' });
|
220
|
-
const event = await oneEvent(component, 'input');
|
221
|
-
expect(event instanceof Event).to.be.true;
|
222
|
-
expect(event.bubbles).to.be.true;
|
223
|
-
expect(spy.callCount).to.equal(1);
|
224
|
-
});
|
225
|
-
it('does not dispatch a "change" event when an already selected option is clicked', async () => {
|
226
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
227
|
-
<glide-core-dropdown-option
|
228
|
-
label="One"
|
229
|
-
selected
|
230
|
-
></glide-core-dropdown-option>
|
231
|
-
|
232
|
-
<glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
|
233
|
-
</glide-core-dropdown>`);
|
234
|
-
// Wait for it to open.
|
235
|
-
await aTimeout(0);
|
236
|
-
const spy = sinon.spy();
|
237
|
-
component.addEventListener('change', spy);
|
238
|
-
setTimeout(() => {
|
239
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
240
|
-
});
|
241
|
-
await aTimeout(0);
|
242
|
-
expect(spy.callCount).to.equal(0);
|
243
|
-
});
|
244
|
-
it('does not dispatch a "change" event when `value` is changed programmatically', async () => {
|
245
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
246
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
247
|
-
|
248
|
-
<glide-core-dropdown-option
|
249
|
-
label="Two"
|
250
|
-
selected
|
251
|
-
></glide-core-dropdown-option>
|
252
|
-
</glide-core-dropdown>`);
|
253
|
-
const spy = sinon.spy();
|
254
|
-
component.addEventListener('change', spy);
|
255
|
-
setTimeout(() => {
|
256
|
-
component.value = ['one'];
|
257
|
-
});
|
258
|
-
await aTimeout(0);
|
259
|
-
expect(spy.callCount).to.equal(0);
|
260
|
-
});
|
261
|
-
it('continues to dispatch "change" events upon selection after `value` is changed programmatically', async () => {
|
262
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
263
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
264
|
-
|
265
|
-
<glide-core-dropdown-option
|
266
|
-
label="Two"
|
267
|
-
selected
|
268
|
-
></glide-core-dropdown-option>
|
269
|
-
</glide-core-dropdown>`);
|
270
|
-
component.value = ['two'];
|
271
|
-
setTimeout(() => {
|
272
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
273
|
-
});
|
274
|
-
const event = await oneEvent(component, 'change');
|
275
|
-
expect(event instanceof Event).to.be.true;
|
276
|
-
});
|
277
|
-
it('does not dispatch an "input" event when `value` is changed programmatically', async () => {
|
278
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
279
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
280
|
-
|
281
|
-
<glide-core-dropdown-option
|
282
|
-
label="Two"
|
283
|
-
selected
|
284
|
-
></glide-core-dropdown-option>
|
285
|
-
</glide-core-dropdown>`);
|
286
|
-
const spy = sinon.spy();
|
287
|
-
component.addEventListener('input', spy);
|
288
|
-
setTimeout(() => {
|
289
|
-
component.value = ['one'];
|
290
|
-
});
|
291
|
-
await aTimeout(0);
|
292
|
-
expect(spy.callCount).to.equal(0);
|
293
|
-
});
|
294
|
-
it('does not dispatch a "change" event when an already selected option is selected', async () => {
|
295
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
296
|
-
<glide-core-dropdown-option
|
297
|
-
label="One"
|
298
|
-
selected
|
299
|
-
></glide-core-dropdown-option>
|
300
|
-
|
301
|
-
<glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
|
302
|
-
</glide-core-dropdown>`);
|
303
|
-
const spy = sinon.spy();
|
304
|
-
component.addEventListener('change', spy);
|
305
|
-
setTimeout(() => {
|
306
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
307
|
-
});
|
308
|
-
await aTimeout(0);
|
309
|
-
expect(spy.callCount).to.equal(0);
|
310
|
-
});
|
311
|
-
it('does not dispatch an "input" event when an already selected option is selected', async () => {
|
312
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
313
|
-
<glide-core-dropdown-option
|
314
|
-
label="One"
|
315
|
-
selected
|
316
|
-
></glide-core-dropdown-option>
|
317
|
-
|
318
|
-
<glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
|
319
|
-
</glide-core-dropdown>`);
|
320
|
-
const spy = sinon.spy();
|
321
|
-
component.addEventListener('input', spy);
|
322
|
-
setTimeout(() => {
|
323
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
324
|
-
});
|
325
|
-
await aTimeout(0);
|
326
|
-
expect(spy.callCount).to.equal(0);
|
327
|
-
});
|
328
|
-
it('continues to dispatch "input" events upon selection after `value` is changed programmatically', async () => {
|
329
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
330
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
331
|
-
|
332
|
-
<glide-core-dropdown-option
|
333
|
-
label="Two"
|
334
|
-
selected
|
335
|
-
></glide-core-dropdown-option>
|
336
|
-
</glide-core-dropdown>`);
|
337
|
-
component.value = ['two'];
|
338
|
-
setTimeout(() => {
|
339
|
-
component.querySelector('glide-core-dropdown-option')?.click();
|
340
|
-
});
|
341
|
-
const event = await oneEvent(component, 'input');
|
342
|
-
expect(event instanceof Event).to.be.true;
|
343
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './dropdown.option.js';
|
@@ -1 +0,0 @@
|
|
1
|
-
import './dropdown.option.js';
|
@@ -1,140 +0,0 @@
|
|
1
|
-
import './dropdown.option.js';
|
2
|
-
import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import { sendKeys } from '@web/test-runner-commands';
|
4
|
-
import { sendMouse } from '@web/test-runner-commands';
|
5
|
-
import GlideCoreDropdown from './dropdown.js';
|
6
|
-
import GlideCoreDropdownOption from './dropdown.option.js';
|
7
|
-
GlideCoreDropdown.shadowRootOptions.mode = 'open';
|
8
|
-
GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
|
9
|
-
const defaultSlot = html `
|
10
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
11
|
-
<glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
|
12
|
-
<glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
|
13
|
-
<glide-core-dropdown-option label="Four"></glide-core-dropdown-option>
|
14
|
-
<glide-core-dropdown-option label="Five"></glide-core-dropdown-option>
|
15
|
-
<glide-core-dropdown-option label="Six"></glide-core-dropdown-option>
|
16
|
-
<glide-core-dropdown-option label="Seven"></glide-core-dropdown-option>
|
17
|
-
<glide-core-dropdown-option label="Eight"></glide-core-dropdown-option>
|
18
|
-
<glide-core-dropdown-option label="Nine"></glide-core-dropdown-option>
|
19
|
-
<glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
|
20
|
-
<glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
|
21
|
-
`;
|
22
|
-
it('focuses the input when `focus()` is called', async () => {
|
23
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
|
24
|
-
${defaultSlot}
|
25
|
-
</glide-core-dropdown>`);
|
26
|
-
component.focus();
|
27
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
28
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
29
|
-
});
|
30
|
-
it('retains focus on the input when an option is selected via click', async () => {
|
31
|
-
const component = await fixture(html `<glide-core-dropdown
|
32
|
-
label="Label"
|
33
|
-
placeholder="Placeholder"
|
34
|
-
multiple
|
35
|
-
open
|
36
|
-
>
|
37
|
-
${defaultSlot}
|
38
|
-
</glide-core-dropdown>`);
|
39
|
-
// Wait for it to open.
|
40
|
-
await aTimeout(0);
|
41
|
-
component.focus();
|
42
|
-
const option = component.querySelector('glide-core-dropdown-option');
|
43
|
-
assert(option);
|
44
|
-
const { x, y } = option.getBoundingClientRect();
|
45
|
-
// A simple `option.click()` won't do because we need a "mousedown" so that
|
46
|
-
// `#onOptionsMousedown` is covered.
|
47
|
-
await sendMouse({
|
48
|
-
type: 'click',
|
49
|
-
position: [Math.ceil(x), Math.ceil(y)],
|
50
|
-
});
|
51
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
52
|
-
assert(component.shadowRoot?.activeElement);
|
53
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
54
|
-
});
|
55
|
-
it('retains focus on the the input when an option is selected via Enter', async () => {
|
56
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
57
|
-
${defaultSlot}
|
58
|
-
</glide-core-dropdown>`);
|
59
|
-
// Wait for it to open.
|
60
|
-
await aTimeout(0);
|
61
|
-
component.focus();
|
62
|
-
component
|
63
|
-
.querySelector('glide-core-dropdown-option')
|
64
|
-
?.shadowRoot?.querySelector('[data-test="component"]')
|
65
|
-
?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
|
66
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
67
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
68
|
-
});
|
69
|
-
it('retains focus on the the input when the primary button is clicked', async () => {
|
70
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
71
|
-
${defaultSlot}
|
72
|
-
</glide-core-dropdown>`);
|
73
|
-
component.focus();
|
74
|
-
const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
|
75
|
-
assert(button);
|
76
|
-
const { x, y } = button.getBoundingClientRect();
|
77
|
-
// A simple `option.click()` won't do because we need a "mousedown" so that
|
78
|
-
// `#onDropdownMousedown` gets covered.
|
79
|
-
await sendMouse({
|
80
|
-
type: 'click',
|
81
|
-
position: [Math.ceil(x), Math.ceil(y)],
|
82
|
-
});
|
83
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
84
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
85
|
-
});
|
86
|
-
it('focuses the input on submit when required and no option is selected', async () => {
|
87
|
-
const form = document.createElement('form');
|
88
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
|
89
|
-
${defaultSlot}
|
90
|
-
</glide-core-dropdown>`, {
|
91
|
-
parentNode: form,
|
92
|
-
});
|
93
|
-
form.requestSubmit();
|
94
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
95
|
-
expect(component.shadowRoot?.activeElement).to.be.equal(input);
|
96
|
-
});
|
97
|
-
it('focuses the input when `reportValidity` is called when required and no option is selected', async () => {
|
98
|
-
const form = document.createElement('form');
|
99
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
|
100
|
-
${defaultSlot}
|
101
|
-
</glide-core-dropdown>`, { parentNode: form });
|
102
|
-
component.reportValidity();
|
103
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
104
|
-
expect(component.shadowRoot?.activeElement).to.equal(input);
|
105
|
-
});
|
106
|
-
it('does not focus the input when `checkValidity` is called', async () => {
|
107
|
-
const form = document.createElement('form');
|
108
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
|
109
|
-
${defaultSlot}
|
110
|
-
</glide-core-dropdown>`, { parentNode: form });
|
111
|
-
component.checkValidity();
|
112
|
-
expect(component.shadowRoot?.activeElement).to.equal(null);
|
113
|
-
});
|
114
|
-
it('sets the `value` of its `<input>` to the selected option when focus is lost', async () => {
|
115
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
|
116
|
-
${defaultSlot}
|
117
|
-
</glide-core-dropdown>`);
|
118
|
-
// Wait for it to open.
|
119
|
-
await aTimeout(0);
|
120
|
-
const option = component.querySelector('glide-core-dropdown-option');
|
121
|
-
assert(option);
|
122
|
-
option.selected = true;
|
123
|
-
// Now type something other than "One" so we can check that it's reverted
|
124
|
-
// back to "One" when focus is lost.
|
125
|
-
component.focus();
|
126
|
-
await sendKeys({ type: 'o' });
|
127
|
-
component.blur();
|
128
|
-
const input = component.shadowRoot?.querySelector('[data-test="input"]');
|
129
|
-
expect(input?.value).to.equal('One');
|
130
|
-
});
|
131
|
-
it('selects the filter text on focus', async () => {
|
132
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
|
133
|
-
${defaultSlot}
|
134
|
-
</glide-core-dropdown>`);
|
135
|
-
component.focus();
|
136
|
-
await sendKeys({ type: 'one' });
|
137
|
-
component.blur();
|
138
|
-
component.focus();
|
139
|
-
expect(window.getSelection()?.toString()).to.equal('one');
|
140
|
-
});
|
@@ -1,107 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './dropdown.option.js';
|
3
|
-
import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
|
4
|
-
import { sendKeys } from '@web/test-runner-commands';
|
5
|
-
import GlideCoreDropdown from './dropdown.js';
|
6
|
-
import GlideCoreDropdownOption from './dropdown.option.js';
|
7
|
-
GlideCoreDropdown.shadowRootOptions.mode = 'open';
|
8
|
-
GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
|
9
|
-
it('closes and reports validity when it loses focus', async () => {
|
10
|
-
const div = document.createElement('div');
|
11
|
-
const component = await fixture(html `<glide-core-dropdown
|
12
|
-
label="Label"
|
13
|
-
placeholder="Placeholder"
|
14
|
-
open
|
15
|
-
required
|
16
|
-
>
|
17
|
-
<glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
|
18
|
-
</glide-core-dropdown>`, { parentNode: div });
|
19
|
-
const button = document.createElement('button');
|
20
|
-
div.prepend(button);
|
21
|
-
component.focus();
|
22
|
-
// Move focus to the body.
|
23
|
-
await sendKeys({ press: 'Tab' });
|
24
|
-
expect(component.open).to.be.false;
|
25
|
-
component.open = true;
|
26
|
-
component.focus();
|
27
|
-
// Move focus to the primary button.
|
28
|
-
await sendKeys({ down: 'Shift' });
|
29
|
-
await sendKeys({ press: 'Tab' });
|
30
|
-
await sendKeys({ up: 'Shift' });
|
31
|
-
expect(component.open).to.be.false;
|
32
|
-
expect(component.shadowRoot?.activeElement).to.equal(null);
|
33
|
-
expect(component.validity.valid).to.be.false;
|
34
|
-
expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
|
35
|
-
.to.be.true;
|
36
|
-
});
|
37
|
-
it('is focused when clicked', async () => {
|
38
|
-
const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
|
39
|
-
<glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
|
40
|
-
</glide-core-dropdown>`);
|
41
|
-
// Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
|
42
|
-
// which puts us in a guard in the event handler. `Event` has no `detail` property
|
43
|
-
// and would work. `CustomEvent` is used for completeness and to get us as close as
|
44
|
-
// possible to a real click. See the comment in the handler for more information.
|
45
|
-
const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
|
46
|
-
button?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
|
47
|
-
expect(component.shadowRoot?.activeElement).to.equal(button);
|
48
|
-
});
|
49
|
-
it('focuses the Add button on ArrowDown', async () => {
|
50
|
-
const component = await fixture(html `<glide-core-dropdown
|
51
|
-
add-button-label="Add"
|
52
|
-
label="Label"
|
53
|
-
placeholder="Placeholder"
|
54
|
-
open
|
55
|
-
>
|
56
|
-
<glide-core-dropdown-option label="One"></glide-core-dropdown-option>
|
57
|
-
<glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
|
58
|
-
</glide-core-dropdown>`);
|
59
|
-
// Wait for it to open.
|
60
|
-
await aTimeout(0);
|
61
|
-
const options = component.querySelectorAll('glide-core-dropdown-option');
|
62
|
-
component.focus();
|
63
|
-
await sendKeys({ press: 'ArrowDown' }); // Two
|
64
|
-
await sendKeys({ press: 'ArrowDown' }); // Add button
|
65
|
-
const addButton = component.shadowRoot?.querySelector('[data-test="add-button"]');
|
66
|
-
expect(options[0]?.privateActive).to.be.false;
|
67
|
-
expect(options[0]?.privateActive).to.be.false;
|
68
|
-
expect(options[1]?.privateActive).to.be.false;
|
69
|
-
expect(options[1]?.privateIsEditActive).to.be.false;
|
70
|
-
expect(options[1]?.privateIsTooltipOpen).to.be.false;
|
71
|
-
expect(component.shadowRoot?.activeElement).to.equal(addButton);
|
72
|
-
});
|
73
|
-
it('returns focus to itself on Escape when the Add button has focus', async () => {
|
74
|
-
const component = await fixture(html `<glide-core-dropdown
|
75
|
-
add-button-label="Add"
|
76
|
-
label="Label"
|
77
|
-
placeholder="Placeholder"
|
78
|
-
open
|
79
|
-
>
|
80
|
-
<glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
|
81
|
-
</glide-core-dropdown>`);
|
82
|
-
// Wait for it to open.
|
83
|
-
await aTimeout(0);
|
84
|
-
component.focus();
|
85
|
-
await sendKeys({ press: 'Tab' });
|
86
|
-
await sendKeys({ press: 'Escape' });
|
87
|
-
expect(document.activeElement).to.equal(component);
|
88
|
-
});
|
89
|
-
it('returns focus to itself when an option is activated and the Add button has focus', async () => {
|
90
|
-
const component = await fixture(html `<glide-core-dropdown
|
91
|
-
add-button-label="Add"
|
92
|
-
label="Label"
|
93
|
-
placeholder="Placeholder"
|
94
|
-
open
|
95
|
-
>
|
96
|
-
<glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
|
97
|
-
</glide-core-dropdown>`);
|
98
|
-
// Wait for it to open.
|
99
|
-
await aTimeout(0);
|
100
|
-
component.focus();
|
101
|
-
await sendKeys({ press: 'Tab' });
|
102
|
-
component
|
103
|
-
.querySelector('glide-core-dropdown-option')
|
104
|
-
?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
105
|
-
await elementUpdated(component);
|
106
|
-
expect(document.activeElement).to.equal(component);
|
107
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './dropdown.option.js';
|