@watermarkinsights/ripple 5.0.0 → 5.1.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 (244) hide show
  1. package/dist/cjs/{app-globals-d6c37251.js → app-globals-aad9863d.js} +2 -2
  2. package/dist/cjs/{chartFunctions-b32ecbeb.js → chartFunctions-e86ed63c.js} +8 -4
  3. package/dist/cjs/{index-0f1bacce.js → index-4853a7b4.js} +537 -494
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/priv-chart-popover.cjs.entry.js +1 -1
  6. package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
  7. package/dist/cjs/priv-navigator-button.cjs.entry.js +1 -1
  8. package/dist/cjs/priv-navigator-item.cjs.entry.js +1 -1
  9. package/dist/cjs/ripple.cjs.js +3 -3
  10. package/dist/cjs/wm-action-menu_2.cjs.entry.js +1 -1
  11. package/dist/cjs/wm-button.cjs.entry.js +1 -1
  12. package/dist/cjs/wm-chart-slice.cjs.entry.js +1 -1
  13. package/dist/cjs/wm-chart.cjs.entry.js +2 -2
  14. package/dist/cjs/wm-datepicker.cjs.entry.js +1 -1
  15. package/dist/cjs/wm-file-list.cjs.entry.js +1 -1
  16. package/dist/cjs/wm-file.cjs.entry.js +1 -1
  17. package/dist/cjs/wm-input.cjs.entry.js +1 -1
  18. package/dist/cjs/wm-line-chart.cjs.entry.js +2 -2
  19. package/dist/cjs/wm-modal-footer.cjs.entry.js +1 -1
  20. package/dist/cjs/wm-modal-header.cjs.entry.js +1 -1
  21. package/dist/cjs/wm-modal.cjs.entry.js +1 -1
  22. package/dist/cjs/wm-navigation_3.cjs.entry.js +1 -1
  23. package/dist/cjs/wm-navigator.cjs.entry.js +1 -1
  24. package/dist/cjs/wm-option_2.cjs.entry.js +1 -1
  25. package/dist/cjs/wm-pagination.cjs.entry.js +1 -1
  26. package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +2 -2
  27. package/dist/cjs/wm-search.cjs.entry.js +1 -1
  28. package/dist/cjs/wm-snackbar.cjs.entry.js +1 -1
  29. package/dist/cjs/wm-tab-item_3.cjs.entry.js +1 -1
  30. package/dist/cjs/wm-tag-input.cjs.entry.js +1 -1
  31. package/dist/cjs/wm-tag-option.cjs.entry.js +1 -1
  32. package/dist/cjs/wm-textarea.cjs.entry.js +1 -1
  33. package/dist/cjs/wm-timepicker.cjs.entry.js +1 -1
  34. package/dist/cjs/wm-toggletip.cjs.entry.js +1 -1
  35. package/dist/cjs/wm-uploader.cjs.entry.js +1 -1
  36. package/dist/cjs/wm-wrapper.cjs.entry.js +1 -1
  37. package/dist/collection/collection-manifest.json +2 -2
  38. package/dist/collection/components/charts/chartFunctions.js +7 -3
  39. package/dist/esm/{app-globals-2df700e6.js → app-globals-4e667854.js} +2 -2
  40. package/dist/esm/{chartFunctions-e43ec877.js → chartFunctions-8098e455.js} +8 -4
  41. package/dist/esm/{index-5815b978.js → index-7923308f.js} +537 -494
  42. package/dist/esm/loader.js +3 -3
  43. package/dist/esm/priv-chart-popover.entry.js +1 -1
  44. package/dist/esm/priv-datepicker.entry.js +1 -1
  45. package/dist/esm/priv-navigator-button.entry.js +1 -1
  46. package/dist/esm/priv-navigator-item.entry.js +1 -1
  47. package/dist/esm/ripple.js +4 -4
  48. package/dist/esm/wm-action-menu_2.entry.js +1 -1
  49. package/dist/esm/wm-button.entry.js +1 -1
  50. package/dist/esm/wm-chart-slice.entry.js +1 -1
  51. package/dist/esm/wm-chart.entry.js +2 -2
  52. package/dist/esm/wm-datepicker.entry.js +1 -1
  53. package/dist/esm/wm-file-list.entry.js +1 -1
  54. package/dist/esm/wm-file.entry.js +1 -1
  55. package/dist/esm/wm-input.entry.js +1 -1
  56. package/dist/esm/wm-line-chart.entry.js +2 -2
  57. package/dist/esm/wm-modal-footer.entry.js +1 -1
  58. package/dist/esm/wm-modal-header.entry.js +1 -1
  59. package/dist/esm/wm-modal.entry.js +1 -1
  60. package/dist/esm/wm-navigation_3.entry.js +1 -1
  61. package/dist/esm/wm-navigator.entry.js +1 -1
  62. package/dist/esm/wm-option_2.entry.js +1 -1
  63. package/dist/esm/wm-pagination.entry.js +1 -1
  64. package/dist/esm/wm-progress-indicator_3.entry.js +2 -2
  65. package/dist/esm/wm-search.entry.js +1 -1
  66. package/dist/esm/wm-snackbar.entry.js +1 -1
  67. package/dist/esm/wm-tab-item_3.entry.js +1 -1
  68. package/dist/esm/wm-tag-input.entry.js +1 -1
  69. package/dist/esm/wm-tag-option.entry.js +1 -1
  70. package/dist/esm/wm-textarea.entry.js +1 -1
  71. package/dist/esm/wm-timepicker.entry.js +1 -1
  72. package/dist/esm/wm-toggletip.entry.js +1 -1
  73. package/dist/esm/wm-uploader.entry.js +1 -1
  74. package/dist/esm/wm-wrapper.entry.js +1 -1
  75. package/dist/esm-es5/{app-globals-2df700e6.js → app-globals-4e667854.js} +1 -1
  76. package/dist/esm-es5/chartFunctions-8098e455.js +1 -0
  77. package/dist/esm-es5/index-7923308f.js +1 -0
  78. package/dist/esm-es5/loader.js +1 -1
  79. package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
  80. package/dist/esm-es5/priv-datepicker.entry.js +1 -1
  81. package/dist/esm-es5/priv-navigator-button.entry.js +1 -1
  82. package/dist/esm-es5/priv-navigator-item.entry.js +1 -1
  83. package/dist/esm-es5/ripple.js +1 -1
  84. package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
  85. package/dist/esm-es5/wm-button.entry.js +1 -1
  86. package/dist/esm-es5/wm-chart-slice.entry.js +1 -1
  87. package/dist/esm-es5/wm-chart.entry.js +1 -1
  88. package/dist/esm-es5/wm-datepicker.entry.js +1 -1
  89. package/dist/esm-es5/wm-file-list.entry.js +1 -1
  90. package/dist/esm-es5/wm-file.entry.js +1 -1
  91. package/dist/esm-es5/wm-input.entry.js +1 -1
  92. package/dist/esm-es5/wm-line-chart.entry.js +1 -1
  93. package/dist/esm-es5/wm-modal-footer.entry.js +1 -1
  94. package/dist/esm-es5/wm-modal-header.entry.js +1 -1
  95. package/dist/esm-es5/wm-modal.entry.js +1 -1
  96. package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
  97. package/dist/esm-es5/wm-navigator.entry.js +1 -1
  98. package/dist/esm-es5/wm-option_2.entry.js +1 -1
  99. package/dist/esm-es5/wm-pagination.entry.js +1 -1
  100. package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
  101. package/dist/esm-es5/wm-search.entry.js +1 -1
  102. package/dist/esm-es5/wm-snackbar.entry.js +1 -1
  103. package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
  104. package/dist/esm-es5/wm-tag-input.entry.js +1 -1
  105. package/dist/esm-es5/wm-tag-option.entry.js +1 -1
  106. package/dist/esm-es5/wm-textarea.entry.js +1 -1
  107. package/dist/esm-es5/wm-timepicker.entry.js +1 -1
  108. package/dist/esm-es5/wm-toggletip.entry.js +1 -1
  109. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  110. package/dist/esm-es5/wm-wrapper.entry.js +1 -1
  111. package/dist/loader/index.d.ts +3 -0
  112. package/dist/ripple/{p-df4ab5de.system.entry.js → p-00f8637e.system.entry.js} +1 -1
  113. package/dist/ripple/{p-0a05e6d7.system.entry.js → p-06c018cf.system.entry.js} +1 -1
  114. package/dist/ripple/{p-411f0d1d.entry.js → p-0707b4c2.entry.js} +1 -1
  115. package/dist/ripple/{p-e14c3721.entry.js → p-0bb464b1.entry.js} +1 -1
  116. package/dist/ripple/{p-6f47d86c.system.entry.js → p-0d0e0a1e.system.entry.js} +1 -1
  117. package/dist/ripple/{p-9b894527.entry.js → p-0e7025db.entry.js} +1 -1
  118. package/dist/ripple/{p-d65e9846.entry.js → p-0ec1e075.entry.js} +1 -1
  119. package/dist/ripple/{p-9a977fbd.entry.js → p-0f72ed3a.entry.js} +1 -1
  120. package/dist/ripple/{p-b5729148.system.entry.js → p-186a4d76.system.entry.js} +1 -1
  121. package/dist/ripple/{p-9433f29c.entry.js → p-18c1593b.entry.js} +1 -1
  122. package/dist/ripple/{p-194c06e1.entry.js → p-19f29a48.entry.js} +1 -1
  123. package/dist/ripple/{p-85e59e6a.system.entry.js → p-1ee68e06.system.entry.js} +1 -1
  124. package/dist/ripple/{p-46584e7e.system.entry.js → p-1fcc8007.system.entry.js} +1 -1
  125. package/dist/ripple/{p-87eb2f99.system.entry.js → p-28119849.system.entry.js} +1 -1
  126. package/dist/ripple/{p-0c218ac2.system.entry.js → p-2849847d.system.entry.js} +1 -1
  127. package/dist/ripple/{p-70c459b2.entry.js → p-2f39732e.entry.js} +1 -1
  128. package/dist/ripple/{p-ac727a0a.system.entry.js → p-30ee0f5c.system.entry.js} +1 -1
  129. package/dist/ripple/{p-44f2e1a7.entry.js → p-340f96b5.entry.js} +1 -1
  130. package/dist/ripple/{p-74565577.system.entry.js → p-3639dbbc.system.entry.js} +1 -1
  131. package/dist/ripple/{p-1b8584f9.entry.js → p-3e605541.entry.js} +1 -1
  132. package/dist/ripple/{p-440571f7.system.entry.js → p-439d839b.system.entry.js} +1 -1
  133. package/dist/ripple/{p-e80009db.entry.js → p-445d6915.entry.js} +1 -1
  134. package/dist/ripple/{p-1435a717.entry.js → p-48ed56a0.entry.js} +1 -1
  135. package/dist/ripple/{p-4a8016fb.entry.js → p-49f94f8a.entry.js} +1 -1
  136. package/dist/ripple/{p-764cee74.system.js → p-4ba32e58.system.js} +1 -1
  137. package/dist/ripple/{p-0bf7cdda.system.entry.js → p-510fab1c.system.entry.js} +1 -1
  138. package/dist/ripple/p-539b7be9.system.js +2 -0
  139. package/dist/ripple/{p-7ffb6f07.entry.js → p-57694990.entry.js} +1 -1
  140. package/dist/ripple/{p-e9d29b5b.system.entry.js → p-58a286e8.system.entry.js} +1 -1
  141. package/dist/ripple/{p-ef0854e6.entry.js → p-5ff41948.entry.js} +1 -1
  142. package/dist/ripple/{p-76740c92.entry.js → p-636ca7f2.entry.js} +1 -1
  143. package/dist/ripple/{p-0bef5c1b.system.entry.js → p-66a57d81.system.entry.js} +1 -1
  144. package/dist/ripple/p-681c1853.js +1 -0
  145. package/dist/ripple/{p-7d2bd039.entry.js → p-6b71806b.entry.js} +1 -1
  146. package/dist/ripple/{p-5c4245d9.system.entry.js → p-7afa2fdc.system.entry.js} +1 -1
  147. package/dist/ripple/{p-ce492826.js → p-7c12ac23.js} +1 -1
  148. package/dist/ripple/{p-5297476b.entry.js → p-7cb98aa5.entry.js} +1 -1
  149. package/dist/ripple/{p-87c85aac.system.entry.js → p-7dbc4abc.system.entry.js} +1 -1
  150. package/dist/ripple/{p-6f61a5f1.entry.js → p-8c7b9bad.entry.js} +1 -1
  151. package/dist/ripple/p-94a54d68.system.js +1 -0
  152. package/dist/ripple/{p-b878d9c7.entry.js → p-950edf62.entry.js} +1 -1
  153. package/dist/ripple/{p-6a231093.system.entry.js → p-96f3d9e7.system.entry.js} +1 -1
  154. package/dist/ripple/{p-47441a2a.system.entry.js → p-9bda128e.system.entry.js} +1 -1
  155. package/dist/ripple/{p-eab22c94.entry.js → p-9ca027b7.entry.js} +1 -1
  156. package/dist/ripple/{p-6372934d.entry.js → p-9d4ea9f8.entry.js} +1 -1
  157. package/dist/ripple/{p-49632308.system.entry.js → p-9d8817a7.system.entry.js} +1 -1
  158. package/dist/ripple/{p-9936c43c.system.entry.js → p-a0098136.system.entry.js} +1 -1
  159. package/dist/ripple/p-a431d6e5.js +2 -0
  160. package/dist/ripple/{p-7ade6e66.system.entry.js → p-a6119885.system.entry.js} +1 -1
  161. package/dist/ripple/{p-25cf3ccb.entry.js → p-a77f2168.entry.js} +1 -1
  162. package/dist/ripple/{p-3cc9b812.entry.js → p-adfaeeea.entry.js} +1 -1
  163. package/dist/ripple/{p-66960670.system.entry.js → p-b02c0c41.system.entry.js} +1 -1
  164. package/dist/ripple/{p-1166513e.system.entry.js → p-bbb8c02f.system.entry.js} +1 -1
  165. package/dist/ripple/{p-3b9a9d73.entry.js → p-bd7e892d.entry.js} +1 -1
  166. package/dist/ripple/{p-441354a5.system.entry.js → p-c9552e88.system.entry.js} +1 -1
  167. package/dist/ripple/{p-018498a7.system.entry.js → p-cd0a862f.system.entry.js} +1 -1
  168. package/dist/ripple/{p-25e011a6.entry.js → p-d344e490.entry.js} +1 -1
  169. package/dist/ripple/{p-dabff389.system.entry.js → p-d87e105b.system.entry.js} +1 -1
  170. package/dist/ripple/{p-44d8f4b2.system.entry.js → p-e0ff556b.system.entry.js} +1 -1
  171. package/dist/ripple/{p-8edd4ce6.system.entry.js → p-e19e1ece.system.entry.js} +1 -1
  172. package/dist/ripple/{p-c53f1dcb.entry.js → p-e3d8f2f6.entry.js} +1 -1
  173. package/dist/ripple/{p-116477b7.entry.js → p-e8eef357.entry.js} +1 -1
  174. package/dist/ripple/{p-e0ca71d3.entry.js → p-eb596891.entry.js} +1 -1
  175. package/dist/ripple/{p-35627044.system.entry.js → p-ec384895.system.entry.js} +1 -1
  176. package/dist/ripple/{p-5356db9b.entry.js → p-eccb5aaf.entry.js} +1 -1
  177. package/dist/ripple/{p-567c5edd.system.entry.js → p-edcb8f48.system.entry.js} +1 -1
  178. package/dist/ripple/{p-d8f1fd76.entry.js → p-f963be6d.entry.js} +1 -1
  179. package/dist/ripple/{p-838d75c2.system.js → p-fde81b94.system.js} +1 -1
  180. package/dist/ripple/{p-d37a720b.system.entry.js → p-ff7dac66.system.entry.js} +1 -1
  181. package/dist/ripple/ripple.esm.js +1 -1
  182. package/dist/ripple/ripple.js +1 -1
  183. package/dist/types/stencil-public-runtime.d.ts +0 -2
  184. package/package.json +2 -2
  185. package/dist/collection/components/charts/chartFunctions.spec.js +0 -16
  186. package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.e2e.js +0 -81
  187. package/dist/collection/components/charts/screenshots.e2e.js +0 -96
  188. package/dist/collection/components/charts/wm-chart/wm-chart.e2e.js +0 -213
  189. package/dist/collection/components/charts/wm-chart/wm-chart.spec.js +0 -37
  190. package/dist/collection/components/charts/wm-line-chart/wm-line-chart.e2e.js +0 -176
  191. package/dist/collection/components/charts/wm-line-chart/wm-line-chart.spec.js +0 -163
  192. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.e2e.js +0 -69
  193. package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.spec.js +0 -79
  194. package/dist/collection/components/wm-action-menu/wm-action-menu.e2e.js +0 -200
  195. package/dist/collection/components/wm-action-menu/wm-action-menu.spec.js +0 -48
  196. package/dist/collection/components/wm-button/wm-button.e2e.js +0 -55
  197. package/dist/collection/components/wm-button/wm-button.spec.js +0 -74
  198. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.spec.js +0 -76
  199. package/dist/collection/components/wm-datepicker/wm-datepicker.e2e.js +0 -382
  200. package/dist/collection/components/wm-datepicker/wm-datepicker.spec.js +0 -21
  201. package/dist/collection/components/wm-file/wm-file.spec.js +0 -194
  202. package/dist/collection/components/wm-file-list/wm-file-list.spec.js +0 -69
  203. package/dist/collection/components/wm-input/wm-input.e2e.js +0 -32
  204. package/dist/collection/components/wm-input/wm-input.spec.js +0 -173
  205. package/dist/collection/components/wm-menuitem/wm-menuitem.e2e.js +0 -23
  206. package/dist/collection/components/wm-menuitem/wm-menuitem.spec.js +0 -54
  207. package/dist/collection/components/wm-modal/wm-modal-footer.spec.js +0 -11
  208. package/dist/collection/components/wm-modal/wm-modal-header.spec.js +0 -8
  209. package/dist/collection/components/wm-modal/wm-modal.e2e.js +0 -104
  210. package/dist/collection/components/wm-modal/wm-modal.spec.js +0 -30
  211. package/dist/collection/components/wm-navigation/wm-navigation.e2e.js +0 -102
  212. package/dist/collection/components/wm-navigation/wm-navigation.spec.js +0 -91
  213. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.e2e.js +0 -50
  214. package/dist/collection/components/wm-navigator/wm-navigator.e2e.js +0 -209
  215. package/dist/collection/components/wm-navigator/wm-navigator.spec.js +0 -177
  216. package/dist/collection/components/wm-option/wm-option.e2e.js +0 -22
  217. package/dist/collection/components/wm-option/wm-option.spec.js +0 -63
  218. package/dist/collection/components/wm-pagination/wm-pagination.e2e.js +0 -312
  219. package/dist/collection/components/wm-search/wm-search.e2e.js +0 -76
  220. package/dist/collection/components/wm-search/wm-search.spec.js +0 -71
  221. package/dist/collection/components/wm-select/wm-select.e2e.js +0 -521
  222. package/dist/collection/components/wm-select/wm-select.spec.js +0 -271
  223. package/dist/collection/components/wm-snackbar/wm-snackbar.e2e.js +0 -112
  224. package/dist/collection/components/wm-snackbar/wm-snackbar.spec.js +0 -9
  225. package/dist/collection/components/wm-tabs/wm-tabs.e2e.js +0 -91
  226. package/dist/collection/components/wm-tabs/wm-tabs.spec.js +0 -12
  227. package/dist/collection/components/wm-tag-input/wm-tag-input.e2e.js +0 -204
  228. package/dist/collection/components/wm-tag-input/wm-tag-input.spec.js +0 -195
  229. package/dist/collection/components/wm-textarea/wm-textarea.e2e.js +0 -41
  230. package/dist/collection/components/wm-textarea/wm-textarea.spec.js +0 -79
  231. package/dist/collection/components/wm-timepicker/wm-timepicker.e2e.js +0 -163
  232. package/dist/collection/components/wm-timepicker/wm-timepicker.spec.js +0 -147
  233. package/dist/collection/components/wm-toggletip/wm-toggletip.e2e.js +0 -69
  234. package/dist/collection/components/wm-toggletip/wm-toggletip.spec.js +0 -21
  235. package/dist/collection/components/wm-uploader/wm-uploader.e2e.js +0 -70
  236. package/dist/collection/components/wm-uploader/wm-uploader.spec.js +0 -234
  237. package/dist/collection/global/functions.spec.js +0 -126
  238. package/dist/collection/lang/lang.spec.js +0 -20
  239. package/dist/esm-es5/chartFunctions-e43ec877.js +0 -1
  240. package/dist/esm-es5/index-5815b978.js +0 -1
  241. package/dist/ripple/p-1eb84629.system.js +0 -2
  242. package/dist/ripple/p-7bf00a52.js +0 -2
  243. package/dist/ripple/p-9bf31e42.js +0 -1
  244. package/dist/ripple/p-aa41cf09.system.js +0 -1
@@ -1,32 +0,0 @@
1
- import AxePuppeteer from "@axe-core/puppeteer";
2
- import { newE2EPage } from "@stencil/core/testing";
3
- describe("wm-input", () => {
4
- // ts throws erroneous warning about vars being unused...
5
- // @ts-ignore
6
- let page, el, inputField;
7
- beforeEach(async () => {
8
- page = await newE2EPage();
9
- await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
10
- <wm-input label="input"></wm-input>
11
- </main></body></html>`);
12
- el = await page.find("wm-input");
13
- inputField = await page.find("wm-input >>> input");
14
- await page.waitForChanges();
15
- });
16
- it("passes Axe checks", async () => {
17
- const results = await new AxePuppeteer(page).analyze();
18
- expect(results.violations.length).toBe(0);
19
- });
20
- it("updates input value when changed programatically", async () => {
21
- el.setProperty("value", "33245");
22
- await page.waitForChanges();
23
- const value = await el.getProperty("value");
24
- expect(value).toBe("33245");
25
- });
26
- it("updates value prop when user types", async () => {
27
- await inputField.type("example");
28
- await page.waitForChanges();
29
- const value = await el.getProperty("value");
30
- expect(value).toBe("example");
31
- });
32
- });
@@ -1,173 +0,0 @@
1
- import { newSpecPage } from "@stencil/core/testing";
2
- import { Input } from "./wm-input";
3
- describe("input", () => {
4
- let page;
5
- beforeEach(async () => {
6
- page = await newSpecPage({
7
- components: [Input],
8
- html: "<wm-input label='input'></wm-input>",
9
- });
10
- });
11
- it("has the right aria attributes", async () => {
12
- let inputField = await page.root.shadowRoot.querySelector("input");
13
- // input field is described by help text
14
- expect(inputField).toEqualAttribute("aria-describedby", "info error");
15
- });
16
- it("inputfield is disabled when the prop is passed", async () => {
17
- await page.setContent(`<wm-input label="input" disabled></wm-input>`);
18
- let inputField = await page.root.shadowRoot.querySelector("input");
19
- expect(inputField).toHaveAttribute("disabled");
20
- });
21
- it("handles keydown", () => {
22
- // handleKeyDown
23
- const component = new Input();
24
- component.characterLimit = 10;
25
- let event = { key: "", ctrlKey: false, metaKey: false, altKey: false };
26
- let inputEl = document.createElement("input");
27
- // @ts-ignore
28
- component.inputEl = inputEl;
29
- const mockAnnounce = (component.announce = jest.fn());
30
- const mockGenerateCharacterLimiWarning = (component.generateCharacterLimitWarning = jest.fn());
31
- function resetKeys() {
32
- event.key = "";
33
- event.ctrlKey = false;
34
- event.metaKey = false;
35
- event.altKey = false;
36
- //@ts-ignore
37
- component.inputEl.value = "";
38
- }
39
- // no modifiers, empty key
40
- resetKeys();
41
- component.handleKeyDown(event);
42
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
43
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
44
- jest.clearAllMocks();
45
- // no modifiers, wrong key
46
- resetKeys();
47
- event.key = "ArrowDown";
48
- component.handleKeyDown(event);
49
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
50
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
51
- jest.clearAllMocks();
52
- // no modifiers, right key, not at limit
53
- resetKeys();
54
- event.key = "a";
55
- component.handleKeyDown(event);
56
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
57
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
58
- jest.clearAllMocks();
59
- // no modifiers, right key, at limit
60
- resetKeys();
61
- //@ts-ignore
62
- component.inputEl.value = "1234567890";
63
- event.key = "a";
64
- component.handleKeyDown(event);
65
- expect(mockAnnounce).toHaveBeenCalledTimes(1);
66
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(1);
67
- jest.clearAllMocks();
68
- // no modifiers, right key, above limit
69
- resetKeys();
70
- //@ts-ignore
71
- component.inputEl.value = "12345678901234567890";
72
- event.key = "a";
73
- component.handleKeyDown(event);
74
- expect(mockAnnounce).toHaveBeenCalledTimes(1);
75
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(1);
76
- jest.clearAllMocks();
77
- // ctrl modifier, right key, above limit
78
- resetKeys();
79
- //@ts-ignore
80
- component.inputEl.value = "12345678901234567890";
81
- event.key = "a";
82
- event.ctrlKey = true;
83
- component.handleKeyDown(event);
84
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
85
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
86
- jest.clearAllMocks();
87
- // meta modifier, right key, above limit
88
- resetKeys();
89
- //@ts-ignore
90
- component.inputEl.value = "12345678901234567890";
91
- event.key = "a";
92
- event.metaKey = true;
93
- component.handleKeyDown(event);
94
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
95
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
96
- jest.clearAllMocks();
97
- // alt modifier, right key, above limit
98
- resetKeys();
99
- //@ts-ignore
100
- component.inputEl.value = "12345678901234567890";
101
- event.key = "a";
102
- event.altKey = true;
103
- component.handleKeyDown(event);
104
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
105
- expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
106
- jest.clearAllMocks();
107
- jest.restoreAllMocks();
108
- });
109
- it("handles input", () => {
110
- // handleInput
111
- const component = new Input();
112
- let inputEl = {};
113
- let event = { target: inputEl };
114
- const mockAnnounce = (component.announce = jest.fn());
115
- const mockGenerateCharacterLimitWarning = (component.generateCharacterLimitWarning = jest.fn(() => "announcement"));
116
- inputEl.value = "fish";
117
- event.target = inputEl;
118
- //@ts-ignore
119
- component.handleInput(event);
120
- expect(component.value).toBe("fish");
121
- expect(component.charCount).toBe(4);
122
- expect(mockAnnounce).toHaveBeenCalledTimes(0);
123
- expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledTimes(0);
124
- component.characterLimit = 10;
125
- inputEl.value = "two fish";
126
- event.target = inputEl;
127
- //@ts-ignore
128
- component.handleInput(event);
129
- expect(component.value).toBe("two fish");
130
- expect(component.charCount).toBe(8);
131
- expect(mockAnnounce).toHaveBeenCalledTimes(1);
132
- expect(mockAnnounce).toHaveBeenCalledWith("announcement");
133
- expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledTimes(1);
134
- expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledWith(8, 10);
135
- jest.resetAllMocks();
136
- });
137
- it("updates classes on focus", () => {
138
- const component = new Input();
139
- const divEl = document.createElement("div");
140
- //@ts-ignore
141
- component.inputWrapperEl = divEl;
142
- //@ts-ignore
143
- expect(component.inputWrapperEl).not.toHaveClass("focus");
144
- component.handleFocus();
145
- //@ts-ignore
146
- expect(component.inputWrapperEl).toHaveClass("focus");
147
- });
148
- it("updates the live region announcement", () => {
149
- // announce
150
- const component = new Input();
151
- let divEl = document.createElement("div");
152
- //@ts-ignore
153
- component.liveRegionEl = divEl;
154
- component.announce("Message");
155
- expect(component.announcement).toBe("Message");
156
- //@ts-ignore
157
- component.liveRegionEl.textContent = "Message";
158
- component.announce("Message");
159
- expect(component.announcement).toBe("Message" + "\u00A0");
160
- });
161
- it("generates the appropriate character limit warning", () => {
162
- // generateCharacterLimitWarning
163
- const component = new Input();
164
- expect(component.generateCharacterLimitWarning(0, 10)).toBe("0 of 10 characters entered.");
165
- expect(component.generateCharacterLimitWarning(5, 8)).toBe("5 of 8 characters entered.");
166
- expect(component.generateCharacterLimitWarning(8, 8)).toBe("8 of 8 characters entered. No additional characters will be entered.");
167
- });
168
- it("sets input to required", async () => {
169
- await page.setContent(`<wm-input label='input' required-field='true'></wm-input>`);
170
- const input = await page.root.shadowRoot.querySelector("input");
171
- expect(input).toEqualAttribute("aria-required", "true");
172
- });
173
- });
@@ -1,23 +0,0 @@
1
- import { newE2EPage } from "@stencil/core/testing";
2
- describe("wm-menuitem", () => {
3
- let page;
4
- beforeEach(async () => {
5
- page = await newE2EPage();
6
- await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
7
- <wm-action-menu id='menu' tooltip="menu name"><wm-menuitem id='first' disabled onClick='action()'>First action</wm-menuitem><wm-menuitem id='second'>Second action</wm-menuitem><wm-menuitem id='third'>Third action</wm-menuitem></wm-action-menu>
8
- <script>function action() {document.getElementById('second').innerHTML = 'Changed text'}</script></main></body></html>`);
9
- });
10
- it("renders", async () => {
11
- const element = await page.find("wm-menuitem");
12
- expect(element).not.toBeNull();
13
- });
14
- it("prevents action on disabled item", async () => {
15
- await page.keyboard.press("Tab");
16
- await page.keyboard.press("Enter"); // open popup
17
- await page.waitForChanges();
18
- await page.keyboard.press("Enter");
19
- await page.waitForChanges();
20
- let changedMenuitem = await page.find("wm-menuitem#second");
21
- expect(changedMenuitem.innerHTML).toEqual("Second action");
22
- });
23
- });
@@ -1,54 +0,0 @@
1
- import { newSpecPage } from "@stencil/core/testing";
2
- import { Menuitem } from "./wm-menuitem";
3
- describe("wm-menuitem", () => {
4
- it("builds", async () => {
5
- const comp = await newSpecPage({
6
- components: [Menuitem],
7
- html: "<wm-menuitem><wm-menuitem>",
8
- });
9
- expect(comp.root).toMatchSnapshot();
10
- });
11
- it("handles disabled onClick function", async () => {
12
- const page = await newSpecPage({
13
- components: [Menuitem],
14
- html: "<wm-menuitem><wm-menuitem>",
15
- });
16
- const menuItem = page.root;
17
- const onClickFunc = () => console.log("Message");
18
- menuItem.onclick = onClickFunc;
19
- expect(menuItem.onclick).toEqual(onClickFunc);
20
- menuItem.disabled = true;
21
- expect(menuItem.onclick).toBe(null);
22
- menuItem.disabled = false;
23
- expect(menuItem.onclick).toEqual(onClickFunc);
24
- });
25
- it("renders description if prop is present", async () => {
26
- const page = await newSpecPage({
27
- components: [Menuitem],
28
- html: "<wm-menuitem description='Description here'><wm-menuitem>",
29
- });
30
- const descriptionEl = page.root.shadowRoot.querySelector(".description");
31
- expect(descriptionEl === null || descriptionEl === void 0 ? void 0 : descriptionEl.textContent).toBe("Description here");
32
- });
33
- describe("error throwing", () => {
34
- it("throws error when description is over character limit", async () => {
35
- const mockFunc = jest.fn();
36
- console.error = mockFunc;
37
- const description = "q".repeat(200);
38
- await newSpecPage({
39
- components: [Menuitem],
40
- html: `<wm-menuitem description='${description}'></wm-menuitem>`,
41
- });
42
- expect(mockFunc).toHaveBeenCalledWith("wm-menuitem description is above the character limit of 100");
43
- });
44
- it("throws error when description and icon props are used simultaneously", async () => {
45
- const mockFunc = jest.fn();
46
- console.error = mockFunc;
47
- await newSpecPage({
48
- components: [Menuitem],
49
- html: `<wm-menuitem description='Example description' icon="f3eb"></wm-menuitem>`,
50
- });
51
- expect(mockFunc).toHaveBeenCalledWith("wm-menuitems with descriptions do not support the use of icons");
52
- });
53
- });
54
- });
@@ -1,11 +0,0 @@
1
- import { ModalFooter } from "./wm-modal-footer";
2
- describe("wm-modal-footer", () => {
3
- it("has the right props", () => {
4
- const modal = new ModalFooter();
5
- expect(modal).toHaveProperty("secondaryText");
6
- expect(modal).toHaveProperty("primaryText");
7
- expect(modal).toHaveProperty("infoText");
8
- expect(modal).toHaveProperty("primaryActionDisabled");
9
- expect(modal).toHaveProperty("deleteStyle");
10
- });
11
- });
@@ -1,8 +0,0 @@
1
- import { ModalHeader } from "./wm-modal-header";
2
- describe("wm-modal-header", () => {
3
- it("has the right props", () => {
4
- const modal = new ModalHeader();
5
- expect(modal).toHaveProperty("heading");
6
- expect(modal).toHaveProperty("subheading");
7
- });
8
- });
@@ -1,104 +0,0 @@
1
- import { newE2EPage } from "@stencil/core/testing";
2
- import { AxePuppeteer } from "@axe-core/puppeteer";
3
- describe("wm-modal", () => {
4
- let page, modal,
5
- // overlay: any,
6
- closeButton;
7
- beforeEach(async () => {
8
- page = await newE2EPage();
9
- await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
10
- <button onClick="showModal()" id="modal-trigger">Open Modal</button><wm-modal id="modal-test"><wm-modal-header heading="Modal Heading"></wm-modal-header><div>Modal Body</div><wm-modal-footer primary-text="Save" secondary-text="Discard"></wm-modal-footer></wm-modal><button>Filler</button></main></body><script>const dialog = document.getElementById("modal-test");
11
-
12
- dialog.addEventListener("wmModalCloseTriggered", function() {
13
- dialog.open = false;
14
- });
15
-
16
- dialog.addEventListener("wmModalSecondaryTriggered", function() {
17
- dialog.open = false;
18
- });
19
-
20
- dialog.addEventListener("wmModalPrimaryTriggered", function() {
21
- dialog.open = false;
22
- });
23
- function showModal() {
24
- dialog.open = true;
25
- }
26
- </script></html>`);
27
- modal = await page.find("wm-modal");
28
- closeButton = await page.find("wm-button#wm-modal-close-modal-test >>> button");
29
- });
30
- it("passes Axe checks", async () => {
31
- const results = await new AxePuppeteer(page).analyze();
32
- expect(results.violations.length).toBe(0);
33
- });
34
- // RENDER
35
- it("renders", async () => {
36
- expect(modal).toHaveClass("hydrated");
37
- });
38
- // DISPLAY AND HIDE
39
- it("emits the proper event when the close (X) button is clicked", async () => {
40
- const eventSpy = await modal.spyOnEvent("wmModalCloseTriggered");
41
- await page.keyboard.press("Tab");
42
- await page.keyboard.press("Enter");
43
- await page.waitForChanges();
44
- expect(modal).toHaveAttribute("open");
45
- closeButton.click();
46
- await page.waitForChanges();
47
- expect(eventSpy).toHaveReceivedEventTimes(1);
48
- });
49
- //ACCESSIBILITY
50
- it("focuses the close button when the modal opens if no elementToFocus property is set", async () => {
51
- await page.keyboard.press("Tab");
52
- await page.keyboard.press("Enter"); // open popup
53
- await page.waitForChanges();
54
- const activeElId = await page.evaluate(() => document.activeElement.id);
55
- expect(activeElId).toEqual("wm-modal-close-modal-test");
56
- });
57
- it("focuses the correct element when the elementToFocus property is set", async () => {
58
- page = await newE2EPage();
59
- //The elementToFocus prop isn't mutable, so "setProperty" doesn't work. Page content has to be reset.
60
- await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
61
- <button onClick="showModal()">Open Modal</button><wm-modal element-to-focus="modal-input" id="second-modal"><wm-modal-header heading="Modal Heading"></wm-modal-header><div>Modal Body<div><input id="modal-input"></input></div></div><wm-modal-footer></wm-modal-footer></wm-modal></main></body><script>const dialog = document.getElementById("second-modal");
62
-
63
- dialog.addEventListener("wmModalCloseTriggered", function() {
64
- dialog.open = false;
65
- });
66
-
67
- dialog.addEventListener("wmModalSecondaryTriggered", function() {
68
- dialog.open = false;
69
- });
70
-
71
- dialog.addEventListener("wmModalPrimaryTriggered", function() {
72
- dialog.open = false;
73
- });
74
-
75
- function showModal() {
76
- dialog.open = true;
77
- }
78
- </script></html>`);
79
- await page.waitForChanges();
80
- await page.keyboard.press("Tab");
81
- await page.keyboard.press("Enter");
82
- await page.waitForChanges();
83
- const activeElId = await page.evaluate(() => document.activeElement.id);
84
- expect(activeElId).toEqual("modal-input");
85
- });
86
- it("returns focus to the triggering element when the modal closes", async () => {
87
- await page.keyboard.press("Tab");
88
- await page.keyboard.press("Enter");
89
- await page.waitForChanges();
90
- await page.keyboard.press("Enter");
91
- await page.waitForChanges();
92
- const activeElId = await page.evaluate(() => document.activeElement.id);
93
- expect(activeElId).toEqual("modal-trigger");
94
- });
95
- it("closes the modal when escape key is pressed", async () => {
96
- await page.keyboard.press("Tab");
97
- await page.keyboard.press("Enter");
98
- await page.waitForChanges();
99
- expect(modal).toHaveAttribute("open");
100
- await page.keyboard.press("Escape");
101
- await page.waitForChanges();
102
- expect(modal).not.toHaveAttribute("open");
103
- });
104
- });
@@ -1,30 +0,0 @@
1
- import { newSpecPage } from "@stencil/core/testing";
2
- jest.mock("../../global/functions");
3
- import { Modal } from "./wm-modal";
4
- import { ModalHeader } from "./wm-modal-header";
5
- import { ModalFooter } from "./wm-modal-footer";
6
- describe("wm-modal", () => {
7
- it("builds", async () => {
8
- const comp = await newSpecPage({
9
- components: [Modal, ModalHeader, ModalFooter],
10
- html: "<wm-modal open='false'><wm-modal-header heading='heading'></wm-modal-header><div>content</div><wm-modal-footer primary-text='primary-text'></wm-modal-footer></wm-modal>",
11
- });
12
- expect(comp.root).toMatchSnapshot();
13
- });
14
- it("watching open-- toggles the modal", () => {
15
- //toggleModal
16
- const component = new Modal();
17
- const mockShowModal = (component.showModal = jest.fn());
18
- const mockHideModal = (component.hideModal = jest.fn());
19
- component.open = true;
20
- component.toggleModal();
21
- expect(mockShowModal).toHaveBeenCalledTimes(1);
22
- expect(mockHideModal).toHaveBeenCalledTimes(0);
23
- jest.resetAllMocks();
24
- component.open = false;
25
- component.toggleModal();
26
- expect(mockShowModal).toHaveBeenCalledTimes(0);
27
- expect(mockHideModal).toHaveBeenCalledTimes(1);
28
- jest.resetAllMocks();
29
- });
30
- });
@@ -1,102 +0,0 @@
1
- import { newE2EPage } from "@stencil/core/testing";
2
- import { AxePuppeteer } from "@axe-core/puppeteer";
3
- describe("wm-navigation", () => {
4
- let page, nav, hamburger, items;
5
- beforeEach(async () => {
6
- page = await newE2EPage();
7
- await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
8
- <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
9
- <wm-navigation id="mynav">
10
- <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
11
- <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
12
- </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
13
- </main></body></html>`);
14
- nav = await page.find("wm-navigation");
15
- hamburger = await page.find("wm-navigation-hamburger");
16
- items = await page.find("wm-navigation-item");
17
- });
18
- it("passes Axe checks", async () => {
19
- const results = await new AxePuppeteer(page).analyze();
20
- expect(results.violations.length).toBe(0);
21
- });
22
- it("renders the component", async () => {
23
- expect(nav).not.toBeNull();
24
- expect(hamburger).not.toBeNull();
25
- expect(items).not.toBeNull();
26
- });
27
- it("traps focus when collapsible", async () => {
28
- // small screen, trap focus
29
- page.setViewport({ width: 1023, height: 800 });
30
- page.waitForChanges();
31
- await page.keyboard.press("Tab"); // focus on hamburger
32
- await page.keyboard.press("Enter"); // open. focus on close btn
33
- await page.waitForTimeout(250); // wait for animation to complete and focus to be called
34
- await page.keyboard.press("Tab"); // focus on 1st nav item
35
- await page.keyboard.press("Tab"); // focus on 2nd nav item
36
- await page.keyboard.press("Tab"); // with trap focus we circle back within the nav (on close btn)
37
- let activeEl = await page.evaluate(() => document.activeElement.tagName);
38
- expect(activeEl).toEqual("WM-NAVIGATION");
39
- });
40
- it("doesn't trap focus when persistent", async () => {
41
- // wide screen, no trap focus
42
- page.setViewport({ width: 1024, height: 800 });
43
- await page.waitForChanges(); // test fails randomly without this
44
- await page.keyboard.press("Tab"); // focus on 1st nav item
45
- await page.keyboard.press("Tab"); // focus on 2nd nav item
46
- await page.keyboard.press("Tab"); // focus on the button in main
47
- let activeEl = await page.evaluate(() => document.activeElement.tagName);
48
- expect(activeEl).toEqual("BUTTON");
49
- });
50
- it("handles focus method when collapsible and closed", async () => {
51
- page.setViewport({ width: 1023, height: 800 });
52
- let activeEl = await page.evaluate(() => document.activeElement.tagName);
53
- expect(activeEl).toEqual("BODY");
54
- nav.focus();
55
- activeEl = await page.evaluate(() => document.activeElement.tagName);
56
- expect(activeEl).toEqual("WM-NAVIGATION-HAMBURGER");
57
- });
58
- it("handles focus method when collapsible and open", async () => {
59
- page.setViewport({ width: 1023, height: 800 });
60
- let activeEl = await page.evaluate(() => document.activeElement.tagName);
61
- expect(activeEl).toEqual("BODY");
62
- expect(nav.getAttribute("aria-expanded")).toBe("false");
63
- hamburger.click();
64
- await page.waitForChanges();
65
- expect(nav.getAttribute("aria-expanded")).toBe("true");
66
- nav.focus();
67
- activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.tagName);
68
- expect(activeEl).toEqual("WM-BUTTON"); // the close button
69
- });
70
- it("handles focus method when persistent", async () => {
71
- page.setViewport({ width: 1024, height: 800 });
72
- let activeEl = await page.evaluate(() => document.activeElement.tagName);
73
- expect(activeEl).toEqual("BODY");
74
- expect(nav.getAttribute("aria-expanded")).toBeUndefined;
75
- nav.focus();
76
- expect(nav.getAttribute("aria-expanded")).toBeUndefined; // should still be undefined
77
- activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.textContent);
78
- expect(activeEl).toEqual("Home"); // first item
79
- });
80
- it("is open on load if open prop is set to true", async () => {
81
- page = await newE2EPage();
82
- await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
83
- <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
84
- <wm-navigation open id="mynav">
85
- <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
86
- <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
87
- </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
88
- </main></body></html>`);
89
- await page.waitForTimeout(500);
90
- const nav = await page.find("wm-navigation");
91
- expect(nav.getAttribute("aria-expanded")).toBe("true");
92
- });
93
- it("programatically associates hamburger and nav and properly announces to SR", async () => {
94
- const hamburgerAriaControls = hamburger.shadowRoot.querySelector("button").getAttribute("aria-controls");
95
- const hamburgerAriaLabel = hamburger.shadowRoot.querySelector("button").getAttribute("aria-label");
96
- const navAriaLabel = nav.getAttribute("aria-label");
97
- expect(hamburgerAriaControls).toBe(nav.id);
98
- expect(hamburgerAriaLabel).toBe("Show navigation");
99
- expect(navAriaLabel).toBe("Main");
100
- });
101
- // when closed, focus returns to hamburger
102
- });
@@ -1,91 +0,0 @@
1
- import { newSpecPage } from "@stencil/core/testing";
2
- //jest.mock("../../global/functions");
3
- import { Navigation } from "./wm-navigation";
4
- import { NavigationItem } from "./wm-navigation-item";
5
- describe("Navigation unit tests", () => {
6
- it("isCollapsible", async () => {
7
- const nav = new Navigation();
8
- window.innerWidth = 1023;
9
- expect(nav.isCollapsible).toBe(true);
10
- window.innerWidth = 1024;
11
- expect(nav.isCollapsible).toBe(false);
12
- });
13
- it("ariaExpanded", async () => {
14
- const nav = new Navigation();
15
- window.innerWidth = 1024;
16
- expect(nav.ariaExpanded).toBeUndefined;
17
- window.innerWidth = 1023;
18
- expect(nav.ariaExpanded).toBe("false");
19
- nav.open = true;
20
- expect(nav.ariaExpanded).toBe("true");
21
- });
22
- });
23
- describe("navigation", () => {
24
- let page;
25
- let navigation;
26
- let items;
27
- beforeEach(async () => {
28
- page = await newSpecPage({
29
- components: [Navigation, NavigationItem],
30
- html: `<wm-navigation id="mynav">
31
- <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
32
- <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
33
- </wm-navigation>`,
34
- });
35
- navigation = page.root;
36
- items = Array.from(page.root.querySelectorAll("wm-navigation-item"));
37
- });
38
- // integration tests
39
- // this test includes UX functionality, the related a11y (aria-expanded)
40
- // as well as the switch between persistent and collapsible modes
41
- it("expands and collapses", async () => {
42
- // aria-expanded
43
- const expanded = navigation.getAttribute("aria-expanded");
44
- // Persistent: no aria-expanded
45
- window.innerWidth = 1024;
46
- expect(expanded).toBeNull;
47
- // Collapsible
48
- window.innerWidth = 1023;
49
- // aria-expanded true when open
50
- navigation.open = true;
51
- expect(expanded).not.toBeNull;
52
- // aria-expanded false when closed
53
- navigation.open = false;
54
- expect(expanded).toBeNull;
55
- });
56
- it("closes when toggle button is activated", async () => {
57
- window.innerWidth = 1023;
58
- navigation.open = true;
59
- let toggleBtn = page.root.shadowRoot.querySelector(".toggle");
60
- toggleBtn.click();
61
- expect(navigation.open).toBeFalsy();
62
- });
63
- /*
64
- * Close button is present in collapsible mode, not otherwise
65
- * can't test with current implementation because button is
66
- * simply hidden via CSS
67
- it("hides the button in persistent mode", async () => {
68
- // in persistent mode, there's no button at all
69
- window.innerWidth = 1024;
70
- navigation.open = true;
71
-
72
- let toggleBtn = page.root!.shadowRoot!.querySelector(".toggle-wrapper");
73
- expect(toggleBtn.width).toBeNull();
74
- });
75
- */
76
- // a11y
77
- it("Has a role of navigation and has a label", async () => {
78
- // navigation role requires a label only when there are several on the page. Since we don't know if there will be others, we can set a label in all cases.
79
- let role = navigation.getAttribute("role");
80
- let label = navigation.getAttribute("aria-label");
81
- expect(role).toBe("navigation");
82
- expect(label).toBe("Main");
83
- });
84
- it("items have proper role and attrs", async () => {
85
- const firstItem = items[0];
86
- const role = firstItem.getAttribute("role");
87
- expect(role).toBe("listitem");
88
- const href = firstItem.shadowRoot.querySelector("a").getAttribute("href");
89
- expect(href).toBe("/home");
90
- });
91
- });