@salesforcedevs/dx-components 0.26.1-alpha.11 → 0.26.1-alpha.16

package/src/modules/dx/input/__tests__/input.test.ts

@@ -1,357 +0,0 @@
-import Input from "dx/input";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-input";
-const render = createRenderComponent(TAG, Input);
-
-const shortcutKey = "k";
-
-const windowsUserAgent =
-    "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1";
-const macUserAgent =
-    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15";
-
-const mockUserAgent = (userAgent: string) => {
-    Object.defineProperty(window.navigator, "userAgent", {
-        get: function () {
-            return userAgent;
-        },
-        configurable: true
-    });
-};
-
-const assertErrorRender = (element: any, errorMessage: string) =>
-    Promise.resolve().then(() => {
-        const inputContainer: HTMLElement =
-            element.shadowRoot.querySelector(".input-container");
-        expect(inputContainer.classList).toHaveLength(2);
-        expect(inputContainer.classList).toContain("has-error");
-
-        const errorBox: HTMLElement =
-            element.shadowRoot.querySelector(".error-message-box");
-        expect(errorBox).not.toBeNull();
-        expect(errorBox.textContent).toBe(errorMessage);
-    });
-
-const assertErrorMissing = (element: any) => {
-    const inputContainer: HTMLElement =
-        element.shadowRoot.querySelector(".input-container");
-    expect(inputContainer.classList).toHaveLength(1);
-    expect(element.shadowRoot.querySelector(".error-message-box")).toBeNull();
-};
-
-describe(TAG, () => {
-    it("renders an input", () => {
-        const ariaLabel = "Default label";
-        const element = render({ ariaLabel });
-        const inputEl = element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        expect(inputEl.ariaLabel).toBe("Default label");
-        expect(
-            element.shadowRoot.querySelector(
-                "label, abbr, dx-icon, .shortcut, dx-button, .error-message-box"
-            )
-        ).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an input, a label and an abbr", () => {
-        const label = "Test label";
-        const element = render({
-            ariaLabel: "Default label",
-            required: true,
-            label
-        });
-
-        const labelEl: HTMLElement = element.shadowRoot.querySelector("label");
-        expect(labelEl).not.toBeNull();
-        expect(labelEl.textContent).toBe(`${label}*`);
-
-        const abbrEl: HTMLElement = labelEl.querySelector("abbr")!;
-        expect(abbrEl).not.toBeNull();
-        expect(abbrEl?.textContent).toBe("*");
-
-        const inputEl: HTMLElement = element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        expect(inputEl.getAttribute("id")).toBe(labelEl.getAttribute("for"));
-
-        expect(
-            element.shadowRoot.querySelector(".error-message-box")
-        ).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("blurs input on escape", () => {
-        const element = render({ ariaLabel: "Default label" });
-        const inputEl = element.shadowRoot.querySelector("input");
-        const blurMock = jest.fn();
-        inputEl.onblur = blurMock;
-        inputEl.focus();
-        inputEl.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-        expect(blurMock).toHaveBeenCalled();
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a specific icon", () => {
-        const element = render({ ariaLabel: "Search", iconSymbol: "search" });
-        const icons = element.shadowRoot.querySelectorAll("dx-icon");
-        const searchIcon = Array.from(icons).filter(
-            // @ts-ignore
-            (icon) => icon.symbol === "search"
-        );
-        expect(searchIcon).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("has the correct shortcut elements and renders the control shortcut on windows", () => {
-        mockUserAgent(windowsUserAgent);
-
-        const element = render({ ariaLabel: "Search", shortcutKey: "k" });
-
-        const shortcutImg = element.shadowRoot.querySelector(".shortcut img");
-        expect(shortcutImg.src).toContain("/control.svg");
-
-        const shortcutSpan = element.shadowRoot.querySelector(".shortcut span");
-        expect(shortcutSpan.textContent).toBe(shortcutKey);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the command shortcut on mac", () => {
-        mockUserAgent(macUserAgent);
-
-        const element = render({ ariaLabel: "Search", shortcutKey: "k" });
-
-        const shortcutImg = element.shadowRoot.querySelector(".shortcut img");
-        expect(shortcutImg.src).toContain("/command.svg");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("focuses the input on shortcut keydown", () => {
-        const element = render({ ariaLabel: "Search", shortcutKey });
-
-        const input = element.shadowRoot.querySelector("input");
-
-        window.dispatchEvent(
-            new KeyboardEvent("keydown", { key: shortcutKey, metaKey: true })
-        );
-
-        expect(input.isSameNode(element.shadowRoot.activeElement)).toBe(true);
-    });
-
-    it("renders submit button when given submit-label", () => {
-        const element = render({ ariaLabel: "Search", submitLabel: "Submit" });
-        const buttonEl = element.shadowRoot.querySelector("dx-button");
-        expect(buttonEl).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires onsubmit when enter pressed or submit button clicked", () => {
-        const element = render({ ariaLabel: "Search", submitLabel: "Submit" });
-        const submitMock = jest.fn();
-        element.addEventListener("submit", submitMock);
-
-        const inputEl = element.shadowRoot.querySelector("input");
-        inputEl.focus();
-        inputEl.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-
-        expect(submitMock).toHaveBeenCalledTimes(1);
-
-        const buttonEl = element.shadowRoot.querySelector("dx-button");
-        buttonEl.dispatchEvent(new MouseEvent("click"));
-
-        expect(submitMock).toHaveBeenCalledTimes(2);
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires onchange when input changes", () => {
-        const element = render({ ariaLabel: "Search", submitLabel: "Submit" });
-        const changeMock = jest.fn();
-        element.addEventListener("change", changeMock);
-        const inputEl = element.shadowRoot.querySelector("input");
-        inputEl.focus();
-
-        inputEl.value = "test";
-        inputEl.dispatchEvent(new KeyboardEvent("input"));
-
-        expect(changeMock).toHaveBeenCalledTimes(1);
-        expect(changeMock.mock.calls[0][0].detail).toEqual("test");
-        return expect(element).toBeAccessible();
-    });
-
-    it("value can be controlled", async () => {
-        const element = render({ ariaLabel: "Search", value: "test" });
-        const inputEl = element.shadowRoot.querySelector("input");
-
-        await Promise.resolve();
-        expect(inputEl.value).toEqual("test");
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies disabled correctly", () => {
-        const element = render({
-            ariaLabel: "Search",
-            submitLabel: "submit",
-            disabled: true
-        });
-        const inputEl = element.shadowRoot.querySelector("input");
-        const buttonEl = element.shadowRoot.querySelector("dx-button");
-        expect(inputEl.disabled && buttonEl.disabled).toBeTruthy();
-        return expect(element).toBeAccessible();
-    });
-
-    [
-        ["default", {}, "size-small"],
-        ["large", { size: "large" }, "size-large"]
-    ].forEach(([size, props, className]) =>
-        it(`applies ${size} size correctly`, () => {
-            const element = render(props);
-            const container = element.shadowRoot.querySelector(".input-group");
-            const _className = container.getAttribute("class");
-            expect(_className.includes(className)).toBeTruthy();
-        })
-    );
-
-    it("shows error box if blurs when dx-input is required and has validityOnBlur as true", () => {
-        const missingErrorMessage = "This field is required";
-        const element = render({
-            ariaLabel: "Default label",
-            required: true,
-            label: "Test label",
-            missingErrorMessage,
-            validityOnBlur: true
-        });
-
-        assertErrorMissing(element);
-
-        const inputEl: HTMLElement = element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        inputEl.dispatchEvent(new Event("blur"));
-
-        return assertErrorRender(element, missingErrorMessage);
-    });
-
-    it("has a reportValidity api and return if dx-input has a valid value", () => {
-        const element = render({
-            ariaLabel: "Default label",
-            type: "email",
-            label: "Test label"
-        });
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        inputEl.value = "not_valid_email";
-        inputEl.dispatchEvent(new Event("input"));
-
-        assertErrorMissing(element);
-
-        const result = element.reportValidity();
-        expect(result).toBe(false);
-
-        return assertErrorRender(element, "Enter valid email");
-    });
-
-    it("shows error box if blurs when dx-input format is invalid and has validityOnBlur as true", () => {
-        const formatErrorMessage = "The email format is incorrect, try again";
-        const element = render({
-            ariaLabel: "Default label",
-            formatErrorMessage,
-            label: "Test label",
-            type: "email",
-            validityOnBlur: true,
-            value: "not_valid_email"
-        });
-
-        assertErrorMissing(element);
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        inputEl.dispatchEvent(new Event("blur"));
-
-        return assertErrorRender(element, formatErrorMessage);
-    });
-
-    it("returns true and doesn't show errors if required field is populated", () => {
-        const element = render({
-            ariaLabel: "Default label",
-            required: true,
-            label: "Test label"
-        });
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        inputEl.value = "I'm a value";
-        inputEl.dispatchEvent(new Event("input"));
-
-        assertErrorMissing(element);
-
-        const result = element.reportValidity();
-        expect(result).toBe(true);
-
-        return Promise.resolve().then(() => assertErrorMissing(element));
-    });
-
-    it("doesn't show error message as value is a valid email", () => {
-        const element = render({
-            ariaLabel: "Default label",
-            type: "email",
-            label: "Test label",
-            validityOnBlur: true
-        });
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        inputEl.value = "email@email.com";
-        inputEl.dispatchEvent(new Event("input"));
-
-        assertErrorMissing(element);
-
-        inputEl.dispatchEvent(new Event("blur"));
-
-        return Promise.resolve().then(() => assertErrorMissing(element));
-    });
-
-    it("shows clear button if value is nonempty and clearable is true", () => {
-        const element = render({
-            value: "test",
-            clearable: true
-        });
-
-        const clearButton: HTMLButtonElement =
-            element.shadowRoot.querySelector(".clear-button");
-        expect(clearButton).not.toBeNull();
-    });
-
-    it("doesn't show clear button if no value", () => {
-        const element = render({
-            value: "",
-            clearable: true
-        });
-
-        const clearButton: HTMLButtonElement =
-            element.shadowRoot.querySelector(".clear-button");
-        expect(clearButton).toBeNull();
-    });
-
-    it("clears input value on click of clear button", async () => {
-        const element = render({
-            value: "test",
-            clearable: true
-        });
-
-        const input: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        expect(input.value).toEqual("test");
-
-        const clearButton: HTMLButtonElement =
-            element.shadowRoot.querySelector(".clear-button");
-        clearButton.dispatchEvent(new MouseEvent("click"));
-
-        await Promise.resolve();
-
-        expect(input.value).toEqual("");
-    });
-});

package/src/modules/dx/input/input.stories.ts

@@ -1,102 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-input",
-    component: "dx-input"
-};
-
-const createStyles = (properties: string) => html`
-    <style>
-        dx-input {
-            ${properties}
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles(`
-        display: block;
-        margin-bottom: 25px;
-        margin-top: 25px;
-    `)}
-
-    <dx-input placeholder="Example"></dx-input>
-
-    <dx-input placeholder="Example Clearable" clearable="true"></dx-input>
-
-    <dx-input placeholder="Example Large" size="large"></dx-input>
-
-    <dx-input placeholder="Example with Icon" icon-symbol="search"></dx-input>
-
-    <dx-input placeholder="Submit Example" submit-label="Submit"></dx-input>
-
-    <dx-input
-        placeholder="Submit Example Large"
-        submit-label="Submit"
-        size="large"
-    ></dx-input>
-
-    <dx-input size="small" placeholder="Small Example"></dx-input>
-
-    <dx-input
-        size="small"
-        placeholder="Small Example with Icon"
-        icon-symbol="search"
-    ></dx-input>
-
-    <dx-input
-        size="small"
-        placeholder="Shortcut Example"
-        icon-symbol="search"
-        shortcut-key="k"
-    ></dx-input>
-
-    <dx-input size="small" placeholder="Enter Email" type="email"></dx-input>
-`;
-
-export const FormInput = () => html`
-    ${createStyles(`
-        display: block;
-        height: 77px;
-    `)}
-
-    <dx-input
-        label="Hello Input"
-        required="true"
-        placeholder="type something..."
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="Email"
-        placeholder="Email"
-        required="true"
-        size="small"
-        type="email"
-        missing-error-message="Enter your email address"
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="Custom error email"
-        placeholder="Email"
-        required="true"
-        size="small"
-        type="email"
-        format-error-message="Check the email format, it's incorrect"
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="Not required field"
-        size="small"
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="With assigned Error"
-        size="small"
-        error-message="Hey I'm custom"
-        validity-on-blur="true"
-    ></dx-input>
-`;

package/src/modules/dx/instrumentation/__tests__/instrumentation.test.ts

@@ -1,86 +0,0 @@
-import { track, developerwebTrackEventListener } from "dx/instrumentation";
-import InstrumentationTest from "test-components/instrumentationTest";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-instrumentation";
-const render = createRenderComponent(
-    "dx-instrumentation-test",
-    InstrumentationTest
-);
-
-describe(TAG, () => {
-    afterEach(() => {
-        delete (window as any).dataLayer;
-        delete (window as any).__DX_INSTRUMENTATION_QUEUE__;
-        delete (window as any).__DX_INSTRUMENTATION_IS_INITIALIZED__;
-    });
-
-    it("catches bubbled events", () => {
-        const element = render();
-
-        const button = element.shadowRoot.querySelector("button");
-        button.dispatchEvent(new MouseEvent("click"));
-        expect((window as any).dataLayer.length).toBe(1);
-        expect((window as any).dataLayer[0]).toEqual({
-            event: "buttonClick",
-            buttonName: "default"
-        });
-    });
-
-    it("flushes events dispatched prior to render", () => {
-        track(document, "testEvent", { isSentBeforeRender: "yes" });
-        expect((window as any).__DX_INSTRUMENTATION_QUEUE__.length).toBe(1);
-
-        render();
-
-        expect((window as any).__DX_INSTRUMENTATION_IS_INITIALIZED__).toBe(
-            true
-        );
-        expect((window as any).dataLayer.length).toBe(1);
-        expect((window as any).dataLayer[0]).toEqual({
-            event: "testEvent",
-            isSentBeforeRender: "yes"
-        });
-    });
-
-    // Because Jest runs tests in parallel, and because these tests interact
-    // with global scope, this `describe` block needs to remain within the
-    // parent one to ensure that it's working with a cleaned-up environment.
-    describe("developerwebTrackEventListener", () => {
-        let t: ReturnType<developerwebTrackEventListener> | null = null;
-
-        afterEach(() => {
-            if (t !== null) {
-                t.remove();
-            }
-            delete (window as any).dataLayer;
-        });
-
-        it("catches tracked events", () => {
-            // Marked instrumentation as initialized, so we can capture the event
-            (window as any).__DX_INSTRUMENTATION_IS_INITIALIZED__ = true;
-
-            const spy = { track: jest.fn() };
-            t = developerwebTrackEventListener([spy]);
-            t.add();
-            track(document, "testEvent", { isTestEvent: "yes" });
-
-            expect(spy.track).toHaveBeenCalledTimes(1);
-            const { detail, composed, bubbles } = spy.track.mock.calls[0][0];
-            expect(detail).toEqual({
-                event: "testEvent",
-                payload: {
-                    isTestEvent: "yes"
-                }
-            });
-            expect(composed).toBe(true);
-            expect(bubbles).toBe(true);
-        });
-
-        it("throws an exception if no trackerFns provided", () => {
-            expect(() => developerwebTrackEventListener([])).toThrow(
-                "No tracker functions passed"
-            );
-        });
-    });
-});

package/src/modules/dx/interactiveImage/__tests__/interactiveImage.test.ts

@@ -1,83 +0,0 @@
-import Dropdown from "dx/dropdown";
-import InteractiveImage from "dx/interactiveImage";
-import { createRenderComponent } from "utils-internal/tests";
-import {
-    mockSingleDownloadPropsAsArray,
-    mockSingleDownloadPropsAsString,
-    mockMultipleDownloadProps,
-    mockMultipleDownloadOptions
-} from "./mockProps";
-
-const TAG = "dx-interactive-image";
-const render = createRenderComponent(TAG, InteractiveImage);
-
-describe(TAG, () => {
-    describe("single download", () => {
-        it("is accessible", () => {
-            const element = render(mockSingleDownloadPropsAsArray);
-
-            const sectionEl = element.shadowRoot.querySelector("article");
-            expect(sectionEl).not.toBeNull();
-            return expect(sectionEl).toBeAccessible();
-        });
-
-        it("has the right download URL when URL passed as string", () => {
-            const element = render(mockSingleDownloadPropsAsString);
-
-            const dropdownEl = element.shadowRoot.querySelector("dx-dropdown");
-            expect(dropdownEl).toBeNull();
-            const buttonEl =
-                element.shadowRoot.querySelector("header dx-button");
-            expect(buttonEl).not.toBeNull();
-            expect(buttonEl.href).toBe(
-                mockSingleDownloadPropsAsString.downloadUrls
-            );
-            expect(buttonEl.download).toBe("FUsyxR5.jpg");
-            return expect(element).toBeAccessible();
-        });
-
-        it("has the right download URL when URL passed as array", () => {
-            const element = render(mockSingleDownloadPropsAsArray);
-
-            const dropdownEl = element.shadowRoot.querySelector("dx-dropdown");
-            expect(dropdownEl).toBeNull();
-            const buttonEl =
-                element.shadowRoot.querySelector("header dx-button");
-            expect(buttonEl).not.toBeNull();
-            expect(buttonEl.href).toBe(
-                mockSingleDownloadPropsAsArray.downloadUrls[0]
-            );
-            expect(buttonEl.download).toBe("FUsyxR5.jpg");
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    describe("multiple downloads", () => {
-        it("is accessible", () => {
-            const element = render(mockMultipleDownloadProps);
-
-            const sectionEl = element.shadowRoot.querySelector("article");
-            expect(sectionEl).not.toBeNull();
-            return expect(sectionEl).toBeAccessible();
-        });
-
-        it("renders a dropdown", () => {
-            const element = render(mockMultipleDownloadProps);
-
-            const dropdownEl: Dropdown =
-                element.shadowRoot.querySelector("dx-dropdown");
-            expect(dropdownEl).not.toBeNull();
-            const { options } = dropdownEl;
-
-            expect(options).toHaveLength(mockMultipleDownloadOptions.length);
-            options.forEach((option, index) => {
-                expect(option.id).toBe(mockMultipleDownloadOptions[index].id);
-                expect(option.label).toBe(
-                    mockMultipleDownloadOptions[index].label
-                );
-            });
-
-            return expect(element).toBeAccessible();
-        });
-    });
-});

package/src/modules/dx/interactiveImage/__tests__/mockProps.ts

@@ -1,39 +0,0 @@
-export const mockSingleDownloadPropsAsString = {
-    title:
-        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu",
-    featuredSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    downloadUrls: "https://i.imgur.com/FUsyxR5.jpg"
-};
-
-export const mockSingleDownloadPropsAsArray = {
-    title:
-        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu",
-    featuredSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    downloadUrls: ["https://i.imgur.com/FUsyxR5.jpg"]
-};
-
-export const mockMultipleDownloadProps = {
-    title:
-        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu",
-    featuredSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    downloadUrls: [
-        "https://i.imgur.com/FUsyxR5.jpg",
-        "https://i.imgur.com/FUsyxR5.png",
-        "https://i.imgur.com/FUsyxR5.bmp"
-    ]
-};
-
-export const mockMultipleDownloadOptions = [
-    {
-        label: "Download as JPG",
-        id: mockMultipleDownloadProps.downloadUrls[0]
-    },
-    {
-        label: "Download as PNG",
-        id: mockMultipleDownloadProps.downloadUrls[1]
-    },
-    {
-        label: "Download as BMP",
-        id: mockMultipleDownloadProps.downloadUrls[2]
-    }
-];