@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.spec.js

@@ -1,89 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { PrivCalendar } from "./priv-calendar";
-import { dateFind, getMonthLength } from "../../../global/functions";
-describe("priv-calendar", () => {
-    // ts erroneously prints a warning (unused var)
-    // @ts-ignore
-    let page, privCalendar;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components: [PrivCalendar],
-            html: "<priv-calendar></priv-calendar>",
-        });
-        privCalendar = page.root;
-    });
-    it("gets the number of days in a month", async () => {
-        expect(getMonthLength(1, 2021)).toBe(31);
-        expect(getMonthLength(2, 2021)).toBe(28);
-        expect(getMonthLength(2, 2020)).toBe(29);
-        expect(getMonthLength(11, 2067)).toBe(30);
-        expect(getMonthLength(13, 2)).toBe(31); // returns 31 by default
-    });
-    it("removes leading zeroes", async () => {
-        const pd = new PrivCalendar();
-        expect(pd.removeZeroes("12")).toBe(12);
-        expect(pd.removeZeroes("01")).toBe(1);
-        expect(pd.removeZeroes("0001312")).toBe(1312);
-        // note that the function only works for integers
-        // the following would fail
-        // expect(pd.removeZeroes("3.1415")).toBe(3.1415);
-    });
-    it("finds the first weekday of the month", async () => {
-        // 1 = Sunday, 7 = Saturday
-        const pd = new PrivCalendar();
-        expect(pd.getMonthFirstDay(2, 2021)).toBe(2); // Mon
-        expect(pd.getMonthFirstDay(7, 1986)).toBe(3); // Tue
-        expect(pd.getMonthFirstDay(12, 2030)).toBe(1); // Sun
-    });
-    it("generates the calendar dates", async () => {
-        const pd = new PrivCalendar();
-        expect(pd.getCalendarDates("2021-08-14")).toMatchSnapshot();
-    });
-    //  dateFind helper
-    it("gets the right dates", async () => {
-        expect(dateFind.year.asString("2000-03-23")).toStrictEqual("2000");
-        expect(dateFind.year.asInt("2000-03-23")).toStrictEqual(2000);
-        expect(dateFind.month.asString("2000-03-23")).toStrictEqual("03");
-        expect(dateFind.month.asInt("2000-03-23")).toStrictEqual(3);
-        expect(dateFind.day.asString("2000-03-23")).toStrictEqual("23");
-        expect(dateFind.day.asInt("2000-03-23")).toStrictEqual(23);
-        let res;
-        res = dateFind.year.decrease("2000-03-23", 2);
-        expect(res).toStrictEqual("1998-03-23");
-        res = dateFind.year.increase("1998-03-23", 2);
-        expect(res).toStrictEqual("2000-03-23");
-        res = dateFind.month.decrease("2000-03-23", 3);
-        expect(res).toStrictEqual("1999-12-23");
-        res = dateFind.month.increase("2000-11-23", 2);
-        expect(res).toStrictEqual("2001-01-23");
-        res = dateFind.month.increase("2024-10-01", 1);
-        expect(res).toStrictEqual("2024-11-01");
-        res = dateFind.day.decrease("2024-03-03", 3);
-        expect(res).toStrictEqual("2024-02-29");
-        res = dateFind.day.increase("2024-09-29", 5);
-        expect(res).toStrictEqual("2024-10-04");
-    });
-    // _focus accessor
-    it("gets the right focus dates", async () => {
-        const c = new PrivCalendar();
-        c.focusDate = "2000-01-02";
-        expect(c._focus.year.asString()).toStrictEqual("2000");
-        expect(c._focus.year.asInt()).toStrictEqual(2000);
-        expect(c._focus.month.asString()).toStrictEqual("01");
-        expect(c._focus.month.asInt()).toStrictEqual(1);
-        expect(c._focus.day.asString()).toStrictEqual("02");
-        expect(c._focus.day.asInt()).toStrictEqual(2);
-        c._focus.year.decrease(2);
-        expect(c.focusDate).toStrictEqual("1998-01-02");
-        c._focus.year.increase(2);
-        expect(c.focusDate).toStrictEqual("2000-01-02");
-        c._focus.month.decrease(2);
-        expect(c.focusDate).toStrictEqual("1999-11-02");
-        c._focus.month.increase(2);
-        expect(c.focusDate).toStrictEqual("2000-01-02");
-        c._focus.day.decrease(2);
-        expect(c.focusDate).toStrictEqual("1999-12-31");
-        c._focus.day.increase(2);
-        expect(c.focusDate).toStrictEqual("2000-01-02");
-    });
-});

package/dist/collection/components/datepickers/wm-date-range.e2e.js

@@ -1,443 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { AxePuppeteer } from "@axe-core/puppeteer";
-describe("wm-date-range", () => {
-    //@ts-ignore
-    let page, component, startInput, endInput, btn, popup, popupTitleDay;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-date-range id="dr" label="label"></wm-date-range>
-      </main></body></html>`);
-        component = await page.find("wm-date-range");
-        [startInput, endInput] = await page.findAll("wm-date-range >>> input");
-        btn = await page.find("wm-date-range >>> #toggle");
-        popup = await page.find("wm-date-range >>> #popup");
-        popupTitleDay = await page.find("wm-date-range >>> #popup-title-month");
-    });
-    it("passes Axe checks", async () => {
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    // BUTTON
-    // Opening and closing the date-range
-    it("opens at today's date by default", async () => {
-        const popup = await page.find("wm-date-range >>> .popup");
-        const today = new Date();
-        const year = today.getUTCFullYear();
-        const month = (today.getUTCMonth() + 1).toString().padStart(2, "0");
-        const day = today.getUTCDate().toString();
-        const dateTable = await popup.find("[role='grid']");
-        // await page.waitForChanges();
-        const selDate = await dateTable.find("[aria-selected='true']");
-        expect(selDate).toEqualAttribute("data-year", year);
-        expect(selDate).toEqualAttribute("data-month", month);
-        expect(selDate.textContent).toBe(day);
-    });
-    /*
-    it("opens at the date in the input if there is one", async () => {
-      const startInput = await page.find("wm-date-range >>> input");
-      const popup = await page.find("wm-date-range >>> .popup");
-  
-      await startInput.type("02/01/2030");
-      await component.setProperty("calendarDate", "2030-02-01");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      const dateTable = await popup.find("[role='grid']");
-  
-      const selDate = await dateTable.find("[aria-selected='true']");
-      expect(selDate).toEqualAttribute("data-year", "2030");
-      expect(selDate).toEqualAttribute("data-month", "02");
-      expect(selDate.textContent).toBe("1");
-    });
-  
-    it("Closes the popup when user triggers the calendar button", async () => {
-      const popup = await page.find("wm-date-range >>> .popup");
-  
-      await page.keyboard.press("Tab"); // in input
-      await page.keyboard.press("Tab"); // on btn
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      expect(popup).toHaveClass("open");
-      await page.keyboard.press("Escape");
-      await page.waitForChanges();
-      expect(popup).not.toHaveClass("open");
-    });
-  
-    // POPUP
-    it("closes the calendar popup when the user presses ESCAPE", async () => {
-      await startInput.type("02/03/2019");
-      await component.setProperty("calendarDate", "2019-02-03");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      await page.keyboard.press("Escape");
-      await page.waitForChanges();
-      expect(popup).not.toHaveClass("open");
-    });
-  
-    it("shows the next month on PAGE DOWN and shows the previous month on PAGE UP", async () => {
-      await startInput.type("02/03/2019");
-      await component.setProperty("calendarDate", "2019-02-03");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      await page.keyboard.press("PageDown");
-      await page.waitForChanges();
-  
-      expect(popupTitleDay.textContent).toBe("March 2019");
-  
-      let activeElId = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
-      expect(activeElId).toEqual("cell-20190303");
-  
-      await page.keyboard.press("PageUp");
-      await page.waitForChanges();
-      await page.keyboard.press("PageUp");
-      await page.waitForChanges();
-      await page.keyboard.press("PageUp");
-      await page.waitForChanges();
-  
-      activeElId = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
-      expect(activeElId).toEqual("cell-20181203");
-    });
-  
-    it("handles HOME and END keys", async () => {
-      await startInput.type("02/15/2020");
-      await component.setProperty("calendarDate", "2020-02-15");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      await page.keyboard.press("Home");
-      await page.waitForChanges();
-      const firstDayOfMonth = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
-      expect(firstDayOfMonth).toEqual("cell-20200201");
-  
-      await page.keyboard.press("End");
-      await page.waitForChanges();
-      const lastDayOfMonth = await page.evaluate(() => document.activeElement!.shadowRoot!.activeElement!.id);
-      expect(lastDayOfMonth).toEqual("cell-20200229"); // 2020 is a leap year
-    });
-  
-    it("navigates the calendar with keyboard (day view)", async () => {
-      // left/right: -1 / +1 in the row
-      // up/down
-  
-      await startInput.type("08/15/2024");
-      await component.setProperty("calendarDate", "2024-08-15");
-      await page.keyboard.press("Tab"); // on the toggle popup btn
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // open popup
-      await page.waitForChanges();
-  
-      await page.keyboard.press("ArrowLeft");
-      await page.waitForChanges();
-      let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      await page.waitForChanges();
-      expect(focusedCell).toEqualAttribute("id", "cell-20240814");
-  
-      await page.keyboard.press("ArrowUp");
-      await page.waitForChanges();
-      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      expect(focusedCell).toEqualAttribute("id", "cell-20240807");
-  
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      expect(focusedCell).toEqualAttribute("id", "cell-20240808");
-  
-      await page.keyboard.press("ArrowDown");
-      await page.waitForChanges();
-      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      expect(focusedCell).toEqualAttribute("id", "cell-20240815");
-    });
-  
-    it("navigates the calendar with keyboard (month view)", async () => {
-      await startInput.type("08/15/2024");
-      await component.setProperty("calendarDate", "2024-08-15");
-      await page.keyboard.press("Tab"); // on the toggle popup btn
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // open popup
-      await page.keyboard.down("Shift");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // next btn
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // popup-title (month + year)
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      await page.keyboard.up("Shift");
-      await page.waitForChanges();
-  
-      await page.keyboard.press("ArrowLeft");
-      await page.waitForChanges();
-      let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      await page.waitForChanges();
-      expect(focusedCell).toEqualAttribute("id", "month-6"); // month is july (7), 0-indexed
-  
-      await page.keyboard.press("ArrowUp");
-      await page.waitForChanges();
-      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      expect(focusedCell).toEqualAttribute("id", "month-3");
-  
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      expect(focusedCell).toEqualAttribute("id", "month-4");
-  
-      await page.keyboard.press("ArrowDown");
-      await page.waitForChanges();
-      focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      expect(focusedCell).toEqualAttribute("id", "month-7");
-    });
-  
-    // it("goes to the year view when the month name is clicked", async () => {
-    //  // (i.e. allows selection of a month)
-    // });
-    it("goes to the previous/next month when the arrow button is triggered in day view", async () => {
-      await startInput.type("11/29/1999");
-      await component.setProperty("calendarDate", "1999-11-29");
-      await page.keyboard.press("Tab"); // on the toggle popup btn
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // open popup
-      await page.waitForChanges();
-      await page.keyboard.down("Shift");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // next btn
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // popup-title (month + year)
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // prev btn
-      await page.waitForChanges();
-      await page.keyboard.up("Shift");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // press prev btn
-      await page.waitForChanges();
-  
-      expect(popup).toHaveClasses(["open", "day-view"]);
-      expect(popupTitleDay.textContent).toBe("October 1999");
-  
-      await page.keyboard.press("Tab"); // popup title btn
-      await page.keyboard.press("Tab"); // next btn
-      await page.keyboard.press("Enter"); // press next btn
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // press next btn
-      await page.waitForChanges();
-      expect(popupTitleDay.textContent).toBe("December 1999");
-    });
-  
-    it("goes to the previous/next year when the arrow button is clicked in month view", async () => {
-      await startInput.type("11/29/1999");
-      await component.setProperty("calendarDate", "1999-11-29");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // on the toggle popup btn
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // open popup
-      await page.waitForChanges();
-      await page.keyboard.down("Shift");
-      await page.keyboard.press("Tab"); // next btn
-      await page.waitForChanges();
-      await page.keyboard.press("Tab"); // month view btn
-      await page.waitForChanges();
-      await page.keyboard.up("Shift");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter"); // press month view btn
-      await page.waitForChanges();
-  
-      expect(popup).toHaveClasses(["open", "month-view"]);
-      const title = await popup.find("#popup-title-year");
-      expect(title.textContent).toBe("1999");
-  
-      await page.keyboard.down("Shift");
-      await page.keyboard.press("Tab"); // next btn
-      await page.keyboard.up("Shift");
-      await page.keyboard.press("Enter"); // press next btn
-      await page.waitForChanges();
-      expect(title.textContent).toBe("2000");
-  
-      await page.keyboard.down("Shift");
-      await page.keyboard.press("Tab"); // year btn
-      await page.keyboard.down("Shift");
-      await page.keyboard.press("Tab"); // prev btn
-      await page.keyboard.up("Shift");
-      await page.keyboard.press("Enter"); // press prev btn
-      await page.waitForChanges();
-      expect(title.textContent).toBe("1999");
-  
-      await page.keyboard.press("Enter"); // press prev btn
-      await page.waitForChanges();
-  
-      await page.keyboard.press("Enter"); // press prev btn
-      await page.waitForChanges();
-      expect(title.textContent).toBe("1997");
-    });
-  
-    it("has the aria attributes related to the popup", async () => {
-      // NB "If the element with the aria-expanded attribute controls the expansion of another grouping container
-      // that is not 'owned by' the element, the author SHOULD reference the container by using the aria-controls attribute."
-      // src: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
-  
-      expect(btn).toHaveAttribute("aria-expanded");
-  
-      // Not sure is aria-haspopup is necessary. If it is present the popup should have a role
-      // if that role is grid (the only role that seems to correspond) then the cells must have
-      // a role of gridcell
-      // https://www.w3.org/TR/wai-aria/#aria-haspopup
-      // expect(btn).toHaveAttribute("aria-haspopup");
-  
-      //Removed aria-controls since the popup comes immediately after the aria-expanded controller:
-      //https://www.heydonworks.com/article/aria-controls-is-poop
-    });
-  
-    it("toggles aria-expanded attribute", async () => {
-      expect(btn).toEqualAttribute("aria-expanded", "false");
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      expect(btn).toEqualAttribute("aria-expanded", "true");
-    });
-  
-    it("properly fills the-label on table cells", async () => {
-      // screen reader should read "Thursday, May 10 2018" on focus
-      // screen reader should read "Thursday, May 10 2018, selected" on select
-      await startInput.type("05/10/2018");
-      await component.setProperty("calendarDate", "2018-05-10");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      const focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-      await page.waitForChanges();
-      // day of the week is read by sr bcse it's the table column
-      expect(focusedCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
-  
-      // screen reader should read "Thursday, May 10 2018, selected" on select
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      const selCell = await popup.find("[aria-selected='true']");
-      // day of the week is read by sr bcse it's the table column
-      expect(selCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
-    });
-  
-    it("aligns dates properly", async () => {
-      // -> check that both 01/01/1999 and 12/31/2100 are in the Friday column
-      // couldn't figure this one out...
-    });
-  
-    it("emits event on input blur", async () => {
-      page = await newE2EPage();
-      await page.setContent(
-        `<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-        <wm-date-range id="dr" label="label"></wm-date-range>
-        <div id="indicator">no event heard</div>
-        </main></body></html>`
-      );
-      component = await page.find("wm-date-range");
-      startInput = await page.find("wm-date-range >>> input");
-      await page.waitForChanges();
-  
-      await page.evaluate(async () => {
-        const indicator = document.querySelector("#indicator");
-        await document.addEventListener("wmDate-rangeInputBlurred", () => (indicator!.textContent = "event heard"));
-      });
-      await page.waitForChanges;
-  
-      const indicator = await page.find("#indicator");
-      expect(indicator.textContent).toBe("no event heard");
-  
-      await startInput.type("05/10/2018");
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-  
-      expect(indicator.textContent).toBe("event heard");
-    });
-  
-    it("emits event on change", async () => {
-      page = await newE2EPage();
-      await page.setContent(
-        `<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-        <wm-date-range id="dr" label="label"></wm-date-range>
-        <div id="indicator">events heard: 0</div>
-        </main></body></html>`
-      );
-      component = await page.find("wm-date-range");
-      startInput = await page.find("wm-date-range >>> input");
-      await page.waitForChanges();
-  
-      await page.evaluate(async () => {
-        const indicator = document.querySelector("#indicator")!;
-        await document
-          .querySelector("wm-date-range")!
-          .addEventListener(
-            "change",
-            () =>
-              (indicator.textContent =
-                indicator.textContent!.slice(0, -1) + (parseInt(indicator.textContent!.slice(-1)) + 1))
-          );
-      });
-      await page.waitForChanges;
-  
-      const indicator = await page.find("#indicator");
-      expect(indicator.textContent).toBe("events heard: 0");
-  
-      // user types date
-      await startInput.type("05/10/2018");
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-  
-      expect(indicator.textContent).toBe("events heard: 1");
-  
-      // user selects date from calendar
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-  
-      expect(indicator.textContent).toBe("events heard: 2");
-    });
-  
-    it("emits event with date on cell selection", async () => {
-      page = await newE2EPage();
-      await page.setContent(
-        `<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-        <wm-date-range id="dr" value="12/30/1999" label="label"></wm-date-range>
-        <div id="indicator"></div>
-        </main></body></html>`
-      );
-      component = await page.find("wm-date-range");
-      startInput = await page.find("wm-date-range >>> input");
-      await page.waitForChanges();
-  
-      await page.evaluate(async () => {
-        const indicator = document.querySelector("#indicator")!;
-        await document.querySelector("wm-date-range")!.addEventListener(
-          "wmDate-rangeDateSelected",
-          (ev) =>
-            (indicator.textContent =
-              //@ts-ignore
-              `date received: ${ev.detail.date}`)
-        );
-      });
-      await page.waitForChanges;
-  
-      const indicator = await page.find("#indicator");
-  
-      // user types date
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-  
-      expect(indicator.textContent).toBe("date received: 1999-12-30");
-    });
-  */
-});