npm - @watermarkinsights/ripple - Versions diffs - 5.3.0-9 → 5.3.1-0 - Mend

@watermarkinsights/ripple 5.3.0-9 → 5.3.1-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

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

@@ -0,0 +1,102 @@
+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.js CHANGED Viewed

@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: '07253bd6d752aa41a1715cf2d28e600b7aae4355', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'dbb1d92bad6c1f59f159f63758cc0110e1d6b94b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '93b63fb63bb94b32f25d250836c1d8b98cc20d08', class: "tray" }, h("div", { key: '89a4323868c66a84bb4f12921103b150068906bc', class: "toggle-wrapper" }, h("wm-button", { key: '0de023f3c6dd6e396adf0a248ca8333095a43359', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { key: '1d7b6fc3268583b27b2a0dc46859b6ca1c6d8e52', class: "navlist" }, h("slot", { key: '870cf6f8c01dba37611097c836880792ddddefd6' }))), this.isCollapsible && (h("div", { key: '2d89c522803c67ea290e054ac2a8040f3f257282', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,91 @@
+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 ADDED Viewed

@@ -0,0 +1,50 @@
+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");
+    });
+});

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

@@ -9,7 +9,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { key: '29d02e90dbbedea053c4f04cd4d1e9fac50c2efa', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { key: '97d4210235097624138fa3ebef82e058c505c506', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: '5720a27350fed77a8501a20055b59b44ebdc32da' })));
+        return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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);