npm - @watermarkinsights/ripple - Versions diffs - 5.3.1-2 → 5.4.0-0 - Mend

@watermarkinsights/ripple 5.3.1-2 → 5.4.0-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 (356) hide show

package/dist/collection/components/wm-menuitem/wm-menuitem.spec.js DELETED Viewed

@@ -1,54 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { Menuitem } from "./wm-menuitem";
-describe("wm-menuitem", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({
-            components: [Menuitem],
-            html: "<wm-menuitem><wm-menuitem>",
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("handles disabled onClick function", async () => {
-        const page = await newSpecPage({
-            components: [Menuitem],
-            html: "<wm-menuitem><wm-menuitem>",
-        });
-        const menuItem = page.root;
-        const onClickFunc = () => console.log("Message");
-        menuItem.onclick = onClickFunc;
-        expect(menuItem.onclick).toEqual(onClickFunc);
-        menuItem.disabled = true;
-        expect(menuItem.onclick).toBe(null);
-        menuItem.disabled = false;
-        expect(menuItem.onclick).toEqual(onClickFunc);
-    });
-    it("renders description if prop is present", async () => {
-        const page = await newSpecPage({
-            components: [Menuitem],
-            html: "<wm-menuitem description='Description here'><wm-menuitem>",
-        });
-        const descriptionEl = page.root.shadowRoot.querySelector(".description");
-        expect(descriptionEl === null || descriptionEl === void 0 ? void 0 : descriptionEl.textContent).toBe("Description here");
-    });
-    describe("error throwing", () => {
-        it("throws error when description is over character limit", async () => {
-            const mockFunc = jest.fn();
-            console.error = mockFunc;
-            const description = "q".repeat(200);
-            await newSpecPage({
-                components: [Menuitem],
-                html: `<wm-menuitem description='${description}'></wm-menuitem>`,
-            });
-            expect(mockFunc).toHaveBeenCalledWith("wm-menuitem description is above the character limit of 100");
-        });
-        it("throws error when description and icon props are used simultaneously", async () => {
-            const mockFunc = jest.fn();
-            console.error = mockFunc;
-            await newSpecPage({
-                components: [Menuitem],
-                html: `<wm-menuitem description='Example description' icon="f3eb"></wm-menuitem>`,
-            });
-            expect(mockFunc).toHaveBeenCalledWith("wm-menuitems with descriptions do not support the use of icons");
-        });
-    });
-});

package/dist/collection/components/wm-modal/wm-modal-footer.spec.js DELETED Viewed

@@ -1,11 +0,0 @@
-import { ModalFooter } from "./wm-modal-footer";
-describe("wm-modal-footer", () => {
-    it("has the right props", () => {
-        const modal = new ModalFooter();
-        expect(modal).toHaveProperty("secondaryText");
-        expect(modal).toHaveProperty("primaryText");
-        expect(modal).toHaveProperty("infoText");
-        expect(modal).toHaveProperty("primaryActionDisabled");
-        expect(modal).toHaveProperty("deleteStyle");
-    });
-});

package/dist/collection/components/wm-modal/wm-modal-header.spec.js DELETED Viewed

@@ -1,8 +0,0 @@
-import { ModalHeader } from "./wm-modal-header";
-describe("wm-modal-header", () => {
-    it("has the right props", () => {
-        const modal = new ModalHeader();
-        expect(modal).toHaveProperty("heading");
-        expect(modal).toHaveProperty("subheading");
-    });
-});

package/dist/collection/components/wm-modal/wm-modal.e2e.js DELETED Viewed

@@ -1,104 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { AxePuppeteer } from "@axe-core/puppeteer";
-describe("wm-modal", () => {
-    let page, modal,
-    // overlay: any,
-    closeButton;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-        <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");
-        dialog.addEventListener("wmModalCloseTriggered", function() {
-          dialog.open = false;
-        });
-        dialog.addEventListener("wmModalSecondaryTriggered", function() {
-          dialog.open = false;
-        });
-        dialog.addEventListener("wmModalPrimaryTriggered", function() {
-          dialog.open = false;
-        });
-        function showModal() {
-          dialog.open = true;
-        }
-        </script></html>`);
-        modal = await page.find("wm-modal");
-        closeButton = await page.find("wm-button#wm-modal-close-modal-test >>> button");
-    });
-    it("passes Axe checks", async () => {
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    // RENDER
-    it("renders", async () => {
-        expect(modal).toHaveClass("hydrated");
-    });
-    // DISPLAY AND HIDE
-    it("emits the proper event when the close (X) button is clicked", async () => {
-        const eventSpy = await modal.spyOnEvent("wmModalCloseTriggered");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(modal).toHaveAttribute("open");
-        closeButton.click();
-        await page.waitForChanges();
-        expect(eventSpy).toHaveReceivedEventTimes(1);
-    });
-    //ACCESSIBILITY
-    it("focuses the close button when the modal opens if no elementToFocus property is set", async () => {
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter"); // open popup
-        await page.waitForChanges();
-        const activeElId = await page.evaluate(() => document.activeElement.id);
-        expect(activeElId).toEqual("wm-modal-close-modal-test");
-    });
-    it("focuses the correct element when the elementToFocus property is set", async () => {
-        page = await newE2EPage();
-        //The elementToFocus prop isn't mutable, so "setProperty" doesn't work. Page content has to be reset.
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-        <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");
-        dialog.addEventListener("wmModalCloseTriggered", function() {
-          dialog.open = false;
-        });
-        dialog.addEventListener("wmModalSecondaryTriggered", function() {
-          dialog.open = false;
-        });
-        dialog.addEventListener("wmModalPrimaryTriggered", function() {
-          dialog.open = false;
-        });
-        function showModal() {
-          dialog.open = true;
-        }
-        </script></html>`);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const activeElId = await page.evaluate(() => document.activeElement.id);
-        expect(activeElId).toEqual("modal-input");
-    });
-    it("returns focus to the triggering element when the modal closes", async () => {
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const activeElId = await page.evaluate(() => document.activeElement.id);
-        expect(activeElId).toEqual("modal-trigger");
-    });
-    it("closes the modal when escape key is pressed", async () => {
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(modal).toHaveAttribute("open");
-        await page.keyboard.press("Escape");
-        await page.waitForChanges();
-        expect(modal).not.toHaveAttribute("open");
-    });
-});

package/dist/collection/components/wm-modal/wm-modal.spec.js DELETED Viewed

@@ -1,30 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-jest.mock("../../global/functions");
-import { Modal } from "./wm-modal";
-import { ModalHeader } from "./wm-modal-header";
-import { ModalFooter } from "./wm-modal-footer";
-describe("wm-modal", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({
-            components: [Modal, ModalHeader, ModalFooter],
-            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>",
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("watching open-- toggles the modal", () => {
-        //toggleModal
-        const component = new Modal();
-        const mockShowModal = (component.showModal = jest.fn());
-        const mockHideModal = (component.hideModal = jest.fn());
-        component.open = true;
-        component.toggleModal();
-        expect(mockShowModal).toHaveBeenCalledTimes(1);
-        expect(mockHideModal).toHaveBeenCalledTimes(0);
-        jest.resetAllMocks();
-        component.open = false;
-        component.toggleModal();
-        expect(mockShowModal).toHaveBeenCalledTimes(0);
-        expect(mockHideModal).toHaveBeenCalledTimes(1);
-        jest.resetAllMocks();
-    });
-});

package/dist/collection/components/wm-navigation/wm-navigation.e2e.js DELETED Viewed

@@ -1,102 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { AxePuppeteer } from "@axe-core/puppeteer";
-describe("wm-navigation", () => {
-    let page, nav, hamburger, items;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
-      <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
-      <wm-navigation id="mynav">
-      <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
-      <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
-      </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
-      </main></body></html>`);
-        nav = await page.find("wm-navigation");
-        hamburger = await page.find("wm-navigation-hamburger");
-        items = await page.find("wm-navigation-item");
-    });
-    it("passes Axe checks", async () => {
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    it("renders the component", async () => {
-        expect(nav).not.toBeNull();
-        expect(hamburger).not.toBeNull();
-        expect(items).not.toBeNull();
-    });
-    it("traps focus when collapsible", async () => {
-        // small screen, trap focus
-        page.setViewport({ width: 1023, height: 800 });
-        page.waitForChanges();
-        await page.keyboard.press("Tab"); // focus on hamburger
-        await page.keyboard.press("Enter"); // open. focus on close btn
-        await page.waitForTimeout(250); // wait for animation to complete and focus to be called
-        await page.keyboard.press("Tab"); // focus on 1st nav item
-        await page.keyboard.press("Tab"); // focus on 2nd nav item
-        await page.keyboard.press("Tab"); // with trap focus we circle back within the nav (on close btn)
-        let activeEl = await page.evaluate(() => document.activeElement.tagName);
-        expect(activeEl).toEqual("WM-NAVIGATION");
-    });
-    it("doesn't trap focus when persistent", async () => {
-        // wide screen, no trap focus
-        page.setViewport({ width: 1024, height: 800 });
-        await page.waitForChanges(); // test fails randomly without this
-        await page.keyboard.press("Tab"); // focus on 1st nav item
-        await page.keyboard.press("Tab"); // focus on 2nd nav item
-        await page.keyboard.press("Tab"); // focus on the button in main
-        let activeEl = await page.evaluate(() => document.activeElement.tagName);
-        expect(activeEl).toEqual("BUTTON");
-    });
-    it("handles focus method when collapsible and closed", async () => {
-        page.setViewport({ width: 1023, height: 800 });
-        let activeEl = await page.evaluate(() => document.activeElement.tagName);
-        expect(activeEl).toEqual("BODY");
-        nav.focus();
-        activeEl = await page.evaluate(() => document.activeElement.tagName);
-        expect(activeEl).toEqual("WM-NAVIGATION-HAMBURGER");
-    });
-    it("handles focus method when collapsible and open", async () => {
-        page.setViewport({ width: 1023, height: 800 });
-        let activeEl = await page.evaluate(() => document.activeElement.tagName);
-        expect(activeEl).toEqual("BODY");
-        expect(nav.getAttribute("aria-expanded")).toBe("false");
-        hamburger.click();
-        await page.waitForChanges();
-        expect(nav.getAttribute("aria-expanded")).toBe("true");
-        nav.focus();
-        activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.tagName);
-        expect(activeEl).toEqual("WM-BUTTON"); // the close button
-    });
-    it("handles focus method when persistent", async () => {
-        page.setViewport({ width: 1024, height: 800 });
-        let activeEl = await page.evaluate(() => document.activeElement.tagName);
-        expect(activeEl).toEqual("BODY");
-        expect(nav.getAttribute("aria-expanded")).toBeUndefined;
-        nav.focus();
-        expect(nav.getAttribute("aria-expanded")).toBeUndefined; // should still be undefined
-        activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.textContent);
-        expect(activeEl).toEqual("Home"); // first item
-    });
-    it("is open on load if open prop is set to true", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
-      <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
-      <wm-navigation open id="mynav">
-      <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
-      <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
-      </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
-      </main></body></html>`);
-        await page.waitForTimeout(500);
-        const nav = await page.find("wm-navigation");
-        expect(nav.getAttribute("aria-expanded")).toBe("true");
-    });
-    it("programatically associates hamburger and nav and properly announces to SR", async () => {
-        const hamburgerAriaControls = hamburger.shadowRoot.querySelector("button").getAttribute("aria-controls");
-        const hamburgerAriaLabel = hamburger.shadowRoot.querySelector("button").getAttribute("aria-label");
-        const navAriaLabel = nav.getAttribute("aria-label");
-        expect(hamburgerAriaControls).toBe(nav.id);
-        expect(hamburgerAriaLabel).toBe("Show navigation");
-        expect(navAriaLabel).toBe("Main");
-    });
-    // when closed, focus returns to hamburger
-});

package/dist/collection/components/wm-navigation/wm-navigation.spec.js DELETED Viewed

@@ -1,91 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-//jest.mock("../../global/functions");
-import { Navigation } from "./wm-navigation";
-import { NavigationItem } from "./wm-navigation-item";
-describe("Navigation unit tests", () => {
-    it("isCollapsible", async () => {
-        const nav = new Navigation();
-        window.innerWidth = 1023;
-        expect(nav.isCollapsible).toBe(true);
-        window.innerWidth = 1024;
-        expect(nav.isCollapsible).toBe(false);
-    });
-    it("ariaExpanded", async () => {
-        const nav = new Navigation();
-        window.innerWidth = 1024;
-        expect(nav.ariaExpanded).toBeUndefined;
-        window.innerWidth = 1023;
-        expect(nav.ariaExpanded).toBe("false");
-        nav.open = true;
-        expect(nav.ariaExpanded).toBe("true");
-    });
-});
-describe("navigation", () => {
-    let page;
-    let navigation;
-    let items;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components: [Navigation, NavigationItem],
-            html: `<wm-navigation id="mynav">
-          <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
-          <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
-        </wm-navigation>`,
-        });
-        navigation = page.root;
-        items = Array.from(page.root.querySelectorAll("wm-navigation-item"));
-    });
-    // integration tests
-    // this test includes UX functionality, the related a11y (aria-expanded)
-    // as well as the switch between persistent and collapsible modes
-    it("expands and collapses", async () => {
-        // aria-expanded
-        const expanded = navigation.getAttribute("aria-expanded");
-        //  Persistent: no aria-expanded
-        window.innerWidth = 1024;
-        expect(expanded).toBeNull;
-        //  Collapsible
-        window.innerWidth = 1023;
-        //  aria-expanded true when open
-        navigation.open = true;
-        expect(expanded).not.toBeNull;
-        //  aria-expanded false when closed
-        navigation.open = false;
-        expect(expanded).toBeNull;
-    });
-    it("closes when toggle button is activated", async () => {
-        window.innerWidth = 1023;
-        navigation.open = true;
-        let toggleBtn = page.root.shadowRoot.querySelector(".toggle");
-        toggleBtn.click();
-        expect(navigation.open).toBeFalsy();
-    });
-    /*
-     * Close button is present in collapsible mode, not otherwise
-     * can't test with current implementation because button is
-     * simply hidden via CSS
-    it("hides the button in persistent mode", async () => {
-      // in persistent mode, there's no button at all
-      window.innerWidth = 1024;
-      navigation.open = true;
-      let toggleBtn = page.root!.shadowRoot!.querySelector(".toggle-wrapper");
-      expect(toggleBtn.width).toBeNull();
-    });
-    */
-    // a11y
-    it("Has a role of navigation and has a label", async () => {
-        // 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.
-        let role = navigation.getAttribute("role");
-        let label = navigation.getAttribute("aria-label");
-        expect(role).toBe("navigation");
-        expect(label).toBe("Main");
-    });
-    it("items have proper role and attrs", async () => {
-        const firstItem = items[0];
-        const role = firstItem.getAttribute("role");
-        expect(role).toBe("listitem");
-        const href = firstItem.shadowRoot.querySelector("a").getAttribute("href");
-        expect(href).toBe("/home");
-    });
-});

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.e2e.js DELETED Viewed

@@ -1,50 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("priv-navigator-button", () => {
-    let page,
-    //navigator: any,
-    //navigatorList: any,
-    navigatorButton, button;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`
-    <html lang='en'>
-        <head>
-            <title>Page</title>
-        </head>
-        <body>
-            <main>
-                <h1>Title</h1>
-                <wm-navigator id="nav" selected-product="planning" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.com"></wm-navigator>
-                <script>window.onload = function getModules() {
-                  const navigator = document.getElementById("nav");
-                  const userModules = [{ "id": "aqua", "link_url": "", "saml_link_url": "" }, { "id": "dm", "link_url": "", "saml_link_url": "" }, { "id": "planning", "link_url": "", "saml_link_url": "" }, { "id": "livetext", "link_url": "", "saml_link_url": "" }];
-                  const stringifyModules = JSON.stringify(userModules);
-                  navigator.products = stringifyModules;
-                };</script>
-            </main>
-        </body>
-    </html>`);
-        // navigator = await page.find("wm-navigator");
-        // navigatorList = await page.find("wm-navigator >>> ul");
-        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
-        button = await navigatorButton.shadowRoot.querySelector("button");
-    });
-    // RENDER
-    it("renders a button", async () => {
-        expect(button).not.toBeNull();
-    });
-    it("it has an aria-expanded attribute whose value updates when the menu opens and closes", async () => {
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
-        button = await navigatorButton.shadowRoot.querySelector("button");
-        expect(button.getAttribute("aria-expanded")).toEqual("true");
-        await page.keyboard.press("Escape");
-        await page.waitForChanges();
-        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
-        button = await navigatorButton.shadowRoot.querySelector("button");
-        expect(button.getAttribute("aria-expanded")).toEqual("false");
-    });
-});