@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -1,368 +0,0 @@
-import Input from "dx/input";
-import { createRenderComponent } from "utils/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 "tests/instrumentationTest";
-import { createRenderComponent } from "utils/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/instrumentation/instrumentation.ts

@@ -1,116 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-const TRACKING_EVENT_NAME = "developerwebsite_track";
-const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
-const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
-
-export function track(
-    element: EventTarget,
-    event: string,
-    payload: Record<string, unknown>
-): void {
-    const detail = { event, payload };
-    // if window.LISTENER_INDICATOR is undefined, `dx-instrumentation` has not
-    // been mounted, and the listener hasn't been attached.
-    if ((window as any)[LISTENER_INDICATOR] === undefined) {
-        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
-        (window as any)[LISTENER_QUEUE].push(detail);
-    } else {
-        const e = new CustomEvent(TRACKING_EVENT_NAME, {
-            bubbles: true,
-            composed: true,
-            detail
-        });
-        element.dispatchEvent(e);
-    }
-}
-
-const googleTagManager = {
-    track: function (e: Event) {
-        if ((window as any).dataLayer === undefined) {
-            (window as any).dataLayer = [];
-        }
-        const { event, payload } = (e as CustomEvent).detail;
-        (window as any).dataLayer.push({ ...payload, event });
-    }
-};
-
-interface TrackEventListener {
-    add: () => void;
-    remove: () => void;
-}
-
-export function developerwebTrackEventListener(
-    trackerFns: { track: (e: Event) => void }[] = []
-): TrackEventListener {
-    if (trackerFns.length === 0) {
-        throw new Error("No tracker functions passed");
-    }
-
-    const trackdeveloperwebEvent = (e: Event) => {
-        trackerFns.forEach((tracker) => {
-            tracker.track(e);
-        });
-    };
-
-    const attachEventListener = () => {
-        document.addEventListener(TRACKING_EVENT_NAME, trackdeveloperwebEvent);
-    };
-
-    const removeEventListener = () => {
-        document.removeEventListener(
-            TRACKING_EVENT_NAME,
-            trackdeveloperwebEvent
-        );
-    };
-
-    return {
-        add: attachEventListener,
-        remove: removeEventListener
-    };
-}
-
-export default class Instrumentation extends LightningElement {
-    @api useGoogleTagManager = false;
-
-    private tracker: TrackEventListener | null = null;
-
-    private setupTracker() {
-        const trackerFunctions = this.useGoogleTagManager
-            ? [googleTagManager]
-            : [];
-        this.tracker = developerwebTrackEventListener(trackerFunctions);
-        this.tracker.add();
-        (window as any)[LISTENER_INDICATOR] = true;
-    }
-
-    private dispatchQueuedEvents() {
-        while ((window as any)[LISTENER_QUEUE].length > 0) {
-            const event = (window as any)[LISTENER_QUEUE].pop() as {
-                event: string;
-                payload: Record<string, unknown>;
-            };
-            track(this, event.event, event.payload);
-        }
-    }
-
-    renderedCallback() {
-        if (this.tracker === null) {
-            this.setupTracker();
-
-            if (
-                (window as any)[LISTENER_QUEUE] !== undefined &&
-                (window as any)[LISTENER_QUEUE].length > 0
-            ) {
-                this.dispatchQueuedEvents();
-            }
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.tracker !== null) {
-            this.tracker.remove();
-            this.tracker = null;
-        }
-    }
-}