@crowdstrike/glide-core 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (287) 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.js +11 -11
  5. package/dist/dropdown.option.d.ts +1 -1
  6. package/dist/dropdown.option.js +1 -1
  7. package/dist/dropdown.styles.js +11 -16
  8. package/dist/input.styles.js +6 -1
  9. package/dist/styles/variables.css +1 -1
  10. package/dist/textarea.styles.js +6 -0
  11. package/dist/toasts.d.ts +2 -2
  12. package/dist/toasts.toast.d.ts +1 -1
  13. package/dist/toasts.toast.js +1 -1
  14. package/dist/toasts.toast.styles.js +8 -0
  15. package/dist/tree.item.styles.js +2 -2
  16. package/package.json +9 -6
  17. package/dist/accordion.stories.d.ts +0 -6
  18. package/dist/accordion.test.basics.d.ts +0 -1
  19. package/dist/accordion.test.basics.js +0 -28
  20. package/dist/accordion.test.events.d.ts +0 -1
  21. package/dist/accordion.test.events.js +0 -28
  22. package/dist/accordion.test.focus.d.ts +0 -1
  23. package/dist/accordion.test.focus.js +0 -11
  24. package/dist/accordion.test.interactions.d.ts +0 -1
  25. package/dist/accordion.test.interactions.js +0 -75
  26. package/dist/button-group.button.test.basics.d.ts +0 -1
  27. package/dist/button-group.button.test.basics.js +0 -97
  28. package/dist/button-group.button.test.events.d.ts +0 -1
  29. package/dist/button-group.button.test.events.js +0 -15
  30. package/dist/button-group.button.test.focus.d.ts +0 -1
  31. package/dist/button-group.button.test.focus.js +0 -13
  32. package/dist/button-group.button.test.interactions.d.ts +0 -1
  33. package/dist/button-group.button.test.interactions.js +0 -42
  34. package/dist/button-group.stories.d.ts +0 -7
  35. package/dist/button-group.test.basics.d.ts +0 -1
  36. package/dist/button-group.test.basics.js +0 -148
  37. package/dist/button-group.test.events.d.ts +0 -1
  38. package/dist/button-group.test.events.js +0 -241
  39. package/dist/button-group.test.focus.d.ts +0 -1
  40. package/dist/button-group.test.focus.js +0 -39
  41. package/dist/button-group.test.interactions.d.ts +0 -1
  42. package/dist/button-group.test.interactions.js +0 -91
  43. package/dist/button.stories.d.ts +0 -7
  44. package/dist/button.test.basics.d.ts +0 -1
  45. package/dist/button.test.basics.js +0 -69
  46. package/dist/button.test.events.d.ts +0 -1
  47. package/dist/button.test.events.js +0 -102
  48. package/dist/checkbox-group.stories.d.ts +0 -6
  49. package/dist/checkbox-group.test.basics.d.ts +0 -1
  50. package/dist/checkbox-group.test.basics.js +0 -116
  51. package/dist/checkbox-group.test.events.d.ts +0 -1
  52. package/dist/checkbox-group.test.events.js +0 -111
  53. package/dist/checkbox-group.test.focus.d.ts +0 -1
  54. package/dist/checkbox-group.test.focus.js +0 -70
  55. package/dist/checkbox-group.test.form.d.ts +0 -1
  56. package/dist/checkbox-group.test.form.js +0 -131
  57. package/dist/checkbox-group.test.interactions.d.ts +0 -1
  58. package/dist/checkbox-group.test.interactions.js +0 -82
  59. package/dist/checkbox-group.test.validity.d.ts +0 -1
  60. package/dist/checkbox-group.test.validity.js +0 -145
  61. package/dist/checkbox.stories.d.ts +0 -5
  62. package/dist/checkbox.test.basics.d.ts +0 -1
  63. package/dist/checkbox.test.basics.js +0 -90
  64. package/dist/checkbox.test.events.d.ts +0 -1
  65. package/dist/checkbox.test.events.js +0 -105
  66. package/dist/checkbox.test.focus.d.ts +0 -1
  67. package/dist/checkbox.test.focus.js +0 -51
  68. package/dist/checkbox.test.form.d.ts +0 -1
  69. package/dist/checkbox.test.form.js +0 -133
  70. package/dist/checkbox.test.interactions.d.ts +0 -1
  71. package/dist/checkbox.test.interactions.js +0 -131
  72. package/dist/checkbox.test.validity.d.ts +0 -1
  73. package/dist/checkbox.test.validity.js +0 -128
  74. package/dist/drawer.stories.d.ts +0 -6
  75. package/dist/drawer.test.accessibility.d.ts +0 -1
  76. package/dist/drawer.test.accessibility.js +0 -22
  77. package/dist/drawer.test.basics.d.ts +0 -1
  78. package/dist/drawer.test.basics.js +0 -44
  79. package/dist/drawer.test.closing.d.ts +0 -1
  80. package/dist/drawer.test.closing.js +0 -40
  81. package/dist/drawer.test.events.d.ts +0 -1
  82. package/dist/drawer.test.events.js +0 -42
  83. package/dist/drawer.test.methods.d.ts +0 -1
  84. package/dist/drawer.test.methods.js +0 -35
  85. package/dist/dropdown.option.test.basics.d.ts +0 -1
  86. package/dist/dropdown.option.test.basics.js +0 -34
  87. package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
  88. package/dist/dropdown.option.test.basics.multiple.js +0 -36
  89. package/dist/dropdown.option.test.basics.single.d.ts +0 -1
  90. package/dist/dropdown.option.test.basics.single.js +0 -29
  91. package/dist/dropdown.option.test.events.d.ts +0 -1
  92. package/dist/dropdown.option.test.events.js +0 -36
  93. package/dist/dropdown.option.test.focus.d.ts +0 -1
  94. package/dist/dropdown.option.test.focus.js +0 -11
  95. package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
  96. package/dist/dropdown.option.test.interactions.multiple.js +0 -42
  97. package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
  98. package/dist/dropdown.option.test.interactions.single.js +0 -76
  99. package/dist/dropdown.stories.d.ts +0 -8
  100. package/dist/dropdown.test.basics.d.ts +0 -1
  101. package/dist/dropdown.test.basics.filterable.d.ts +0 -1
  102. package/dist/dropdown.test.basics.filterable.js +0 -108
  103. package/dist/dropdown.test.basics.js +0 -181
  104. package/dist/dropdown.test.basics.multiple.d.ts +0 -1
  105. package/dist/dropdown.test.basics.multiple.js +0 -259
  106. package/dist/dropdown.test.basics.single.d.ts +0 -1
  107. package/dist/dropdown.test.basics.single.js +0 -122
  108. package/dist/dropdown.test.events.d.ts +0 -1
  109. package/dist/dropdown.test.events.filterable.d.ts +0 -1
  110. package/dist/dropdown.test.events.filterable.js +0 -31
  111. package/dist/dropdown.test.events.js +0 -251
  112. package/dist/dropdown.test.events.multiple.d.ts +0 -1
  113. package/dist/dropdown.test.events.multiple.js +0 -446
  114. package/dist/dropdown.test.events.single.d.ts +0 -1
  115. package/dist/dropdown.test.events.single.js +0 -343
  116. package/dist/dropdown.test.focus.d.ts +0 -1
  117. package/dist/dropdown.test.focus.filterable.d.ts +0 -1
  118. package/dist/dropdown.test.focus.filterable.js +0 -140
  119. package/dist/dropdown.test.focus.js +0 -107
  120. package/dist/dropdown.test.focus.multiple.d.ts +0 -1
  121. package/dist/dropdown.test.focus.multiple.js +0 -170
  122. package/dist/dropdown.test.focus.single.d.ts +0 -1
  123. package/dist/dropdown.test.focus.single.js +0 -42
  124. package/dist/dropdown.test.form.d.ts +0 -1
  125. package/dist/dropdown.test.form.js +0 -74
  126. package/dist/dropdown.test.form.multiple.d.ts +0 -1
  127. package/dist/dropdown.test.form.multiple.js +0 -151
  128. package/dist/dropdown.test.form.single.d.ts +0 -1
  129. package/dist/dropdown.test.form.single.js +0 -129
  130. package/dist/dropdown.test.interactions.d.ts +0 -1
  131. package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
  132. package/dist/dropdown.test.interactions.filterable.js +0 -805
  133. package/dist/dropdown.test.interactions.js +0 -696
  134. package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
  135. package/dist/dropdown.test.interactions.multiple.js +0 -1026
  136. package/dist/dropdown.test.interactions.single.d.ts +0 -1
  137. package/dist/dropdown.test.interactions.single.js +0 -569
  138. package/dist/dropdown.test.validity.d.ts +0 -1
  139. package/dist/dropdown.test.validity.js +0 -181
  140. package/dist/form-controls-layout.stories.d.ts +0 -10
  141. package/dist/form-controls-layout.test.basics.d.ts +0 -2
  142. package/dist/form-controls-layout.test.basics.js +0 -75
  143. package/dist/form-controls-layout.test.interactions.d.ts +0 -2
  144. package/dist/form-controls-layout.test.interactions.js +0 -26
  145. package/dist/icon-button.stories.d.ts +0 -6
  146. package/dist/icon-button.test.basics.d.ts +0 -1
  147. package/dist/icon-button.test.basics.js +0 -43
  148. package/dist/icon-button.test.focus.d.ts +0 -1
  149. package/dist/icon-button.test.focus.js +0 -13
  150. package/dist/input.stories.d.ts +0 -8
  151. package/dist/input.test.basics.d.ts +0 -1
  152. package/dist/input.test.basics.js +0 -138
  153. package/dist/input.test.events.d.ts +0 -1
  154. package/dist/input.test.events.js +0 -98
  155. package/dist/input.test.focus.d.ts +0 -1
  156. package/dist/input.test.focus.js +0 -58
  157. package/dist/input.test.form.d.ts +0 -1
  158. package/dist/input.test.form.js +0 -74
  159. package/dist/input.test.validity.d.ts +0 -1
  160. package/dist/input.test.validity.js +0 -258
  161. package/dist/label.test.basics.d.ts +0 -1
  162. package/dist/label.test.basics.js +0 -136
  163. package/dist/menu.button.test.basics.d.ts +0 -1
  164. package/dist/menu.button.test.basics.js +0 -43
  165. package/dist/menu.link.test.basics.d.ts +0 -1
  166. package/dist/menu.link.test.basics.js +0 -47
  167. package/dist/menu.options.test.basics.d.ts +0 -2
  168. package/dist/menu.options.test.basics.js +0 -44
  169. package/dist/menu.options.test.events.d.ts +0 -1
  170. package/dist/menu.options.test.events.js +0 -19
  171. package/dist/menu.stories.d.ts +0 -11
  172. package/dist/menu.test.basics.d.ts +0 -1
  173. package/dist/menu.test.basics.js +0 -178
  174. package/dist/menu.test.events.d.ts +0 -3
  175. package/dist/menu.test.events.js +0 -125
  176. package/dist/menu.test.focus.d.ts +0 -2
  177. package/dist/menu.test.focus.js +0 -102
  178. package/dist/menu.test.interactions.d.ts +0 -3
  179. package/dist/menu.test.interactions.js +0 -1069
  180. package/dist/modal.icon-button.test.basics.d.ts +0 -1
  181. package/dist/modal.icon-button.test.basics.js +0 -46
  182. package/dist/modal.stories.d.ts +0 -13
  183. package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
  184. package/dist/modal.tertiary-icon.test.basics.js +0 -60
  185. package/dist/modal.test.accessibility.d.ts +0 -1
  186. package/dist/modal.test.accessibility.js +0 -38
  187. package/dist/modal.test.basics.d.ts +0 -3
  188. package/dist/modal.test.basics.js +0 -204
  189. package/dist/modal.test.close.d.ts +0 -1
  190. package/dist/modal.test.close.js +0 -35
  191. package/dist/modal.test.events.d.ts +0 -1
  192. package/dist/modal.test.events.js +0 -99
  193. package/dist/modal.test.lock-scroll.d.ts +0 -1
  194. package/dist/modal.test.lock-scroll.js +0 -67
  195. package/dist/modal.test.methods.d.ts +0 -1
  196. package/dist/modal.test.methods.js +0 -20
  197. package/dist/modal.test.scrollbars.d.ts +0 -1
  198. package/dist/modal.test.scrollbars.js +0 -18
  199. package/dist/radio-group.stories.d.ts +0 -6
  200. package/dist/radio-group.test.basics.d.ts +0 -2
  201. package/dist/radio-group.test.basics.js +0 -324
  202. package/dist/radio-group.test.events.d.ts +0 -2
  203. package/dist/radio-group.test.events.js +0 -278
  204. package/dist/radio-group.test.focus.d.ts +0 -2
  205. package/dist/radio-group.test.focus.js +0 -95
  206. package/dist/radio-group.test.form.d.ts +0 -1
  207. package/dist/radio-group.test.form.js +0 -124
  208. package/dist/radio-group.test.validity.d.ts +0 -1
  209. package/dist/radio-group.test.validity.js +0 -311
  210. package/dist/split-button.primary-button.test.basics.d.ts +0 -1
  211. package/dist/split-button.primary-button.test.basics.js +0 -31
  212. package/dist/split-button.primary-button.test.focus.d.ts +0 -1
  213. package/dist/split-button.primary-button.test.focus.js +0 -14
  214. package/dist/split-button.primary-link.test.basics.d.ts +0 -1
  215. package/dist/split-button.primary-link.test.basics.js +0 -30
  216. package/dist/split-button.primary-link.test.focus.d.ts +0 -1
  217. package/dist/split-button.primary-link.test.focus.js +0 -15
  218. package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
  219. package/dist/split-button.secondary-button.test.basics.js +0 -58
  220. package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
  221. package/dist/split-button.secondary-button.test.focus.js +0 -14
  222. package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
  223. package/dist/split-button.secondary-button.test.interactions.js +0 -30
  224. package/dist/split-button.stories.d.ts +0 -13
  225. package/dist/split-button.test.basics.d.ts +0 -2
  226. package/dist/split-button.test.basics.js +0 -87
  227. package/dist/split-button.test.interactions.d.ts +0 -4
  228. package/dist/split-button.test.interactions.js +0 -51
  229. package/dist/tab.group.test.basics.d.ts +0 -3
  230. package/dist/tab.group.test.basics.js +0 -234
  231. package/dist/tab.group.test.interactions.d.ts +0 -3
  232. package/dist/tab.group.test.interactions.js +0 -434
  233. package/dist/tab.test.basics.d.ts +0 -1
  234. package/dist/tab.test.basics.js +0 -50
  235. package/dist/tabs.stories.d.ts +0 -8
  236. package/dist/tag.stories.d.ts +0 -7
  237. package/dist/tag.test.basics.d.ts +0 -1
  238. package/dist/tag.test.basics.js +0 -28
  239. package/dist/tag.test.events.d.ts +0 -1
  240. package/dist/tag.test.events.js +0 -93
  241. package/dist/tag.test.focus.d.ts +0 -1
  242. package/dist/tag.test.focus.js +0 -10
  243. package/dist/tag.test.interactions.d.ts +0 -1
  244. package/dist/tag.test.interactions.js +0 -36
  245. package/dist/textarea.stories.d.ts +0 -5
  246. package/dist/textarea.test.basics.d.ts +0 -1
  247. package/dist/textarea.test.basics.js +0 -177
  248. package/dist/textarea.test.events.d.ts +0 -1
  249. package/dist/textarea.test.events.js +0 -106
  250. package/dist/textarea.test.form.d.ts +0 -1
  251. package/dist/textarea.test.form.js +0 -71
  252. package/dist/textarea.test.validity.d.ts +0 -1
  253. package/dist/textarea.test.validity.js +0 -204
  254. package/dist/toasts.stories.d.ts +0 -7
  255. package/dist/toasts.test.basics.d.ts +0 -1
  256. package/dist/toasts.test.basics.js +0 -115
  257. package/dist/toasts.toast.test.basics.d.ts +0 -1
  258. package/dist/toasts.toast.test.basics.js +0 -139
  259. package/dist/toggle.stories.d.ts +0 -4
  260. package/dist/toggle.test.basics.d.ts +0 -1
  261. package/dist/toggle.test.basics.js +0 -69
  262. package/dist/toggle.test.events.d.ts +0 -1
  263. package/dist/toggle.test.events.js +0 -30
  264. package/dist/toggle.test.focus.d.ts +0 -1
  265. package/dist/toggle.test.focus.js +0 -9
  266. package/dist/toggle.test.interactions.d.ts +0 -1
  267. package/dist/toggle.test.interactions.js +0 -81
  268. package/dist/tooltip.stories.d.ts +0 -7
  269. package/dist/tooltip.test.basics.d.ts +0 -1
  270. package/dist/tooltip.test.basics.js +0 -100
  271. package/dist/tooltip.test.interactions.d.ts +0 -1
  272. package/dist/tooltip.test.interactions.js +0 -203
  273. package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
  274. package/dist/tree.item.icon-button.test.basics.js +0 -22
  275. package/dist/tree.item.menu.test.basics.d.ts +0 -1
  276. package/dist/tree.item.menu.test.basics.js +0 -86
  277. package/dist/tree.item.test.basics.d.ts +0 -2
  278. package/dist/tree.item.test.basics.js +0 -138
  279. package/dist/tree.stories.d.ts +0 -9
  280. package/dist/tree.test.aria.d.ts +0 -1
  281. package/dist/tree.test.aria.js +0 -86
  282. package/dist/tree.test.basics.d.ts +0 -3
  283. package/dist/tree.test.basics.js +0 -130
  284. package/dist/tree.test.events.d.ts +0 -2
  285. package/dist/tree.test.events.js +0 -19
  286. package/dist/tree.test.focus.d.ts +0 -1
  287. package/dist/tree.test.focus.js +0 -383
@@ -1,145 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreCheckboxGroup from './checkbox-group.js';
5
- GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
6
- it('is valid if not required and the checkbox is unchecked', async () => {
7
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
8
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
9
- </glide-core-checkbox-group>`);
10
- expect(component.validity.valid).to.be.true;
11
- expect(component.validity?.valueMissing).to.be.false;
12
- expect(component.checkValidity()).to.be.true;
13
- expect(component.reportValidity()).to.be.true;
14
- });
15
- it('is valid if required and the checkbox is checked', async () => {
16
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
17
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
18
- </glide-core-checkbox-group>`);
19
- component.querySelector('glide-core-checkbox')?.click();
20
- expect(component.validity.valid).to.be.true;
21
- expect(component.validity?.valueMissing).to.be.false;
22
- expect(component.checkValidity()).to.be.true;
23
- expect(component.reportValidity()).to.be.true;
24
- });
25
- it('is invalid if required and the checkbox is unchecked', async () => {
26
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
27
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
28
- </glide-core-checkbox-group>`);
29
- expect(component.validity.valid).to.be.false;
30
- expect(component.validity?.valueMissing).to.be.true;
31
- expect(component.checkValidity()).to.be.false;
32
- expect(component.reportValidity()).to.be.false;
33
- });
34
- it('is invalid after being unchecked when required', async () => {
35
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
36
- <glide-core-checkbox
37
- label="Checkbox"
38
- value="value"
39
- checked
40
- ></glide-core-checkbox>
41
- </glide-core-checkbox-group>`);
42
- component.querySelector('glide-core-checkbox')?.click();
43
- expect(component.validity.valid).to.be.false;
44
- expect(component.validity?.valueMissing).to.be.true;
45
- expect(component.checkValidity()).to.be.false;
46
- expect(component.reportValidity()).to.be.false;
47
- });
48
- it('is both invalid and valid if required but disabled and the checkbox is unchecked', async () => {
49
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
50
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
51
- </glide-core-checkbox-group>`);
52
- expect(component.validity.valid).to.be.false;
53
- expect(component.validity?.valueMissing).to.be.true;
54
- expect(component.checkValidity()).to.be.true;
55
- expect(component.reportValidity()).to.be.true;
56
- });
57
- it('sets the checkbox as valid when `required` is set to `false` dynamically', async () => {
58
- const form = document.createElement('form');
59
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
60
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
61
- </glide-core-checkbox-group>`, { parentNode: form });
62
- component.required = false;
63
- await elementUpdated(component);
64
- const checkbox = component.querySelector('glide-core-checkbox');
65
- expect(checkbox?.validity.valid).to.be.true;
66
- });
67
- it('sets the checkbox as invalid when `required` is set to `true` dynamically', async () => {
68
- const form = document.createElement('form');
69
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
70
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
71
- </glide-core-checkbox-group>`, { parentNode: form });
72
- component.required = true;
73
- await elementUpdated(component);
74
- const checkbox = component.querySelector('glide-core-checkbox');
75
- expect(checkbox?.validity.valid).to.be.false;
76
- });
77
- it('sets the validity message with `setCustomValidity()`', async () => {
78
- const form = document.createElement('form');
79
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
80
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
81
- </glide-core-checkbox-group>`, { parentNode: form });
82
- component.setCustomValidity('validity message');
83
- expect(component.validity?.valid).to.be.false;
84
- expect(component.validity?.customError).to.be.true;
85
- expect(component.checkValidity()).to.be.false;
86
- expect(component.reportValidity()).to.be.false;
87
- await elementUpdated(component);
88
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
89
- ?.textContent).to.equal('validity message');
90
- });
91
- it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
92
- const form = document.createElement('form');
93
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
94
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
95
- </glide-core-checkbox-group>`, { parentNode: form });
96
- component.setCustomValidity('validity message');
97
- component.reportValidity();
98
- await elementUpdated(component);
99
- component.setCustomValidity('');
100
- await elementUpdated(component);
101
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
102
- ?.textContent).to.be.undefined;
103
- });
104
- it('is invalid when `setValidity()` is called', async () => {
105
- const form = document.createElement('form');
106
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
107
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
108
- </glide-core-checkbox-group>`, { parentNode: form });
109
- component.setValidity({ customError: true }, 'validity message');
110
- expect(component.validity.valid).to.be.false;
111
- await elementUpdated(component);
112
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
113
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
114
- ?.textContent).to.be.undefined;
115
- expect(component.validity?.customError).to.be.true;
116
- component.reportValidity();
117
- await elementUpdated(component);
118
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
119
- ?.textContent).to.equal('validity message');
120
- });
121
- it('is valid when `setValidity()` is called', async () => {
122
- const form = document.createElement('form');
123
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
124
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
125
- </glide-core-checkbox-group>`, { parentNode: form });
126
- component.setValidity({ customError: true }, 'validity message');
127
- component.setValidity({});
128
- await elementUpdated(component);
129
- expect(component.validity.valid).to.be.true;
130
- expect(component.validity.customError).to.be.false;
131
- expect(component.reportValidity()).to.be.true;
132
- await elementUpdated(component);
133
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
134
- ?.textContent).to.be.undefined;
135
- });
136
- it('retains existing validity state when `setCustomValidity()` is called', async () => {
137
- const form = document.createElement('form');
138
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
139
- <glide-core-checkbox label="Checkbox" value="value"></glide-core-checkbox>
140
- </glide-core-checkbox-group>`, { parentNode: form });
141
- component.setCustomValidity('validity message');
142
- expect(component.validity?.valid).to.be.false;
143
- expect(component.validity?.customError).to.be.true;
144
- expect(component.validity?.valueMissing).to.be.true;
145
- });
@@ -1,5 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/web-components';
2
- declare const meta: Meta;
3
- export default meta;
4
- export declare const Checkbox: StoryObj;
5
- export declare const WithError: StoryObj;
@@ -1 +0,0 @@
1
- export {};
@@ -1,90 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreCheckbox from './checkbox.js';
4
- GlideCoreCheckbox.shadowRootOptions.mode = 'open';
5
- it('registers', async () => {
6
- expect(window.customElements.get('glide-core-checkbox')).to.equal(GlideCoreCheckbox);
7
- });
8
- it('has defaults', async () => {
9
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
10
- expect(component.checked).to.be.false;
11
- expect(component.disabled).to.be.false;
12
- expect(component.hideLabel).to.be.false;
13
- expect(component.indeterminate).to.be.false;
14
- expect(component.name).to.be.empty.string;
15
- expect(component.orientation).to.equal('horizontal');
16
- expect(component.required).to.be.false;
17
- expect(component.summary).to.equal(undefined);
18
- expect(component.value).to.be.empty.string;
19
- });
20
- it('is accessible', async () => {
21
- const component = await fixture(html `<glide-core-checkbox label="Label">
22
- <div slot="tooltip">Tooltip</div>
23
- <div slot="description">Description</div>
24
- </glide-core-checkbox>`);
25
- await expect(component).to.be.accessible();
26
- });
27
- it('can have a label', async () => {
28
- const component = await fixture(html `<glide-core-checkbox label="Label">
29
- <div slot="description">Description</div>
30
- </glide-core-checkbox>`);
31
- const label = component.shadowRoot?.querySelector('label');
32
- expect(label?.textContent?.trim()).to.equal('Label');
33
- });
34
- it('can have a description', async () => {
35
- const component = await fixture(html `<glide-core-checkbox label="Label">
36
- <div slot="description">Description</div>
37
- </glide-core-checkbox>`);
38
- const assignedElements = component.shadowRoot
39
- ?.querySelector('slot[name="description"]')
40
- ?.assignedElements();
41
- expect(assignedElements?.at(0)?.textContent).to.equal('Description');
42
- });
43
- it('can have a name', async () => {
44
- const component = await fixture(html `<glide-core-checkbox
45
- label="Label"
46
- name="name"
47
- ></glide-core-checkbox> `);
48
- expect(component.getAttribute('name')).to.equal('name');
49
- expect(component.name).to.equal('name');
50
- });
51
- it('can have a summary', async () => {
52
- const component = await fixture(html `<glide-core-checkbox
53
- label="Label"
54
- summary="Summary"
55
- ></glide-core-checkbox> `);
56
- expect(component.getAttribute('summary')).to.equal('Summary');
57
- expect(component.summary).to.equal('Summary');
58
- });
59
- it('can have a tooltip', async () => {
60
- const component = await fixture(html `<glide-core-checkbox label="Label">
61
- <div slot="tooltip">Tooltip</div>
62
- </glide-core-checkbox>`);
63
- const assignedElements = component.shadowRoot
64
- ?.querySelector('slot[name="tooltip"]')
65
- ?.assignedElements();
66
- expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
67
- });
68
- it('can be checked', async () => {
69
- const component = await fixture(html `<glide-core-checkbox label="Label" checked></glide-core-checkbox> `);
70
- expect(component.hasAttribute('checked')).to.be.true;
71
- expect(component.checked).to.be.true;
72
- });
73
- it('can be disabled', async () => {
74
- const component = await fixture(html `<glide-core-checkbox label="Label" disabled></glide-core-checkbox> `);
75
- expect(component.hasAttribute('disabled')).to.be.true;
76
- expect(component.disabled).to.be.true;
77
- });
78
- it('can be indeterminate', async () => {
79
- const component = await fixture(html `<glide-core-checkbox
80
- label="Label"
81
- indeterminate
82
- ></glide-core-checkbox> `);
83
- expect(component.hasAttribute('indeterminate')).to.be.true;
84
- expect(component.indeterminate).to.be.true;
85
- });
86
- it('can be required', async () => {
87
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox> `);
88
- expect(component.hasAttribute('required')).to.be.true;
89
- expect(component.required).to.be.true;
90
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,105 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import * as sinon from 'sinon';
3
- import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
4
- import GlideCoreCheckbox from './checkbox.js';
5
- GlideCoreCheckbox.shadowRootOptions.mode = 'open';
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 "click" event when clicked', async () => {
12
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
13
- setTimeout(() => component.click());
14
- const event = await oneEvent(component, 'click');
15
- expect(event instanceof PointerEvent).to.be.true;
16
- expect(event.bubbles).to.be.true;
17
- });
18
- it('dispatches a "change" event when clicked', async () => {
19
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
20
- setTimeout(() => component.click());
21
- const event = await oneEvent(component, 'change');
22
- expect(event instanceof Event).to.be.true;
23
- expect(event.bubbles).to.be.true;
24
- });
25
- it('dispatches an "input" event when clicked', async () => {
26
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
27
- setTimeout(() => component.click());
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 a "private-value-change" event when its `value` is changed programmatically', async () => {
33
- const component = await fixture(html `<glide-core-checkbox label="One" value="one"></glide-core-checkbox>`);
34
- setTimeout(() => (component.value = 'two'));
35
- const event = await oneEvent(component, 'private-value-change');
36
- expect(event instanceof CustomEvent).to.be.true;
37
- expect(event.detail.old).to.equal('one');
38
- expect(event.detail.new).to.equal('two');
39
- expect(component.value).to.equal('two');
40
- });
41
- it('dispatches an "invalid" event on submit when required and unchecked', async () => {
42
- const form = document.createElement('form');
43
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
44
- setTimeout(() => form.requestSubmit());
45
- const event = await oneEvent(component, 'invalid');
46
- expect(event instanceof Event).to.be.true;
47
- });
48
- it('dispatches an "invalid" event after `checkValidity` is called when required and unchecked', async () => {
49
- const form = document.createElement('form');
50
- const component = await fixture(html `<glide-core-checkbox required></glide-core-checkbox>`, { parentNode: form });
51
- setTimeout(() => component.checkValidity());
52
- const event = await oneEvent(component, 'invalid');
53
- expect(event instanceof Event).to.be.true;
54
- });
55
- it('dispatches an "invalid" event after `reportValidity` is called when required and unchecked', async () => {
56
- const form = document.createElement('form');
57
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
58
- setTimeout(() => component.reportValidity());
59
- const event = await oneEvent(component, 'invalid');
60
- expect(event instanceof Event).to.be.true;
61
- });
62
- it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
63
- const form = document.createElement('form');
64
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
65
- const spy = sinon.spy();
66
- component.addEventListener('invalid', spy);
67
- component.checkValidity();
68
- await aTimeout(0);
69
- expect(spy.callCount).to.equal(0);
70
- });
71
- it('does not dispatch an "invalid" event after `checkValidity` is called when required and unchecked but disabled', async () => {
72
- const form = document.createElement('form');
73
- const component = await fixture(html `<glide-core-checkbox
74
- label="Label"
75
- disabled
76
- required
77
- ></glide-core-checkbox>`, { parentNode: form });
78
- const spy = sinon.spy();
79
- component.addEventListener('invalid', spy);
80
- component.checkValidity();
81
- await aTimeout(0);
82
- expect(spy.callCount).to.equal(0);
83
- });
84
- it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
85
- const form = document.createElement('form');
86
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
87
- const spy = sinon.spy();
88
- component.addEventListener('invalid', spy);
89
- component.reportValidity();
90
- await aTimeout(0);
91
- expect(spy.callCount).to.equal(0);
92
- });
93
- it('does not dispatch an "invalid" event when `reportValidity` is called when required and unchecked but disabled', async () => {
94
- const form = document.createElement('form');
95
- const component = await fixture(html `<glide-core-checkbox
96
- label="Label"
97
- disabled
98
- required
99
- ></glide-core-checkbox>`, { parentNode: form });
100
- const spy = sinon.spy();
101
- component.addEventListener('invalid', spy);
102
- component.reportValidity();
103
- await aTimeout(0);
104
- expect(spy.callCount).to.equal(0);
105
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,51 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreCheckbox from './checkbox.js';
4
- GlideCoreCheckbox.shadowRootOptions.mode = 'open';
5
- it('focuses the input when `focus()` is called', async () => {
6
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`);
7
- component.focus();
8
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
9
- expect(component.shadowRoot?.activeElement).to.equal(input);
10
- });
11
- it('focuses the input after submit when required and unchecked', async () => {
12
- const form = document.createElement('form');
13
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, {
14
- parentNode: form,
15
- });
16
- form.requestSubmit();
17
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
18
- expect(component.shadowRoot?.activeElement).to.be.equal(input);
19
- });
20
- it('focuses the input after `reportValidity` is called when required and unchecked', async () => {
21
- const form = document.createElement('form');
22
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
23
- component.reportValidity();
24
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
25
- expect(component.shadowRoot?.activeElement).to.equal(input);
26
- });
27
- it('focuses the input after `requestSubmit` is called when required and unchecked', async () => {
28
- const form = document.createElement('form');
29
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
30
- form.requestSubmit();
31
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
32
- expect(component.shadowRoot?.activeElement).to.equal(input);
33
- });
34
- it('does not focus the input after `checkValidity` is called', async () => {
35
- const form = document.createElement('form');
36
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`, { parentNode: form });
37
- component.checkValidity();
38
- expect(component.shadowRoot?.activeElement).to.equal(null);
39
- });
40
- it('blurs the input and reports validity if `blur` is called', async () => {
41
- const component = await fixture(html `<glide-core-checkbox label="Label" required></glide-core-checkbox>`);
42
- component.focus();
43
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
44
- expect(component.shadowRoot?.activeElement).to.equal(input);
45
- component.blur();
46
- await component.updateComplete;
47
- expect(component.shadowRoot?.activeElement).to.equal(null);
48
- expect(component.validity.valid).to.be.false;
49
- expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
50
- .to.be.true;
51
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,133 +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 GlideCoreCheckbox from './checkbox.js';
5
- import sinon from 'sinon';
6
- GlideCoreCheckbox.shadowRootOptions.mode = 'open';
7
- it('exposes standard form control properties and methods', async () => {
8
- const form = document.createElement('form');
9
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, { parentNode: form });
10
- expect(component.form).to.equal(form);
11
- expect(component.validity instanceof ValidityState).to.be.true;
12
- expect(component.willValidate).to.be.true;
13
- expect(component.checkValidity).to.be.a('function');
14
- expect(component.reportValidity).to.be.a('function');
15
- });
16
- it('can be reset', async () => {
17
- const form = document.createElement('form');
18
- const component = await fixture(html `<glide-core-checkbox
19
- label="Label"
20
- checked
21
- indeterminate
22
- ></glide-core-checkbox>`, {
23
- parentNode: form,
24
- });
25
- component.checked = false;
26
- component.indeterminate = false;
27
- form.reset();
28
- expect(component.checked).to.be.true;
29
- expect(component.indeterminate).to.be.true;
30
- });
31
- it('has `formData` value when checked', async () => {
32
- const form = document.createElement('form');
33
- await fixture(html `<glide-core-checkbox
34
- label="Label"
35
- name="name"
36
- value="value"
37
- checked
38
- ></glide-core-checkbox>`, {
39
- parentNode: form,
40
- });
41
- const formData = new FormData(form);
42
- expect(formData.get('name')).to.be.equal('value');
43
- });
44
- it('has `formData` value when checked and indeterminate', async () => {
45
- const form = document.createElement('form');
46
- await fixture(html `<glide-core-checkbox
47
- label="Label"
48
- name="name"
49
- value="value"
50
- checked
51
- indeterminate
52
- ></glide-core-checkbox>`, {
53
- parentNode: form,
54
- });
55
- const formData = new FormData(form);
56
- expect(formData.get('name')).to.be.equal('value');
57
- });
58
- it('has no `formData` value when unchecked', async () => {
59
- const form = document.createElement('form');
60
- await fixture(html `<glide-core-checkbox
61
- label="Label"
62
- name="name"
63
- value="value"
64
- ></glide-core-checkbox>`, {
65
- parentNode: form,
66
- });
67
- const formData = new FormData(form);
68
- expect(formData.get('name')).to.be.null;
69
- });
70
- it('has no `formData` value when unchecked and indeterminate', async () => {
71
- const form = document.createElement('form');
72
- await fixture(html `<glide-core-checkbox
73
- label="Label"
74
- name="name"
75
- value="value"
76
- indeterminate
77
- ></glide-core-checkbox>`, {
78
- parentNode: form,
79
- });
80
- const formData = new FormData(form);
81
- expect(formData.get('name')).to.be.null;
82
- });
83
- it('has no `formData` value when checked but disabled', async () => {
84
- const form = document.createElement('form');
85
- await fixture(html `<glide-core-checkbox
86
- name="name"
87
- value="value"
88
- checked
89
- disabled
90
- ></glide-core-checkbox>`, {
91
- parentNode: form,
92
- });
93
- const formData = new FormData(form);
94
- expect(formData.get('name')).to.be.null;
95
- });
96
- it('has no `formData` value when checked but without a `name`', async () => {
97
- const form = document.createElement('form');
98
- await fixture(html `<glide-core-checkbox
99
- label="Label"
100
- value="value"
101
- checked
102
- ></glide-core-checkbox>`, {
103
- parentNode: form,
104
- });
105
- const formData = new FormData(form);
106
- expect(formData.get('name')).to.be.null;
107
- });
108
- it('has no `formData` value when checked but without a `value`', async () => {
109
- const form = document.createElement('form');
110
- await fixture(html `<glide-core-checkbox
111
- label="Label"
112
- name="name"
113
- checked
114
- ></glide-core-checkbox>`, {
115
- parentNode: form,
116
- });
117
- const formData = new FormData(form);
118
- expect(formData.get('name')).to.be.null;
119
- });
120
- it('submits its form on Enter', async () => {
121
- const form = document.createElement('form');
122
- const component = await fixture(html `<glide-core-checkbox label="Label"></glide-core-checkbox>`, {
123
- parentNode: form,
124
- });
125
- const spy = sinon.spy();
126
- form.addEventListener('submit', (event) => {
127
- event.preventDefault();
128
- spy();
129
- });
130
- component.focus();
131
- await sendKeys({ press: 'Enter' });
132
- expect(spy.callCount).to.equal(1);
133
- });
@@ -1 +0,0 @@
1
- export {};