@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,102 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './button.js';
3
- import { expect, fixture, html, oneEvent } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreButton from './button.js';
6
- GlideCoreButton.shadowRootOptions.mode = 'open';
7
- it('dispatches a "click" event when clicked', async () => {
8
- const component = await fixture(html `
9
- <glide-core-button label="Label" type="button"></glide-core-button>
10
- `);
11
- setTimeout(() => {
12
- component.click();
13
- });
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 "click" event on Enter', async () => {
19
- const component = await fixture(html `
20
- <glide-core-button label="Label" type="button"></glide-core-button>
21
- `);
22
- component.focus();
23
- sendKeys({ press: 'Enter' });
24
- const event = await oneEvent(component, 'click');
25
- expect(event instanceof PointerEvent).to.be.true;
26
- expect(event.bubbles).to.be.true;
27
- });
28
- it('dispatches a "click" event on Space', async () => {
29
- const component = await fixture(html `
30
- <glide-core-button label="Label" type="button"></glide-core-button>
31
- `);
32
- component.focus();
33
- sendKeys({ press: ' ' });
34
- const event = await oneEvent(component, 'click');
35
- expect(event instanceof PointerEvent).to.be.true;
36
- expect(event.bubbles).to.be.true;
37
- });
38
- it('dispatches a "reset" event on click', async () => {
39
- const form = document.createElement('form');
40
- const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
41
- parentNode: form,
42
- });
43
- setTimeout(() => {
44
- component.click();
45
- });
46
- const event = await oneEvent(form, 'reset');
47
- expect(event instanceof Event).to.be.true;
48
- });
49
- it('dispatches a "reset" event on Enter', async () => {
50
- const form = document.createElement('form');
51
- const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
52
- parentNode: form,
53
- });
54
- component.focus();
55
- sendKeys({ press: 'Enter' });
56
- const event = await oneEvent(form, 'reset');
57
- expect(event instanceof Event).to.be.true;
58
- });
59
- it('dispatches a "reset" event on Space', async () => {
60
- const form = document.createElement('form');
61
- const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
62
- parentNode: form,
63
- });
64
- component.focus();
65
- sendKeys({ press: ' ' });
66
- const event = await oneEvent(form, 'reset');
67
- expect(event instanceof Event).to.be.true;
68
- });
69
- it('dispatches a "submit" event on click', async () => {
70
- const form = document.createElement('form');
71
- const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
72
- parentNode: form,
73
- });
74
- form.addEventListener('submit', (event) => event.preventDefault());
75
- setTimeout(() => {
76
- component.click();
77
- });
78
- const event = await oneEvent(form, 'submit');
79
- expect(event instanceof Event).to.be.true;
80
- });
81
- it('dispatches a "submit" event on Enter', async () => {
82
- const form = document.createElement('form');
83
- const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
84
- parentNode: form,
85
- });
86
- form.addEventListener('submit', (event) => event.preventDefault());
87
- component.focus();
88
- sendKeys({ press: 'Enter' });
89
- const event = await oneEvent(form, 'submit');
90
- expect(event instanceof Event).to.be.true;
91
- });
92
- it('dispatches a "submit" event on Space', async () => {
93
- const form = document.createElement('form');
94
- const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
95
- parentNode: form,
96
- });
97
- form.addEventListener('submit', (event) => event.preventDefault());
98
- component.focus();
99
- sendKeys({ press: ' ' });
100
- const event = await oneEvent(form, 'submit');
101
- expect(event instanceof Event).to.be.true;
102
- });
@@ -1,6 +0,0 @@
1
- import './checkbox.js';
2
- import type { Meta, StoryObj } from '@storybook/web-components';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const CheckboxGroup: StoryObj;
6
- export declare const WithError: StoryObj;
@@ -1 +0,0 @@
1
- import './checkbox.js';
@@ -1,116 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import { ArgumentError } from 'ow';
4
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
5
- import GlideCoreCheckboxGroup from './checkbox-group.js';
6
- import expectArgumentError from './library/expect-argument-error.js';
7
- import sinon from 'sinon';
8
- GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
9
- it('registers', async () => {
10
- expect(window.customElements.get('glide-core-checkbox-group')).to.equal(GlideCoreCheckboxGroup);
11
- });
12
- it('has defaults', async () => {
13
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
14
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
15
- </glide-core-checkbox-group>`);
16
- expect(component.disabled).to.be.false;
17
- expect(component.hideLabel).to.be.false;
18
- expect(component.name).to.be.empty.string;
19
- expect(component.required).to.be.false;
20
- // Not reflected, so no attribute assertion is necessary.
21
- expect(component.value).to.deep.equal([]);
22
- });
23
- it('is accessible', async () => {
24
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
25
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
26
- <div slot="tooltip">Tooltip</div>
27
- <div slot="description">Description</div>
28
- </glide-core-checkbox-group>`);
29
- await expect(component).to.be.accessible();
30
- });
31
- it('can have a label', async () => {
32
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
33
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
34
- </glide-core-checkbox-group>`);
35
- expect(component.getAttribute('label')).to.equal('Checkbox Group');
36
- expect(component.label).to.equal('Checkbox Group');
37
- });
38
- it('can have a description', async () => {
39
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
40
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
41
- <div slot="description">Description</div>
42
- </glide-core-checkbox-group>`);
43
- const assignedElements = component.shadowRoot
44
- ?.querySelector('slot[name="description"]')
45
- ?.assignedElements();
46
- expect(assignedElements?.at(0)?.textContent).to.equal('Description');
47
- });
48
- it('can have a name', async () => {
49
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
50
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
51
- </glide-core-checkbox-group>`);
52
- expect(component.getAttribute('name')).to.equal('name');
53
- expect(component.name).to.equal('name');
54
- });
55
- it('can have a tooltip', async () => {
56
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
57
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
58
- <div slot="tooltip">Tooltip</div>
59
- </glide-core-checkbox-group>`);
60
- const assignedElements = component.shadowRoot
61
- ?.querySelector('slot[name="tooltip"]')
62
- ?.assignedElements();
63
- expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
64
- });
65
- it('can be disabled initially', async () => {
66
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled>
67
- <glide-core-checkbox label="One"></glide-core-checkbox>
68
- <glide-core-checkbox label="Two"></glide-core-checkbox>
69
- </glide-core-checkbox-group>`);
70
- const checkboxes = component.querySelectorAll('glide-core-checkbox');
71
- expect(checkboxes[0].disabled).to.be.true;
72
- expect(checkboxes[1].disabled).to.be.true;
73
- expect(component.hasAttribute('disabled')).to.be.true;
74
- expect(component.disabled).to.be.true;
75
- });
76
- it('can be disabled dynamically', async () => {
77
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
78
- <glide-core-checkbox label="One"></glide-core-checkbox>
79
- <glide-core-checkbox label="Two"></glide-core-checkbox>
80
- </glide-core-checkbox-group>`);
81
- component.disabled = true;
82
- await elementUpdated(component);
83
- const checkboxes = component.querySelectorAll('glide-core-checkbox');
84
- expect(checkboxes[0].disabled).to.be.true;
85
- expect(checkboxes[1].disabled).to.be.true;
86
- expect(component.hasAttribute('disabled')).to.be.true;
87
- expect(component.disabled).to.be.true;
88
- });
89
- it('can be required', async () => {
90
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
91
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
92
- </glide-core-checkbox-group>`);
93
- expect(component.hasAttribute('required')).to.be.true;
94
- expect(component.required).to.be.true;
95
- });
96
- it('throws if it does not have a default slot', async () => {
97
- const spy = sinon.spy();
98
- try {
99
- await fixture(html `<glide-core-checkbox-group
100
- label="Checkbox Group"
101
- ></glide-core-checkbox-group>`);
102
- }
103
- catch (error) {
104
- if (error instanceof ArgumentError) {
105
- spy();
106
- }
107
- }
108
- expect(spy.callCount).to.equal(1);
109
- });
110
- it('throws if the default slot is the incorrect type', async () => {
111
- await expectArgumentError(() => {
112
- return fixture(html `<glide-core-checkbox-group label="Checkbox Group">
113
- <button>Button</button>
114
- </glide-core-checkbox-group>`);
115
- });
116
- });
@@ -1 +0,0 @@
1
- import './checkbox.js';
@@ -1,111 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import * as sinon from 'sinon';
4
- import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
5
- import GlideCoreCheckboxGroup from './checkbox-group.js';
6
- GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
7
- // `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
8
- // expecting it to throw would work. But it wouldn't throw until its
9
- // timeout, which would make for a slow test. Its timeout can likely be
10
- // configured. But waiting a turn of the event loop, after which the event
11
- // will have been dispatched, gets the job done as well.
12
- it('dispatches a "click" event when clicked', async () => {
13
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
14
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
15
- </glide-core-checkbox-group>`);
16
- setTimeout(() => component.click());
17
- const event = await oneEvent(component, 'click');
18
- expect(event instanceof PointerEvent).to.be.true;
19
- expect(event.bubbles).to.be.true;
20
- });
21
- it('dispatches a "change" event when clicked', async () => {
22
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
23
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
24
- </glide-core-checkbox-group>`);
25
- const checkbox = component.querySelector('glide-core-checkbox');
26
- setTimeout(() => checkbox?.click());
27
- const event = await oneEvent(component, 'change');
28
- expect(event instanceof Event).to.be.true;
29
- expect(event.bubbles).to.be.true;
30
- });
31
- it('dispatches an "input" event when clicked', async () => {
32
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
33
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
34
- </glide-core-checkbox-group>`);
35
- const checkbox = component.querySelector('glide-core-checkbox');
36
- setTimeout(() => checkbox?.click());
37
- const event = await oneEvent(component, 'input');
38
- expect(event instanceof Event).to.be.true;
39
- expect(event.bubbles).to.be.true;
40
- });
41
- it('dispatches an "invalid" event on submit when required and the checkbox is unchecked', async () => {
42
- const form = document.createElement('form');
43
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
44
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
45
- </glide-core-checkbox-group>`, { parentNode: form });
46
- setTimeout(() => form.requestSubmit());
47
- const event = await oneEvent(component, 'invalid');
48
- expect(event instanceof Event).to.be.true;
49
- });
50
- it('dispatches an "invalid" event after `checkValidity` is called when required and the checkbox is unchecked', async () => {
51
- const form = document.createElement('form');
52
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
53
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
54
- </glide-core-checkbox-group>`, { parentNode: form });
55
- setTimeout(() => component.checkValidity());
56
- const event = await oneEvent(component, 'invalid');
57
- expect(event instanceof Event).to.be.true;
58
- });
59
- it('dispatches an "invalid" event after `reportValidity` is called when required and the checkbox is unchecked', async () => {
60
- const form = document.createElement('form');
61
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
62
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
63
- </glide-core-checkbox-group>`, { parentNode: form });
64
- setTimeout(() => component.reportValidity());
65
- const event = await oneEvent(component, 'invalid');
66
- expect(event instanceof Event).to.be.true;
67
- });
68
- it('does not dispatch an "invalid" event after `checkValidity` is called when not required', async () => {
69
- const form = document.createElement('form');
70
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
71
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
72
- </glide-core-checkbox-group>`, { 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 after `checkValidity` is called when disabled but required and the checkbox is unchecked', async () => {
80
- const form = document.createElement('form');
81
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
82
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
83
- </glide-core-checkbox-group>`, { parentNode: form });
84
- const spy = sinon.spy();
85
- component.addEventListener('invalid', spy);
86
- component.checkValidity();
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 not required,', async () => {
91
- const form = document.createElement('form');
92
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
93
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
94
- </glide-core-checkbox-group>`, { parentNode: form });
95
- const spy = sinon.spy();
96
- component.addEventListener('invalid', spy);
97
- component.reportValidity();
98
- await aTimeout(0);
99
- expect(spy.callCount).to.equal(0);
100
- });
101
- it('does not dispatch an "invalid" event when `reportValidity` is called when disabled but required and the checkbox is unchecked', async () => {
102
- const form = document.createElement('form');
103
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
104
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
105
- </glide-core-checkbox-group>`, { parentNode: form });
106
- const spy = sinon.spy();
107
- component.addEventListener('invalid', spy);
108
- component.reportValidity();
109
- await aTimeout(0);
110
- expect(spy.callCount).to.equal(0);
111
- });
@@ -1 +0,0 @@
1
- import './checkbox.js';
@@ -1,70 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreCheckbox from './checkbox.js';
6
- import GlideCoreCheckboxGroup from './checkbox-group.js';
7
- GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
8
- GlideCoreCheckbox.shadowRootOptions.mode = 'open';
9
- it('focuses the first enabled checkbox when `focus()` is called', async () => {
10
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
11
- <glide-core-checkbox label="One" disabled></glide-core-checkbox>
12
- <glide-core-checkbox label="Two"></glide-core-checkbox>
13
- </glide-core-checkbox-group>`);
14
- component.focus();
15
- expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox:last-of-type'));
16
- });
17
- it('focuses the first checkbox after submit when required but the checkbox is unchecked', async () => {
18
- const form = document.createElement('form');
19
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
20
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
21
- </glide-core-checkbox-group>`, {
22
- parentNode: form,
23
- });
24
- form.requestSubmit();
25
- expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
26
- });
27
- it('focuses the first checkbox after `reportValidity` is called when required but the checkbox is unchecked', async () => {
28
- const form = document.createElement('form');
29
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
30
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
31
- </glide-core-checkbox-group>`, { parentNode: form });
32
- component.reportValidity();
33
- expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
34
- });
35
- it('focuses the first checkbox after `requestSubmit` is called when required but the checkbox is unchecked', async () => {
36
- const form = document.createElement('form');
37
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
38
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
39
- </glide-core-checkbox-group>`, { parentNode: form });
40
- form.requestSubmit();
41
- expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
42
- });
43
- it('does not focus the input after `checkValidity` is called', async () => {
44
- const form = document.createElement('form');
45
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
46
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
47
- </glide-core-checkbox-group>`, { parentNode: form });
48
- component.checkValidity();
49
- expect(document.activeElement).to.not.equal(component.querySelector('glide-core-checkbox'));
50
- });
51
- it('reports validity of checkboxes if blurred', async () => {
52
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
53
- <glide-core-checkbox label="Checkbox1"></glide-core-checkbox>
54
- <glide-core-checkbox label="Checkbox2"></glide-core-checkbox>
55
- </glide-core-checkbox-group>`);
56
- component.focus();
57
- const checkboxes = component.querySelectorAll('glide-core-checkbox');
58
- expect(document.activeElement === checkboxes[0]).to.be.true;
59
- await sendKeys({ press: 'Tab' });
60
- expect(document.activeElement === checkboxes[1]).to.be.true;
61
- expect(checkboxes[0].isReportValidityOrSubmit).to.be.false;
62
- expect(checkboxes[1].isReportValidityOrSubmit).to.be.false;
63
- await sendKeys({ press: 'Tab' });
64
- expect(document.activeElement === document.body).to.be.true;
65
- expect(component.validity.valid).to.be.false;
66
- expect(checkboxes[0].validity.valid).to.be.false;
67
- expect(checkboxes[0].isReportValidityOrSubmit).to.be.true;
68
- expect(checkboxes[1].validity.valid).to.be.false;
69
- expect(checkboxes[1].isReportValidityOrSubmit).to.be.true;
70
- });
@@ -1 +0,0 @@
1
- import './checkbox.js';
@@ -1,131 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import { assert, expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreCheckboxGroup from './checkbox-group.js';
5
- GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
6
- it('exposes standard form control properties and methods', async () => {
7
- const form = document.createElement('form');
8
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
9
- <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
10
- </glide-core-checkbox-group>`, { parentNode: form });
11
- expect(component.form).to.equal(form);
12
- expect(component.validity instanceof ValidityState).to.be.true;
13
- expect(component.willValidate).to.be.true;
14
- expect(component.checkValidity).to.be.a('function');
15
- expect(component.reportValidity).to.be.a('function');
16
- });
17
- it('can be reset', async () => {
18
- const form = document.createElement('form');
19
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
20
- <glide-core-checkbox
21
- label="Checkbox"
22
- value="value"
23
- checked
24
- ></glide-core-checkbox>
25
- </glide-core-checkbox-group>`, {
26
- parentNode: form,
27
- });
28
- const checkbox = component.querySelector('glide-core-checkbox');
29
- assert(checkbox);
30
- checkbox.checked = false;
31
- form.reset();
32
- expect(component.value).to.deep.equal(['value']);
33
- });
34
- it('has `formData` when the checkboxes are checked', async () => {
35
- const form = document.createElement('form');
36
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
37
- <glide-core-checkbox
38
- label="One"
39
- value="one"
40
- checked
41
- ></glide-core-checkbox>
42
- <glide-core-checkbox
43
- label="Two"
44
- value="two"
45
- checked
46
- ></glide-core-checkbox>
47
- </glide-core-checkbox-group>`, {
48
- parentNode: form,
49
- });
50
- const formData = new FormData(form);
51
- expect(formData.get('name')).to.be.equal('["one","two"]');
52
- });
53
- it('has `formData` when the checkbox is checked and indeterminate', async () => {
54
- const form = document.createElement('form');
55
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
56
- <glide-core-checkbox
57
- label="Checkbox"
58
- value="value"
59
- checked
60
- indeterminate
61
- ></glide-core-checkbox>
62
- </glide-core-checkbox-group>`, {
63
- parentNode: form,
64
- });
65
- const formData = new FormData(form);
66
- expect(formData.get('name')).to.be.equal('["value"]');
67
- });
68
- it('has no `formData` when the checkboxes are unchecked', async () => {
69
- const form = document.createElement('form');
70
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
71
- <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
72
- <glide-core-checkbox label="Two" value="two"></glide-core-checkbox>
73
- </glide-core-checkbox-group>`, {
74
- parentNode: form,
75
- });
76
- const formData = new FormData(form);
77
- expect(formData.get('name')).to.be.null;
78
- });
79
- it('has no `formData` when disabled and the checkbox is checked', async () => {
80
- const form = document.createElement('form');
81
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name" disabled>
82
- <glide-core-checkbox
83
- label="Checkbox"
84
- value="value"
85
- checked
86
- ></glide-core-checkbox>
87
- </glide-core-checkbox-group>`, {
88
- parentNode: form,
89
- });
90
- const formData = new FormData(form);
91
- expect(formData.get('name')).to.be.null;
92
- });
93
- it('has no `formData` when the checkbox is checked but disabled', async () => {
94
- const form = document.createElement('form');
95
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
96
- <glide-core-checkbox
97
- label="Checkbox"
98
- value="value"
99
- checked
100
- disabled
101
- ></glide-core-checkbox>
102
- </glide-core-checkbox-group>`, {
103
- parentNode: form,
104
- });
105
- const formData = new FormData(form);
106
- expect(formData.get('name')).to.be.null;
107
- });
108
- it('has no `formData` when without a `name` but the checkbox is checked', async () => {
109
- const form = document.createElement('form');
110
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
111
- <glide-core-checkbox
112
- label="Checkbox"
113
- value="value"
114
- checked
115
- ></glide-core-checkbox>
116
- </glide-core-checkbox-group>`, {
117
- parentNode: form,
118
- });
119
- const formData = new FormData(form);
120
- expect(formData.get('name')).to.be.null;
121
- });
122
- it('has no `formData` value when the checkbox is checked but without a `value`', async () => {
123
- const form = document.createElement('form');
124
- await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
125
- <glide-core-checkbox label="Checkbox" checked></glide-core-checkbox>
126
- </glide-core-checkbox-group>`, {
127
- parentNode: form,
128
- });
129
- const formData = new FormData(form);
130
- expect(formData.get('name')).to.be.null;
131
- });
@@ -1 +0,0 @@
1
- import './checkbox.js';
@@ -1,82 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './checkbox.js';
3
- import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
4
- import GlideCoreCheckboxGroup from './checkbox-group.js';
5
- GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
6
- it('checks and unchecks Checkboxes when `value` is changed programmatically', async () => {
7
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
8
- <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
9
- <glide-core-checkbox label="Two" checked></glide-core-checkbox>
10
-
11
- <glide-core-checkbox
12
- label="Three"
13
- value="three"
14
- checked
15
- ></glide-core-checkbox>
16
- </glide-core-checkbox-group>`);
17
- component.value = ['one'];
18
- const checkboxes = component.querySelectorAll('glide-core-checkbox');
19
- expect(checkboxes[0].checked).to.be.true;
20
- expect(checkboxes[1].checked).to.be.true;
21
- expect(checkboxes[2].checked).to.be.false;
22
- });
23
- it('updates `value` when the `value` of a checked Checkbox is changed programmatically', async () => {
24
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
25
- <glide-core-checkbox
26
- label="One"
27
- value="one"
28
- checked
29
- ></glide-core-checkbox>
30
-
31
- <glide-core-checkbox
32
- label="Two"
33
- value="two"
34
- checked
35
- ></glide-core-checkbox>
36
- </glide-core-checkbox-group>`);
37
- const checkbox = component.querySelector('glide-core-checkbox');
38
- assert(checkbox);
39
- checkbox.value = 'three';
40
- await elementUpdated(component);
41
- expect(component.value).to.deep.equal(['three', 'two']);
42
- expect(component.getAttribute('value')).to.equal('["three","two"]');
43
- });
44
- it('updates `value` when the `value` of a checked Checkbox is emptied programmatically', async () => {
45
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
46
- <glide-core-checkbox
47
- label="One"
48
- value="one"
49
- checked
50
- ></glide-core-checkbox>
51
-
52
- <glide-core-checkbox
53
- label="Two"
54
- value="two"
55
- checked
56
- ></glide-core-checkbox>
57
- </glide-core-checkbox-group>`);
58
- const checkbox = component.querySelector('glide-core-checkbox');
59
- assert(checkbox);
60
- checkbox.value = '';
61
- await elementUpdated(component);
62
- expect(component.value).to.deep.equal(['two']);
63
- expect(component.getAttribute('value')).to.equal('["two"]');
64
- });
65
- it('enables disabled Checkboxes when `value` is set programmatically', async () => {
66
- const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
67
- <glide-core-checkbox
68
- label="One"
69
- value="one"
70
- disabled
71
- ></glide-core-checkbox>
72
-
73
- <glide-core-checkbox
74
- label="Two"
75
- value="two"
76
- checked
77
- ></glide-core-checkbox>
78
- </glide-core-checkbox-group>`);
79
- component.value = ['one', 'two'];
80
- const checkbox = component.querySelector('glide-core-checkbox');
81
- expect(checkbox?.disabled).to.be.false;
82
- });
@@ -1 +0,0 @@
1
- import './checkbox.js';