@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.
Files changed (284) hide show
  1. package/dist/drawer.d.ts +2 -2
  2. package/dist/drawer.js +1 -1
  3. package/dist/drawer.styles.js +3 -3
  4. package/dist/dropdown.styles.js +3 -2
  5. package/dist/input.styles.js +1 -0
  6. package/dist/styles/variables.css +1 -1
  7. package/dist/textarea.styles.js +2 -0
  8. package/dist/toasts.d.ts +2 -2
  9. package/dist/toasts.toast.d.ts +1 -1
  10. package/dist/toasts.toast.js +1 -1
  11. package/dist/toasts.toast.styles.js +8 -0
  12. package/dist/tree.item.styles.js +2 -2
  13. package/package.json +8 -5
  14. package/dist/accordion.stories.d.ts +0 -6
  15. package/dist/accordion.test.basics.d.ts +0 -1
  16. package/dist/accordion.test.basics.js +0 -28
  17. package/dist/accordion.test.events.d.ts +0 -1
  18. package/dist/accordion.test.events.js +0 -28
  19. package/dist/accordion.test.focus.d.ts +0 -1
  20. package/dist/accordion.test.focus.js +0 -11
  21. package/dist/accordion.test.interactions.d.ts +0 -1
  22. package/dist/accordion.test.interactions.js +0 -75
  23. package/dist/button-group.button.test.basics.d.ts +0 -1
  24. package/dist/button-group.button.test.basics.js +0 -97
  25. package/dist/button-group.button.test.events.d.ts +0 -1
  26. package/dist/button-group.button.test.events.js +0 -15
  27. package/dist/button-group.button.test.focus.d.ts +0 -1
  28. package/dist/button-group.button.test.focus.js +0 -13
  29. package/dist/button-group.button.test.interactions.d.ts +0 -1
  30. package/dist/button-group.button.test.interactions.js +0 -42
  31. package/dist/button-group.stories.d.ts +0 -7
  32. package/dist/button-group.test.basics.d.ts +0 -1
  33. package/dist/button-group.test.basics.js +0 -148
  34. package/dist/button-group.test.events.d.ts +0 -1
  35. package/dist/button-group.test.events.js +0 -241
  36. package/dist/button-group.test.focus.d.ts +0 -1
  37. package/dist/button-group.test.focus.js +0 -39
  38. package/dist/button-group.test.interactions.d.ts +0 -1
  39. package/dist/button-group.test.interactions.js +0 -91
  40. package/dist/button.stories.d.ts +0 -7
  41. package/dist/button.test.basics.d.ts +0 -1
  42. package/dist/button.test.basics.js +0 -69
  43. package/dist/button.test.events.d.ts +0 -1
  44. package/dist/button.test.events.js +0 -102
  45. package/dist/checkbox-group.stories.d.ts +0 -6
  46. package/dist/checkbox-group.test.basics.d.ts +0 -1
  47. package/dist/checkbox-group.test.basics.js +0 -116
  48. package/dist/checkbox-group.test.events.d.ts +0 -1
  49. package/dist/checkbox-group.test.events.js +0 -111
  50. package/dist/checkbox-group.test.focus.d.ts +0 -1
  51. package/dist/checkbox-group.test.focus.js +0 -70
  52. package/dist/checkbox-group.test.form.d.ts +0 -1
  53. package/dist/checkbox-group.test.form.js +0 -131
  54. package/dist/checkbox-group.test.interactions.d.ts +0 -1
  55. package/dist/checkbox-group.test.interactions.js +0 -82
  56. package/dist/checkbox-group.test.validity.d.ts +0 -1
  57. package/dist/checkbox-group.test.validity.js +0 -145
  58. package/dist/checkbox.stories.d.ts +0 -5
  59. package/dist/checkbox.test.basics.d.ts +0 -1
  60. package/dist/checkbox.test.basics.js +0 -90
  61. package/dist/checkbox.test.events.d.ts +0 -1
  62. package/dist/checkbox.test.events.js +0 -105
  63. package/dist/checkbox.test.focus.d.ts +0 -1
  64. package/dist/checkbox.test.focus.js +0 -51
  65. package/dist/checkbox.test.form.d.ts +0 -1
  66. package/dist/checkbox.test.form.js +0 -133
  67. package/dist/checkbox.test.interactions.d.ts +0 -1
  68. package/dist/checkbox.test.interactions.js +0 -131
  69. package/dist/checkbox.test.validity.d.ts +0 -1
  70. package/dist/checkbox.test.validity.js +0 -128
  71. package/dist/drawer.stories.d.ts +0 -6
  72. package/dist/drawer.test.accessibility.d.ts +0 -1
  73. package/dist/drawer.test.accessibility.js +0 -22
  74. package/dist/drawer.test.basics.d.ts +0 -1
  75. package/dist/drawer.test.basics.js +0 -44
  76. package/dist/drawer.test.closing.d.ts +0 -1
  77. package/dist/drawer.test.closing.js +0 -40
  78. package/dist/drawer.test.events.d.ts +0 -1
  79. package/dist/drawer.test.events.js +0 -42
  80. package/dist/drawer.test.methods.d.ts +0 -1
  81. package/dist/drawer.test.methods.js +0 -35
  82. package/dist/dropdown.option.test.basics.d.ts +0 -1
  83. package/dist/dropdown.option.test.basics.js +0 -34
  84. package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
  85. package/dist/dropdown.option.test.basics.multiple.js +0 -36
  86. package/dist/dropdown.option.test.basics.single.d.ts +0 -1
  87. package/dist/dropdown.option.test.basics.single.js +0 -29
  88. package/dist/dropdown.option.test.events.d.ts +0 -1
  89. package/dist/dropdown.option.test.events.js +0 -36
  90. package/dist/dropdown.option.test.focus.d.ts +0 -1
  91. package/dist/dropdown.option.test.focus.js +0 -11
  92. package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
  93. package/dist/dropdown.option.test.interactions.multiple.js +0 -42
  94. package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
  95. package/dist/dropdown.option.test.interactions.single.js +0 -76
  96. package/dist/dropdown.stories.d.ts +0 -8
  97. package/dist/dropdown.test.basics.d.ts +0 -1
  98. package/dist/dropdown.test.basics.filterable.d.ts +0 -1
  99. package/dist/dropdown.test.basics.filterable.js +0 -108
  100. package/dist/dropdown.test.basics.js +0 -181
  101. package/dist/dropdown.test.basics.multiple.d.ts +0 -1
  102. package/dist/dropdown.test.basics.multiple.js +0 -259
  103. package/dist/dropdown.test.basics.single.d.ts +0 -1
  104. package/dist/dropdown.test.basics.single.js +0 -122
  105. package/dist/dropdown.test.events.d.ts +0 -1
  106. package/dist/dropdown.test.events.filterable.d.ts +0 -1
  107. package/dist/dropdown.test.events.filterable.js +0 -31
  108. package/dist/dropdown.test.events.js +0 -251
  109. package/dist/dropdown.test.events.multiple.d.ts +0 -1
  110. package/dist/dropdown.test.events.multiple.js +0 -446
  111. package/dist/dropdown.test.events.single.d.ts +0 -1
  112. package/dist/dropdown.test.events.single.js +0 -343
  113. package/dist/dropdown.test.focus.d.ts +0 -1
  114. package/dist/dropdown.test.focus.filterable.d.ts +0 -1
  115. package/dist/dropdown.test.focus.filterable.js +0 -140
  116. package/dist/dropdown.test.focus.js +0 -107
  117. package/dist/dropdown.test.focus.multiple.d.ts +0 -1
  118. package/dist/dropdown.test.focus.multiple.js +0 -170
  119. package/dist/dropdown.test.focus.single.d.ts +0 -1
  120. package/dist/dropdown.test.focus.single.js +0 -42
  121. package/dist/dropdown.test.form.d.ts +0 -1
  122. package/dist/dropdown.test.form.js +0 -74
  123. package/dist/dropdown.test.form.multiple.d.ts +0 -1
  124. package/dist/dropdown.test.form.multiple.js +0 -151
  125. package/dist/dropdown.test.form.single.d.ts +0 -1
  126. package/dist/dropdown.test.form.single.js +0 -129
  127. package/dist/dropdown.test.interactions.d.ts +0 -1
  128. package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
  129. package/dist/dropdown.test.interactions.filterable.js +0 -805
  130. package/dist/dropdown.test.interactions.js +0 -696
  131. package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
  132. package/dist/dropdown.test.interactions.multiple.js +0 -1026
  133. package/dist/dropdown.test.interactions.single.d.ts +0 -1
  134. package/dist/dropdown.test.interactions.single.js +0 -569
  135. package/dist/dropdown.test.validity.d.ts +0 -1
  136. package/dist/dropdown.test.validity.js +0 -181
  137. package/dist/form-controls-layout.stories.d.ts +0 -10
  138. package/dist/form-controls-layout.test.basics.d.ts +0 -2
  139. package/dist/form-controls-layout.test.basics.js +0 -75
  140. package/dist/form-controls-layout.test.interactions.d.ts +0 -2
  141. package/dist/form-controls-layout.test.interactions.js +0 -26
  142. package/dist/icon-button.stories.d.ts +0 -6
  143. package/dist/icon-button.test.basics.d.ts +0 -1
  144. package/dist/icon-button.test.basics.js +0 -43
  145. package/dist/icon-button.test.focus.d.ts +0 -1
  146. package/dist/icon-button.test.focus.js +0 -13
  147. package/dist/input.stories.d.ts +0 -8
  148. package/dist/input.test.basics.d.ts +0 -1
  149. package/dist/input.test.basics.js +0 -138
  150. package/dist/input.test.events.d.ts +0 -1
  151. package/dist/input.test.events.js +0 -98
  152. package/dist/input.test.focus.d.ts +0 -1
  153. package/dist/input.test.focus.js +0 -58
  154. package/dist/input.test.form.d.ts +0 -1
  155. package/dist/input.test.form.js +0 -74
  156. package/dist/input.test.validity.d.ts +0 -1
  157. package/dist/input.test.validity.js +0 -258
  158. package/dist/label.test.basics.d.ts +0 -1
  159. package/dist/label.test.basics.js +0 -136
  160. package/dist/menu.button.test.basics.d.ts +0 -1
  161. package/dist/menu.button.test.basics.js +0 -43
  162. package/dist/menu.link.test.basics.d.ts +0 -1
  163. package/dist/menu.link.test.basics.js +0 -47
  164. package/dist/menu.options.test.basics.d.ts +0 -2
  165. package/dist/menu.options.test.basics.js +0 -44
  166. package/dist/menu.options.test.events.d.ts +0 -1
  167. package/dist/menu.options.test.events.js +0 -19
  168. package/dist/menu.stories.d.ts +0 -11
  169. package/dist/menu.test.basics.d.ts +0 -1
  170. package/dist/menu.test.basics.js +0 -178
  171. package/dist/menu.test.events.d.ts +0 -3
  172. package/dist/menu.test.events.js +0 -125
  173. package/dist/menu.test.focus.d.ts +0 -2
  174. package/dist/menu.test.focus.js +0 -102
  175. package/dist/menu.test.interactions.d.ts +0 -3
  176. package/dist/menu.test.interactions.js +0 -1069
  177. package/dist/modal.icon-button.test.basics.d.ts +0 -1
  178. package/dist/modal.icon-button.test.basics.js +0 -46
  179. package/dist/modal.stories.d.ts +0 -13
  180. package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
  181. package/dist/modal.tertiary-icon.test.basics.js +0 -60
  182. package/dist/modal.test.accessibility.d.ts +0 -1
  183. package/dist/modal.test.accessibility.js +0 -38
  184. package/dist/modal.test.basics.d.ts +0 -3
  185. package/dist/modal.test.basics.js +0 -204
  186. package/dist/modal.test.close.d.ts +0 -1
  187. package/dist/modal.test.close.js +0 -35
  188. package/dist/modal.test.events.d.ts +0 -1
  189. package/dist/modal.test.events.js +0 -99
  190. package/dist/modal.test.lock-scroll.d.ts +0 -1
  191. package/dist/modal.test.lock-scroll.js +0 -67
  192. package/dist/modal.test.methods.d.ts +0 -1
  193. package/dist/modal.test.methods.js +0 -20
  194. package/dist/modal.test.scrollbars.d.ts +0 -1
  195. package/dist/modal.test.scrollbars.js +0 -18
  196. package/dist/radio-group.stories.d.ts +0 -6
  197. package/dist/radio-group.test.basics.d.ts +0 -2
  198. package/dist/radio-group.test.basics.js +0 -324
  199. package/dist/radio-group.test.events.d.ts +0 -2
  200. package/dist/radio-group.test.events.js +0 -278
  201. package/dist/radio-group.test.focus.d.ts +0 -2
  202. package/dist/radio-group.test.focus.js +0 -95
  203. package/dist/radio-group.test.form.d.ts +0 -1
  204. package/dist/radio-group.test.form.js +0 -124
  205. package/dist/radio-group.test.validity.d.ts +0 -1
  206. package/dist/radio-group.test.validity.js +0 -311
  207. package/dist/split-button.primary-button.test.basics.d.ts +0 -1
  208. package/dist/split-button.primary-button.test.basics.js +0 -31
  209. package/dist/split-button.primary-button.test.focus.d.ts +0 -1
  210. package/dist/split-button.primary-button.test.focus.js +0 -14
  211. package/dist/split-button.primary-link.test.basics.d.ts +0 -1
  212. package/dist/split-button.primary-link.test.basics.js +0 -30
  213. package/dist/split-button.primary-link.test.focus.d.ts +0 -1
  214. package/dist/split-button.primary-link.test.focus.js +0 -15
  215. package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
  216. package/dist/split-button.secondary-button.test.basics.js +0 -58
  217. package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
  218. package/dist/split-button.secondary-button.test.focus.js +0 -14
  219. package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
  220. package/dist/split-button.secondary-button.test.interactions.js +0 -30
  221. package/dist/split-button.stories.d.ts +0 -13
  222. package/dist/split-button.test.basics.d.ts +0 -2
  223. package/dist/split-button.test.basics.js +0 -87
  224. package/dist/split-button.test.interactions.d.ts +0 -4
  225. package/dist/split-button.test.interactions.js +0 -51
  226. package/dist/tab.group.test.basics.d.ts +0 -3
  227. package/dist/tab.group.test.basics.js +0 -234
  228. package/dist/tab.group.test.interactions.d.ts +0 -3
  229. package/dist/tab.group.test.interactions.js +0 -434
  230. package/dist/tab.test.basics.d.ts +0 -1
  231. package/dist/tab.test.basics.js +0 -50
  232. package/dist/tabs.stories.d.ts +0 -8
  233. package/dist/tag.stories.d.ts +0 -7
  234. package/dist/tag.test.basics.d.ts +0 -1
  235. package/dist/tag.test.basics.js +0 -28
  236. package/dist/tag.test.events.d.ts +0 -1
  237. package/dist/tag.test.events.js +0 -93
  238. package/dist/tag.test.focus.d.ts +0 -1
  239. package/dist/tag.test.focus.js +0 -10
  240. package/dist/tag.test.interactions.d.ts +0 -1
  241. package/dist/tag.test.interactions.js +0 -36
  242. package/dist/textarea.stories.d.ts +0 -5
  243. package/dist/textarea.test.basics.d.ts +0 -1
  244. package/dist/textarea.test.basics.js +0 -177
  245. package/dist/textarea.test.events.d.ts +0 -1
  246. package/dist/textarea.test.events.js +0 -106
  247. package/dist/textarea.test.form.d.ts +0 -1
  248. package/dist/textarea.test.form.js +0 -71
  249. package/dist/textarea.test.validity.d.ts +0 -1
  250. package/dist/textarea.test.validity.js +0 -204
  251. package/dist/toasts.stories.d.ts +0 -7
  252. package/dist/toasts.test.basics.d.ts +0 -1
  253. package/dist/toasts.test.basics.js +0 -115
  254. package/dist/toasts.toast.test.basics.d.ts +0 -1
  255. package/dist/toasts.toast.test.basics.js +0 -139
  256. package/dist/toggle.stories.d.ts +0 -4
  257. package/dist/toggle.test.basics.d.ts +0 -1
  258. package/dist/toggle.test.basics.js +0 -69
  259. package/dist/toggle.test.events.d.ts +0 -1
  260. package/dist/toggle.test.events.js +0 -30
  261. package/dist/toggle.test.focus.d.ts +0 -1
  262. package/dist/toggle.test.focus.js +0 -9
  263. package/dist/toggle.test.interactions.d.ts +0 -1
  264. package/dist/toggle.test.interactions.js +0 -81
  265. package/dist/tooltip.stories.d.ts +0 -7
  266. package/dist/tooltip.test.basics.d.ts +0 -1
  267. package/dist/tooltip.test.basics.js +0 -100
  268. package/dist/tooltip.test.interactions.d.ts +0 -1
  269. package/dist/tooltip.test.interactions.js +0 -203
  270. package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
  271. package/dist/tree.item.icon-button.test.basics.js +0 -22
  272. package/dist/tree.item.menu.test.basics.d.ts +0 -1
  273. package/dist/tree.item.menu.test.basics.js +0 -86
  274. package/dist/tree.item.test.basics.d.ts +0 -2
  275. package/dist/tree.item.test.basics.js +0 -138
  276. package/dist/tree.stories.d.ts +0 -9
  277. package/dist/tree.test.aria.d.ts +0 -1
  278. package/dist/tree.test.aria.js +0 -86
  279. package/dist/tree.test.basics.d.ts +0 -3
  280. package/dist/tree.test.basics.js +0 -130
  281. package/dist/tree.test.events.d.ts +0 -2
  282. package/dist/tree.test.events.js +0 -19
  283. package/dist/tree.test.focus.d.ts +0 -1
  284. package/dist/tree.test.focus.js +0 -383
@@ -1,181 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './dropdown.option.js';
3
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreDropdown from './dropdown.js';
5
- GlideCoreDropdown.shadowRootOptions.mode = 'open';
6
- it('is valid if not required and no option is selected', async () => {
7
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
8
- <glide-core-dropdown-option
9
- label="Label"
10
- selected
11
- ></glide-core-dropdown-option>
12
- </glide-core-dropdown>`);
13
- expect(component.validity.valid).to.be.true;
14
- expect(component.validity?.valueMissing).to.be.false;
15
- expect(component.checkValidity()).to.be.true;
16
- expect(component.reportValidity()).to.be.true;
17
- });
18
- it('is invalid if required and no option is selected', async () => {
19
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
20
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
21
- </glide-core-dropdown>`);
22
- expect(component.validity.valid).to.be.false;
23
- expect(component.validity?.valueMissing).to.be.true;
24
- expect(component.checkValidity()).to.be.false;
25
- expect(component.reportValidity()).to.be.false;
26
- });
27
- it('is invalid if required and no option is selected when `filterable`', async () => {
28
- const component = await fixture(html `<glide-core-dropdown
29
- label="Label"
30
- placeholder="Placeholder"
31
- filterable
32
- required
33
- >
34
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
35
- </glide-core-dropdown>`);
36
- expect(component.validity.valid).to.be.false;
37
- expect(component.validity?.valueMissing).to.be.true;
38
- expect(component.checkValidity()).to.be.false;
39
- expect(component.reportValidity()).to.be.false;
40
- });
41
- it('is both invalid and valid if required but disabled and no option is selected', async () => {
42
- const component = await fixture(html `<glide-core-dropdown
43
- label="Label"
44
- placeholder="Placeholder"
45
- disabled
46
- required
47
- >
48
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
49
- </glide-core-dropdown>`);
50
- expect(component.validity.valid).to.be.false;
51
- expect(component.validity?.valueMissing).to.be.true;
52
- expect(component.checkValidity()).to.be.true;
53
- expect(component.reportValidity()).to.be.true;
54
- });
55
- it('sets the validity message with `setCustomValidity()`', async () => {
56
- const component = await fixture(html `<glide-core-dropdown label="Label">
57
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
58
- </glide-core-dropdown>`);
59
- component.setCustomValidity('validity message');
60
- expect(component.validity?.valid).to.be.false;
61
- expect(component.validity?.customError).to.be.true;
62
- expect(component.checkValidity()).to.be.false;
63
- await elementUpdated(component);
64
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
65
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
66
- ?.textContent).to.be.undefined;
67
- expect(component.reportValidity()).to.be.false;
68
- await elementUpdated(component);
69
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
70
- ?.textContent).to.equal('validity message');
71
- });
72
- it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
73
- const component = await fixture(html `<glide-core-dropdown label="Label">
74
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
75
- </glide-core-dropdown>`);
76
- component.setCustomValidity('validity message');
77
- component.reportValidity();
78
- await elementUpdated(component);
79
- component.setCustomValidity('');
80
- await elementUpdated(component);
81
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
82
- ?.textContent).to.be.undefined;
83
- });
84
- it('is invalid when `setValidity()` is called', async () => {
85
- const component = await fixture(html `<glide-core-dropdown label="Label">
86
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
87
- </glide-core-dropdown>`);
88
- component.setValidity({ customError: true }, 'validity message');
89
- expect(component.validity.valid).to.be.false;
90
- await elementUpdated(component);
91
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
92
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
93
- ?.textContent).to.be.undefined;
94
- expect(component.validity?.customError).to.be.true;
95
- component.reportValidity();
96
- await elementUpdated(component);
97
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
98
- ?.textContent).to.equal('validity message');
99
- });
100
- it('is valid when `setValidity()` is called', async () => {
101
- const component = await fixture(html `<glide-core-dropdown label="Label">
102
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
103
- </glide-core-dropdown>`);
104
- component.setValidity({ customError: true }, 'validity message');
105
- component.setValidity({});
106
- await elementUpdated(component);
107
- expect(component.validity.valid).to.be.true;
108
- expect(component.validity.customError).to.be.false;
109
- expect(component.reportValidity()).to.be.true;
110
- await elementUpdated(component);
111
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
112
- ?.textContent).to.be.undefined;
113
- });
114
- it('sets the validity message with `setCustomValidity()` when `filterable`', async () => {
115
- const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
116
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
117
- </glide-core-dropdown>`);
118
- component.setCustomValidity('validity message');
119
- expect(component.validity?.valid).to.be.false;
120
- expect(component.validity?.customError).to.be.true;
121
- expect(component.checkValidity()).to.be.false;
122
- await elementUpdated(component);
123
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
124
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
125
- ?.textContent).to.be.undefined;
126
- expect(component.reportValidity()).to.be.false;
127
- await elementUpdated(component);
128
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
129
- ?.textContent).to.equal('validity message');
130
- });
131
- it('removes a validity message with an empty argument to `setCustomValidity()` when `filterable`', async () => {
132
- const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
133
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
134
- </glide-core-dropdown>`);
135
- component.setCustomValidity('validity message');
136
- component.reportValidity();
137
- await elementUpdated(component);
138
- component.setCustomValidity('');
139
- await elementUpdated(component);
140
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
141
- ?.textContent).to.be.undefined;
142
- });
143
- it('is invalid when `setValidity()` is called when `filterable`', async () => {
144
- const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
145
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
146
- </glide-core-dropdown>`);
147
- component.setValidity({ customError: true }, 'validity message');
148
- expect(component.validity.valid).to.be.false;
149
- await elementUpdated(component);
150
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
151
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
152
- ?.textContent).to.be.undefined;
153
- expect(component.validity?.customError).to.be.true;
154
- component.reportValidity();
155
- await elementUpdated(component);
156
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
157
- ?.textContent).to.equal('validity message');
158
- });
159
- it('is valid when `setValidity()` is called when `filterable`', async () => {
160
- const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
161
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
162
- </glide-core-dropdown>`);
163
- component.setValidity({ customError: true }, 'validity message');
164
- component.setValidity({});
165
- await elementUpdated(component);
166
- expect(component.validity.valid).to.be.true;
167
- expect(component.validity.customError).to.be.false;
168
- expect(component.reportValidity()).to.be.true;
169
- await elementUpdated(component);
170
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
171
- ?.textContent).to.be.undefined;
172
- });
173
- it('retains existing validity state when `setCustomValidity()` is called', async () => {
174
- const component = await fixture(html `<glide-core-dropdown label="Label" required>
175
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
176
- </glide-core-dropdown>`);
177
- component.setCustomValidity('validity message');
178
- expect(component.validity?.valid).to.be.false;
179
- expect(component.validity?.customError).to.be.true;
180
- expect(component.validity?.valueMissing).to.be.true;
181
- });
@@ -1,10 +0,0 @@
1
- import './checkbox-group.js';
2
- import './dropdown';
3
- import './form-controls-layout.js';
4
- import './input.js';
5
- import './radio-group.js';
6
- import './radio.js';
7
- import type { Meta, StoryObj } from '@storybook/web-components';
8
- declare const meta: Meta;
9
- export default meta;
10
- export declare const FormControlsLayout: StoryObj;
@@ -1,2 +0,0 @@
1
- import './checkbox.js';
2
- import './input.js';
@@ -1,75 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import './input.js';
4
- import { ArgumentError } from 'ow';
5
- import { expect, fixture, html } from '@open-wc/testing';
6
- import GlideCoreFormControlsLayout from './form-controls-layout.js';
7
- import expectArgumentError from './library/expect-argument-error.js';
8
- import sinon from 'sinon';
9
- it('registers', async () => {
10
- expect(window.customElements.get('glide-core-form-controls-layout')).to.equal(GlideCoreFormControlsLayout);
11
- });
12
- it('has defaults', async () => {
13
- const component = await fixture(html `
14
- <glide-core-form-controls-layout>
15
- <glide-core-input
16
- label="Label"
17
- placeholder="Placeholder"
18
- ></glide-core-input>
19
- </glide-core-form-controls-layout>
20
- `);
21
- expect(component.getAttribute('split')).to.equal('left');
22
- expect(component.split).to.equal('left');
23
- });
24
- it('sets `privateActive` on each control', async () => {
25
- const component = await fixture(html `
26
- <glide-core-form-controls-layout>
27
- <glide-core-input
28
- label="Label"
29
- placeholder="Placeholder"
30
- ></glide-core-input>
31
-
32
- <glide-core-checkbox label="Label"></glide-core-checkbox>
33
- </glide-core-form-controls-layout>
34
- `);
35
- const input = component.querySelector('glide-core-input');
36
- const checkbox = component.querySelector('glide-core-checkbox');
37
- expect(input?.privateSplit).to.equal('left');
38
- expect(checkbox?.privateSplit).to.equal('left');
39
- });
40
- it('throws if it does not have a default slot', async () => {
41
- const spy = sinon.spy();
42
- try {
43
- await fixture(html `
44
- <glide-core-form-controls-layout></glide-core-form-controls-layout>
45
- `);
46
- }
47
- catch (error) {
48
- if (error instanceof ArgumentError) {
49
- spy();
50
- }
51
- }
52
- expect(spy.callCount).to.equal(1);
53
- });
54
- it('throws if its default slot is the incorrect type', async () => {
55
- await expectArgumentError(() => {
56
- return fixture(html `
57
- <glide-core-form-controls-layout>
58
- <input />
59
- </glide-core-form-controls-layout>
60
- `);
61
- });
62
- });
63
- it('throws if a vertical control is present', async () => {
64
- await expectArgumentError(() => {
65
- return fixture(html `
66
- <glide-core-form-controls-layout>
67
- <glide-core-input
68
- label="Label"
69
- placeholder="Placeholder"
70
- orientation="vertical"
71
- ></glide-core-input>
72
- </glide-core-form-controls-layout>
73
- `);
74
- });
75
- });
@@ -1,2 +0,0 @@
1
- import './checkbox.js';
2
- import './input.js';
@@ -1,26 +0,0 @@
1
- import './checkbox.js';
2
- import './input.js';
3
- import { expect, fixture, html, waitUntil } from '@open-wc/testing';
4
- import GlideCoreFormControlsLayout from './form-controls-layout.js';
5
- it('sets `privateActive` on each control when `split` is changed programmatically', async () => {
6
- const component = await fixture(html `
7
- <glide-core-form-controls-layout>
8
- <glide-core-input
9
- label="Label"
10
- placeholder="Placeholder"
11
- ></glide-core-input>
12
-
13
- <glide-core-checkbox label="Label"></glide-core-checkbox>
14
- </glide-core-form-controls-layout>
15
- `);
16
- // Why isn't it a `GlideCoreFormControlsLayout` instance yet? No idea!
17
- // It should be fully rendered by this point. Nothing to do with the
18
- // component itself, which is quite simple. And no other test behaves
19
- // like this.
20
- await waitUntil(() => component instanceof GlideCoreFormControlsLayout);
21
- component.split = 'middle';
22
- const input = component.querySelector('glide-core-input');
23
- const checkbox = component.querySelector('glide-core-checkbox');
24
- expect(input?.privateSplit).to.equal('middle');
25
- expect(checkbox?.privateSplit).to.equal('middle');
26
- });
@@ -1,6 +0,0 @@
1
- import './icon-button.js';
2
- import './icons/storybook.js';
3
- import type { Meta, StoryObj } from '@storybook/web-components';
4
- declare const meta: Meta;
5
- export default meta;
6
- export declare const IconButton: StoryObj;
@@ -1 +0,0 @@
1
- import './icon-button.js';
@@ -1,43 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './icon-button.js';
3
- import { ArgumentError } from 'ow';
4
- import { expect, fixture, html } from '@open-wc/testing';
5
- import GlideCoreIconButton from './icon-button.js';
6
- import sinon from 'sinon';
7
- GlideCoreIconButton.shadowRootOptions.mode = 'open';
8
- it('registers', async () => {
9
- expect(window.customElements.get('glide-core-icon-button')).to.equal(GlideCoreIconButton);
10
- });
11
- it('is accessible', async () => {
12
- const component = await fixture(html `<glide-core-icon-button label="Label">
13
- <div>Icon</div>
14
- </glide-core-icon-button>`);
15
- await expect(component).to.be.accessible();
16
- });
17
- it('has defaults', async () => {
18
- const component = await fixture(html `<glide-core-icon-button label="Label">
19
- <div>Icon</div>
20
- </glide-core-icon-button>`);
21
- const button = component.shadowRoot?.querySelector('[data-test="button"]');
22
- expect(component.ariaControls).to.equal(null);
23
- expect(component.ariaExpanded).to.equal(null);
24
- expect(component.ariaHasPopup).to.equal(null);
25
- expect(component.disabled).to.be.false;
26
- expect(component.variant).to.equal('primary');
27
- expect(button?.getAttribute('aria-controls')).to.equal(null);
28
- expect(button?.ariaExpanded).to.equal(null);
29
- expect(button?.ariaHasPopup).to.equal(null);
30
- expect(button?.disabled).to.be.false;
31
- });
32
- it('throws if it does not have a default slot', async () => {
33
- const spy = sinon.spy();
34
- try {
35
- await fixture(html `<glide-core-icon-button label="Label"></glide-core-icon-button>`);
36
- }
37
- catch (error) {
38
- if (error instanceof ArgumentError) {
39
- spy();
40
- }
41
- }
42
- expect(spy.callCount).to.equal(1);
43
- });
@@ -1 +0,0 @@
1
- import './icon-button.js';
@@ -1,13 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './icon-button.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreIconButton from './icon-button.js';
5
- GlideCoreIconButton.shadowRootOptions.mode = 'open';
6
- it('focuses its button when `focus()` is called', async () => {
7
- const component = await fixture(html `<glide-core-icon-button label="Label">
8
- <div>Icon</div>
9
- </glide-core-icon-button>`);
10
- component.focus();
11
- const button = component.shadowRoot?.querySelector('[data-test="button"]');
12
- expect(component.shadowRoot?.activeElement).to.equal(button);
13
- });
@@ -1,8 +0,0 @@
1
- import './icons/storybook.js';
2
- import './input.js';
3
- import type { Meta, StoryObj } from '@storybook/web-components';
4
- declare const meta: Meta;
5
- export default meta;
6
- export declare const Input: StoryObj;
7
- export declare const WithError: StoryObj;
8
- export declare const WithIcons: StoryObj;
@@ -1 +0,0 @@
1
- export {};
@@ -1,138 +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 GlideCoreInput from './input.js';
5
- GlideCoreInput.shadowRootOptions.mode = 'open';
6
- it('registers', async () => {
7
- expect(window.customElements.get('glide-core-input')).to.equal(GlideCoreInput);
8
- });
9
- it('is accessible', async () => {
10
- const component = await fixture(html `
11
- <glide-core-input label="Test" value="lorem"></glide-core-input>
12
- `);
13
- await expect(component).to.be.accessible();
14
- });
15
- it('accepts and contains "value" attribute', async () => {
16
- const component = await fixture(html `
17
- <glide-core-input label="Test" value="lorem"></glide-core-input>
18
- `);
19
- expect(component.value).to.equal('lorem');
20
- });
21
- it('accepts disable attribute and disables the underlying input', async () => {
22
- const component = await fixture(html `
23
- <glide-core-input label="Test" disabled></glide-core-input>
24
- `);
25
- const inputElement = component.shadowRoot?.querySelector('input');
26
- expect(inputElement).to.exist;
27
- expect(inputElement?.hasAttribute('disabled')).to.be.true;
28
- });
29
- it('accepts readonly attribute and applies readonly to the underlying input', async () => {
30
- const component = await fixture(html `
31
- <glide-core-input label="Test" readonly></glide-core-input>
32
- `);
33
- const inputElement = component.shadowRoot?.querySelector('input');
34
- expect(inputElement).to.exist;
35
- expect(inputElement?.hasAttribute('readonly')).to.be.true;
36
- });
37
- it('accepts a type attribute', async () => {
38
- const component = await fixture(html `
39
- <glide-core-input label="Test" type="number"></glide-core-input>
40
- `);
41
- const inputElement = component.shadowRoot?.querySelector('input');
42
- expect(inputElement).to.exist;
43
- expect(inputElement?.getAttribute('type')).to.equal('number');
44
- });
45
- it('changes to type text when password is revealed', async () => {
46
- const component = await fixture(html `
47
- <glide-core-input
48
- label="Test"
49
- value="password123"
50
- type="password"
51
- password-toggle
52
- ></glide-core-input>
53
- `);
54
- const inputElement = component.shadowRoot?.querySelector('input');
55
- expect(inputElement).to.exist;
56
- expect(inputElement?.getAttribute('type')).to.equal('password');
57
- const passwordToggle = component.shadowRoot?.querySelector('[data-test="password-toggle"]');
58
- passwordToggle?.click();
59
- await component.updateComplete;
60
- expect(inputElement?.getAttribute('type')).to.equal('text');
61
- });
62
- it('shows search icon with type search', async () => {
63
- const component = await fixture(html `
64
- <glide-core-input label="Test" type="search"></glide-core-input>
65
- `);
66
- const inputElement = component.shadowRoot?.querySelector('input');
67
- expect(inputElement).to.exist;
68
- expect(inputElement?.getAttribute('type')).to.equal('search');
69
- const searchIcon = component.shadowRoot?.querySelector('[data-test="search-icon"]');
70
- expect(searchIcon).to.exist;
71
- });
72
- it('when using "focus() on input", the native input is focused', async () => {
73
- const component = await fixture(html `
74
- <glide-core-input label="Test"></glide-core-input>
75
- `);
76
- const inputElement = component.shadowRoot?.querySelector('input');
77
- component.focus();
78
- expect(document.activeElement).to.equal(component);
79
- expect(component.shadowRoot?.activeElement).to.equal(inputElement);
80
- });
81
- it('emits input events when text is changed and reports a value through the event target', async () => {
82
- const component = await fixture(html `
83
- <glide-core-input label="Test"></glide-core-input>
84
- `);
85
- let inputEventCaught = false;
86
- let value = '';
87
- component.addEventListener('input', (event) => {
88
- inputEventCaught = true;
89
- if (event.target instanceof GlideCoreInput) {
90
- value = event.target.value;
91
- }
92
- });
93
- component.focus();
94
- await sendKeys({ type: 'testing' });
95
- component.blur();
96
- expect(inputEventCaught).to.be.true;
97
- expect(value).to.be.equal('testing');
98
- });
99
- it('clearable attribute allows for a button which can clear input', async () => {
100
- const component = await fixture(html `
101
- <glide-core-input label="Test" clearable></glide-core-input>
102
- `);
103
- const clearButton = component.shadowRoot?.querySelector('[data-test="clear-button"]');
104
- component.focus();
105
- await sendKeys({ type: 'testing' });
106
- expect(component.value).to.be.equal('testing');
107
- clearButton?.click();
108
- expect(component.value).to.be.equal('');
109
- });
110
- it('label correctly displays when provided as an attribute', async () => {
111
- const component = await fixture(html `
112
- <glide-core-input label="Test label"></glide-core-input>
113
- `);
114
- const labelElement = component?.shadowRoot?.querySelector('label');
115
- const labelText = labelElement?.textContent?.trim();
116
- expect(labelText).to.be.equal('Test label');
117
- });
118
- it('displays a max character and current character count if maxlength is provided', async () => {
119
- const component = await fixture(html `
120
- <glide-core-input label="Test label" maxlength="5"></glide-core-input>
121
- `);
122
- const maxCharacterCountText = component.shadowRoot?.querySelector('[data-test="character-count-text"]');
123
- expect(maxCharacterCountText?.textContent?.trim()).to.equal('0/5');
124
- });
125
- it('displays visually hidden character count text for screenreaders', async () => {
126
- const component = await fixture(html `
127
- <glide-core-input label="Test label" maxlength="5"></glide-core-input>
128
- `);
129
- const maxCharacterCountAnnouncement = component.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
130
- expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 5');
131
- });
132
- it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
133
- const component = await fixture(html `
134
- <glide-core-input label="Test label" maxlength="0"></glide-core-input>
135
- `);
136
- const container = component.shadowRoot?.querySelector('[data-test="character-count-container"]');
137
- expect(container).to.be.null;
138
- });
@@ -1 +0,0 @@
1
- import './input.js';
@@ -1,98 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './input.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
- // `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
7
- // expecting it to throw would work. But it wouldn't throw until its
8
- // timeout, which would make for a slow test. Its timeout can likely be
9
- // configured. But waiting a turn of the event loop, after which the event
10
- // will have been dispatched, gets the job done as well.
11
- it('dispatches a "change" event when typed in', async () => {
12
- const component = await fixture(html `<glide-core-input></glide-core-input>`);
13
- setTimeout(async () => {
14
- component.focus();
15
- await sendKeys({ type: 'testing' });
16
- component.blur();
17
- });
18
- const event = await oneEvent(component, 'change');
19
- expect(event instanceof Event).to.be.true;
20
- expect(event.bubbles).to.be.true;
21
- });
22
- it('dispatches an "input" event when typed in', async () => {
23
- const component = await fixture(html `<glide-core-input></glide-core-input>`);
24
- setTimeout(() => {
25
- component.focus();
26
- sendKeys({ type: 'testing' });
27
- });
28
- const event = await oneEvent(component, 'input');
29
- expect(event instanceof Event).to.be.true;
30
- expect(event.bubbles).to.be.true;
31
- });
32
- it('dispatches an "invalid" event on submit when required and no value', async () => {
33
- const form = document.createElement('form');
34
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
35
- parentNode: form,
36
- });
37
- setTimeout(() => form.requestSubmit());
38
- const event = await oneEvent(component, 'invalid');
39
- expect(event instanceof Event).to.be.true;
40
- });
41
- it('dispatches an "invalid" event after `checkValidity` is called when required and no value', async () => {
42
- const form = document.createElement('form');
43
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
44
- parentNode: form,
45
- });
46
- setTimeout(() => component.checkValidity());
47
- const event = await oneEvent(component, 'invalid');
48
- expect(event instanceof Event).to.be.true;
49
- });
50
- it('dispatches an "invalid" event after `reportValidity` is called when required and no value', async () => {
51
- const form = document.createElement('form');
52
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
53
- parentNode: form,
54
- });
55
- setTimeout(() => component.reportValidity());
56
- const event = await oneEvent(component, 'invalid');
57
- expect(event instanceof Event).to.be.true;
58
- });
59
- it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
60
- const form = document.createElement('form');
61
- const component = await fixture(html `<glide-core-input></glide-core-input>`, {
62
- parentNode: form,
63
- });
64
- const spy = sinon.spy();
65
- component.addEventListener('invalid', spy);
66
- component.checkValidity();
67
- await aTimeout(0);
68
- expect(spy.callCount).to.equal(0);
69
- });
70
- it('does not dispatch an "invalid" event after `checkValidity` is called when required and no value but disabled', async () => {
71
- const form = document.createElement('form');
72
- const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
73
- const spy = sinon.spy();
74
- component.addEventListener('invalid', spy);
75
- component.checkValidity();
76
- await aTimeout(0);
77
- expect(spy.callCount).to.equal(0);
78
- });
79
- it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
80
- const form = document.createElement('form');
81
- const component = await fixture(html `<glide-core-input></glide-core-input>`, {
82
- parentNode: form,
83
- });
84
- const spy = sinon.spy();
85
- component.addEventListener('invalid', spy);
86
- component.reportValidity();
87
- await aTimeout(0);
88
- expect(spy.callCount).to.equal(0);
89
- });
90
- it('does not dispatch an "invalid" event when `reportValidity` is called when required and no value but disabled', async () => {
91
- const form = document.createElement('form');
92
- const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`, { parentNode: form });
93
- const spy = sinon.spy();
94
- component.addEventListener('invalid', spy);
95
- component.reportValidity();
96
- await aTimeout(0);
97
- expect(spy.callCount).to.equal(0);
98
- });
@@ -1 +0,0 @@
1
- import './input.js';