@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,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 {};