@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -1,123 +1,124 @@
 import { h } from "@stencil/core";
 export class PrivNavigatorItem {
-  constructor() {
-    this.selected = false;
-    this.focused = false;
-    this.link = "";
-  }
-  handleKeyDown(ev) {
-    const key = ev.key;
-    const el = this.el;
-    if (key !== "Tab") {
-      ev.preventDefault();
+    constructor() {
+        this.selected = false;
+        this.focused = false;
+        this.link = "";
     }
-    this.keydownOnNavItem.emit({ navItem: el, key: key });
-  }
-  render() {
-    const selectedClass = this.selected ? "selected" : "";
-    const focusedClass = this.focused ? "focused" : "";
-    return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
-  }
-  static get is() { return "priv-navigator-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["priv-navigator-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["priv-navigator-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selected": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "focused": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "focused",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "link": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "link",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "keydownOnNavItem",
-        "name": "keydownOnNavItem",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }",
-          "resolved": "{ navItem: HTMLPrivNavigatorItemElement; key: string; }",
-          "references": {
-            "HTMLPrivNavigatorItemElement": {
-              "location": "global"
-            }
-          }
+    handleKeyDown(ev) {
+        const key = ev.key;
+        const el = this.el;
+        if (key !== "Tab") {
+            ev.preventDefault();
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        this.keydownOnNavItem.emit({ navItem: el, key: key });
+    }
+    render() {
+        const selectedClass = this.selected ? "selected" : "";
+        const focusedClass = this.focused ? "focused" : "";
+        return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
+    }
+    static get is() { return "priv-navigator-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["priv-navigator-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-navigator-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "focused",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "link": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "link",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "keydownOnNavItem",
+                "name": "keydownOnNavItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }",
+                    "resolved": "{ navItem: HTMLPrivNavigatorItemElement; key: string; }",
+                    "references": {
+                        "HTMLPrivNavigatorItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLPrivNavigatorItemElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -1,10 +1,10 @@
 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(`
+    let page, navigator, navigatorList, navigatorButton;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
     <html lang='en' mode='planning'>
         <head>
             <title>Page</title>
@@ -22,183 +22,183 @@ describe("wm-navigator", () => {
             </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,
+        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"
-  //     )
-  //   ]);
-  // });
+    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>`,