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

package/dist/collection/tests/utils.js

@@ -1,200 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-/**
- * Drag and drop utility based on https://github.com/puppeteer/puppeteer/issues/1366#issuecomment-615887204
- *
- * @param {E2EPage} page - the e2e page
- * @param {DragAndDropSelector} dragStartSelector - Selector for the drag's start
- * @param {DragAndDropSelector} dragEndSelector - Selector for the drag's end
- */
-export async function dragAndDrop(page, dragStartSelector, dragEndSelector) {
-    async function getBounds(selector) {
-        const elementHandle = typeof selector === "string"
-            ? await page.waitForSelector(selector)
-            : await page.evaluateHandle(({ element, shadow }) => {
-                const target = document.querySelector(element);
-                return shadow ? target.shadowRoot.querySelector(shadow) : target;
-            }, selector);
-        return elementHandle.asElement().boundingBox();
-    }
-    async function createEventInitializer(selector) {
-        const { vertical: verticalPos, horizontal: horizontalPos, offset = [0, 0] } = typeof selector === "string" || !selector.pointerPosition
-            ? { vertical: "center" }
-            : selector.pointerPosition;
-        const { height, width, x, y } = await getBounds(selector);
-        const verticalOffset = verticalPos === "top" ? 0 : verticalPos === "bottom" ? height : height / 2;
-        const horizontalOffset = horizontalPos === "left" ? 0 : horizontalPos === "right" ? width : width / 2;
-        const eventX = x + horizontalOffset + offset[0];
-        const eventY = y + verticalOffset + offset[1];
-        return {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            screenX: eventX,
-            screenY: eventY,
-            clientX: eventX,
-            clientY: eventY
-        };
-    }
-    async function browserContextFunction(dragStartSelector, dragEndSelector, dragStartInitializer, dragEndInitializer) {
-        function getElement(selector) {
-            if (typeof selector === "string") {
-                return document.querySelector(selector);
-            }
-            const element = document.querySelector(selector.element);
-            return selector.shadow ? element.shadowRoot.querySelector(selector.shadow) : element;
-        }
-        const dragStart = getElement(dragStartSelector);
-        let dragEnd = getElement(dragEndSelector);
-        // if has child, put at the end.
-        dragEnd = dragEnd.lastElementChild || dragEnd;
-        dragStart.dispatchEvent(new PointerEvent("pointerdown", dragStartInitializer));
-        dragStart.dispatchEvent(new DragEvent("dragstart", dragStartInitializer));
-        await new Promise((resolve) => window.setTimeout(resolve, 2000));
-        dragEnd.dispatchEvent(new MouseEvent("dragenter", dragEndInitializer));
-        dragStart.dispatchEvent(new DragEvent("dragend", dragEndInitializer));
-    }
-    return page.evaluate(browserContextFunction, dragStartSelector, dragEndSelector, await createEventInitializer(dragStartSelector), await createEventInitializer(dragEndSelector));
-}
-/**
- *
- * @param {E2EElement} input - the element to select text from
- * @returns {Promise<void>}
- */
-export function selectText(input) {
-    // workaround for selecting text based on https://github.com/puppeteer/puppeteer/issues/1313#issuecomment-436932478
-    return input.click({ clickCount: 3 });
-}
-/**
- * Helper to get an E2EElement's x,y coordinates.
- *
- * @param {E2EPage} page - the e2e page
- * @param {string} elementSelector - the element selector
- * @param {string} shadowSelector - the shadowRoot selector
- */
-export async function getElementXY(page, elementSelector, shadowSelector) {
-    return page.evaluate(([elementSelector, shadowSelector]) => {
-        const element = document.querySelector(elementSelector);
-        const measureTarget = shadowSelector ? element.shadowRoot.querySelector(shadowSelector) : element;
-        const { x, y } = measureTarget.getBoundingClientRect();
-        return [x, y];
-    }, [elementSelector, shadowSelector]);
-}
-/**
- * This util helps visualize mouse movement when running tests in headful mode.
- * Note that this util should only be used for test debugging purposes and not be included in a test.
- * Based on https://github.com/puppeteer/puppeteer/issues/4378#issuecomment-499726973
- *
- * @param {E2EPage} page - the e2e page
- */
-export async function visualizeMouseCursor(page) {
-    await page.evaluate(() => {
-        const box = document.createElement("puppeteer-mouse-pointer");
-        const styleElement = document.createElement("style");
-        styleElement.innerHTML = `
-        puppeteer-mouse-pointer {
-          pointer-events: none;
-          position: absolute;
-          top: 0;
-          z-index: 10000;
-          left: 0;
-          width: 20px;
-          height: 20px;
-          background: rgba(0,0,0,.4);
-          border: 1px solid white;
-          border-radius: 10px;
-          margin: -10px 0 0 -10px;
-          padding: 0;
-          transition: background .2s, border-radius .2s, border-color .2s;
-        }
-        puppeteer-mouse-pointer.button-1 {
-          transition: none;
-          background: rgba(0,0,0,0.9);
-        }
-        puppeteer-mouse-pointer.button-2 {
-          transition: none;
-          border-color: rgba(0,0,255,0.9);
-        }
-        puppeteer-mouse-pointer.button-3 {
-          transition: none;
-          border-radius: 4px;
-        }
-        puppeteer-mouse-pointer.button-4 {
-          transition: none;
-          border-color: rgba(255,0,0,0.9);
-        }
-        puppeteer-mouse-pointer.button-5 {
-          transition: none;
-          border-color: rgba(0,255,0,0.9);
-        }
-      `;
-        document.head.appendChild(styleElement);
-        document.body.appendChild(box);
-        document.addEventListener("mousemove", (event) => {
-            box.style.left = event.pageX + "px";
-            box.style.top = event.pageY + "px";
-            updateButtons(event.buttons);
-        }, true);
-        document.addEventListener("mousedown", (event) => {
-            updateButtons(event.buttons);
-            box.classList.add("button-" + event.which);
-        }, true);
-        document.addEventListener("mouseup", (event) => {
-            updateButtons(event.buttons);
-            box.classList.remove("button-" + event.which);
-        }, true);
-        function updateButtons(buttons) {
-            for (let i = 0; i < 5; i++) {
-                box.classList.toggle("button-" + i, (buttons & (1 << i)));
-            }
-        }
-    });
-}
-/**
- * Tells the browser that you wish to perform an animation.
- * https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
- *
- * @returns {Promise<void>}
- */
-export async function waitForAnimationFrame() {
-    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
-}
-/**
- * Creates an E2E page for tests that need to create and set up elements programmatically.
- *
- * @returns {Promise<E2EPage>} an e2e page
- */
-export async function newProgrammaticE2EPage() {
-    const page = await newE2EPage();
-    // we need to initialize the page with any component to ensure they are available in the browser context
-    await page.setContent("<calcite-icon></calcite-icon>");
-    await page.evaluate(() => document.querySelector("calcite-icon").remove());
-    return page;
-}
-/**
- * Sets CSS vars to skip animations/transitions
- *
- * @param page
- */
-export async function skipAnimations(page) {
-    await page.addStyleTag({
-        content: `:root { --calcite-duration-factor: 0; }`
-    });
-}
-export function placeholderImage({ width = 300, height = 150, text = `${width}×${height}`, fontFamily = "sans-serif", fontWeight = "bold", fontSize = Math.floor(Math.min(width, height) * 0.2), dy = fontSize * 0.35, bgColor = "#ddd", textColor = "rgba(0,0,0,0.5)", dataUri = true, charset = "UTF-8" }) {
-    const str = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-    <rect fill="${bgColor}" width="${width}" height="${height}"/>
-    <text fill="${textColor}" font-family="${fontFamily}" font-size="${fontSize}" dy="${dy}" font-weight="${fontWeight}" x="50%" y="50%" text-anchor="middle">${text}</text>
-  </svg>`;
-    // Thanks to: filamentgroup/directory-encoder
-    const cleaned = str
-        .replace(/[\t\n\r]/gim, "") // Strip newlines and tabs
-        .replace(/\s\s+/g, " ") // Condense multiple spaces
-        .replace(/'/gim, "\\i"); // Normalize quotes
-    if (dataUri) {
-        const encoded = encodeURIComponent(cleaned)
-            .replace(/\(/g, "%28") // Encode brackets
-            .replace(/\)/g, "%29");
-        return `data:image/svg+xml;charset=${charset},${encoded}`;
-    }
-    return cleaned;
-}

package/dist/collection/utils/date.spec.js

@@ -1,153 +0,0 @@
-import { inRange, dateFromRange, dateFromISO, sameDate, prevMonth, nextMonth, localizeNumber, parseNumber, parseDateString, getOrder } from "./date";
-import arabic from "../components/date-picker/assets/date-picker/nls/ar.json";
-import french from "../components/date-picker/assets/date-picker/nls/fr.json";
-import korean from "../components/date-picker/assets/date-picker/nls/ko.json";
-describe("inRange", () => {
-    it("returns true if no min/max", () => {
-        expect(inRange(new Date())).toEqual(true);
-    });
-    it("returns false when out of range, true when in range", () => {
-        const min = new Date(2020, 0, 1);
-        const value = new Date(2020, 1, 1);
-        const max = new Date(2020, 2, 1);
-        expect(inRange(value, min, max)).toEqual(true);
-        expect(inRange(min, value, max)).toEqual(false);
-        expect(inRange(min, max, value)).toEqual(false);
-    });
-});
-describe("dateFromRange", () => {
-    it("returns null from bad input", () => {
-        expect(dateFromRange("sdafasdfasdf")).toEqual(null);
-    });
-    it("returns date with no min/max", () => {
-        const date = new Date();
-        expect(dateFromRange(date)).toEqual(date);
-    });
-    it("returns correct date from range", () => {
-        const min = new Date(2020, 0, 1);
-        const value = new Date(2020, 1, 1);
-        const max = new Date(2020, 2, 1);
-        expect(dateFromRange(value, min, max)).toEqual(value);
-        expect(dateFromRange(min, value, max)).toEqual(value);
-        expect(dateFromRange(max, min, value)).toEqual(value);
-    });
-});
-describe("dateFromISO", () => {
-    it("returns null from bad input", () => {
-        expect(dateFromISO("")).toBeNull();
-        expect(() => {
-            dateFromISO("asdflkjasdhoui");
-        }).toThrow();
-    });
-    it("correctly parses ISO format", () => {
-        const time = new Date(2011, 10, 29).getTime();
-        expect(dateFromISO("2011-11-29").getTime()).toEqual(time);
-        // note: if we expand dateFromISO to handle time,
-        // these will need to be updated
-        expect(dateFromISO("2011-11-29T15:52:30.5").getTime()).toEqual(time);
-        expect(dateFromISO("2011-11-29T15:52:30.52").getTime()).toEqual(time);
-        expect(dateFromISO("2011-11-29T15:52:18.867").getTime()).toEqual(time);
-        expect(dateFromISO("2011-11-29T15:52:18.867Z").getTime()).toEqual(time);
-        expect(dateFromISO("2011-11-29T15:52:18.867-03:30").getTime()).toEqual(time);
-    });
-    it("defaults to first of any missing units", () => {
-        expect(dateFromISO("2011-11").getTime()).toEqual(new Date(2011, 10, 1).getTime());
-        expect(dateFromISO("2011").getTime()).toEqual(new Date(2011, 0, 1).getTime());
-    });
-});
-describe("sameDate", () => {
-    it("returns false for bad input", () => {
-        expect(sameDate(1, "hey")).toEqual(false);
-    });
-    it("returns true for same dates", () => {
-        const d1 = new Date(2020, 0, 1);
-        const d2 = new Date(2020, 0, 1);
-        expect(sameDate(d1, d2)).toEqual(true);
-    });
-    it("returns false for different dates", () => {
-        const d1 = new Date(2020, 0, 1);
-        const d2 = new Date(2020, 0, 3);
-        expect(sameDate(d1, d2)).toEqual(false);
-    });
-});
-describe("prevMonth", () => {
-    it("returns a date 1 month in the past", () => {
-        const d1 = prevMonth(new Date(2020, 2, 23));
-        expect(d1.getDate()).toEqual(23);
-        expect(d1.getMonth()).toEqual(1);
-        expect(d1.getFullYear()).toEqual(2020);
-        const d2 = prevMonth(new Date(2020, 0, 23));
-        expect(d2.getMonth()).toEqual(11);
-        expect(d2.getFullYear()).toEqual(2019);
-    });
-    it("if date doesn't exist, uses last day of month", () => {
-        const d1 = prevMonth(new Date(2020, 4, 31)); // May 31
-        expect(d1.getDate()).toEqual(30);
-        expect(d1.getMonth()).toEqual(3);
-        expect(d1.getFullYear()).toEqual(2020);
-    });
-});
-describe("nextMonth", () => {
-    it("returns a date 1 month in the future", () => {
-        const d1 = nextMonth(new Date(2020, 2, 23));
-        expect(d1.getDate()).toEqual(23);
-        expect(d1.getMonth()).toEqual(3);
-        expect(d1.getFullYear()).toEqual(2020);
-        const d2 = nextMonth(new Date(2020, 11, 23));
-        expect(d2.getMonth()).toEqual(0);
-        expect(d2.getFullYear()).toEqual(2021);
-    });
-    it("if date doesn't exist, uses last day of month", () => {
-        const d1 = nextMonth(new Date(2020, 2, 31)); // March 31
-        expect(d1.getFullYear()).toEqual(2020);
-        expect(d1.getMonth()).toEqual(3);
-        expect(d1.getDate()).toEqual(30);
-    });
-});
-describe("localizeNumber", () => {
-    it("preserves standard numerals", () => {
-        const dummyLocale = { numerals: "0123456789" };
-        expect(localizeNumber(123, dummyLocale)).toEqual("123");
-    });
-    it("converts standard numerals to arabic", () => {
-        expect(localizeNumber(123, arabic)).toEqual("١٢٣");
-    });
-});
-describe("parseNumber", () => {
-    it("correctly parses number string", () => {
-        const dummyLocale = { numerals: "0123456789" };
-        expect(parseNumber("123", dummyLocale)).toEqual(123);
-    });
-    it("parses arabic number", () => {
-        expect(parseNumber("٧٨٩", arabic)).toEqual(789);
-    });
-});
-describe("parseDateString", () => {
-    it("parses arabic date", () => {
-        const parsed = parseDateString("٢٧‏/١١‏/٢٠٠٠", arabic);
-        expect(parsed.day).toEqual(27);
-        expect(parsed.month).toEqual(10);
-        expect(parsed.year).toEqual(2000);
-    });
-    it("parses french date", () => {
-        const parsed = parseDateString("27/11/2000", french);
-        expect(parsed.day).toEqual(27);
-        expect(parsed.month).toEqual(10);
-        expect(parsed.year).toEqual(2000);
-    });
-    it("parses korean date", () => {
-        const parsed = parseDateString("2000. 11. 27.", korean);
-        expect(parsed.day).toEqual(27);
-        expect(parsed.month).toEqual(10);
-        expect(parsed.year).toEqual(2000);
-    });
-});
-describe("getOrder", () => {
-    it("derives order from various unit orders", () => {
-        expect(getOrder("d‏/M‏/y")).toEqual(["d", "m", "y"]);
-        expect(getOrder("DD.MM.YYYY")).toEqual(["d", "m", "y"]);
-        expect(getOrder("MM/DD/YYYY")).toEqual(["m", "d", "y"]);
-        expect(getOrder("YYYY/MM/DD")).toEqual(["y", "m", "d"]);
-        expect(getOrder("YYYY. MM. DD.")).toEqual(["y", "m", "d"]);
-    });
-});

package/dist/collection/utils/dom.e2e.js

@@ -1,107 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { queryElementRoots, getRootNode, getHost } from "./dom";
-const myButtonId = "my.id";
-const myButtonClass = "my-class";
-const insideHost = "Inside Host";
-const outsideHost = "Outside Host";
-const insideShadow = "Inside Shadow";
-const componentTag = "test-component";
-const insideHostHTML = `<button class="${myButtonClass}">${insideHost}</button>`;
-const insideShadowHTML = `<div><button id="${myButtonId}">${insideShadow}</button></div>`;
-const outsideHostHTML = `<span>Test</span><button id="${myButtonId}">${outsideHost}</button>`;
-describe("queries", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage({
-            html: outsideHostHTML
-        });
-        function setUpTestComponent({ insideHostHTML, componentTag, insideShadowHTML }) {
-            class TestComponent extends HTMLElement {
-                constructor() {
-                    super();
-                    const shadow = this.attachShadow({ mode: "open" });
-                    shadow.innerHTML = insideShadowHTML;
-                }
-            }
-            customElements.define(componentTag, TestComponent);
-            const testComponent = document.createElement(componentTag);
-            testComponent.innerHTML = insideHostHTML;
-            document.body.appendChild(testComponent);
-        }
-        await page.addScriptTag({
-            content: `
-      ${getRootNode}
-      ${getHost}
-      ${queryElementRoots}
-      ${setUpTestComponent}
-      `
-        });
-        await page.waitForFunction(() => window.queryElementRoots);
-    });
-    it("queryElementRoots: should query from inside host element", async () => {
-        const text = await page.evaluate(({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId }) => {
-            window.setUpTestComponent({
-                insideHostHTML,
-                componentTag,
-                insideShadowHTML,
-                myButtonClass,
-                myButtonId
-            });
-            const testComponent = document.querySelector("test-component");
-            const queryEl = testComponent.shadowRoot.querySelector("div");
-            const resultEl = window.queryElementRoots(queryEl, {
-                selector: `button.${myButtonClass}`
-            });
-            return resultEl === null || resultEl === void 0 ? void 0 : resultEl.textContent;
-        }, { insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId });
-        expect(text).toBe(insideHost);
-    });
-    it("queryElementRoots: should query id from inside shadow element", async () => {
-        const text = await page.evaluate(({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId }) => {
-            window.setUpTestComponent({
-                insideHostHTML,
-                componentTag,
-                insideShadowHTML,
-                myButtonClass,
-                myButtonId
-            });
-            const testComponent = document.querySelector("test-component");
-            const queryEl = testComponent.shadowRoot.querySelector("div");
-            const resultEl = window.queryElementRoots(queryEl, {
-                id: myButtonId
-            });
-            return resultEl === null || resultEl === void 0 ? void 0 : resultEl.textContent;
-        }, { insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId });
-        expect(text).toBe(insideShadow);
-    });
-    it("queryElementRoots: should query from outside host element", async () => {
-        const text = await page.evaluate(({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId }) => {
-            window.setUpTestComponent({
-                insideHostHTML,
-                componentTag,
-                insideShadowHTML,
-                myButtonClass,
-                myButtonId
-            });
-            const queryEl = document.body.querySelector("span");
-            const resultEl = window.queryElementRoots(queryEl, { selector: "button" });
-            return resultEl === null || resultEl === void 0 ? void 0 : resultEl.textContent;
-        }, { insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId });
-        expect(text).toBe(outsideHost);
-    });
-    it("queryElementRoots: should query id from outside host element", async () => {
-        const text = await page.evaluate(({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId }) => {
-            window.setUpTestComponent({
-                insideHostHTML,
-                componentTag,
-                insideShadowHTML,
-                myButtonClass,
-                myButtonId
-            });
-            const queryEl = document.body.querySelector("span");
-            const resultEl = window.queryElementRoots(queryEl, { id: myButtonId });
-            return resultEl === null || resultEl === void 0 ? void 0 : resultEl.textContent;
-        }, { insideHostHTML, componentTag, insideShadowHTML, myButtonClass, myButtonId });
-        expect(text).toBe(outsideHost);
-    });
-});