npm - @watermarkinsights/ripple - Versions diffs - 5.7.0-8 → 5.7.0-9 - Mend

@watermarkinsights/ripple 5.7.0-8 → 5.7.0-9

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 (376) hide show

package/dist/collection/components/wm-navigator/wm-navigator.e2e.js ADDED Viewed

@@ -0,0 +1,209 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-navigator", () => {
+    let page, navigator, navigatorList, navigatorButton;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+    <html lang='en' mode='planning'>
+        <head>
+            <title>Page</title>
+        </head>
+        <body>
+            <main>
+                <h1>Title</h1>
+                <wm-navigator id="nav" base-logout-uri="https://www.dummy.wm/logout" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.wm" auth-type="2"></wm-navigator>
+                <script>window.onload = function getModules() {
+                  const navigator = document.getElementById("nav");
+                  const userModules = [{ "id": "aqua", "linkUrl": "https://www.dummy.wm/aqua", "samlLinkUrl": "https://www.dummy.wm/saml/aqua", "iconUrl": "/aqualogo.svg", "name": "Aqua" }, { "id": "dm", "linkUrl": "/dm", "samlLinkUrl": "/saml/dm", "iconUrl": "/dmlogo.svg", "name": "Digital Measures" }, { "id": "planning", "linkUrl": "/planning", "samlLinkUrl": "/saml/planning", "iconUrl": "/planlogo.svg", "name": "Planning & Self-Study" }];
+                  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");
+        const url = "https://dummy.wm";
+        Object.defineProperty(window, "location", {
+            value: {
+                href: url,
+            },
+            writable: true,
+        });
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // RENDER
+    it("renders", async () => {
+        expect(navigator).toHaveClass("hydrated");
+    });
+    // VIEW
+    it("opens the menu when clicked", async () => {
+        await navigatorButton.click();
+        await page.waitForChanges();
+        const wrapper = await page.find("wm-navigator >>> .wrapper");
+        expect(wrapper).not.toHaveClass("hide");
+    });
+    it("renders the products in the list if there is more than one, along with a logout option", async () => {
+        navigatorList = await page.find("wm-navigator >>> ul");
+        const listItems = await navigatorList.querySelectorAll("priv-navigator-item");
+        expect(listItems.length).toEqual(4);
+        expect(listItems[3].textContent).toEqual("Log Out");
+    });
+    it("renders just the logout option if there is one product in the list", async () => {
+        const newProducts = JSON.stringify([{ id: "planning", linkUrl: "", samlLinkUrl: "" }]);
+        navigator.setProperty("products", newProducts);
+        await page.waitForChanges();
+        const listItems = await page.findAll("wm-navigator >>> priv-navigator-item");
+        expect(listItems.length).toEqual(1);
+        expect(listItems[0].textContent).toEqual("Log Out");
+    });
+    it("sets the alt text on the button", async () => {
+        const label = await navigatorButton.shadowRoot.querySelector("button").getAttribute("aria-label");
+        const expectedText = "User information and product navigator";
+        expect(label).toEqual(expectedText);
+        const newProducts = JSON.stringify(["planning"]);
+        navigator.setProperty("products", newProducts);
+        await page.waitForChanges();
+        const newLabel = await navigatorButton.shadowRoot.querySelector("button").getAttribute("aria-label");
+        expect(newLabel).toEqual("User information");
+    });
+    //KEYBOARD NAVIGATION AND FOCUS
+    it("opens the menu when enter is pressed and closes it on escape", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const wrapper = await page.find("wm-navigator >>> .wrapper");
+        expect(wrapper).not.toHaveClass("hide");
+        await page.keyboard.press("Escape"); // Previous btn
+        await page.waitForChanges();
+        expect(wrapper).toHaveClass("hide");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(wrapper).not.toHaveClass("hide");
+    });
+    it("focuses the current product in use when the menu opens", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeItem = await page.find("wm-navigator >>> priv-navigator-item#planning");
+        expect(activeItem.tabIndex).toEqual(0);
+        const activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("planning");
+    });
+    it("focuses the next product in the list when the down arrow is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        let activeItem = await page.find("wm-navigator >>> priv-navigator-item#nav-logout");
+        expect(activeItem.tabIndex).toEqual(0);
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("nav-logout");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeItem = await page.find("wm-navigator >>> priv-navigator-item#aqua");
+        expect(activeItem.tabIndex).toEqual(0);
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("aqua");
+    });
+    it("focuses the previous product in the list when the up arrow is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        let activeItem = await page.find("wm-navigator >>> priv-navigator-item#dm");
+        expect(activeItem.tabIndex).toEqual(0);
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("dm");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeItem = await page.find("wm-navigator >>> priv-navigator-item#nav-logout");
+        expect(activeItem.tabIndex).toEqual(0);
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("nav-logout");
+    });
+    //FUNCTIONALITY
+    // the next 3 tests are failing for unknown reasons (they used to pass)
+    // it("should change pages/products when a dropdown item is activated", async () => {
+    //   const browser = await puppeteer.launch();
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/../src/components/wm-navigator/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   await page.evaluate(async () => {
+    //     const aquaNavItem = document!
+    //       .querySelector("#nav")!
+    //       .shadowRoot!.querySelector("priv-navigator-item");
+    //     aquaNavItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual(
+    //       "http://localhost:3333/aqua/?connection_name=test"
+    //     )
+    //   ]);
+    // });
+    // it("should redirect to a logout URL when the logout item is activated", async () => {
+    //   const browser = await puppeteer.launch();
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/components/wm-navigator/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   await page.evaluate(async () => {
+    //     const logoutItem = document!
+    //       .querySelector("#nav")!
+    //       .shadowRoot!.querySelector("#nav-logout") as HTMLElement;
+    //     logoutItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual("http://localhost:3333/logout")
+    //   ]);
+    // });
+    // it("should redirect to a URL with a connection name when a dropdown item is activated and the user is a saml user", async () => {
+    //   const browser = await puppeteer.launch({
+    //     headless: true,
+    //     defaultViewport: {
+    //       width: 1100,
+    //       height: 1100
+    //     }
+    //   });
+    //   const page = await browser.newPage();
+    //   await page.goto("http://localhost:3333/devpages/navigator.html", {
+    //     waitUntil: "networkidle2"
+    //   });
+    //   // page.on("console", (msg: any) => console.log("PAGE LOG:", msg.text()));
+    //   await page.evaluate(async () => {
+    //     const aquaNavItem = document!
+    //       .querySelector("#nav-aqua")!
+    //       .shadowRoot!.querySelector("#ek") as HTMLElement;
+    //     aquaNavItem!.click();
+    //   });
+    //   await page.waitForNavigation();
+    //   await Promise.all([
+    //     expect(page.url()).toEqual(
+    //       "http://localhost:3333/saml/ek/?connection_name=something"
+    //     )
+    //   ]);
+    // });
+});
+// const page = await newSpecPage({
+//   html: `<wm-navigator id="nav" logout-uri="https://www.dummy.wm/logout" user-name="Adrienne Johnson" email="ajohnson@watermarkinsights.wm" auth-type="username_password_sso" products="[]"></wm-navigator>`,
+//   components: [Navigator]
+// });
+// const button = page.root!.querySelector("wm-navigator");
+// button!.click();
+// console.log("PAGE HREF", page.win.location.href);

package/dist/collection/components/wm-navigator/wm-navigator.spec.js ADDED Viewed

@@ -0,0 +1,177 @@
+jest.mock("../../global/services/http-service");
+import { newSpecPage } from "@stencil/core/testing";
+//import { PrivNavigatorItem } from "./priv-navigator-item/priv-navigator-item";
+import { Navigator } from "./wm-navigator";
+describe("wm-navigator", () => {
+    it("builds (with props)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"https://aqua.taskstream.com/sso/samlLogin","linkUrl":"https://aqua.taskstream.com/sso/login","id":"aqua","iconUrl":"https://cdn.watermarkinsights.com/images/login/aqua.svg","name":"Aqua"},{"samlLinkUrl":"https://www.vialivetext.com/wm_sso/saml_login","linkUrl":"https://www.vialivetext.com/wm_sso/login","id":"via","iconUrl":"https://cdn.watermarkinsights.com/images/login/via.svg","name":"Via"},{"samlLinkUrl":"https://watermark.evaluationkit.com/Login/SAML","linkUrl":"https://watermark.evaluationkit.com/Login","id":"ek","iconUrl":"https://cdn.watermarkinsights.com/images/login/evaluationkit.svg","name":"Evaluation Kit"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/lat","id":"lat","iconUrl":"https://cdn.watermarkinsights.com/images/login/tslat.svg","name":"Taskstream LAT"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/ams","id":"ams","iconUrl":"https://cdn.watermarkinsights.com/images/login/tsams.svg","name":"Taskstream AMS"},{"samlLinkUrl":"https://www.digitalmeasures.com/login/sso/authenticate/saml","linkUrl":"https://www.digitalmeasures.com/login/sso/authenticate","id":"dm","iconUrl":"https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg","name":"Digital Measures"},{"samlLinkUrl":"https://planning.watermarkinsights.com/login/sso/saml_login","linkUrl":"https://planning.watermarkinsights.com/login/sso","id":"planning","iconUrl":"https://cdn.watermarkinsights.com/images/login/planningselfstudy.svg","name":"Planning & Self-Study"}]'
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("builds (endpoint)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      user-name="Bettie User"
+      load-from-userinfo="true"
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("returns the proper link", () => {
+        const nav = new Navigator();
+        nav.email = "a_user@company.com";
+        nav.userName = "Anna User";
+        nav.parsedProducts = [
+            {
+                name: "Aqua",
+                iconUrl: "aqua icon",
+                linkUrl: "aqua sso",
+                samlLinkUrl: "aqua saml",
+                id: "aqua",
+            },
+            {
+                name: "via",
+                iconUrl: "via icon",
+                linkUrl: "via sso",
+                samlLinkUrl: "via saml",
+                id: "via",
+            },
+            {
+                name: "ek",
+                iconUrl: "ek icon",
+                linkUrl: "ek sso",
+                samlLinkUrl: "ek saml",
+                id: "ek",
+            },
+            {
+                name: "lat",
+                iconUrl: "lat icon",
+                linkUrl: "lat sso",
+                samlLinkUrl: "lat saml",
+                id: "lat",
+            },
+            {
+                name: "ams",
+                iconUrl: "ams icon",
+                linkUrl: "ams sso",
+                samlLinkUrl: "ams saml",
+                id: "ams",
+            },
+            {
+                name: "dm",
+                iconUrl: "dm icon",
+                linkUrl: "dm sso",
+                samlLinkUrl: "dm saml",
+                id: "dm",
+            },
+            {
+                name: "planning",
+                iconUrl: "planning icon",
+                linkUrl: "planning sso",
+                samlLinkUrl: "planning saml",
+                id: "planning",
+            },
+        ];
+        nav.connectionName = "xoxo"; // connection name only appended for saml
+        nav.authType = 2; // = sso
+        // setProductOnClick returns the onClick function
+        // we invoke it to test the string
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua sso");
+        expect(nav.setProductOnClick("via")()).toBe("via sso");
+        expect(nav.setProductOnClick("ek")()).toBe("ek sso");
+        expect(nav.setProductOnClick("lat")()).toBe("lat sso");
+        expect(nav.setProductOnClick("ams")()).toBe("ams sso");
+        expect(nav.setProductOnClick("dm")()).toBe("dm sso");
+        expect(nav.setProductOnClick("planning")()).toBe("planning sso");
+        nav.authType = 3; // = saml
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml/?connection_name=xoxo");
+        // if connection_name is not set, nothing is appended
+        nav.connectionName = "";
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml");
+    });
+    it("handles unknown products (props mode)", async () => {
+        // in props mode the component checks a hard-coded list of products
+        // if the product is not in the list, it ignores it altogether
+        // 2 exceptions: "c1" is converted to "livetext", and anything with the name "admin" (e.g. "system_admin_sit", "platform_admin") is converted to "platform_admin"
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"something_weird.fakeurl","linkUrl":"something_weird.fakeurl","id":"something_weird"},{"samlLinkUrl":"livetext.fakeurl","linkUrl":"livetext.fakeurl","id":"c1"},{"samlLinkUrl":"platform.fakeurl","linkUrl":"platform.fakeurl","id":"something_with_admin_in_it"}]'
+       ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("loads (userinfo mode)", async () => {
+        const page = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator user-name="User Name" load-from-userinfo="true"></wm-navigator>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        const nav = page.body.querySelector("wm-navigator");
+        const items = nav.shadowRoot.querySelectorAll("priv-navigator-item");
+        expect(items.length).toBe(7);
+        items.forEach((i) => {
+            expect(i.id).not.toBeNull();
+            expect(i.onClick).not.toBeNull();
+        });
+    });
+    it("camel cases product keys", async () => {
+        const nav = new Navigator();
+        expect(nav.productKeysToCamelCase([
+            {
+                description: "desc1",
+                icon_url: "url1",
+                id: "id1",
+                link_url: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                icon_url: "url2",
+                id: "id2",
+                link_url: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                icon_url: "url3",
+                id: "id3",
+                link_url: "url3",
+                name: "name3",
+            },
+        ])).toStrictEqual([
+            {
+                description: "desc1",
+                iconUrl: "url1",
+                id: "id1",
+                linkUrl: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                iconUrl: "url2",
+                id: "id2",
+                linkUrl: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                iconUrl: "url3",
+                id: "id3",
+                linkUrl: "url3",
+                name: "name3",
+            },
+        ]);
+    });
+});