@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.
- package/dist/cjs/{app-globals-d6c37251.js → app-globals-aad9863d.js} +2 -2
- package/dist/cjs/{chartFunctions-b32ecbeb.js → chartFunctions-e86ed63c.js} +8 -4
- package/dist/cjs/{index-0f1bacce.js → index-4853a7b4.js} +537 -494
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/priv-chart-popover.cjs.entry.js +1 -1
- package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
- package/dist/cjs/priv-navigator-button.cjs.entry.js +1 -1
- package/dist/cjs/priv-navigator-item.cjs.entry.js +1 -1
- package/dist/cjs/ripple.cjs.js +3 -3
- package/dist/cjs/wm-action-menu_2.cjs.entry.js +1 -1
- package/dist/cjs/wm-button.cjs.entry.js +1 -1
- package/dist/cjs/wm-chart-slice.cjs.entry.js +1 -1
- package/dist/cjs/wm-chart.cjs.entry.js +2 -2
- package/dist/cjs/wm-datepicker.cjs.entry.js +1 -1
- package/dist/cjs/wm-file-list.cjs.entry.js +1 -1
- package/dist/cjs/wm-file.cjs.entry.js +1 -1
- package/dist/cjs/wm-input.cjs.entry.js +1 -1
- package/dist/cjs/wm-line-chart.cjs.entry.js +2 -2
- package/dist/cjs/wm-modal-footer.cjs.entry.js +1 -1
- package/dist/cjs/wm-modal-header.cjs.entry.js +1 -1
- package/dist/cjs/wm-modal.cjs.entry.js +1 -1
- package/dist/cjs/wm-navigation_3.cjs.entry.js +1 -1
- package/dist/cjs/wm-navigator.cjs.entry.js +1 -1
- package/dist/cjs/wm-option_2.cjs.entry.js +1 -1
- package/dist/cjs/wm-pagination.cjs.entry.js +1 -1
- package/dist/cjs/wm-progress-indicator_3.cjs.entry.js +2 -2
- package/dist/cjs/wm-search.cjs.entry.js +1 -1
- package/dist/cjs/wm-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/wm-tab-item_3.cjs.entry.js +1 -1
- package/dist/cjs/wm-tag-input.cjs.entry.js +1 -1
- package/dist/cjs/wm-tag-option.cjs.entry.js +1 -1
- package/dist/cjs/wm-textarea.cjs.entry.js +1 -1
- package/dist/cjs/wm-timepicker.cjs.entry.js +1 -1
- package/dist/cjs/wm-toggletip.cjs.entry.js +1 -1
- package/dist/cjs/wm-uploader.cjs.entry.js +1 -1
- package/dist/cjs/wm-wrapper.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/charts/chartFunctions.js +7 -3
- package/dist/esm/{app-globals-2df700e6.js → app-globals-4e667854.js} +2 -2
- package/dist/esm/{chartFunctions-e43ec877.js → chartFunctions-8098e455.js} +8 -4
- package/dist/esm/{index-5815b978.js → index-7923308f.js} +537 -494
- package/dist/esm/loader.js +3 -3
- package/dist/esm/priv-chart-popover.entry.js +1 -1
- package/dist/esm/priv-datepicker.entry.js +1 -1
- package/dist/esm/priv-navigator-button.entry.js +1 -1
- package/dist/esm/priv-navigator-item.entry.js +1 -1
- package/dist/esm/ripple.js +4 -4
- package/dist/esm/wm-action-menu_2.entry.js +1 -1
- package/dist/esm/wm-button.entry.js +1 -1
- package/dist/esm/wm-chart-slice.entry.js +1 -1
- package/dist/esm/wm-chart.entry.js +2 -2
- package/dist/esm/wm-datepicker.entry.js +1 -1
- package/dist/esm/wm-file-list.entry.js +1 -1
- package/dist/esm/wm-file.entry.js +1 -1
- package/dist/esm/wm-input.entry.js +1 -1
- package/dist/esm/wm-line-chart.entry.js +2 -2
- package/dist/esm/wm-modal-footer.entry.js +1 -1
- package/dist/esm/wm-modal-header.entry.js +1 -1
- package/dist/esm/wm-modal.entry.js +1 -1
- package/dist/esm/wm-navigation_3.entry.js +1 -1
- package/dist/esm/wm-navigator.entry.js +1 -1
- package/dist/esm/wm-option_2.entry.js +1 -1
- package/dist/esm/wm-pagination.entry.js +1 -1
- package/dist/esm/wm-progress-indicator_3.entry.js +2 -2
- package/dist/esm/wm-search.entry.js +1 -1
- package/dist/esm/wm-snackbar.entry.js +1 -1
- package/dist/esm/wm-tab-item_3.entry.js +1 -1
- package/dist/esm/wm-tag-input.entry.js +1 -1
- package/dist/esm/wm-tag-option.entry.js +1 -1
- package/dist/esm/wm-textarea.entry.js +1 -1
- package/dist/esm/wm-timepicker.entry.js +1 -1
- package/dist/esm/wm-toggletip.entry.js +1 -1
- package/dist/esm/wm-uploader.entry.js +1 -1
- package/dist/esm/wm-wrapper.entry.js +1 -1
- package/dist/esm-es5/{app-globals-2df700e6.js → app-globals-4e667854.js} +1 -1
- package/dist/esm-es5/chartFunctions-8098e455.js +1 -0
- package/dist/esm-es5/index-7923308f.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/priv-chart-popover.entry.js +1 -1
- package/dist/esm-es5/priv-datepicker.entry.js +1 -1
- package/dist/esm-es5/priv-navigator-button.entry.js +1 -1
- package/dist/esm-es5/priv-navigator-item.entry.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
- package/dist/esm-es5/wm-button.entry.js +1 -1
- package/dist/esm-es5/wm-chart-slice.entry.js +1 -1
- package/dist/esm-es5/wm-chart.entry.js +1 -1
- package/dist/esm-es5/wm-datepicker.entry.js +1 -1
- package/dist/esm-es5/wm-file-list.entry.js +1 -1
- package/dist/esm-es5/wm-file.entry.js +1 -1
- package/dist/esm-es5/wm-input.entry.js +1 -1
- package/dist/esm-es5/wm-line-chart.entry.js +1 -1
- package/dist/esm-es5/wm-modal-footer.entry.js +1 -1
- package/dist/esm-es5/wm-modal-header.entry.js +1 -1
- package/dist/esm-es5/wm-modal.entry.js +1 -1
- package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
- package/dist/esm-es5/wm-navigator.entry.js +1 -1
- package/dist/esm-es5/wm-option_2.entry.js +1 -1
- package/dist/esm-es5/wm-pagination.entry.js +1 -1
- package/dist/esm-es5/wm-progress-indicator_3.entry.js +1 -1
- package/dist/esm-es5/wm-search.entry.js +1 -1
- package/dist/esm-es5/wm-snackbar.entry.js +1 -1
- package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
- package/dist/esm-es5/wm-tag-input.entry.js +1 -1
- package/dist/esm-es5/wm-tag-option.entry.js +1 -1
- package/dist/esm-es5/wm-textarea.entry.js +1 -1
- package/dist/esm-es5/wm-timepicker.entry.js +1 -1
- package/dist/esm-es5/wm-toggletip.entry.js +1 -1
- package/dist/esm-es5/wm-uploader.entry.js +1 -1
- package/dist/esm-es5/wm-wrapper.entry.js +1 -1
- package/dist/loader/index.d.ts +3 -0
- package/dist/ripple/{p-df4ab5de.system.entry.js → p-00f8637e.system.entry.js} +1 -1
- package/dist/ripple/{p-0a05e6d7.system.entry.js → p-06c018cf.system.entry.js} +1 -1
- package/dist/ripple/{p-411f0d1d.entry.js → p-0707b4c2.entry.js} +1 -1
- package/dist/ripple/{p-e14c3721.entry.js → p-0bb464b1.entry.js} +1 -1
- package/dist/ripple/{p-6f47d86c.system.entry.js → p-0d0e0a1e.system.entry.js} +1 -1
- package/dist/ripple/{p-9b894527.entry.js → p-0e7025db.entry.js} +1 -1
- package/dist/ripple/{p-d65e9846.entry.js → p-0ec1e075.entry.js} +1 -1
- package/dist/ripple/{p-9a977fbd.entry.js → p-0f72ed3a.entry.js} +1 -1
- package/dist/ripple/{p-b5729148.system.entry.js → p-186a4d76.system.entry.js} +1 -1
- package/dist/ripple/{p-9433f29c.entry.js → p-18c1593b.entry.js} +1 -1
- package/dist/ripple/{p-194c06e1.entry.js → p-19f29a48.entry.js} +1 -1
- package/dist/ripple/{p-85e59e6a.system.entry.js → p-1ee68e06.system.entry.js} +1 -1
- package/dist/ripple/{p-46584e7e.system.entry.js → p-1fcc8007.system.entry.js} +1 -1
- package/dist/ripple/{p-87eb2f99.system.entry.js → p-28119849.system.entry.js} +1 -1
- package/dist/ripple/{p-0c218ac2.system.entry.js → p-2849847d.system.entry.js} +1 -1
- package/dist/ripple/{p-70c459b2.entry.js → p-2f39732e.entry.js} +1 -1
- package/dist/ripple/{p-ac727a0a.system.entry.js → p-30ee0f5c.system.entry.js} +1 -1
- package/dist/ripple/{p-44f2e1a7.entry.js → p-340f96b5.entry.js} +1 -1
- package/dist/ripple/{p-74565577.system.entry.js → p-3639dbbc.system.entry.js} +1 -1
- package/dist/ripple/{p-1b8584f9.entry.js → p-3e605541.entry.js} +1 -1
- package/dist/ripple/{p-440571f7.system.entry.js → p-439d839b.system.entry.js} +1 -1
- package/dist/ripple/{p-e80009db.entry.js → p-445d6915.entry.js} +1 -1
- package/dist/ripple/{p-1435a717.entry.js → p-48ed56a0.entry.js} +1 -1
- package/dist/ripple/{p-4a8016fb.entry.js → p-49f94f8a.entry.js} +1 -1
- package/dist/ripple/{p-764cee74.system.js → p-4ba32e58.system.js} +1 -1
- package/dist/ripple/{p-0bf7cdda.system.entry.js → p-510fab1c.system.entry.js} +1 -1
- package/dist/ripple/p-539b7be9.system.js +2 -0
- package/dist/ripple/{p-7ffb6f07.entry.js → p-57694990.entry.js} +1 -1
- package/dist/ripple/{p-e9d29b5b.system.entry.js → p-58a286e8.system.entry.js} +1 -1
- package/dist/ripple/{p-ef0854e6.entry.js → p-5ff41948.entry.js} +1 -1
- package/dist/ripple/{p-76740c92.entry.js → p-636ca7f2.entry.js} +1 -1
- package/dist/ripple/{p-0bef5c1b.system.entry.js → p-66a57d81.system.entry.js} +1 -1
- package/dist/ripple/p-681c1853.js +1 -0
- package/dist/ripple/{p-7d2bd039.entry.js → p-6b71806b.entry.js} +1 -1
- package/dist/ripple/{p-5c4245d9.system.entry.js → p-7afa2fdc.system.entry.js} +1 -1
- package/dist/ripple/{p-ce492826.js → p-7c12ac23.js} +1 -1
- package/dist/ripple/{p-5297476b.entry.js → p-7cb98aa5.entry.js} +1 -1
- package/dist/ripple/{p-87c85aac.system.entry.js → p-7dbc4abc.system.entry.js} +1 -1
- package/dist/ripple/{p-6f61a5f1.entry.js → p-8c7b9bad.entry.js} +1 -1
- package/dist/ripple/p-94a54d68.system.js +1 -0
- package/dist/ripple/{p-b878d9c7.entry.js → p-950edf62.entry.js} +1 -1
- package/dist/ripple/{p-6a231093.system.entry.js → p-96f3d9e7.system.entry.js} +1 -1
- package/dist/ripple/{p-47441a2a.system.entry.js → p-9bda128e.system.entry.js} +1 -1
- package/dist/ripple/{p-eab22c94.entry.js → p-9ca027b7.entry.js} +1 -1
- package/dist/ripple/{p-6372934d.entry.js → p-9d4ea9f8.entry.js} +1 -1
- package/dist/ripple/{p-49632308.system.entry.js → p-9d8817a7.system.entry.js} +1 -1
- package/dist/ripple/{p-9936c43c.system.entry.js → p-a0098136.system.entry.js} +1 -1
- package/dist/ripple/p-a431d6e5.js +2 -0
- package/dist/ripple/{p-7ade6e66.system.entry.js → p-a6119885.system.entry.js} +1 -1
- package/dist/ripple/{p-25cf3ccb.entry.js → p-a77f2168.entry.js} +1 -1
- package/dist/ripple/{p-3cc9b812.entry.js → p-adfaeeea.entry.js} +1 -1
- package/dist/ripple/{p-66960670.system.entry.js → p-b02c0c41.system.entry.js} +1 -1
- package/dist/ripple/{p-1166513e.system.entry.js → p-bbb8c02f.system.entry.js} +1 -1
- package/dist/ripple/{p-3b9a9d73.entry.js → p-bd7e892d.entry.js} +1 -1
- package/dist/ripple/{p-441354a5.system.entry.js → p-c9552e88.system.entry.js} +1 -1
- package/dist/ripple/{p-018498a7.system.entry.js → p-cd0a862f.system.entry.js} +1 -1
- package/dist/ripple/{p-25e011a6.entry.js → p-d344e490.entry.js} +1 -1
- package/dist/ripple/{p-dabff389.system.entry.js → p-d87e105b.system.entry.js} +1 -1
- package/dist/ripple/{p-44d8f4b2.system.entry.js → p-e0ff556b.system.entry.js} +1 -1
- package/dist/ripple/{p-8edd4ce6.system.entry.js → p-e19e1ece.system.entry.js} +1 -1
- package/dist/ripple/{p-c53f1dcb.entry.js → p-e3d8f2f6.entry.js} +1 -1
- package/dist/ripple/{p-116477b7.entry.js → p-e8eef357.entry.js} +1 -1
- package/dist/ripple/{p-e0ca71d3.entry.js → p-eb596891.entry.js} +1 -1
- package/dist/ripple/{p-35627044.system.entry.js → p-ec384895.system.entry.js} +1 -1
- package/dist/ripple/{p-5356db9b.entry.js → p-eccb5aaf.entry.js} +1 -1
- package/dist/ripple/{p-567c5edd.system.entry.js → p-edcb8f48.system.entry.js} +1 -1
- package/dist/ripple/{p-d8f1fd76.entry.js → p-f963be6d.entry.js} +1 -1
- package/dist/ripple/{p-838d75c2.system.js → p-fde81b94.system.js} +1 -1
- package/dist/ripple/{p-d37a720b.system.entry.js → p-ff7dac66.system.entry.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/stencil-public-runtime.d.ts +0 -2
- package/package.json +2 -2
- package/dist/collection/components/charts/chartFunctions.spec.js +0 -16
- package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.e2e.js +0 -81
- package/dist/collection/components/charts/screenshots.e2e.js +0 -96
- package/dist/collection/components/charts/wm-chart/wm-chart.e2e.js +0 -213
- package/dist/collection/components/charts/wm-chart/wm-chart.spec.js +0 -37
- package/dist/collection/components/charts/wm-line-chart/wm-line-chart.e2e.js +0 -176
- package/dist/collection/components/charts/wm-line-chart/wm-line-chart.spec.js +0 -163
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.e2e.js +0 -69
- package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.spec.js +0 -79
- package/dist/collection/components/wm-action-menu/wm-action-menu.e2e.js +0 -200
- package/dist/collection/components/wm-action-menu/wm-action-menu.spec.js +0 -48
- package/dist/collection/components/wm-button/wm-button.e2e.js +0 -55
- package/dist/collection/components/wm-button/wm-button.spec.js +0 -74
- package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.spec.js +0 -76
- package/dist/collection/components/wm-datepicker/wm-datepicker.e2e.js +0 -382
- package/dist/collection/components/wm-datepicker/wm-datepicker.spec.js +0 -21
- package/dist/collection/components/wm-file/wm-file.spec.js +0 -194
- package/dist/collection/components/wm-file-list/wm-file-list.spec.js +0 -69
- package/dist/collection/components/wm-input/wm-input.e2e.js +0 -32
- package/dist/collection/components/wm-input/wm-input.spec.js +0 -173
- package/dist/collection/components/wm-menuitem/wm-menuitem.e2e.js +0 -23
- package/dist/collection/components/wm-menuitem/wm-menuitem.spec.js +0 -54
- package/dist/collection/components/wm-modal/wm-modal-footer.spec.js +0 -11
- package/dist/collection/components/wm-modal/wm-modal-header.spec.js +0 -8
- package/dist/collection/components/wm-modal/wm-modal.e2e.js +0 -104
- package/dist/collection/components/wm-modal/wm-modal.spec.js +0 -30
- package/dist/collection/components/wm-navigation/wm-navigation.e2e.js +0 -102
- package/dist/collection/components/wm-navigation/wm-navigation.spec.js +0 -91
- package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.e2e.js +0 -50
- package/dist/collection/components/wm-navigator/wm-navigator.e2e.js +0 -209
- package/dist/collection/components/wm-navigator/wm-navigator.spec.js +0 -177
- package/dist/collection/components/wm-option/wm-option.e2e.js +0 -22
- package/dist/collection/components/wm-option/wm-option.spec.js +0 -63
- package/dist/collection/components/wm-pagination/wm-pagination.e2e.js +0 -312
- package/dist/collection/components/wm-search/wm-search.e2e.js +0 -76
- package/dist/collection/components/wm-search/wm-search.spec.js +0 -71
- package/dist/collection/components/wm-select/wm-select.e2e.js +0 -521
- package/dist/collection/components/wm-select/wm-select.spec.js +0 -271
- package/dist/collection/components/wm-snackbar/wm-snackbar.e2e.js +0 -112
- package/dist/collection/components/wm-snackbar/wm-snackbar.spec.js +0 -9
- package/dist/collection/components/wm-tabs/wm-tabs.e2e.js +0 -91
- package/dist/collection/components/wm-tabs/wm-tabs.spec.js +0 -12
- package/dist/collection/components/wm-tag-input/wm-tag-input.e2e.js +0 -204
- package/dist/collection/components/wm-tag-input/wm-tag-input.spec.js +0 -195
- package/dist/collection/components/wm-textarea/wm-textarea.e2e.js +0 -41
- package/dist/collection/components/wm-textarea/wm-textarea.spec.js +0 -79
- package/dist/collection/components/wm-timepicker/wm-timepicker.e2e.js +0 -163
- package/dist/collection/components/wm-timepicker/wm-timepicker.spec.js +0 -147
- package/dist/collection/components/wm-toggletip/wm-toggletip.e2e.js +0 -69
- package/dist/collection/components/wm-toggletip/wm-toggletip.spec.js +0 -21
- package/dist/collection/components/wm-uploader/wm-uploader.e2e.js +0 -70
- package/dist/collection/components/wm-uploader/wm-uploader.spec.js +0 -234
- package/dist/collection/global/functions.spec.js +0 -126
- package/dist/collection/lang/lang.spec.js +0 -20
- package/dist/esm-es5/chartFunctions-e43ec877.js +0 -1
- package/dist/esm-es5/index-5815b978.js +0 -1
- package/dist/ripple/p-1eb84629.system.js +0 -2
- package/dist/ripple/p-7bf00a52.js +0 -2
- package/dist/ripple/p-9bf31e42.js +0 -1
- 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,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
|
-
});
|