@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,58 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './input.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import GlideCoreInput from './input.js';
5
- GlideCoreInput.shadowRootOptions.mode = 'open';
6
- it('focuses the input when `focus()` is called', async () => {
7
- const component = await fixture(html `<glide-core-input required></glide-core-input>`);
8
- component.focus();
9
- const inputElement = component.shadowRoot?.querySelector('input');
10
- expect(component.shadowRoot?.activeElement).to.equal(inputElement);
11
- });
12
- it('focuses the input after submit when required and no value', async () => {
13
- const form = document.createElement('form');
14
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
15
- parentNode: form,
16
- });
17
- form.requestSubmit();
18
- const inputElement = component.shadowRoot?.querySelector('input');
19
- expect(component.shadowRoot?.activeElement).to.be.equal(inputElement);
20
- });
21
- it('blurs the input and reports validity if `blur` is called', async () => {
22
- const component = await fixture(html `<glide-core-input required></glide-core-input>`);
23
- component.focus();
24
- const inputElement = component.shadowRoot?.querySelector('input');
25
- expect(component.shadowRoot?.activeElement).to.equal(inputElement);
26
- component.blur();
27
- await component.updateComplete;
28
- expect(component.shadowRoot?.activeElement).to.equal(null);
29
- expect(component.validity.valid).to.be.false;
30
- expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
31
- .to.be.true;
32
- });
33
- it('focuses the input after `reportValidity` is called when required and no value', async () => {
34
- const form = document.createElement('form');
35
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
36
- parentNode: form,
37
- });
38
- component.reportValidity();
39
- const inputElement = component.shadowRoot?.querySelector('input');
40
- expect(component.shadowRoot?.activeElement).to.equal(inputElement);
41
- });
42
- it('focuses the input after `requestSubmit` is called when required and no value', async () => {
43
- const form = document.createElement('form');
44
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
45
- parentNode: form,
46
- });
47
- form.requestSubmit();
48
- const inputElement = component.shadowRoot?.querySelector('input');
49
- expect(component.shadowRoot?.activeElement === inputElement).to.be.true;
50
- });
51
- it('does not focus the input after `checkValidity` is called', async () => {
52
- const form = document.createElement('form');
53
- const component = await fixture(html `<glide-core-input required></glide-core-input>`, {
54
- parentNode: form,
55
- });
56
- component.checkValidity();
57
- expect(component.shadowRoot?.activeElement === null).to.be.true;
58
- });
@@ -1 +0,0 @@
1
- import './input.js';
@@ -1,74 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './input.js';
3
- import { expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreInput from './input.js';
6
- import sinon from 'sinon';
7
- it('can be reset to initial value', async () => {
8
- const form = document.createElement('form');
9
- const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
10
- parentNode: form,
11
- });
12
- component.value = '';
13
- form.reset();
14
- expect(component.value).to.equal('value');
15
- });
16
- it('can be reset if there was no initial value', async () => {
17
- const form = document.createElement('form');
18
- const component = await fixture(html `<glide-core-input></glide-core-input>`, {
19
- parentNode: form,
20
- });
21
- component.value = 'value';
22
- form.reset();
23
- expect(component.value).to.equal('');
24
- });
25
- it('has `formData` value when it has a value', async () => {
26
- const form = document.createElement('form');
27
- await fixture(html `<glide-core-input name="name" value="value"></glide-core-input>`, {
28
- parentNode: form,
29
- });
30
- const formData = new FormData(form);
31
- expect(formData.get('name')).to.be.equal('value');
32
- });
33
- it('has no `formData` value when no value', async () => {
34
- const form = document.createElement('form');
35
- await fixture(html `<glide-core-input name="name"></glide-core-input>`, {
36
- parentNode: form,
37
- });
38
- const formData = new FormData(form);
39
- expect(formData.get('name')).to.be.null;
40
- });
41
- it('has no `formData` value when it has a value but disabled', async () => {
42
- const form = document.createElement('form');
43
- await fixture(html `<glide-core-input
44
- name="name"
45
- value="value"
46
- disabled
47
- ></glide-core-input>`, {
48
- parentNode: form,
49
- });
50
- const formData = new FormData(form);
51
- expect(formData.get('name')).to.be.null;
52
- });
53
- it('has no `formData` value when it has a value but without a `name`', async () => {
54
- const form = document.createElement('form');
55
- await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
56
- parentNode: form,
57
- });
58
- const formData = new FormData(form);
59
- expect(formData.get('name')).to.be.null;
60
- });
61
- it('submits its form on Enter', async () => {
62
- const form = document.createElement('form');
63
- const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
64
- parentNode: form,
65
- });
66
- const spy = sinon.spy();
67
- form.addEventListener('submit', (event) => {
68
- event.preventDefault();
69
- spy();
70
- });
71
- component.focus();
72
- await sendKeys({ press: 'Enter' });
73
- expect(spy.callCount).to.equal(1);
74
- });
@@ -1 +0,0 @@
1
- import './input.js';
@@ -1,258 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './input.js';
3
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreInput from './input.js';
6
- GlideCoreInput.shadowRootOptions.mode = 'open';
7
- it('is valid if empty but not required', async () => {
8
- const component = await fixture(html `<glide-core-input></glide-core-input>`);
9
- expect(component.validity?.valid).to.be.true;
10
- expect(component.validity?.valueMissing).to.be.false;
11
- expect(component.checkValidity()).to.be.true;
12
- expect(component.reportValidity()).to.be.true;
13
- await elementUpdated(component);
14
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
15
- });
16
- it('is valid after being filled in when empty and required', async () => {
17
- const component = await fixture(html `<glide-core-input required></glide-core-input>`);
18
- component.focus();
19
- await sendKeys({ type: 'value' });
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
- await elementUpdated(component);
25
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
26
- });
27
- it('is invalid if no value and required', async () => {
28
- const component = await fixture(html `<glide-core-input required></glide-core-input>`);
29
- expect(component.validity?.valid).to.be.false;
30
- expect(component.validity?.valueMissing).to.be.true;
31
- expect(component.willValidate).to.be.true;
32
- expect(component.checkValidity()).to.be.false;
33
- expect(component.reportValidity()).to.be.false;
34
- await elementUpdated(component);
35
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
36
- });
37
- it('is invalid after value is cleared when required', async () => {
38
- const component = await fixture(html `<glide-core-input
39
- clearable
40
- value="value"
41
- required
42
- ></glide-core-input>`);
43
- const clearButton = component.shadowRoot?.querySelector('[data-test="clear-button"]');
44
- clearButton?.click();
45
- await component.updateComplete;
46
- expect(component.validity?.valid).to.be.false;
47
- expect(component.validity?.valueMissing).to.be.true;
48
- expect(component.checkValidity()).to.be.false;
49
- expect(component.reportValidity()).to.be.false;
50
- await elementUpdated(component);
51
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
52
- });
53
- it('is valid if no value and required but disabled', async () => {
54
- const component = await fixture(html `<glide-core-input disabled required></glide-core-input>`);
55
- expect(component.validity?.valid).to.be.true;
56
- expect(component.validity?.valueMissing).to.be.false;
57
- expect(component.checkValidity()).to.be.true;
58
- expect(component.reportValidity()).to.be.true;
59
- await elementUpdated(component);
60
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
61
- });
62
- it('updates validity when `required` and `value` is changed programmatically', async () => {
63
- const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
64
- expect(component.validity?.valid).to.be.false;
65
- expect(component.validity?.valueMissing).to.be.true;
66
- expect(component.checkValidity()).to.be.false;
67
- expect(component.reportValidity()).to.be.false;
68
- await elementUpdated(component);
69
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
70
- component.value = 'text';
71
- await elementUpdated(component);
72
- expect(component.validity?.valid).to.be.true;
73
- expect(component.validity?.valueMissing).to.be.false;
74
- expect(component.checkValidity()).to.be.true;
75
- expect(component.reportValidity()).to.be.true;
76
- await elementUpdated(component);
77
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
78
- // Resetting the value to empty to ensure it goes
79
- // back to an invalid state
80
- component.value = '';
81
- await elementUpdated(component);
82
- expect(component.validity?.valid).to.be.false;
83
- expect(component.validity?.valueMissing).to.be.true;
84
- expect(component.checkValidity()).to.be.false;
85
- expect(component.reportValidity()).to.be.false;
86
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
87
- });
88
- it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
89
- const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
90
- expect(component.validity?.valid).to.be.true;
91
- expect(component.validity?.valueMissing).to.be.false;
92
- expect(component.checkValidity()).to.be.true;
93
- expect(component.reportValidity()).to.be.true;
94
- await elementUpdated(component);
95
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
96
- component.required = true;
97
- await elementUpdated(component);
98
- expect(component.validity?.valid).to.be.false;
99
- expect(component.validity?.valueMissing).to.be.true;
100
- expect(component.checkValidity()).to.be.false;
101
- expect(component.reportValidity()).to.be.false;
102
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
103
- });
104
- it('is valid when `value` is empty and `required` is updated to `false` programmatically', async () => {
105
- const component = await fixture(html `<glide-core-input label="Label" required></glide-core-input>`);
106
- expect(component.validity?.valid).to.be.false;
107
- expect(component.validity?.valueMissing).to.be.true;
108
- expect(component.checkValidity()).to.be.false;
109
- expect(component.reportValidity()).to.be.false;
110
- await elementUpdated(component);
111
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
112
- component.required = false;
113
- await elementUpdated(component);
114
- expect(component.validity?.valid).to.be.true;
115
- expect(component.validity?.valueMissing).to.be.false;
116
- expect(component.checkValidity()).to.be.true;
117
- expect(component.reportValidity()).to.be.true;
118
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
119
- });
120
- it('is valid when the `value` attribute matches `pattern`', async () => {
121
- const component = await fixture(html `<glide-core-input
122
- label="Label"
123
- pattern="[a-z]{4,8}"
124
- value="value"
125
- ></glide-core-input>`);
126
- expect(component.validity?.valid).to.be.true;
127
- expect(component.validity?.patternMismatch).to.be.false;
128
- expect(component.checkValidity()).to.be.true;
129
- expect(component.reportValidity()).to.be.true;
130
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
131
- });
132
- it('is valid when `value` matches `pattern` after being set programmatically', async () => {
133
- const component = await fixture(html `<glide-core-input
134
- label="Label"
135
- pattern="[a-z]{4,8}"
136
- ></glide-core-input>`);
137
- component.value = 'value';
138
- await elementUpdated(component);
139
- expect(component.validity?.valid).to.be.true;
140
- expect(component.validity?.patternMismatch).to.be.false;
141
- expect(component.checkValidity()).to.be.true;
142
- expect(component.reportValidity()).to.be.true;
143
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
144
- });
145
- it('is invalid when `value` does not match `pattern`', async () => {
146
- const component = await fixture(html `<glide-core-input
147
- label="Label"
148
- pattern="[a-z]{4,8}"
149
- value="1234"
150
- ></glide-core-input>`);
151
- expect(component.validity?.valid).to.be.false;
152
- expect(component.validity?.patternMismatch).to.be.true;
153
- expect(component.checkValidity()).to.be.false;
154
- expect(component.reportValidity()).to.be.false;
155
- await elementUpdated(component);
156
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
157
- });
158
- it('is invalid when a programmatically set `value` does not match `pattern`', async () => {
159
- const component = await fixture(html `<glide-core-input
160
- label="Label"
161
- pattern="[a-z]{4,8}"
162
- ></glide-core-input>`);
163
- component.value = 'val';
164
- expect(component.validity?.valid).to.be.false;
165
- expect(component.validity?.patternMismatch).to.be.true;
166
- expect(component.checkValidity()).to.be.false;
167
- expect(component.reportValidity()).to.be.false;
168
- await elementUpdated(component);
169
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
170
- });
171
- it('is invalid when `required` and `value` does not match `pattern`', async () => {
172
- const component = await fixture(html `<glide-core-input
173
- label="Label"
174
- pattern="[a-z]{4,8}"
175
- required
176
- ></glide-core-input>`);
177
- expect(component.validity?.valid).to.be.false;
178
- expect(component.validity?.patternMismatch).to.be.true;
179
- expect(component.validity?.valueMissing).to.be.true;
180
- });
181
- it('is valid when `pattern` is programmatically removed', async () => {
182
- const component = await fixture(html `<glide-core-input
183
- label="Label"
184
- pattern="[a-z]{4,8}"
185
- ></glide-core-input>`);
186
- component.pattern = undefined;
187
- await elementUpdated(component);
188
- expect(component.validity?.valid).to.be.true;
189
- expect(component.validity?.patternMismatch).to.be.false;
190
- expect(component.checkValidity()).to.be.true;
191
- expect(component.reportValidity()).to.be.true;
192
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('false');
193
- });
194
- it('sets the validity message with `setCustomValidity()`', async () => {
195
- const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
196
- component.setCustomValidity('validity message');
197
- expect(component.validity?.valid).to.be.false;
198
- expect(component.validity?.customError).to.be.true;
199
- expect(component.checkValidity()).to.be.false;
200
- await elementUpdated(component);
201
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
202
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
203
- ?.textContent).to.be.undefined;
204
- expect(component.reportValidity()).to.be.false;
205
- await elementUpdated(component);
206
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
207
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
208
- ?.textContent).to.equal('validity message');
209
- });
210
- it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
211
- const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
212
- component.setCustomValidity('validity message');
213
- component.reportValidity();
214
- await elementUpdated(component);
215
- component.setCustomValidity('');
216
- await elementUpdated(component);
217
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
218
- ?.textContent).to.be.undefined;
219
- });
220
- it('is invalid when `setValidity()` is called', async () => {
221
- const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
222
- component.setValidity({ customError: true }, 'validity message');
223
- expect(component.validity.valid).to.be.false;
224
- await elementUpdated(component);
225
- // Like native, the validity message shouldn't display until `reportValidity()` is called.
226
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
227
- ?.textContent).to.be.undefined;
228
- expect(component.validity?.customError).to.be.true;
229
- component.reportValidity();
230
- await elementUpdated(component);
231
- expect(component.shadowRoot?.querySelector('input')?.getAttribute('aria-invalid')).to.equal('true');
232
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
233
- ?.textContent).to.equal('validity message');
234
- });
235
- it('is valid when `setValidity()` is called', async () => {
236
- const component = await fixture(html `<glide-core-input label="Label"></glide-core-input>`);
237
- component.setValidity({ customError: true }, 'validity message');
238
- component.setValidity({});
239
- await elementUpdated(component);
240
- expect(component.validity.valid).to.be.true;
241
- expect(component.validity.customError).to.be.false;
242
- expect(component.reportValidity()).to.be.true;
243
- await elementUpdated(component);
244
- expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
245
- ?.textContent).to.be.undefined;
246
- });
247
- it('retains existing validity state when `setCustomValidity()` is called', async () => {
248
- const component = await fixture(html `<glide-core-input
249
- label="Label"
250
- pattern="[a-z]{4,8}"
251
- required
252
- ></glide-core-input>`);
253
- component.setCustomValidity('validity message');
254
- expect(component.validity?.valid).to.be.false;
255
- expect(component.validity?.customError).to.be.true;
256
- expect(component.validity?.patternMismatch).to.be.true;
257
- expect(component.validity?.valueMissing).to.be.true;
258
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,136 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { ArgumentError } from 'ow';
3
- import { expect, fixture, html, waitUntil } from '@open-wc/testing';
4
- import GlideCoreLabel from './label.js';
5
- import sinon from 'sinon';
6
- GlideCoreLabel.shadowRootOptions.mode = 'open';
7
- it('registers', async () => {
8
- expect(window.customElements.get('glide-core-private-label')).to.equal(GlideCoreLabel);
9
- });
10
- it('has defaults', async () => {
11
- const component = await fixture(html `<glide-core-private-label>
12
- <label for="input">Label</label>
13
- <input id="input" slot="control" />
14
- </glide-core-private-label>`);
15
- expect(component.getAttribute('error')).to.equal(null);
16
- expect(component.error).to.be.false;
17
- expect(component.getAttribute('hide')).to.equal(null);
18
- expect(component.hide).to.be.false;
19
- expect(component.getAttribute('orientation')).to.equal('horizontal');
20
- expect(component.orientation).to.equal('horizontal');
21
- expect(component.hasAttribute('required')).to.be.false;
22
- expect(component.required).to.be.false;
23
- });
24
- it('is accessible', async () => {
25
- const component = await fixture(html `<glide-core-private-label>
26
- <label for="input">Label</label>
27
- <input id="input" slot="control" />
28
- <div slot="tooltip">Tooltip</div>
29
- <div slot="description">Description</div>
30
- </glide-core-private-label>`);
31
- await expect(component).to.be.accessible();
32
- });
33
- it('can have a label', async () => {
34
- const component = await fixture(html `<glide-core-private-label>
35
- <label for="input">Label</label>
36
- <input id="input" slot="control" />
37
- </glide-core-private-label>`);
38
- const assignedElements = component.shadowRoot
39
- ?.querySelector('slot:not([name])')
40
- ?.assignedElements();
41
- expect(assignedElements?.at(0)?.textContent).to.equal('Label');
42
- });
43
- it('can have a description', async () => {
44
- const component = await fixture(html `<glide-core-private-label>
45
- <label for="input">Label</label>
46
- <input id="input" slot="control" />
47
- <div slot="description">Description</div>
48
- </glide-core-private-label>`);
49
- const assignedElements = component.shadowRoot
50
- ?.querySelector('slot[name="description"]')
51
- ?.assignedElements();
52
- expect(assignedElements?.at(0)?.textContent).to.equal('Description');
53
- });
54
- it('can have a tooltip', async () => {
55
- const component = await fixture(html `<glide-core-private-label>
56
- <label for="input">Label</label>
57
- <input id="input" slot="control" />
58
- <div slot="tooltip">Tooltip</div>
59
- </glide-core-private-label>`);
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 required', async () => {
66
- const component = await fixture(html `<glide-core-private-label required>
67
- <label for="input">Label</label>
68
- <input id="input" slot="control" />
69
- </glide-core-private-label>`);
70
- expect(component.hasAttribute('required')).to.be.true;
71
- expect(component.required).to.be.true;
72
- const label = component.shadowRoot?.querySelector('[data-test="label"]');
73
- expect(label?.textContent?.includes('*')).to.be.true;
74
- });
75
- it('can have an `error`', async () => {
76
- const component = await fixture(html `<glide-core-private-label ?error=${true}>
77
- <label for="input">Label</label>
78
- <input id="input" slot="control" />
79
- </glide-core-private-label>`);
80
- expect(component.hasAttribute('error')).to.be.true;
81
- expect(component.error).to.be.true;
82
- });
83
- it('places the tooltip on the bottom when horizontal', async () => {
84
- const component = await fixture(html `<glide-core-private-label>
85
- <label for="input">Label</label>
86
- <input id="input" slot="control" />
87
- <div slot="tooltip">Tooltip</div>
88
- </glide-core-private-label>`);
89
- expect(component.shadowRoot
90
- ?.querySelector('glide-core-tooltip')
91
- ?.getAttribute('placement')).to.equal('bottom');
92
- });
93
- it('places the tooltip on the right when vertical', async () => {
94
- const component = await fixture(html `<glide-core-private-label orientation="vertical">
95
- <label for="input">Label</label>
96
- <input id="input" slot="control" />
97
- <div slot="tooltip">Tooltip</div>
98
- </glide-core-private-label>`);
99
- expect(component.shadowRoot
100
- ?.querySelector('glide-core-tooltip')
101
- ?.getAttribute('placement')).to.equal('right');
102
- });
103
- it('throws if it does not have a default slot', async () => {
104
- const spy = sinon.spy();
105
- try {
106
- await fixture(html `<glide-core-private-label
107
- ><input slot="control"
108
- /></glide-core-private-label>`);
109
- }
110
- catch (error) {
111
- if (error instanceof ArgumentError) {
112
- spy();
113
- }
114
- }
115
- expect(spy.callCount).to.equal(1);
116
- });
117
- it('throws if it does not have a "control" slot', async () => {
118
- const spy = sinon.spy();
119
- const stub = sinon.stub(console, 'error');
120
- try {
121
- await fixture(html `<glide-core-private-label>
122
- <label>Label</label>
123
- </glide-core-private-label>`);
124
- }
125
- catch (error) {
126
- if (error instanceof ArgumentError) {
127
- spy();
128
- }
129
- }
130
- expect(spy.callCount).to.equal(1);
131
- // It's not clear to me why the error logged by Ow shows up in the console
132
- // here and not in the above test or elsewhere. A bug in Web Test Runner?
133
- // Something I don't understand about Lit's lifecycle?
134
- await waitUntil(() => stub.called);
135
- stub.restore();
136
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,43 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreMenuButton from './menu.button.js';
4
- GlideCoreMenuButton.shadowRootOptions.mode = 'open';
5
- it('registers', async () => {
6
- expect(window.customElements.get('glide-core-menu-button')).to.equal(GlideCoreMenuButton);
7
- });
8
- it('has defaults', async () => {
9
- // Required attributes are supplied and not asserted below. The idea is that
10
- // this test shouldn't fail to typecheck if these templates are eventually
11
- // typechecked, which means supplying required attributes up front.
12
- const component = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
13
- // Not reflected. So no attribute assertions are necessary.
14
- expect(component.privateActive).to.be.false;
15
- });
16
- it('can have a label', async () => {
17
- const component = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
18
- expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
19
- });
20
- it('can have an icon', async () => {
21
- const component = await fixture(html `<glide-core-menu-button label="Label">
22
- <svg
23
- slot="icon"
24
- width="16"
25
- height="16"
26
- fill="none"
27
- viewBox="0 0 24 24"
28
- stroke-width="1.5"
29
- stroke="currentColor"
30
- >
31
- <path
32
- stroke-linecap="round"
33
- stroke-linejoin="round"
34
- d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
35
- />
36
- </svg>
37
- </glide-core-menu-button>`);
38
- const icon = component?.shadowRoot
39
- ?.querySelector('slot[name="icon"]')
40
- ?.assignedElements()
41
- .at(0);
42
- expect(icon instanceof Element).to.be.true;
43
- });
@@ -1 +0,0 @@
1
- export {};
@@ -1,47 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import { expect, fixture, html } from '@open-wc/testing';
3
- import GlideCoreMenuLink from './menu.link.js';
4
- GlideCoreMenuLink.shadowRootOptions.mode = 'open';
5
- it('registers', async () => {
6
- expect(window.customElements.get('glide-core-menu-link')).to.equal(GlideCoreMenuLink);
7
- });
8
- it('has defaults', async () => {
9
- // Required attributes are supplied and not asserted below. The idea is that
10
- // this test shouldn't fail to typecheck if these templates are eventually
11
- // typechecked, which means supplying required attributes up front.
12
- const component = await fixture(html `<glide-core-menu-link label="Label" url="/"></glide-core-menu-link>`);
13
- // Not reflected. So no attribute assertions are necessary.
14
- expect(component.privateActive).to.be.false;
15
- });
16
- it('can have a label', async () => {
17
- const component = await fixture(html `<glide-core-menu-link label="Label" url="/"></glide-core-menu-link>`);
18
- expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
19
- });
20
- it('can have a URL', async () => {
21
- const component = await fixture(html `<glide-core-menu-link label="Label" url="/"></glide-core-menu-link>`);
22
- expect(component.url).to.equal('/');
23
- });
24
- it('can have an icon', async () => {
25
- const component = await fixture(html `<glide-core-menu-link label="Label">
26
- <svg
27
- slot="icon"
28
- width="16"
29
- height="16"
30
- fill="none"
31
- viewBox="0 0 24 24"
32
- stroke-width="1.5"
33
- stroke="currentColor"
34
- >
35
- <path
36
- stroke-linecap="round"
37
- stroke-linejoin="round"
38
- d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
39
- />
40
- </svg>
41
- </glide-core-menu-link>`);
42
- const icon = component?.shadowRoot
43
- ?.querySelector('slot[name="icon"]')
44
- ?.assignedElements()
45
- .at(0);
46
- expect(icon instanceof Element).to.be.true;
47
- });
@@ -1,2 +0,0 @@
1
- import './menu.button.js';
2
- import './menu.link.js';