@crowdstrike/glide-core 0.13.1 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/drawer.d.ts +2 -2
- package/dist/drawer.js +1 -1
- package/dist/drawer.styles.js +3 -14
- package/dist/dropdown.styles.js +3 -2
- package/dist/input.styles.js +1 -0
- package/dist/styles/variables.css +1 -1
- package/dist/textarea.styles.js +2 -0
- package/dist/toasts.d.ts +2 -2
- package/dist/toasts.toast.d.ts +1 -1
- package/dist/toasts.toast.js +1 -1
- package/dist/toasts.toast.styles.js +8 -0
- package/dist/tree.item.styles.js +2 -2
- package/package.json +8 -5
- package/dist/accordion.stories.d.ts +0 -6
- package/dist/accordion.test.basics.d.ts +0 -1
- package/dist/accordion.test.basics.js +0 -28
- package/dist/accordion.test.events.d.ts +0 -1
- package/dist/accordion.test.events.js +0 -28
- package/dist/accordion.test.focus.d.ts +0 -1
- package/dist/accordion.test.focus.js +0 -11
- package/dist/accordion.test.interactions.d.ts +0 -1
- package/dist/accordion.test.interactions.js +0 -75
- package/dist/button-group.button.test.basics.d.ts +0 -1
- package/dist/button-group.button.test.basics.js +0 -97
- package/dist/button-group.button.test.events.d.ts +0 -1
- package/dist/button-group.button.test.events.js +0 -15
- package/dist/button-group.button.test.focus.d.ts +0 -1
- package/dist/button-group.button.test.focus.js +0 -13
- package/dist/button-group.button.test.interactions.d.ts +0 -1
- package/dist/button-group.button.test.interactions.js +0 -42
- package/dist/button-group.stories.d.ts +0 -7
- package/dist/button-group.test.basics.d.ts +0 -1
- package/dist/button-group.test.basics.js +0 -148
- package/dist/button-group.test.events.d.ts +0 -1
- package/dist/button-group.test.events.js +0 -241
- package/dist/button-group.test.focus.d.ts +0 -1
- package/dist/button-group.test.focus.js +0 -39
- package/dist/button-group.test.interactions.d.ts +0 -1
- package/dist/button-group.test.interactions.js +0 -91
- package/dist/button.stories.d.ts +0 -7
- package/dist/button.test.basics.d.ts +0 -1
- package/dist/button.test.basics.js +0 -69
- package/dist/button.test.events.d.ts +0 -1
- package/dist/button.test.events.js +0 -102
- package/dist/checkbox-group.stories.d.ts +0 -6
- package/dist/checkbox-group.test.basics.d.ts +0 -1
- package/dist/checkbox-group.test.basics.js +0 -116
- package/dist/checkbox-group.test.events.d.ts +0 -1
- package/dist/checkbox-group.test.events.js +0 -111
- package/dist/checkbox-group.test.focus.d.ts +0 -1
- package/dist/checkbox-group.test.focus.js +0 -70
- package/dist/checkbox-group.test.form.d.ts +0 -1
- package/dist/checkbox-group.test.form.js +0 -131
- package/dist/checkbox-group.test.interactions.d.ts +0 -1
- package/dist/checkbox-group.test.interactions.js +0 -82
- package/dist/checkbox-group.test.validity.d.ts +0 -1
- package/dist/checkbox-group.test.validity.js +0 -145
- package/dist/checkbox.stories.d.ts +0 -5
- package/dist/checkbox.test.basics.d.ts +0 -1
- package/dist/checkbox.test.basics.js +0 -90
- package/dist/checkbox.test.events.d.ts +0 -1
- package/dist/checkbox.test.events.js +0 -105
- package/dist/checkbox.test.focus.d.ts +0 -1
- package/dist/checkbox.test.focus.js +0 -51
- package/dist/checkbox.test.form.d.ts +0 -1
- package/dist/checkbox.test.form.js +0 -133
- package/dist/checkbox.test.interactions.d.ts +0 -1
- package/dist/checkbox.test.interactions.js +0 -131
- package/dist/checkbox.test.validity.d.ts +0 -1
- package/dist/checkbox.test.validity.js +0 -128
- package/dist/drawer.stories.d.ts +0 -6
- package/dist/drawer.test.accessibility.d.ts +0 -1
- package/dist/drawer.test.accessibility.js +0 -22
- package/dist/drawer.test.basics.d.ts +0 -1
- package/dist/drawer.test.basics.js +0 -44
- package/dist/drawer.test.closing.d.ts +0 -1
- package/dist/drawer.test.closing.js +0 -40
- package/dist/drawer.test.events.d.ts +0 -1
- package/dist/drawer.test.events.js +0 -42
- package/dist/drawer.test.methods.d.ts +0 -1
- package/dist/drawer.test.methods.js +0 -35
- package/dist/dropdown.option.test.basics.d.ts +0 -1
- package/dist/dropdown.option.test.basics.js +0 -34
- package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
- package/dist/dropdown.option.test.basics.multiple.js +0 -36
- package/dist/dropdown.option.test.basics.single.d.ts +0 -1
- package/dist/dropdown.option.test.basics.single.js +0 -29
- package/dist/dropdown.option.test.events.d.ts +0 -1
- package/dist/dropdown.option.test.events.js +0 -36
- package/dist/dropdown.option.test.focus.d.ts +0 -1
- package/dist/dropdown.option.test.focus.js +0 -11
- package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
- package/dist/dropdown.option.test.interactions.multiple.js +0 -42
- package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
- package/dist/dropdown.option.test.interactions.single.js +0 -76
- package/dist/dropdown.stories.d.ts +0 -8
- package/dist/dropdown.test.basics.d.ts +0 -1
- package/dist/dropdown.test.basics.filterable.d.ts +0 -1
- package/dist/dropdown.test.basics.filterable.js +0 -108
- package/dist/dropdown.test.basics.js +0 -181
- package/dist/dropdown.test.basics.multiple.d.ts +0 -1
- package/dist/dropdown.test.basics.multiple.js +0 -259
- package/dist/dropdown.test.basics.single.d.ts +0 -1
- package/dist/dropdown.test.basics.single.js +0 -122
- package/dist/dropdown.test.events.d.ts +0 -1
- package/dist/dropdown.test.events.filterable.d.ts +0 -1
- package/dist/dropdown.test.events.filterable.js +0 -31
- package/dist/dropdown.test.events.js +0 -251
- package/dist/dropdown.test.events.multiple.d.ts +0 -1
- package/dist/dropdown.test.events.multiple.js +0 -446
- package/dist/dropdown.test.events.single.d.ts +0 -1
- package/dist/dropdown.test.events.single.js +0 -343
- package/dist/dropdown.test.focus.d.ts +0 -1
- package/dist/dropdown.test.focus.filterable.d.ts +0 -1
- package/dist/dropdown.test.focus.filterable.js +0 -140
- package/dist/dropdown.test.focus.js +0 -107
- package/dist/dropdown.test.focus.multiple.d.ts +0 -1
- package/dist/dropdown.test.focus.multiple.js +0 -170
- package/dist/dropdown.test.focus.single.d.ts +0 -1
- package/dist/dropdown.test.focus.single.js +0 -42
- package/dist/dropdown.test.form.d.ts +0 -1
- package/dist/dropdown.test.form.js +0 -74
- package/dist/dropdown.test.form.multiple.d.ts +0 -1
- package/dist/dropdown.test.form.multiple.js +0 -151
- package/dist/dropdown.test.form.single.d.ts +0 -1
- package/dist/dropdown.test.form.single.js +0 -129
- package/dist/dropdown.test.interactions.d.ts +0 -1
- package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
- package/dist/dropdown.test.interactions.filterable.js +0 -805
- package/dist/dropdown.test.interactions.js +0 -696
- package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
- package/dist/dropdown.test.interactions.multiple.js +0 -1026
- package/dist/dropdown.test.interactions.single.d.ts +0 -1
- package/dist/dropdown.test.interactions.single.js +0 -569
- package/dist/dropdown.test.validity.d.ts +0 -1
- package/dist/dropdown.test.validity.js +0 -181
- package/dist/form-controls-layout.stories.d.ts +0 -10
- package/dist/form-controls-layout.test.basics.d.ts +0 -2
- package/dist/form-controls-layout.test.basics.js +0 -75
- package/dist/form-controls-layout.test.interactions.d.ts +0 -2
- package/dist/form-controls-layout.test.interactions.js +0 -26
- package/dist/icon-button.stories.d.ts +0 -6
- package/dist/icon-button.test.basics.d.ts +0 -1
- package/dist/icon-button.test.basics.js +0 -43
- package/dist/icon-button.test.focus.d.ts +0 -1
- package/dist/icon-button.test.focus.js +0 -13
- package/dist/input.stories.d.ts +0 -8
- package/dist/input.test.basics.d.ts +0 -1
- package/dist/input.test.basics.js +0 -138
- package/dist/input.test.events.d.ts +0 -1
- package/dist/input.test.events.js +0 -98
- package/dist/input.test.focus.d.ts +0 -1
- package/dist/input.test.focus.js +0 -58
- package/dist/input.test.form.d.ts +0 -1
- package/dist/input.test.form.js +0 -74
- package/dist/input.test.validity.d.ts +0 -1
- package/dist/input.test.validity.js +0 -258
- package/dist/label.test.basics.d.ts +0 -1
- package/dist/label.test.basics.js +0 -136
- package/dist/menu.button.test.basics.d.ts +0 -1
- package/dist/menu.button.test.basics.js +0 -43
- package/dist/menu.link.test.basics.d.ts +0 -1
- package/dist/menu.link.test.basics.js +0 -47
- package/dist/menu.options.test.basics.d.ts +0 -2
- package/dist/menu.options.test.basics.js +0 -44
- package/dist/menu.options.test.events.d.ts +0 -1
- package/dist/menu.options.test.events.js +0 -19
- package/dist/menu.stories.d.ts +0 -11
- package/dist/menu.test.basics.d.ts +0 -1
- package/dist/menu.test.basics.js +0 -178
- package/dist/menu.test.events.d.ts +0 -3
- package/dist/menu.test.events.js +0 -125
- package/dist/menu.test.focus.d.ts +0 -2
- package/dist/menu.test.focus.js +0 -102
- package/dist/menu.test.interactions.d.ts +0 -3
- package/dist/menu.test.interactions.js +0 -1069
- package/dist/modal.icon-button.test.basics.d.ts +0 -1
- package/dist/modal.icon-button.test.basics.js +0 -46
- package/dist/modal.stories.d.ts +0 -13
- package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
- package/dist/modal.tertiary-icon.test.basics.js +0 -60
- package/dist/modal.test.accessibility.d.ts +0 -1
- package/dist/modal.test.accessibility.js +0 -38
- package/dist/modal.test.basics.d.ts +0 -3
- package/dist/modal.test.basics.js +0 -204
- package/dist/modal.test.close.d.ts +0 -1
- package/dist/modal.test.close.js +0 -35
- package/dist/modal.test.events.d.ts +0 -1
- package/dist/modal.test.events.js +0 -99
- package/dist/modal.test.lock-scroll.d.ts +0 -1
- package/dist/modal.test.lock-scroll.js +0 -67
- package/dist/modal.test.methods.d.ts +0 -1
- package/dist/modal.test.methods.js +0 -20
- package/dist/modal.test.scrollbars.d.ts +0 -1
- package/dist/modal.test.scrollbars.js +0 -18
- package/dist/radio-group.stories.d.ts +0 -6
- package/dist/radio-group.test.basics.d.ts +0 -2
- package/dist/radio-group.test.basics.js +0 -324
- package/dist/radio-group.test.events.d.ts +0 -2
- package/dist/radio-group.test.events.js +0 -278
- package/dist/radio-group.test.focus.d.ts +0 -2
- package/dist/radio-group.test.focus.js +0 -95
- package/dist/radio-group.test.form.d.ts +0 -1
- package/dist/radio-group.test.form.js +0 -124
- package/dist/radio-group.test.validity.d.ts +0 -1
- package/dist/radio-group.test.validity.js +0 -311
- package/dist/split-button.primary-button.test.basics.d.ts +0 -1
- package/dist/split-button.primary-button.test.basics.js +0 -31
- package/dist/split-button.primary-button.test.focus.d.ts +0 -1
- package/dist/split-button.primary-button.test.focus.js +0 -14
- package/dist/split-button.primary-link.test.basics.d.ts +0 -1
- package/dist/split-button.primary-link.test.basics.js +0 -30
- package/dist/split-button.primary-link.test.focus.d.ts +0 -1
- package/dist/split-button.primary-link.test.focus.js +0 -15
- package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
- package/dist/split-button.secondary-button.test.basics.js +0 -58
- package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
- package/dist/split-button.secondary-button.test.focus.js +0 -14
- package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
- package/dist/split-button.secondary-button.test.interactions.js +0 -30
- package/dist/split-button.stories.d.ts +0 -13
- package/dist/split-button.test.basics.d.ts +0 -2
- package/dist/split-button.test.basics.js +0 -87
- package/dist/split-button.test.interactions.d.ts +0 -4
- package/dist/split-button.test.interactions.js +0 -51
- package/dist/tab.group.test.basics.d.ts +0 -3
- package/dist/tab.group.test.basics.js +0 -234
- package/dist/tab.group.test.interactions.d.ts +0 -3
- package/dist/tab.group.test.interactions.js +0 -434
- package/dist/tab.test.basics.d.ts +0 -1
- package/dist/tab.test.basics.js +0 -50
- package/dist/tabs.stories.d.ts +0 -8
- package/dist/tag.stories.d.ts +0 -7
- package/dist/tag.test.basics.d.ts +0 -1
- package/dist/tag.test.basics.js +0 -28
- package/dist/tag.test.events.d.ts +0 -1
- package/dist/tag.test.events.js +0 -93
- package/dist/tag.test.focus.d.ts +0 -1
- package/dist/tag.test.focus.js +0 -10
- package/dist/tag.test.interactions.d.ts +0 -1
- package/dist/tag.test.interactions.js +0 -36
- package/dist/textarea.stories.d.ts +0 -5
- package/dist/textarea.test.basics.d.ts +0 -1
- package/dist/textarea.test.basics.js +0 -177
- package/dist/textarea.test.events.d.ts +0 -1
- package/dist/textarea.test.events.js +0 -106
- package/dist/textarea.test.form.d.ts +0 -1
- package/dist/textarea.test.form.js +0 -71
- package/dist/textarea.test.validity.d.ts +0 -1
- package/dist/textarea.test.validity.js +0 -204
- package/dist/toasts.stories.d.ts +0 -7
- package/dist/toasts.test.basics.d.ts +0 -1
- package/dist/toasts.test.basics.js +0 -115
- package/dist/toasts.toast.test.basics.d.ts +0 -1
- package/dist/toasts.toast.test.basics.js +0 -139
- package/dist/toggle.stories.d.ts +0 -4
- package/dist/toggle.test.basics.d.ts +0 -1
- package/dist/toggle.test.basics.js +0 -69
- package/dist/toggle.test.events.d.ts +0 -1
- package/dist/toggle.test.events.js +0 -30
- package/dist/toggle.test.focus.d.ts +0 -1
- package/dist/toggle.test.focus.js +0 -9
- package/dist/toggle.test.interactions.d.ts +0 -1
- package/dist/toggle.test.interactions.js +0 -81
- package/dist/tooltip.stories.d.ts +0 -7
- package/dist/tooltip.test.basics.d.ts +0 -1
- package/dist/tooltip.test.basics.js +0 -100
- package/dist/tooltip.test.interactions.d.ts +0 -1
- package/dist/tooltip.test.interactions.js +0 -203
- package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
- package/dist/tree.item.icon-button.test.basics.js +0 -22
- package/dist/tree.item.menu.test.basics.d.ts +0 -1
- package/dist/tree.item.menu.test.basics.js +0 -86
- package/dist/tree.item.test.basics.d.ts +0 -2
- package/dist/tree.item.test.basics.js +0 -138
- package/dist/tree.stories.d.ts +0 -9
- package/dist/tree.test.aria.d.ts +0 -1
- package/dist/tree.test.aria.js +0 -86
- package/dist/tree.test.basics.d.ts +0 -3
- package/dist/tree.test.basics.js +0 -130
- package/dist/tree.test.events.d.ts +0 -2
- package/dist/tree.test.events.js +0 -19
- package/dist/tree.test.focus.d.ts +0 -1
- package/dist/tree.test.focus.js +0 -383
@@ -1,36 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { aTimeout, expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import { sendKeys } from '@web/test-runner-commands';
|
4
|
-
import GlideCoreTag from './tag.js';
|
5
|
-
GlideCoreTag.shadowRootOptions.mode = 'open';
|
6
|
-
it('removes itself on click', async () => {
|
7
|
-
const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
|
8
|
-
component.click();
|
9
|
-
const animationDuration = component.shadowRoot?.querySelector('[data-test="component"]')?.dataset.animationDuration;
|
10
|
-
await aTimeout(Number(animationDuration));
|
11
|
-
expect(document.querySelector('glide-core-tag')).to.be.null;
|
12
|
-
});
|
13
|
-
it('does not remove itself on click when disabled', async () => {
|
14
|
-
const component = await fixture(html `<glide-core-tag label="Label" disabled removable></glide-core-tag>`);
|
15
|
-
component.click();
|
16
|
-
const animationDuration = component.shadowRoot?.querySelector('[data-test="component"]')?.dataset.animationDuration;
|
17
|
-
await aTimeout(Number(animationDuration));
|
18
|
-
expect(document.querySelector('glide-core-tag') instanceof GlideCoreTag).to.be
|
19
|
-
.true;
|
20
|
-
});
|
21
|
-
it('removes itself on Space', async () => {
|
22
|
-
const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
|
23
|
-
component.focus();
|
24
|
-
await sendKeys({ press: ' ' });
|
25
|
-
const animationDuration = component.shadowRoot?.querySelector('[data-test="component"]')?.dataset.animationDuration;
|
26
|
-
await aTimeout(Number(animationDuration));
|
27
|
-
expect(document.querySelector('glide-core-tag')).to.be.null;
|
28
|
-
});
|
29
|
-
it('removes itself on Enter', async () => {
|
30
|
-
const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
|
31
|
-
component.focus();
|
32
|
-
await sendKeys({ press: 'Enter' });
|
33
|
-
const animationDuration = component.shadowRoot?.querySelector('[data-test="component"]')?.dataset.animationDuration;
|
34
|
-
await aTimeout(Number(animationDuration));
|
35
|
-
expect(document.querySelector('glide-core-tag')).to.be.null;
|
36
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,177 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import { sendKeys } from '@web/test-runner-commands';
|
4
|
-
import GlideCoreTextarea from './textarea.js';
|
5
|
-
GlideCoreTextarea.shadowRootOptions.mode = 'open';
|
6
|
-
it('registers', async () => {
|
7
|
-
expect(window.customElements.get('glide-core-textarea')).to.equal(GlideCoreTextarea);
|
8
|
-
});
|
9
|
-
it('is accessible', async () => {
|
10
|
-
const component = await fixture(html `<glide-core-textarea
|
11
|
-
value="value"
|
12
|
-
label="label"
|
13
|
-
></glide-core-textarea>`);
|
14
|
-
await expect(component).to.be.accessible();
|
15
|
-
});
|
16
|
-
it('renders a textarea with two rows and value when attribute `value` is set ', async () => {
|
17
|
-
const component = await fixture(html `<glide-core-textarea
|
18
|
-
value="value"
|
19
|
-
label="label"
|
20
|
-
></glide-core-textarea>`);
|
21
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
22
|
-
expect(component);
|
23
|
-
expect(component?.getAttribute('rows')).to.equal('2');
|
24
|
-
expect(textarea).to.exist;
|
25
|
-
expect(textarea?.getAttribute('rows')).to.equal('2');
|
26
|
-
});
|
27
|
-
it('renders the `rows` attribute on the textarea when set', async () => {
|
28
|
-
const component = await fixture(html `<glide-core-textarea
|
29
|
-
value="value"
|
30
|
-
label="label"
|
31
|
-
rows="5"
|
32
|
-
></glide-core-textarea>`);
|
33
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
34
|
-
expect(textarea?.getAttribute('rows')).to.equal('5');
|
35
|
-
});
|
36
|
-
it('renders a label when attribute `label` is set', async () => {
|
37
|
-
const component = await fixture(html `<glide-core-textarea
|
38
|
-
value="value"
|
39
|
-
label="label"
|
40
|
-
></glide-core-textarea>`);
|
41
|
-
const label = component.shadowRoot.querySelector('label');
|
42
|
-
expect(label).to.exist;
|
43
|
-
expect(label?.textContent?.trim()).to.be.equal('label');
|
44
|
-
});
|
45
|
-
it('renders the textarea as readonly when attribute `readonly` is set', async () => {
|
46
|
-
const component = await fixture(html `<glide-core-textarea
|
47
|
-
value="value"
|
48
|
-
label="label"
|
49
|
-
readonly
|
50
|
-
></glide-core-textarea>`);
|
51
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
52
|
-
expect(textarea?.hasAttribute('readonly')).to.be.true;
|
53
|
-
});
|
54
|
-
it('renders the textarea as disabled when attribute `disabled` is set', async () => {
|
55
|
-
const component = await fixture(html `<glide-core-textarea
|
56
|
-
value="value"
|
57
|
-
label="label"
|
58
|
-
disabled
|
59
|
-
></glide-core-textarea>`);
|
60
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
61
|
-
expect(textarea?.hasAttribute('disabled')).to.be.true;
|
62
|
-
});
|
63
|
-
it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
|
64
|
-
const component = await fixture(html `<glide-core-textarea
|
65
|
-
value=""
|
66
|
-
label="label"
|
67
|
-
placeholder="placeholder"
|
68
|
-
></glide-core-textarea>`);
|
69
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
70
|
-
expect(textarea?.getAttribute('placeholder')).to.equal('placeholder');
|
71
|
-
});
|
72
|
-
it('renders `required` on textarea when set', async () => {
|
73
|
-
const component = await fixture(html `<glide-core-textarea
|
74
|
-
value="value"
|
75
|
-
label="label"
|
76
|
-
required
|
77
|
-
></glide-core-textarea>`);
|
78
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
79
|
-
expect(textarea?.hasAttribute('required')).to.be.true;
|
80
|
-
});
|
81
|
-
it('renders a `name` attribute on the textarea when set', async () => {
|
82
|
-
const component = await fixture(html `<glide-core-textarea
|
83
|
-
value="value"
|
84
|
-
label="label"
|
85
|
-
name="test-name"
|
86
|
-
></glide-core-textarea>`);
|
87
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
88
|
-
expect(textarea?.getAttribute('name')).to.equal('test-name');
|
89
|
-
});
|
90
|
-
it('supports a "tooltip" slot', async () => {
|
91
|
-
const component = await fixture(html `
|
92
|
-
<glide-core-textarea value="value" label="label" required>
|
93
|
-
<div slot="tooltip">Tooltip</div>
|
94
|
-
</glide-core-textarea>
|
95
|
-
`);
|
96
|
-
const assignedElements = component.shadowRoot
|
97
|
-
?.querySelector('slot[name="tooltip"]')
|
98
|
-
?.assignedElements();
|
99
|
-
expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
|
100
|
-
});
|
101
|
-
it('renders a slot with description', async () => {
|
102
|
-
const component = await fixture(html `<glide-core-textarea value="value" label="label"
|
103
|
-
><span slot="description" data-test-content
|
104
|
-
>Description</span
|
105
|
-
></glide-core-textarea
|
106
|
-
>`);
|
107
|
-
expect(component).to.exist;
|
108
|
-
const contentRendered = component.querySelector('[data-test-content]');
|
109
|
-
expect(contentRendered).to.exist;
|
110
|
-
expect(contentRendered?.textContent).to.be.equal('Description');
|
111
|
-
});
|
112
|
-
it('displays visually hidden character count text for screenreaders', async () => {
|
113
|
-
const component = await fixture(html `<glide-core-textarea
|
114
|
-
label="label"
|
115
|
-
maxlength="10"
|
116
|
-
></glide-core-textarea>`);
|
117
|
-
const maxCharacterCountAnnouncement = component.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
|
118
|
-
expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 10');
|
119
|
-
});
|
120
|
-
it('renders a character count when attribute `maxlength` is set greater than zero', async () => {
|
121
|
-
const component = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="10"
|
122
|
-
><span slot="description">Description</span></glide-core-textarea
|
123
|
-
>`);
|
124
|
-
const container = component.shadowRoot.querySelector('[data-test="character-count-text"]');
|
125
|
-
expect(container?.textContent?.trim()).to.be.equal('5/10');
|
126
|
-
});
|
127
|
-
it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
|
128
|
-
const component = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="0"
|
129
|
-
><span slot="description">Description</span></glide-core-textarea
|
130
|
-
>`);
|
131
|
-
const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
|
132
|
-
expect(container).to.be.null;
|
133
|
-
});
|
134
|
-
it('focuses the textarea when the label is clicked', async () => {
|
135
|
-
const component = await fixture(html `<glide-core-textarea
|
136
|
-
value="value"
|
137
|
-
label="label"
|
138
|
-
></glide-core-textarea>`);
|
139
|
-
const label = component.shadowRoot.querySelector('label');
|
140
|
-
label?.click();
|
141
|
-
expect(component).to.have.focus;
|
142
|
-
await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
|
143
|
-
});
|
144
|
-
it('has tabbable textarea', async () => {
|
145
|
-
const component = await fixture(html `<glide-core-textarea
|
146
|
-
value="value"
|
147
|
-
label="label"
|
148
|
-
></glide-core-textarea>`);
|
149
|
-
await sendKeys({ press: 'Tab' });
|
150
|
-
expect(component).to.have.focus;
|
151
|
-
await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
|
152
|
-
});
|
153
|
-
it('renders text when typed into text area', async () => {
|
154
|
-
const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
|
155
|
-
const textarea = component.shadowRoot.querySelector('textarea');
|
156
|
-
component.focus();
|
157
|
-
await sendKeys({ type: 'test text' });
|
158
|
-
expect(textarea?.value).to.equal('test text');
|
159
|
-
});
|
160
|
-
it('returns the content of the textarea when getting the `value` property', async () => {
|
161
|
-
const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
|
162
|
-
component.focus();
|
163
|
-
await sendKeys({ type: 'test text' });
|
164
|
-
expect(component.value).to.equal('test text');
|
165
|
-
});
|
166
|
-
it('focuses the textarea when `focus()` is called', async () => {
|
167
|
-
const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
|
168
|
-
component.focus();
|
169
|
-
await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
|
170
|
-
});
|
171
|
-
it('blurs the textarea when `blur` is called', async () => {
|
172
|
-
const component = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
|
173
|
-
component.focus();
|
174
|
-
await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
|
175
|
-
component.blur();
|
176
|
-
await expect(component.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.not.equal('textarea');
|
177
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './textarea.js';
|
@@ -1,106 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './textarea.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
|
-
it('dispatches a `input` event when typed in', async () => {
|
7
|
-
const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
|
8
|
-
setTimeout(async () => {
|
9
|
-
component.focus();
|
10
|
-
await sendKeys({ type: 'testing' });
|
11
|
-
component.blur();
|
12
|
-
});
|
13
|
-
const event = await oneEvent(component, 'input');
|
14
|
-
expect(event instanceof Event).to.be.true;
|
15
|
-
expect(event.bubbles).to.be.true;
|
16
|
-
});
|
17
|
-
it('dispatches an `change` event when typed in', async () => {
|
18
|
-
const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
|
19
|
-
setTimeout(async () => {
|
20
|
-
component.focus();
|
21
|
-
await sendKeys({ type: 'testing' });
|
22
|
-
component.blur();
|
23
|
-
});
|
24
|
-
const event = await oneEvent(component, 'change');
|
25
|
-
expect(event instanceof Event).to.be.true;
|
26
|
-
expect(event.bubbles).to.be.true;
|
27
|
-
});
|
28
|
-
it('dispatches an `invalid` event on submit when required and no value', async () => {
|
29
|
-
const form = document.createElement('form');
|
30
|
-
const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
|
31
|
-
parentNode: form,
|
32
|
-
});
|
33
|
-
setTimeout(() => form.requestSubmit());
|
34
|
-
const event = await oneEvent(component, 'invalid');
|
35
|
-
expect(event instanceof Event).to.be.true;
|
36
|
-
});
|
37
|
-
it('dispatches an `invalid` event after `checkValidity` is called when required and no value', async () => {
|
38
|
-
const form = document.createElement('form');
|
39
|
-
const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
|
40
|
-
parentNode: form,
|
41
|
-
});
|
42
|
-
setTimeout(() => component.checkValidity());
|
43
|
-
const event = await oneEvent(component, 'invalid');
|
44
|
-
expect(event instanceof Event).to.be.true;
|
45
|
-
});
|
46
|
-
it('dispatches an `invalid` event after `reportValidity` is called when required and no value', async () => {
|
47
|
-
const form = document.createElement('form');
|
48
|
-
const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
|
49
|
-
parentNode: form,
|
50
|
-
});
|
51
|
-
setTimeout(() => component.reportValidity());
|
52
|
-
const event = await oneEvent(component, 'invalid');
|
53
|
-
expect(event instanceof Event).to.be.true;
|
54
|
-
});
|
55
|
-
it('does not dispatch an `invalid` event after `checkValidity` is called when not required', async () => {
|
56
|
-
const form = document.createElement('form');
|
57
|
-
const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
|
58
|
-
parentNode: form,
|
59
|
-
});
|
60
|
-
const spy = sinon.spy();
|
61
|
-
component.addEventListener('invalid', spy);
|
62
|
-
component.checkValidity();
|
63
|
-
await aTimeout(0);
|
64
|
-
expect(spy.callCount).to.equal(0);
|
65
|
-
});
|
66
|
-
it('does not dispatch an `invalid` event after `checkValidity` is called when required, no value, and disabled', async () => {
|
67
|
-
const form = document.createElement('form');
|
68
|
-
const component = await fixture(html `<glide-core-textarea
|
69
|
-
label="label"
|
70
|
-
required
|
71
|
-
disabled
|
72
|
-
></glide-core-textarea>`, {
|
73
|
-
parentNode: form,
|
74
|
-
});
|
75
|
-
const spy = sinon.spy();
|
76
|
-
component.addEventListener('invalid', spy);
|
77
|
-
component.checkValidity();
|
78
|
-
await aTimeout(0);
|
79
|
-
expect(spy.callCount).to.equal(0);
|
80
|
-
});
|
81
|
-
it('does not dispatch an `invalid` event when `reportValidity` is called when not required,', async () => {
|
82
|
-
const form = document.createElement('form');
|
83
|
-
const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
|
84
|
-
parentNode: form,
|
85
|
-
});
|
86
|
-
const spy = sinon.spy();
|
87
|
-
component.addEventListener('invalid', spy);
|
88
|
-
component.reportValidity();
|
89
|
-
await aTimeout(0);
|
90
|
-
expect(spy.callCount).to.equal(0);
|
91
|
-
});
|
92
|
-
it('does not dispatch an `invalid` event when `reportValidity` is called when required, no value, and disabled', async () => {
|
93
|
-
const form = document.createElement('form');
|
94
|
-
const component = await fixture(html `<glide-core-textarea
|
95
|
-
label="label"
|
96
|
-
required
|
97
|
-
disabled
|
98
|
-
></glide-core-textarea>`, {
|
99
|
-
parentNode: form,
|
100
|
-
});
|
101
|
-
const spy = sinon.spy();
|
102
|
-
component.addEventListener('invalid', spy);
|
103
|
-
component.reportValidity();
|
104
|
-
await aTimeout(0);
|
105
|
-
expect(spy.callCount).to.equal(0);
|
106
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
import './textarea.js';
|
@@ -1,71 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import './textarea.js';
|
3
|
-
import { expect, fixture, html } from '@open-wc/testing';
|
4
|
-
import { sendKeys } from '@web/test-runner-commands';
|
5
|
-
it('can be reset to initial value', async () => {
|
6
|
-
const form = document.createElement('form');
|
7
|
-
const component = await fixture(html `<glide-core-textarea
|
8
|
-
value="testing"
|
9
|
-
label="label"
|
10
|
-
></glide-core-textarea>`, { parentNode: form });
|
11
|
-
component.focus();
|
12
|
-
await sendKeys({ type: '-value' });
|
13
|
-
await expect(component.value).to.equal('testing-value');
|
14
|
-
form.reset();
|
15
|
-
expect(component.value).to.equal('testing');
|
16
|
-
});
|
17
|
-
it('can be reset if there was no initial value', async () => {
|
18
|
-
const form = document.createElement('form');
|
19
|
-
const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
|
20
|
-
component.value = 'value';
|
21
|
-
form.reset();
|
22
|
-
expect(component.value).to.equal('');
|
23
|
-
});
|
24
|
-
it('has `formData` when it has a `value` and `name`', async () => {
|
25
|
-
const form = document.createElement('form');
|
26
|
-
await fixture(html `<glide-core-textarea
|
27
|
-
value="value"
|
28
|
-
label="label"
|
29
|
-
name="name"
|
30
|
-
></glide-core-textarea>`, { parentNode: form });
|
31
|
-
const formData = new FormData(form);
|
32
|
-
expect(formData.get('name')).to.be.equal('value');
|
33
|
-
});
|
34
|
-
it('has `formData` when text is entered and has a `name`', async () => {
|
35
|
-
const form = document.createElement('form');
|
36
|
-
const component = await fixture(html `<glide-core-textarea
|
37
|
-
value=""
|
38
|
-
label="label"
|
39
|
-
name="name"
|
40
|
-
></glide-core-textarea>`, { parentNode: form });
|
41
|
-
component?.focus();
|
42
|
-
await sendKeys({ type: 'testing' });
|
43
|
-
const formData = new FormData(form);
|
44
|
-
expect(formData.get('name')).to.be.equal('testing');
|
45
|
-
});
|
46
|
-
it('has no `formData` value when it has a value and is disabled', async () => {
|
47
|
-
const form = document.createElement('form');
|
48
|
-
await fixture(html `<glide-core-textarea
|
49
|
-
value="value"
|
50
|
-
label="label"
|
51
|
-
name="test-name"
|
52
|
-
disabled
|
53
|
-
></glide-core-textarea>`, { parentNode: form });
|
54
|
-
const formData = new FormData(form);
|
55
|
-
expect(formData.get('test-name')).to.be.null;
|
56
|
-
});
|
57
|
-
it('appends no `formData` when it has a value and no `name`', async () => {
|
58
|
-
const form = document.createElement('form');
|
59
|
-
await fixture(html `<glide-core-textarea
|
60
|
-
value="value"
|
61
|
-
label="label"
|
62
|
-
></glide-core-textarea>`, { parentNode: form });
|
63
|
-
const formData = new FormData(form);
|
64
|
-
expect(formData).to.be.empty;
|
65
|
-
});
|
66
|
-
it('appends no `formData` when it has no value and a `name`', async () => {
|
67
|
-
const form = document.createElement('form');
|
68
|
-
await fixture(html `<glide-core-textarea label="label" name="name"></glide-core-textarea>`, { parentNode: form });
|
69
|
-
const formData = new FormData(form);
|
70
|
-
expect(formData).to.be.empty;
|
71
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,204 +0,0 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
2
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
3
|
-
import { sendKeys } from '@web/test-runner-commands';
|
4
|
-
import GlideCoreTextarea from './textarea.js';
|
5
|
-
GlideCoreTextarea.shadowRootOptions.mode = 'open';
|
6
|
-
it('is valid by default', async () => {
|
7
|
-
const component = await fixture(html `<glide-core-textarea></glide-core-textarea>`);
|
8
|
-
expect(component.validity?.valid).to.be.true;
|
9
|
-
expect(component.validity?.valueMissing).to.be.false;
|
10
|
-
expect(component.validity?.tooLong).to.be.false;
|
11
|
-
expect(component.checkValidity()).to.be.true;
|
12
|
-
expect(component.reportValidity()).to.be.true;
|
13
|
-
await elementUpdated(component);
|
14
|
-
expect(component.shadowRoot
|
15
|
-
?.querySelector('textarea')
|
16
|
-
?.getAttribute('aria-invalid')).to.equal('false');
|
17
|
-
});
|
18
|
-
it('is valid after being filled in and required', async () => {
|
19
|
-
const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
|
20
|
-
component.focus();
|
21
|
-
await sendKeys({ type: 'value' });
|
22
|
-
expect(component.validity?.valid).to.be.true;
|
23
|
-
expect(component.validity?.valueMissing).to.be.false;
|
24
|
-
expect(component.validity?.tooLong).to.be.false;
|
25
|
-
expect(component.checkValidity()).to.be.true;
|
26
|
-
expect(component.reportValidity()).to.be.true;
|
27
|
-
await elementUpdated(component);
|
28
|
-
expect(component.shadowRoot
|
29
|
-
?.querySelector('textarea')
|
30
|
-
?.getAttribute('aria-invalid')).to.equal('false');
|
31
|
-
});
|
32
|
-
it('is invalid if no value and required', async () => {
|
33
|
-
const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
|
34
|
-
expect(component.validity?.valid).to.be.false;
|
35
|
-
expect(component.validity?.valueMissing).to.be.true;
|
36
|
-
expect(component.validity?.tooLong).to.be.false;
|
37
|
-
expect(component.willValidate).to.be.true;
|
38
|
-
expect(component.checkValidity()).to.be.false;
|
39
|
-
expect(component.reportValidity()).to.be.false;
|
40
|
-
await elementUpdated(component);
|
41
|
-
expect(component.shadowRoot
|
42
|
-
?.querySelector('textarea')
|
43
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
44
|
-
});
|
45
|
-
it('is valid if no value but required and disabled', async () => {
|
46
|
-
const component = await fixture(html `<glide-core-textarea required disabled></glide-core-textarea>`);
|
47
|
-
expect(component.validity?.valid).to.be.true;
|
48
|
-
expect(component.validity?.valueMissing).to.be.false;
|
49
|
-
expect(component.validity?.tooLong).to.be.false;
|
50
|
-
expect(component.checkValidity()).to.be.true;
|
51
|
-
expect(component.reportValidity()).to.be.true;
|
52
|
-
await elementUpdated(component);
|
53
|
-
expect(component.shadowRoot
|
54
|
-
?.querySelector('textarea')
|
55
|
-
?.getAttribute('aria-invalid')).to.equal('false');
|
56
|
-
});
|
57
|
-
it('updates validity when `required` and `value` is changed programmatically', async () => {
|
58
|
-
const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
|
59
|
-
expect(component.validity?.valid).to.be.false;
|
60
|
-
expect(component.validity?.valueMissing).to.be.true;
|
61
|
-
expect(component.checkValidity()).to.be.false;
|
62
|
-
expect(component.reportValidity()).to.be.false;
|
63
|
-
await elementUpdated(component);
|
64
|
-
expect(component.shadowRoot
|
65
|
-
?.querySelector('textarea')
|
66
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
67
|
-
component.value = 'text';
|
68
|
-
await elementUpdated(component);
|
69
|
-
expect(component.validity?.valid).to.be.true;
|
70
|
-
expect(component.validity?.valueMissing).to.be.false;
|
71
|
-
expect(component.checkValidity()).to.be.true;
|
72
|
-
expect(component.reportValidity()).to.be.true;
|
73
|
-
await elementUpdated(component);
|
74
|
-
expect(component.shadowRoot
|
75
|
-
?.querySelector('textarea')
|
76
|
-
?.getAttribute('aria-invalid')).to.equal('false');
|
77
|
-
// Resetting the value to empty to ensure it goes
|
78
|
-
// back to an invalid state
|
79
|
-
component.value = '';
|
80
|
-
await elementUpdated(component);
|
81
|
-
expect(component.validity?.valid).to.be.false;
|
82
|
-
expect(component.validity?.valueMissing).to.be.true;
|
83
|
-
expect(component.checkValidity()).to.be.false;
|
84
|
-
expect(component.reportValidity()).to.be.false;
|
85
|
-
expect(component.shadowRoot
|
86
|
-
?.querySelector('textarea')
|
87
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
88
|
-
});
|
89
|
-
it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
|
90
|
-
const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
|
91
|
-
expect(component.validity?.valid).to.be.true;
|
92
|
-
expect(component.validity?.valueMissing).to.be.false;
|
93
|
-
expect(component.checkValidity()).to.be.true;
|
94
|
-
expect(component.reportValidity()).to.be.true;
|
95
|
-
await elementUpdated(component);
|
96
|
-
expect(component.shadowRoot
|
97
|
-
?.querySelector('textarea')
|
98
|
-
?.getAttribute('aria-invalid')).to.equal('false');
|
99
|
-
component.required = true;
|
100
|
-
await elementUpdated(component);
|
101
|
-
expect(component.validity?.valid).to.be.false;
|
102
|
-
expect(component.validity?.valueMissing).to.be.true;
|
103
|
-
expect(component.checkValidity()).to.be.false;
|
104
|
-
expect(component.reportValidity()).to.be.false;
|
105
|
-
expect(component.shadowRoot
|
106
|
-
?.querySelector('textarea')
|
107
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
108
|
-
});
|
109
|
-
it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
|
110
|
-
const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
|
111
|
-
expect(component.validity?.valid).to.be.false;
|
112
|
-
expect(component.validity?.valueMissing).to.be.true;
|
113
|
-
expect(component.checkValidity()).to.be.false;
|
114
|
-
expect(component.reportValidity()).to.be.false;
|
115
|
-
await elementUpdated(component);
|
116
|
-
expect(component.shadowRoot
|
117
|
-
?.querySelector('textarea')
|
118
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
119
|
-
component.required = false;
|
120
|
-
await elementUpdated(component);
|
121
|
-
expect(component.validity?.valid).to.be.true;
|
122
|
-
expect(component.validity?.valueMissing).to.be.false;
|
123
|
-
expect(component.checkValidity()).to.be.true;
|
124
|
-
expect(component.reportValidity()).to.be.true;
|
125
|
-
expect(component.shadowRoot
|
126
|
-
?.querySelector('textarea')
|
127
|
-
?.getAttribute('aria-invalid')).to.equal('false');
|
128
|
-
});
|
129
|
-
it('blurs the textarea and reports validity if `blur` is called', async () => {
|
130
|
-
const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
|
131
|
-
component.focus();
|
132
|
-
const textareaElement = component.shadowRoot?.querySelector('textarea');
|
133
|
-
expect(component.shadowRoot?.activeElement === textareaElement).to.be.true;
|
134
|
-
component.blur();
|
135
|
-
await component.updateComplete;
|
136
|
-
expect(component.shadowRoot?.activeElement === null).to.be.true;
|
137
|
-
expect(component.validity.valid).to.be.false;
|
138
|
-
expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
|
139
|
-
.to.be.true;
|
140
|
-
});
|
141
|
-
it('sets the validity message with `setCustomValidity()`', async () => {
|
142
|
-
const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
|
143
|
-
component.setCustomValidity('validity message');
|
144
|
-
expect(component.validity?.valid).to.be.false;
|
145
|
-
expect(component.validity?.customError).to.be.true;
|
146
|
-
expect(component.checkValidity()).to.be.false;
|
147
|
-
await elementUpdated(component);
|
148
|
-
// Like native, the validity message shouldn't display until `reportValidity()` is called.
|
149
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
150
|
-
?.textContent).to.be.undefined;
|
151
|
-
expect(component.reportValidity()).to.be.false;
|
152
|
-
await elementUpdated(component);
|
153
|
-
expect(component.shadowRoot
|
154
|
-
?.querySelector('textarea')
|
155
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
156
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
157
|
-
?.textContent).to.equal('validity message');
|
158
|
-
});
|
159
|
-
it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
|
160
|
-
const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
|
161
|
-
component.setCustomValidity('validity message');
|
162
|
-
component.reportValidity();
|
163
|
-
await elementUpdated(component);
|
164
|
-
component.setCustomValidity('');
|
165
|
-
await elementUpdated(component);
|
166
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
167
|
-
?.textContent).to.be.undefined;
|
168
|
-
});
|
169
|
-
it('is invalid when `setValidity()` is called', async () => {
|
170
|
-
const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
|
171
|
-
component.setValidity({ customError: true }, 'validity message');
|
172
|
-
expect(component.validity.valid).to.be.false;
|
173
|
-
await elementUpdated(component);
|
174
|
-
// Like native, the validity message shouldn't display until `reportValidity()` is called.
|
175
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
176
|
-
?.textContent).to.be.undefined;
|
177
|
-
expect(component.validity?.customError).to.be.true;
|
178
|
-
component.reportValidity();
|
179
|
-
await elementUpdated(component);
|
180
|
-
expect(component.shadowRoot
|
181
|
-
?.querySelector('textarea')
|
182
|
-
?.getAttribute('aria-invalid')).to.equal('true');
|
183
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
184
|
-
?.textContent).to.equal('validity message');
|
185
|
-
});
|
186
|
-
it('is valid when `setValidity()` is called', async () => {
|
187
|
-
const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
|
188
|
-
component.setValidity({ customError: true }, 'validity message');
|
189
|
-
component.setValidity({});
|
190
|
-
await elementUpdated(component);
|
191
|
-
expect(component.validity.valid).to.be.true;
|
192
|
-
expect(component.validity.customError).to.be.false;
|
193
|
-
expect(component.reportValidity()).to.be.true;
|
194
|
-
await elementUpdated(component);
|
195
|
-
expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
|
196
|
-
?.textContent).to.be.undefined;
|
197
|
-
});
|
198
|
-
it('retains existing validity state when `setCustomValidity()` is called', async () => {
|
199
|
-
const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
|
200
|
-
component.setCustomValidity('validity message');
|
201
|
-
expect(component.validity?.valid).to.be.false;
|
202
|
-
expect(component.validity?.customError).to.be.true;
|
203
|
-
expect(component.validity?.valueMissing).to.be.true;
|
204
|
-
});
|
package/dist/toasts.stories.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|