@watermarkinsights/ripple 5.11.0-4 → 5.11.0-6

package/dist/collection/components/wm-snackbar/wm-snackbar.e2e.js

@@ -0,0 +1,112 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-snackbar", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-button id='create-snack' onclick='generateSnackbar()'></wm-button><wm-snackbar notifications='[]' id='snack'></wm-snackbar ><script>function generateSnackbar() { const snackbar = document.getElementById('snack'); const id = '3'; let notifications = JSON.parse(snackbar.notifications); let newNotification = {'id': id, message: 'You did something', link: 'Undo'};       let updatedNotifications = [ ...notifications, newNotification ]; snackbar.notifications = JSON.stringify(updatedNotifications); }</script>");
+        await page.evaluate(async () => {
+            document.addEventListener("wmSnackbarSnackFinished", (ev) => {
+                const snackbar = document.querySelector("wm-snackbar");
+                let newSnacks = JSON.parse(snackbar.notifications).filter((snack) => +snack.id !== +ev.detail.id);
+                snackbar.notifications = JSON.stringify(newSnacks);
+            });
+        });
+    });
+    afterEach(async () => {
+        jest.clearAllTimers();
+    });
+    // RENDER
+    it("it displays a snackbar when it receives a notification", async () => {
+        //generate snackbar
+        const button = await page.find("wm-button");
+        button.click(); //perform action that generates a notification
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
+        expect(snackbar).not.toBeNull();
+    });
+    it("it displays multiple snackbars when it receives more than one notification", async () => {
+        //generate snackbars
+        const button = await page.find("wm-button");
+        button.click();
+        await page.waitForChanges();
+        button.click();
+        await page.waitForChanges();
+        const snackbars = await page.findAll("wm-snackbar >>> .content-wrapper");
+        expect(snackbars.length).toBe(2);
+    });
+    it("dismisses the snackbar after 20 seconds if the user is clicking and not tabbing", async () => {
+        //generate snackbar
+        const snackExpired = await page.spyOnEvent("wmSnackbarSnackFinished");
+        const button = await page.find("wm-button");
+        button.click();
+        await page.waitForChanges();
+        let snack = await page.find("wm-snackbar >>> .content-wrapper");
+        expect(snack).not.toBeNull();
+        await new Promise((resolve) => {
+            setTimeout(() => {
+                resolve("");
+            }, 21000);
+        });
+        snack = await page.find("wm-snackbar >>> .content-wrapper");
+        expect(snack).toBeNull();
+        expect(snackExpired).toHaveReceivedEventDetail({
+            id: "3",
+            message: "You did something",
+            link: "Undo",
+        });
+    });
+    it("dismisses the snackbar when the close button is clicked", async () => {
+        //generate snackbar
+        const triggerButton = await page.find("wm-button");
+        triggerButton.click();
+        await page.waitForChanges();
+        //press close button
+        const closeButton = await page.find("wm-snackbar >>> button");
+        closeButton.click();
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
+        expect(snackbar).toBeNull();
+    });
+    //ACCESSIBILITY
+    it("renders an aria-live region", async () => {
+        const element = await page.find("wm-snackbar >>> #wm-live-region-snack");
+        expect(element).toEqualAttribute("aria-live", "polite");
+    });
+    it("focuses the action link in snackbar if the user is tabbing", async () => {
+        //generate snackbar
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const focusedElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        const link = await page.find("wm-snackbar >>> .link");
+        expect(focusedElId).toBe(link.id);
+    });
+    it("dismisses the snackbar when enter is pressed on close button and returns focus to last active element before snackbar was created", async () => {
+        //generate snackbar
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //press close button
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
+        expect(snackbar).toBeNull();
+        const focusedElId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElId).toBe("create-snack");
+    });
+    it("dismisses the snackbar if the user tabs out of it and it returns focus to last active element before snackbar was created", async () => {
+        //generate snackbar
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //tab out
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
+        expect(snackbar).toBeNull();
+        const focusedElId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElId).toBe("create-snack");
+    });
+});

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -147,14 +147,14 @@ export class Snackbar {
     renderSnackbars() {
         return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
                 this.snackLinkClicked(notification);
-            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: 'dbcda39e1aca0ea8d69ef62a73920b2dddc1021b' }, h("div", { key: '1c2d2ef390bf95546dd14ff3156b913e0a0600d0', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: 'e8fd9b90fc6959f6395b93cfaf9a73163f19774f', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-snackbar/wm-snackbar.spec.js

@@ -0,0 +1,9 @@
+import { newSpecPage } from "@stencil/core/testing";
+jest.mock("../../global/functions");
+import { Snackbar } from "./wm-snackbar";
+describe("wm-snackbar", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({ components: [Snackbar], html: "<wm-snackbar><wm-snackbar>" });
+        expect(comp.root).toMatchSnapshot();
+    });
+});