npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-4 → 5.11.0-6 - Mend

@watermarkinsights/ripple 5.11.0-4 → 5.11.0-6

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

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: 'd1c7bf358d9184f22e47b718a69fa1ec7a052e22', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,91 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-tab-item", () => {
+    let page; //, mock: any;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en' dir="ltr">
+      <head><title>Page</title></head>
+        <body>
+          <main style="height: 3000px">
+          <h1>Title</h1>
+            <div id="tab-container">
+              <wm-tab-list id="test-tab" selected-tab="first">
+                <wm-tab-item tab-id="first" id="first-tab">First</wm-tab-item>
+                <wm-tab-item tab-id="second" id="second-tab">Second</wm-tab-item>
+              </wm-tab-list>
+              <wm-tab-panel tab-id="first" id="dynamic-panel">Tab Content First</wm-tab-panel>
+            </div>
+            <div id="test-div"></div>
+          </main>
+        </body>
+      </html>`);
+        await page.evaluate(async () => {
+            const container = document.querySelector("#tab-container");
+            container.addEventListener("wmTabSelected", (ev) => {
+                const tabList = document.querySelector("#test-tab");
+                tabList.selectedTab = ev.detail.tabId;
+            });
+        });
+        await page.waitForChanges();
+    });
+    it("renders a list item with a role of presentation and with a link that has a role of tab", async () => {
+        const tabItem = await page.find("wm-tab-item");
+        const listItem = await tabItem.shadowRoot.querySelector("li");
+        expect(listItem).not.toBeNull();
+        expect(listItem.getAttribute("role")).toEqual("presentation");
+        const link = await tabItem.shadowRoot.querySelector("a");
+        expect(link).not.toBeNull();
+        expect(link.getAttribute("role")).toEqual("tab");
+    });
+    it("emits an event when clicked or enter is pressed", async () => {
+        const wmTabSelectedSpy = await page.spyOnEvent("wmTabSelected");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("Enter");
+        expect(wmTabSelectedSpy).toHaveReceivedEventDetail({ tabId: "second" });
+        jest.restoreAllMocks();
+    });
+    it("has an aria-selected attribute set to true when it is selected", async () => {
+        await page.keyboard.press("Tab"); // To next tab component
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let secondTabItemUncontrolled = await page.find("#second-tab");
+        const linkUncontrolled = await secondTabItemUncontrolled.shadowRoot.querySelector("#tab-link-second");
+        const selectedStatusUncontrolled = await linkUncontrolled.getAttribute("aria-selected");
+        expect(selectedStatusUncontrolled).toBe("true");
+    });
+    it("renders an unordered list with a role of tablist", async () => {
+        const ulElement = await page.find("wm-tab-list >>> ul");
+        expect(ulElement).not.toBeNull();
+        expect(ulElement.getAttribute("role")).toEqual("tablist");
+    });
+    it("has a role of tabpanel", async () => {
+        const tabPanel = await page.find("wm-tab-panel");
+        expect(tabPanel.getAttribute("role")).toEqual("tabpanel");
+    });
+    it("displays if the tab item with the same tabId is selected", async () => {
+        const dynamicPanel = await page.find("#dynamic-panel");
+        expect(dynamicPanel).not.toHaveClass("tab-hidden");
+    });
+    it("does not display if the tab item with the same tabId is not selected", async () => { });
+    it("has an aria-labelledby attribute that corresponds to the correct tab", async () => {
+        //uncontrolled -- tab panel attribute is dynamic
+        let changingTabPanel = await page.find("#dynamic-panel");
+        const label = await changingTabPanel.getAttribute("aria-labelledby");
+        expect(label).toEqual("tab-link-first");
+        let secondTabItemUncontrolled = await page.find("#second-tab");
+        await secondTabItemUncontrolled.click();
+        await page.waitForChanges();
+        changingTabPanel = await page.find("#dynamic-panel");
+        const newLabel = await changingTabPanel.getAttribute("aria-labelledby");
+        expect(newLabel).toEqual("tab-link-second");
+    });
+    it("switches to a dropdown at the appropriate breakpoint", async () => {
+        const comp = await page.find("wm-tab-list");
+        expect(comp).toMatchSnapshot();
+        page.setViewport({ width: 300, height: 900 });
+        await page.waitForChanges();
+        expect(comp).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,12 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabList } from "./wm-tab-list/wm-tab-list";
+import { TabItem } from "./wm-tab-item/wm-tab-item";
+describe("wm-tabs", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [TabList, TabItem],
+            html: '<wm-tab-list><wm-tab-item id="tab1"></wm-tab-item></wm-tab-list>',
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});