npm - @watermarkinsights/ripple - Versions diffs - 4.2.0-0 → 4.2.0 - Mend

@watermarkinsights/ripple 4.2.0-0 → 4.2.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 (375) hide show

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

@@ -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>`,