@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/collection/components/wm-timepicker/wm-timepicker.spec.js

@@ -1,156 +1,156 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Timepicker } from "./wm-timepicker";
 describe("timepicker", () => {
-  let page;
-  // let timepicker: any;
-  beforeEach(async () => {
-    page = await newSpecPage({
-      components: [Timepicker],
-      html: "<wm-timepicker label='timepicker'></wm-timepicker>",
+    let page;
+    // let timepicker: any;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Timepicker],
+            html: "<wm-timepicker label='timepicker'></wm-timepicker>",
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("prevents user actions when disabled", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        const button = await page.root.shadowRoot.querySelector("button");
+        expect(input).toHaveAttribute("disabled");
+        expect(button).toHaveAttribute("disabled");
+    });
+    it("validates input", async () => {
+        const timepicker = new Timepicker();
+        // user passes hour
+        expect(await timepicker.isValidTime("0")).toBe(true);
+        expect(await timepicker.isValidTime("24")).toBe(true);
+        expect(await timepicker.isValidTime("8p")).toBe(true);
+        expect(await timepicker.isValidTime("12 a")).toBe(true);
+        expect(await timepicker.isValidTime("02am")).toBe(true);
+        expect(await timepicker.isValidTime("8:")).toBe(true);
+        // user passes hour and minutes
+        expect(await timepicker.isValidTime("1223")).toBe(true);
+        expect(await timepicker.isValidTime("927a")).toBe(true);
+        expect(await timepicker.isValidTime("12:12pm")).toBe(true);
+        expect(await timepicker.isValidTime("3:45 am")).toBe(true);
+        // rejected
+        expect(await timepicker.isValidTime("6f")).toBe(false);
+        expect(await timepicker.isValidTime("12m")).toBe(false);
+        expect(await timepicker.isValidTime("a")).toBe(false);
+        expect(await timepicker.isValidTime("92")).toBe(false);
+        expect(await timepicker.isValidTime("88:88")).toBe(false);
+        expect(await timepicker.isValidTime("999pm")).toBe(false);
+        expect(await timepicker.isValidTime("o1236")).toBe(false);
+        expect(await timepicker.isValidTime("12:45fm")).toBe(false);
+        expect(await timepicker.isValidTime("12342")).toBe(false);
+        expect(await timepicker.isValidTime("123:")).toBe(false);
+        expect(await timepicker.isValidTime("3:123")).toBe(false);
+        expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
+        // weird edge cases
+        expect(await timepicker.isValidTime("17am")).toBe(false);
+        expect(await timepicker.isValidTime("17pm")).toBe(false);
+        // this is not caught by the regex, so we handle it later
+        expect(await timepicker.isValidTime("0pm")).toBe(true);
+    });
+    it("reformats", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
+        expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
+        expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
+        expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
+        expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
+        expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
+        expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
+        expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
+        expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
+    });
+    it("finds nearest time interval", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
+        expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
+        expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
+        expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
+        expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
+        // edge case regarding leading zeroes
+        expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
+    });
+    it("splits time", () => {
+        const timepicker = new Timepicker();
+        expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
+        expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
+        expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
+        expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
+        // edge case
+        //@ts-ignore
+        expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
+    });
+    it("generates times", () => {
+        const timepicker = new Timepicker();
+        //prettier-ignore
+        expect(timepicker.generateTimeIntervals()).toStrictEqual([
+            "00:00", "00:15", "00:30", "00:45",
+            "01:00", "01:15", "01:30", "01:45",
+            "02:00", "02:15", "02:30", "02:45",
+            "03:00", "03:15", "03:30", "03:45",
+            "04:00", "04:15", "04:30", "04:45",
+            "05:00", "05:15", "05:30", "05:45",
+            "06:00", "06:15", "06:30", "06:45",
+            "07:00", "07:15", "07:30", "07:45",
+            "08:00", "08:15", "08:30", "08:45",
+            "09:00", "09:15", "09:30", "09:45",
+            "10:00", "10:15", "10:30", "10:45",
+            "11:00", "11:15", "11:30", "11:45",
+            "12:00", "12:15", "12:30", "12:45",
+            "13:00", "13:15", "13:30", "13:45",
+            "14:00", "14:15", "14:30", "14:45",
+            "15:00", "15:15", "15:30", "15:45",
+            "16:00", "16:15", "16:30", "16:45",
+            "17:00", "17:15", "17:30", "17:45",
+            "18:00", "18:15", "18:30", "18:45",
+            "19:00", "19:15", "19:30", "19:45",
+            "20:00", "20:15", "20:30", "20:45",
+            "21:00", "21:15", "21:30", "21:45",
+            "22:00", "22:15", "22:30", "22:45",
+            "23:00", "23:15", "23:30", "23:45",
+        ]);
+    });
+    it("renders error", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
+        const errorEl = page.root.shadowRoot.querySelector(".error");
+        expect(errorEl.textContent).toBe("There is an error.");
+    });
+    it("sets input to required", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-required", "true");
+    });
+    it("toggles isTabbing", () => {
+        // toggleTabbingOn, toggleTabbingOff
+        const component = new Timepicker();
+        expect(component.isTabbing).toBeFalsy();
+        component.toggleTabbingOn();
+        expect(component.isTabbing).toBeTruthy();
+        component.toggleTabbingOff();
+        expect(component.isTabbing).toBeFalsy();
     });
-  });
-  it("builds", async () => {
-    expect(page.root).toMatchSnapshot();
-  });
-  it("prevents user actions when disabled", async () => {
-    await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
-    const input = await page.root.shadowRoot.querySelector("input");
-    const button = await page.root.shadowRoot.querySelector("button");
-    expect(input).toHaveAttribute("disabled");
-    expect(button).toHaveAttribute("disabled");
-  });
-  it("validates input", async () => {
-    const timepicker = new Timepicker();
-    // user passes hour
-    expect(await timepicker.isValidTime("0")).toBe(true);
-    expect(await timepicker.isValidTime("24")).toBe(true);
-    expect(await timepicker.isValidTime("8p")).toBe(true);
-    expect(await timepicker.isValidTime("12 a")).toBe(true);
-    expect(await timepicker.isValidTime("02am")).toBe(true);
-    expect(await timepicker.isValidTime("8:")).toBe(true);
-    // user passes hour and minutes
-    expect(await timepicker.isValidTime("1223")).toBe(true);
-    expect(await timepicker.isValidTime("927a")).toBe(true);
-    expect(await timepicker.isValidTime("12:12pm")).toBe(true);
-    expect(await timepicker.isValidTime("3:45 am")).toBe(true);
-    // rejected
-    expect(await timepicker.isValidTime("6f")).toBe(false);
-    expect(await timepicker.isValidTime("12m")).toBe(false);
-    expect(await timepicker.isValidTime("a")).toBe(false);
-    expect(await timepicker.isValidTime("92")).toBe(false);
-    expect(await timepicker.isValidTime("88:88")).toBe(false);
-    expect(await timepicker.isValidTime("999pm")).toBe(false);
-    expect(await timepicker.isValidTime("o1236")).toBe(false);
-    expect(await timepicker.isValidTime("12:45fm")).toBe(false);
-    expect(await timepicker.isValidTime("12342")).toBe(false);
-    expect(await timepicker.isValidTime("123:")).toBe(false);
-    expect(await timepicker.isValidTime("3:123")).toBe(false);
-    expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
-    // weird edge cases
-    expect(await timepicker.isValidTime("17am")).toBe(false);
-    expect(await timepicker.isValidTime("17pm")).toBe(false);
-    // this is not caught by the regex, so we handle it later
-    expect(await timepicker.isValidTime("0pm")).toBe(true);
-  });
-  it("reformats", async () => {
-    const timepicker = new Timepicker();
-    expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
-    //@ts-ignore
-    expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
-    //@ts-ignore
-    expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
-    expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
-    expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
-    expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
-    expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
-    expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
-    //@ts-ignore
-    expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
-    //@ts-ignore
-    expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
-    expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
-    //@ts-ignore
-    expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
-    //@ts-ignore
-    expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
-    expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
-    expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
-  });
-  it("finds nearest time interval", async () => {
-    const timepicker = new Timepicker();
-    expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
-    expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
-    expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
-    expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
-    expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
-    expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
-    expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
-    expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
-    expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
-    expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
-    expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
-    expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
-    expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
-    // edge case regarding leading zeroes
-    expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
-  });
-  it("splits time", () => {
-    const timepicker = new Timepicker();
-    expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
-    expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
-    expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
-    expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
-    // edge case
-    //@ts-ignore
-    expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
-  });
-  it("generates times", () => {
-    const timepicker = new Timepicker();
-    //prettier-ignore
-    expect(timepicker.generateTimeIntervals()).toStrictEqual([
-      "00:00", "00:15", "00:30", "00:45",
-      "01:00", "01:15", "01:30", "01:45",
-      "02:00", "02:15", "02:30", "02:45",
-      "03:00", "03:15", "03:30", "03:45",
-      "04:00", "04:15", "04:30", "04:45",
-      "05:00", "05:15", "05:30", "05:45",
-      "06:00", "06:15", "06:30", "06:45",
-      "07:00", "07:15", "07:30", "07:45",
-      "08:00", "08:15", "08:30", "08:45",
-      "09:00", "09:15", "09:30", "09:45",
-      "10:00", "10:15", "10:30", "10:45",
-      "11:00", "11:15", "11:30", "11:45",
-      "12:00", "12:15", "12:30", "12:45",
-      "13:00", "13:15", "13:30", "13:45",
-      "14:00", "14:15", "14:30", "14:45",
-      "15:00", "15:15", "15:30", "15:45",
-      "16:00", "16:15", "16:30", "16:45",
-      "17:00", "17:15", "17:30", "17:45",
-      "18:00", "18:15", "18:30", "18:45",
-      "19:00", "19:15", "19:30", "19:45",
-      "20:00", "20:15", "20:30", "20:45",
-      "21:00", "21:15", "21:30", "21:45",
-      "22:00", "22:15", "22:30", "22:45",
-      "23:00", "23:15", "23:30", "23:45",
-    ]);
-  });
-  it("renders error", async () => {
-    await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
-    const errorEl = page.root.shadowRoot.querySelector(".error");
-    expect(errorEl.textContent).toBe("There is an error.");
-  });
-  it("sets input to required", async () => {
-    await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
-    const input = await page.root.shadowRoot.querySelector("input");
-    expect(input).toEqualAttribute("aria-required", "true");
-  });
-  it("toggles isTabbing", () => {
-    // toggleTabbingOn, toggleTabbingOff
-    const component = new Timepicker();
-    expect(component.isTabbing).toBeFalsy();
-    component.toggleTabbingOn();
-    expect(component.isTabbing).toBeTruthy();
-    component.toggleTabbingOff();
-    expect(component.isTabbing).toBeFalsy();
-  });
 });

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

@@ -1,69 +1,69 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("wm-toggletip", () => {
-  let page;
-  beforeEach(async () => {
-    page = await newE2EPage();
-  });
-  it("passes Axe checks", async () => {
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it("passes Axe checks", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
         <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
         </main></body></html>`);
-    const results = await new AxePuppeteer(page).analyze();
-    expect(results.violations.length).toBe(0);
-  });
-  it("delegates focus", async () => {
-    await page.setContent("<wm-toggletip label='label' tooltip='Text'></wm-toggletip>");
-    const component = await page.find("wm-toggletip");
-    component.focus();
-    await page.waitForChanges();
-    let activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
-    expect(activeElNodeName).toBe("BUTTON");
-  });
-  // Enter or click opens tooltip, no change in focus
-  // Tab, escape close tooltip
-  it("opens and closes properly", async () => {
-    await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
-    const toggletip = await page.find("wm-toggletip >>> .toggletip");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    expect(toggletip).not.toHaveClass("hidden");
-    // check focus remains on button
-    const activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
-    expect(activeElNodeName).toEqual("BUTTON");
-    await page.keyboard.press("Escape");
-    await page.waitForChanges();
-    expect(toggletip).toHaveClass("hidden");
-    await page.click("wm-toggletip");
-    await page.waitForChanges();
-    expect(toggletip).not.toHaveClass("hidden");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(toggletip).toHaveClass("hidden");
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    await page.mouse.click(-10, -10);
-    await page.waitForChanges();
-    expect(toggletip).toHaveClass("hidden");
-  });
-  // test to make sure liveregion is updated properly
-  it("updates liveregion", async () => {
-    await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    const liveRegion = await page.find("wm-toggletip >>> .live-region");
-    expect(liveRegion.textContent).toBe("Further explanation");
-  });
-  it("renders a tooltip", async () => {
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><div id="tooltip-container"><div id="wm-tooltip" popover="manual" class="wm-tooltip" aria-hidden="true"></div></div><main><h1>Title</h1>
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("delegates focus", async () => {
+        await page.setContent("<wm-toggletip label='label' tooltip='Text'></wm-toggletip>");
+        const component = await page.find("wm-toggletip");
+        component.focus();
+        await page.waitForChanges();
+        let activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+        expect(activeElNodeName).toBe("BUTTON");
+    });
+    // Enter or click opens tooltip, no change in focus
+    // Tab, escape close tooltip
+    it("opens and closes properly", async () => {
+        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+        const toggletip = await page.find("wm-toggletip >>> .toggletip");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(toggletip).not.toHaveClass("hidden");
+        // check focus remains on button
+        const activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+        expect(activeElNodeName).toEqual("BUTTON");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+        await page.click("wm-toggletip");
+        await page.waitForChanges();
+        expect(toggletip).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.mouse.click(-10, -10);
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+    });
+    // test to make sure liveregion is updated properly
+    it("updates liveregion", async () => {
+        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const liveRegion = await page.find("wm-toggletip >>> .live-region");
+        expect(liveRegion.textContent).toBe("Further explanation");
+    });
+    it("renders a tooltip", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><div id="tooltip-container"><div id="wm-tooltip" popover="manual" class="wm-tooltip" aria-hidden="true"></div></div><main><h1>Title</h1>
         <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
         </main></body></html>`);
-    await page.click("wm-toggletip");
-    const tooltip = await page.find("#wm-tooltip");
-    expect(tooltip.textContent).toEqual("More information");
-  });
+        await page.click("wm-toggletip");
+        const tooltip = await page.find("#wm-tooltip");
+        expect(tooltip.textContent).toEqual("More information");
+    });
 });