@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

package/dist/collection/components/combobox-item/combobox-item.e2e.js

@@ -1,7 +0,0 @@
-import { disabled, hidden, renders, slots } from "../../tests/commonTests";
-describe("calcite-combobox-item", () => {
-    it("renders", async () => renders("calcite-combobox-item", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-combobox-item"));
-    it("has slots", () => slots("calcite-combobox-item", [], true));
-    it("can be disabled", () => disabled("calcite-combobox-item", { focusTarget: "none" }));
-});

package/dist/collection/components/date-picker/date-picker.e2e.js

@@ -1,195 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { renders, defaults, hidden } from "../../tests/commonTests";
-import { TEXT } from "./resources";
-import { html } from "../../../support/formatting";
-describe("calcite-date-picker", () => {
-    it("renders", async () => renders("calcite-date-picker", { display: "inline-block" }));
-    it("honors hidden attribute", async () => hidden("calcite-date-picker"));
-    it("has property defaults", async () => defaults("calcite-date-picker", [
-        {
-            propertyName: "intlPrevMonth",
-            defaultValue: TEXT.prevMonth
-        },
-        {
-            propertyName: "headingLevel",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "intlNextMonth",
-            defaultValue: TEXT.nextMonth
-        },
-        {
-            propertyName: "scale",
-            defaultValue: "m"
-        }
-    ]));
-    const animationDurationInMs = 200;
-    it("fires a calciteDatePickerChange event when changing year in header", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-date-picker value='2000-11-27' active></calcite-date-picker>");
-        const date = await page.find("calcite-date-picker");
-        const changedEvent = await page.spyOnEvent("calciteDatePickerChange");
-        await page.waitForTimeout(animationDurationInMs);
-        // can't find this input as it's deeply nested in shadow dom, so just tab to it
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        expect(changedEvent).toHaveReceivedEventTimes(0);
-        const value = await date.getProperty("value");
-        expect(value).toEqual("2000-11-27");
-        await page.keyboard.press("ArrowDown");
-        const value2 = await date.getProperty("value");
-        expect(value2).toEqual("2000-11-27");
-        expect(changedEvent).toHaveReceivedEventTimes(0);
-    });
-    it("updates the calendar immediately as a new year is typed but doesn't change the year", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-date-picker value="2015-02-28" active></calcite-date-picker>`);
-        const datePicker = await page.find("calcite-date-picker");
-        await page.waitForTimeout(animationDurationInMs);
-        async function getActiveMonthDate() {
-            return page.$eval("calcite-date-picker", (datePicker) => datePicker.shadowRoot.querySelector("calcite-date-picker-month").activeDate.toISOString());
-        }
-        async function getActiveMonthHeaderInputValue() {
-            return page.$eval("calcite-date-picker", (datePicker) => datePicker.shadowRoot
-                .querySelector("calcite-date-picker-month-header")
-                .shadowRoot.querySelector(".year").value);
-        }
-        const activeDateBefore = await getActiveMonthDate();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.down("Meta");
-        await page.keyboard.press("a");
-        expect(await getActiveMonthHeaderInputValue()).toBe("2015");
-        await page.keyboard.press("Backspace");
-        await page.keyboard.up("Meta");
-        await page.keyboard.type("2016");
-        expect(await getActiveMonthHeaderInputValue()).toBe("2016");
-        await page.waitForChanges();
-        const activeDateAfter = await getActiveMonthDate();
-        expect(activeDateBefore).not.toEqual(activeDateAfter);
-        expect(await datePicker.getProperty("value")).toBe("2015-02-28");
-    });
-    it("fires a calciteDatePickerChange event when day is selected", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-date-picker value='2000-11-27' active></calcite-date-picker>");
-        const changedEvent = await page.spyOnEvent("calciteDatePickerChange");
-        await page.waitForTimeout(animationDurationInMs);
-        await selectFirstAvailableDay(page, "mouse");
-        expect(changedEvent).toHaveReceivedEventTimes(1);
-        await selectFirstAvailableDay(page, "keyboard");
-        expect(changedEvent).toHaveReceivedEventTimes(2);
-    });
-    async function selectFirstAvailableDay(page, method) {
-        await page.$eval("calcite-date-picker", (datePicker, method) => {
-            const day = datePicker.shadowRoot
-                .querySelector("calcite-date-picker-month")
-                .shadowRoot.querySelector("calcite-date-picker-day:not([selected])");
-            if (method === "mouse") {
-                day.click();
-            }
-            else {
-                day.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-            }
-        }, method);
-        await page.waitForChanges();
-    }
-    it("doesn't fire calciteDatePickerChange on outside changes to value", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-date-picker value='2000-11-27'></calcite-date-picker>");
-        const date = await page.find("calcite-date-picker");
-        const changedEvent = await page.spyOnEvent("calciteDatePickerChange");
-        await date.setProperty("value", "2001-10-28");
-        expect(changedEvent).toHaveReceivedEventTimes(0);
-    });
-    it("doesn't fire calciteDatePickerRangeChange on outside changes to start/end", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-date-picker range start='2000-11-27' start='2000-11-29'></calcite-date-picker>");
-        const date = await page.find("calcite-date-picker");
-        const changedEvent = await page.spyOnEvent("calciteDatePickerRangeChange");
-        expect(changedEvent).toHaveReceivedEventTimes(0);
-        await date.setProperty("start", "2001-10-28");
-        expect(changedEvent).toHaveReceivedEventTimes(0);
-    });
-    it.skip("correctly changes date on next/prev", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-date-picker value='2000-11-27'></calcite-date-picker>");
-        const getMonth = () => {
-            return document
-                .querySelector("calcite-date-picker")
-                .shadowRoot.querySelector("calcite-date-picker-month-header")
-                .shadowRoot.querySelector(".month").textContent;
-        };
-        expect(await page.evaluate(getMonth)).toEqualText("November");
-        // tab to prev arrow
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await page.evaluate(getMonth)).toEqualText("October");
-        // tab to next arrow
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await page.evaluate(getMonth)).toEqualText("November");
-    });
-    it("fires calciteDatePickerRangeChange event on change", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-date-picker range start="2020-09-08" end="2020-09-23"></calcite-date-picker>`);
-        await page.waitForChanges();
-        const date = await page.find("calcite-date-picker");
-        // have to wait for transition
-        const changedEvent = await page.spyOnEvent("calciteDatePickerRangeChange");
-        await new Promise((res) => global.setTimeout(() => res(true), 200));
-        expect(changedEvent).toHaveReceivedEventTimes(0);
-        const start1 = await date.getProperty("start");
-        const end1 = await date.getProperty("end");
-        expect(start1).toEqual("2020-09-08");
-        expect(end1).toEqual("2020-09-23");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowRight");
-        await page.waitForChanges();
-        await page.keyboard.press("Space");
-        await page.waitForChanges();
-        expect(changedEvent).toHaveReceivedEventTimes(1);
-    });
-    describe("when the locale is set to Slovak calendar", () => {
-        it("should start the week on Monday", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-date-picker scale="m" lang="sk" value="2000-11-27"></calcite-date-picker>`
-            });
-            await page.waitForChanges();
-            const text = await page.evaluate(() => document
-                .querySelector("calcite-date-picker")
-                .shadowRoot.querySelector("calcite-date-picker-month")
-                .shadowRoot.querySelector(".week-header").textContent);
-            expect(text).toEqual("po");
-        });
-    });
-    it("updates internally when min attribute is updated after initialization", async () => {
-        const page = await newE2EPage();
-        await page.emulateTimezone("America/Los_Angeles");
-        await page.setContent(html `<calcite-date-picker value="2022-11-27" min="2022-11-15" max="2024-11-15"></calcite-date-picker>`);
-        const element = await page.find("calcite-date-picker");
-        element.setProperty("min", "2021-11-15");
-        element.setProperty("max", "2023-11-15");
-        await page.waitForChanges();
-        const minDateString = "Mon Nov 15 2021 00:00:00 GMT-0800 (Pacific Standard Time)";
-        const minDateAsTime = await page.$eval("calcite-date-picker", (picker) => picker.minAsDate.getTime());
-        expect(minDateAsTime).toEqual(new Date(minDateString).getTime());
-    });
-    it("passes down the default intlYear prop to child date-picker-month-header", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `<calcite-date-picker value="2000-11-27" active></calcite-date-picker>`);
-        const date = await page.find(`calcite-date-picker >>> calcite-date-picker-month-header`);
-        expect(await date.getProperty("intlYear")).toEqual("Year");
-    });
-});

package/dist/collection/components/date-picker/utils.spec.js

@@ -1,55 +0,0 @@
-import { getLocaleData, requestCache } from "./utils";
-function fetchFakeData(data) {
-    return () => new Promise((resolve) => {
-        resolve({
-            json: () => Promise.resolve({ data })
-        });
-    });
-}
-describe("utils", () => {
-    describe("getLocaleData", () => {
-        beforeEach(() => {
-            const fakeData = { fake: "fake data not meant to be checked" };
-            global.fetch = jest.fn().mockImplementation(fetchFakeData(fakeData));
-        });
-        afterEach(() => {
-            jest.fn().mockClear();
-            Object.keys(requestCache).forEach((key) => delete requestCache[key]);
-        });
-        it("defaults to en locale if lang code is invalid", async () => {
-            const locale = "invalid-locale";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("en");
-        });
-        it("falls to lang code locale if regional code is not found", async () => {
-            const locale = "pt-UnsupportedRegion";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("pt");
-        });
-        it("fetches locale with conventional-cased lang code", async () => {
-            const locale = "es";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("es");
-        });
-        it("fetches locale with uppercased lang code", async () => {
-            const locale = "AR";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("ar");
-        });
-        it("fetches locale with lowercased region code", async () => {
-            const locale = "zh-cn";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("zh-CN");
-        });
-        it("fetches locale with uppercased region code", async () => {
-            const locale = "ES-MX";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("es-MX");
-        });
-        it("fetches locale with conventional-cased lang and region code", async () => {
-            const locale = "pt-PT";
-            await getLocaleData(locale);
-            expect(requestCache).toHaveProperty("pt-PT");
-        });
-    });
-});

package/dist/collection/components/date-picker-day/date-picker-day.e2e.js

@@ -1,16 +0,0 @@
-import { disabled } from "../../tests/commonTests";
-import { newProgrammaticE2EPage } from "../../tests/utils";
-describe("calcite-date-picker-day", () => {
-    it("can be disabled", async () => {
-        const page = await newProgrammaticE2EPage();
-        await page.evaluate(() => {
-            const dateEl = document.createElement("calcite-date-picker-day");
-            dateEl.active = true;
-            dateEl.day = 3;
-            dateEl.localeData = { numerals: "0123456789" };
-            document.body.append(dateEl);
-        });
-        await page.waitForChanges();
-        return disabled({ tag: "calcite-date-picker-day", page });
-    });
-});

package/dist/collection/components/date-picker-month-header/date-picker-month-header.e2e.js

@@ -1,72 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { renders } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-describe("calcite-date-picker-month-header", () => {
-    it("renders", async () => renders("calcite-date-picker-month-header", { display: "block" }));
-    const localeDataFixture = {
-        "default-calendar": "gregorian",
-        separator: "/",
-        unitOrder: "DD/MM/YYYY",
-        weekStart: 7,
-        placeholder: "DD/MM/YYYY",
-        days: {
-            narrow: ["D", "L", "M", "M", "J", "V", "S"]
-        },
-        numerals: "0123456789",
-        months: {
-            abbreviated: ["ene.", "feb.", "mar.", "abr.", "may.", "jun.", "jul.", "ago.", "sept.", "oct.", "nov.", "dic."],
-            narrow: ["E", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
-            wide: [
-                "enero",
-                "febrero",
-                "marzo",
-                "abril",
-                "mayo",
-                "junio",
-                "julio",
-                "agosto",
-                "septiembre",
-                "octubre",
-                "noviembre",
-                "diciembre"
-            ]
-        }
-    };
-    it("displays next/previous options", async () => {
-        const page = await newE2EPage({
-            // intentionally using calcite-date-picker to wire up supporting components to be used in `evaluate` fn below
-            html: "<calcite-date-picker></calcite-date-picker>"
-        });
-        await page.waitForChanges();
-        await page.evaluate((localeData) => {
-            const dateMonthHeader = document.createElement("calcite-date-picker-month-header");
-            const now = new Date();
-            dateMonthHeader.activeDate = now;
-            dateMonthHeader.selectedDate = now;
-            dateMonthHeader.localeData = localeData;
-            document.body.innerHTML = "";
-            document.body.append(dateMonthHeader);
-        }, localeDataFixture);
-        await page.waitForChanges();
-        const [prev, next] = await page.findAll("calcite-date-picker-month-header >>> .chevron");
-        expect(await prev.isVisible()).toBe(true);
-        expect(await next.isVisible()).toBe(true);
-    });
-    it("passes down the default intlYear prop to nested .year input to set it as aria-label", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `<calcite-date-picker></calcite-date-picker>`);
-        await page.evaluate((localeData) => {
-            const dateMonthHeader = document.createElement("calcite-date-picker-month-header");
-            const now = new Date();
-            dateMonthHeader.activeDate = now;
-            dateMonthHeader.selectedDate = now;
-            dateMonthHeader.localeData = localeData;
-            dateMonthHeader.intlYear = "Year";
-            document.body.innerHTML = "";
-            document.body.append(dateMonthHeader);
-        }, localeDataFixture);
-        await page.waitForChanges();
-        const date = await page.find(`calcite-date-picker-month-header >>> input`);
-        expect(await date.getAttribute("aria-label")).toBe("Year");
-    });
-});