@salesforcedevs/dx-components 0.26.1-alpha.12 → 0.26.1-alpha.17

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

@@ -1,313 +0,0 @@
-import Popover from "dx/popover";
-import PopoverTest from "test-components/popoverTest";
-import {
-    createRenderComponent,
-    mockSlottedElement
-} from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-popover";
-const render = createRenderComponent(TAG, Popover);
-
-const renderWithSlot = createRenderComponent("dx-popover-test", PopoverTest);
-
-describe(TAG, () => {
-    describe("render", () => {
-        const originalConsole = global.console;
-
-        beforeAll(() => {
-            global.console = { ...global.console, error: jest.fn() };
-        });
-
-        afterAll(() => {
-            global.console = originalConsole;
-        });
-
-        it("renders the container div when a targetElement is set", () => {
-            const component = render();
-
-            expect(console.error).not.toBeCalled();
-
-            const menuEl: HTMLElement =
-                component.shadowRoot.querySelector(".popover-container");
-            expect(menuEl).not.toBeNull();
-            expect(menuEl.classList).toHaveLength(1);
-
-            const popoverDiv: HTMLElement =
-                menuEl.querySelector("div.popover")!;
-            expect(popoverDiv).not.toBeNull();
-            expect(popoverDiv.classList).toHaveLength(1);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("renders with api properties", () => {
-            const component = render(mockProps);
-            expect(console.error).not.toBeCalled();
-            const menuEl: HTMLElement =
-                component.shadowRoot.querySelector(".popover-container");
-            expect(menuEl).not.toBeNull();
-            expect(menuEl.classList).toHaveLength(1);
-
-            const popoverDiv: HTMLElement =
-                menuEl.querySelector("div.popover")!;
-            expect(popoverDiv).not.toBeNull();
-            expect(popoverDiv.classList).toHaveLength(4);
-            expect(popoverDiv.classList).toContain(
-                `popover-offset-${mockProps.offset}`
-            );
-            expect(popoverDiv.classList).toContain("popover-small");
-            expect(popoverDiv.classList).toContain("popover-overridewidth");
-            expect(popoverDiv.ariaLabel).toBe(mockProps.ariaLabel);
-            expect(popoverDiv.style.width).toBe(mockProps.width);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("renders with fullwidth class", () => {
-            const component = render({ fullWidth: true });
-
-            expect(console.error).not.toBeCalled();
-
-            const popoverDiv: HTMLElement =
-                component.shadowRoot.querySelector("div.popover");
-            expect(popoverDiv.classList).toHaveLength(2);
-            expect(popoverDiv.classList).toContain("popover-fullwidth");
-        });
-
-        it("renders logs an error if fullWidth and width are trithy", () => {
-            const component = render({ ...mockProps, fullWidth: true });
-
-            expect(console.error).toBeCalledTimes(1);
-            expect(console.error).toBeCalledWith(
-                'The "width" and "full-width" properties cannot be provided simultaneously.'
-            );
-
-            const popoverDiv: HTMLElement =
-                component.shadowRoot.querySelector("div.popover");
-            expect(popoverDiv.style).not.toBeNull();
-            expect(popoverDiv.classList).toHaveLength(5);
-            expect(popoverDiv.classList).toContain(
-                `popover-offset-${mockProps.offset}`
-            );
-            expect(popoverDiv.classList).toContain("popover-small");
-            expect(popoverDiv.classList).toContain("popover-overridewidth");
-            expect(popoverDiv.classList).toContain("popover-fullwidth");
-        });
-
-        it("is accessible with its slotted control", async () => {
-            const component = renderWithSlot();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("correctly onboards its slotted control", async () => {
-            const component = renderWithSlot();
-
-            await Promise.resolve();
-
-            const button = component.shadowRoot.querySelector("dx-button");
-            const hasPopup = button.getAttribute("aria-haspopup");
-            expect(hasPopup).toEqual("true");
-        });
-
-        it("doesn't render menu content before interaction", async () => {
-            const component = render();
-            const content =
-                component.shadowRoot.querySelector(".popover-content");
-
-            expect(content).toBeNull();
-
-            component.openPopover();
-
-            await Promise.resolve();
-
-            const contentAfterOpen =
-                component.shadowRoot.querySelector(".popover-content");
-
-            expect(contentAfterOpen).not.toBeNull();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("render menu content before interaction in prerender mode", async () => {
-            const spy = jest.spyOn(window.navigator, "userAgent", "get");
-            spy.mockReturnValue("Mozilla, Prerender");
-
-            const renderComponent = createRenderComponent(TAG, Popover);
-            const component = renderComponent();
-            const content =
-                component.shadowRoot.querySelector(".popover-content");
-
-            expect(content).not.toBeNull();
-        });
-    });
-
-    describe("interactions", () => {
-        it("fires open and close callbacks on interaction with its slotted control", async () => {
-            const component = renderWithSlot();
-            const mockOpen = jest.fn();
-            const mockClose = jest.fn();
-
-            await Promise.resolve();
-
-            const button = component.shadowRoot.querySelector("dx-button");
-            const popover = component.shadowRoot.querySelector("dx-popover");
-            popover.addEventListener("open", mockOpen);
-            popover.addEventListener("close", mockClose);
-
-            expect(mockOpen).not.toHaveBeenCalled();
-
-            button.click();
-
-            expect(mockOpen).toHaveBeenCalledTimes(1);
-
-            button.click();
-
-            expect(mockOpen).toHaveBeenCalledTimes(1);
-            expect(mockClose).toHaveBeenCalledTimes(1);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("doesn't fire open if passed control is disabled", () => {
-            const element = render();
-
-            const { slot: controlSlot, slottedElement } =
-                mockSlottedElement<HTMLButtonElement>(
-                    element,
-                    "button",
-                    "control"
-                );
-            expect(controlSlot.assignedElements).toBeCalledTimes(1);
-            expect(slottedElement.ariaHasPopup).toBe("true");
-            expect(slottedElement.style.cursor).toBe("cursor");
-
-            slottedElement.disabled = true;
-
-            const mockOpen = jest.fn();
-            element.addEventListener("open", mockOpen);
-            element.open = true;
-
-            expect(element.open).toBe(false);
-            expect(mockOpen).not.toBeCalled();
-        });
-
-        it("fires open on slotted control ArrowDown", async () => {
-            const component = renderWithSlot();
-            const mockOpen = jest.fn();
-
-            await Promise.resolve();
-
-            const button = component.shadowRoot.querySelector("dx-button");
-            const popover = component.shadowRoot.querySelector("dx-popover");
-            popover.addEventListener("open", mockOpen);
-
-            expect(mockOpen).not.toHaveBeenCalled();
-
-            button.dispatchEvent(
-                new KeyboardEvent("keydown", { key: "ArrowDown" })
-            );
-
-            expect(mockOpen).toHaveBeenCalledTimes(1);
-        });
-
-        it("closes popover and dispatch event when Esc key is pressed", () => {
-            const component = render(mockProps);
-            const { slottedElement } = mockSlottedElement(
-                component,
-                "button",
-                "control"
-            );
-            slottedElement.focus = jest.fn();
-
-            component.open = true;
-            expect(slottedElement.getAttribute("aria-expanded")).toBe("true");
-
-            const escapePressMock = jest.fn();
-            component.addEventListener("requestclose", escapePressMock);
-
-            const closeEvent = jest.fn();
-            component.addEventListener("close", closeEvent);
-
-            const popoverDiv: HTMLElement =
-                component.shadowRoot.querySelector(".popover");
-            expect(popoverDiv).not.toBeNull();
-
-            expect(component.open).toBe(true);
-
-            popoverDiv.dispatchEvent(
-                new KeyboardEvent("keydown", { key: "Escape" })
-            );
-
-            expect(escapePressMock).toBeCalledTimes(1);
-            const [singleCall] = escapePressMock.mock.calls[0];
-            expect(singleCall).toHaveProperty("detail", "keypress-escape");
-            expect(singleCall).toHaveProperty("bubbles", true);
-            expect(singleCall).toHaveProperty("composed", true);
-
-            expect(component.open).toBe(false);
-            expect(slottedElement.getAttribute("aria-expanded")).toBe("false");
-            expect(slottedElement.focus).toBeCalledTimes(1);
-            expect(closeEvent).toBeCalledTimes(1);
-        });
-
-        it("fires open callbacks on mouseover its slotted control", () => {
-            const component = render({ ...mockProps, openOnHover: true });
-            const { slottedElement } = mockSlottedElement(
-                component,
-                "button",
-                "control"
-            );
-            expect(slottedElement.ariaHasPopup).toBe("true");
-            expect(slottedElement.style.cursor).toBe("default");
-
-            const openMock = jest.fn();
-            component.addEventListener("open", openMock);
-
-            slottedElement.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(openMock).toBeCalledTimes(1);
-            expect(component.open).toBe(true);
-        });
-
-        it("closes if you change open from true to false and not focus control", () => {
-            const component = render(mockProps);
-            const { slottedElement } = mockSlottedElement(
-                component,
-                "button",
-                "control"
-            );
-            slottedElement.focus = jest.fn();
-            component.open = true;
-
-            const closeMock = jest.fn();
-            component.addEventListener("close", closeMock);
-
-            component.open = false;
-
-            expect(slottedElement.focus).not.toBeCalled();
-            expect(closeMock).toBeCalledTimes(1);
-        });
-
-        it("dispatches requestclose with click-control type", () => {
-            const component = render(mockProps);
-            const { slottedElement } = mockSlottedElement(
-                component,
-                "button",
-                "control"
-            );
-
-            const requestCloseMock = jest.fn();
-            component.addEventListener("requestclose", requestCloseMock);
-
-            component.open = true;
-            slottedElement.click();
-
-            expect(requestCloseMock).toBeCalledTimes(1);
-            const [singleCall] = requestCloseMock.mock.calls[0];
-            expect(singleCall).toHaveProperty("detail", "click-control");
-            expect(singleCall).toHaveProperty("bubbles", true);
-            expect(singleCall).toHaveProperty("composed", true);
-        });
-    });
-});

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

@@ -1,82 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "../checkboxGroup/__tests__/mockProps";
-
-export default {
-    title: "dx/dx-popover",
-    component: "dx-popover"
-};
-
-// prettier-ignore
-const styles = () => html `
-    <style>
-        #root {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            grid-gap: 20px;
-            justify-items: center;
-        }
-    </style>
-`;
-
-// prettier-ignore
-export const Base = () => html ` ${styles()}
-    <dx-popover>
-      <dx-button slot="control" icon-symbol="chevrondown">
-        Default
-      </dx-button>
-      <dx-checkbox-group
-          legend='${JSON.stringify(mockProps.legend)}'
-          options='${JSON.stringify(mockProps.options)}'
-          default-value='${JSON.stringify(mockProps.defaultValue)}'
-          slot="content"
-      ></dx-checkbox-group>
-    </dx-popover>
-
-    <br />
-
-    <dx-popover small="true">
-      <dx-button slot="control" icon-symbol="chevrondown">
-          Small
-      </dx-button>
-      <div slot="content">
-        Custom Content
-      </div>
-    </dx-popover>
-
-    <br />
-
-    <dx-popover offset="small">
-      <dx-button slot="control" icon-symbol="chevrondown">
-          Offset
-      </dx-button>
-      <div slot="content">
-          Custom Content
-      </div>
-    </dx-popover>
-
-    <br />
-
-    <dx-popover open-on-hover="true">
-      <dx-button slot="control" icon-symbol="chevrondown">
-          Open On Hover
-      </dx-button>
-      <div slot="content">
-          Custom Content
-      </div>
-    </dx-popover>
-`;
-
-export const DisabledControl = () => html`
-    ${styles()}
-    <dx-popover>
-        <dx-button slot="control" icon-symbol="chevrondown" disabled="true">
-            I'm disabled
-        </dx-button>
-        <dx-checkbox-group
-            legend="${JSON.stringify(mockProps.legend)}"
-            options="${JSON.stringify(mockProps.options)}"
-            default-value="${JSON.stringify(mockProps.defaultValue)}"
-            slot="content"
-        ></dx-checkbox-group>
-    </dx-popover>
-`;

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

@@ -1,12 +0,0 @@
-export const options = [
-    { value: "english", label: "English" },
-    { value: "japanese", label: "Japanese" },
-    { value: "spanish", label: "Spanish" },
-    { value: "german", label: "German", disabled: true }
-];
-
-export default {
-    defaultValue: "japanese",
-    legend: "languages",
-    options
-};

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

@@ -1,42 +0,0 @@
-import RadioGroup from "dx/radioGroup";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-radio-group";
-const render = createRenderComponent(TAG, RadioGroup);
-
-describe(TAG, () => {
-    it("callback payload value is correct", async () => {
-        const mockChange = jest.fn();
-
-        const element = render(mockProps);
-
-        element.addEventListener("change", mockChange);
-
-        const checkbox = element.shadowRoot.querySelector("dx-checkbox");
-
-        checkbox.dispatchEvent(
-            new CustomEvent("change", { detail: { value: checkbox.value } })
-        );
-
-        await Promise.resolve();
-
-        expect(mockChange.mock.calls[0][0].detail.value).toEqual(
-            checkbox.value
-        );
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("accepts a value", () => {
-        const element = render({
-            options: mockProps.options,
-            legend: mockProps.legend,
-            value: mockProps.defaultValue
-        });
-
-        expect(element.value).toEqual(mockProps.defaultValue);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,25 +0,0 @@
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-radio-group",
-    component: "dx-radio-group"
-};
-
-export const Base = (args: any) => `
-  <dx-radio-group legend='${args.legend}' options='${args.options}' default-value='${args.defaultValue}'>
-  </dx-radio-group>
-`;
-
-export const Controlled = (args: any) => `
-  <dx-radio-group legend='${args.legend}' options='${args.options}' value='${args.defaultValue}'>
-  </dx-radio-group>
-`;
-
-const args = {
-    ...mockProps,
-    options: JSON.stringify(mockProps.options)
-};
-
-Base.args = args;
-
-Controlled.args = args;

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

@@ -1,55 +0,0 @@
-const oneHour = new Date(Date.now() - 1000 * 60 * 60).toISOString();
-const fourHours = new Date(Date.now() - 4 * 1000 * 60 * 60).toISOString();
-const oneDay = new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString();
-const fourDays = new Date(Date.now() - 4 * 1000 * 60 * 60 * 24).toISOString();
-const oneWeek = new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
-const fourWeeks = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 7
-).toISOString();
-const oneMonth = new Date(Date.now() - 1000 * 60 * 60 * 24 * 30).toISOString();
-const fourMonths = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 30
-).toISOString();
-const oneYear = new Date(
-    Date.now() - 1000 * 60 * 60 * 24 * 30 * 12
-).toISOString();
-const fourYears = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 30 * 12
-).toISOString();
-
-export default {
-    fourHoursCustomMessage: {
-        value: fourHours,
-        messageWhenHoursPast: "hours since"
-    },
-    oneHour: {
-        value: oneHour
-    },
-    fourHours: {
-        value: fourHours
-    },
-    oneDay: {
-        value: oneDay
-    },
-    fourDays: {
-        value: fourDays
-    },
-    oneWeek: {
-        value: oneWeek
-    },
-    fourWeeks: {
-        value: fourWeeks
-    },
-    oneMonth: {
-        value: oneMonth
-    },
-    fourMonths: {
-        value: fourMonths
-    },
-    oneYear: {
-        value: oneYear
-    },
-    fourYears: {
-        value: fourYears
-    }
-};

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

@@ -1,52 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import RelativeDateTime from "dx/relativeDateTime";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-relative-date-time";
-const render = createRenderComponent(TAG, RelativeDateTime);
-
-describe(TAG, () => {
-    it("renders component with hours and custom message", () => {
-        const component = render(mockProps.fourHoursCustomMessage);
-
-        const dateEl = component.shadowRoot.querySelector("time");
-        expect(dateEl).not.toBeNull();
-        expect(dateEl.textContent).toEqual("4 hours since");
-        return expect(component).toBeAccessible();
-    });
-
-    [
-        { time: "oneHour", expected: "1 hour ago" },
-        { time: "fourHours", expected: "4 hours ago" },
-        { time: "oneDay", expected: "1 day ago" },
-        { time: "fourDays", expected: "4 days ago" },
-        { time: "oneWeek", expected: "1 week ago" },
-        { time: "fourWeeks", expected: "4 weeks ago" },
-        { time: "oneMonth", expected: "1 month ago" },
-        { time: "fourMonths", expected: "4 months ago" },
-        { time: "oneYear", expected: "1 year ago" },
-        { time: "fourYears", expected: "4 years ago" }
-    ].forEach((testCase) => {
-        it(`displays the correct label and title for ${testCase.expected}`, () => {
-            const component = render(mockProps[testCase.time]);
-
-            const dateEl = component.shadowRoot.querySelector("time");
-
-            expect(dateEl).not.toBeNull();
-            expect(dateEl.getAttribute("title")).toEqual(
-                new Date(mockProps[testCase.time].value).toString()
-            );
-            expect(dateEl.textContent).toEqual(testCase.expected);
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    it("logs an error if value provided is an error", () => {
-        console.error = jest.fn();
-        const component = render({ value: undefined });
-
-        expect(component).not.toBeNull();
-        expect(console.error).toHaveBeenCalled();
-    });
-});

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

@@ -1,83 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-relative-date-time",
-    component: "dx-relative-date-time"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        span.date-label {
-            color: grey;
-        }
-
-        dx-relative-date-time {
-            display: block;
-            margin-bottom: 12px;
-        }
-    </style>
-`;
-
-const twoWeeks = new Date(Date.now() - 1.21e9).toISOString();
-const fourDays = new Date(Date.now() - 3.456e8).toISOString();
-const threeMonths = new Date(Date.now() - 7.884e9).toISOString();
-const twoYears = new Date(Date.now() - 6.307e10).toISOString();
-const fourHours = new Date(Date.now() - 1.44e7).toISOString();
-const oneHour = new Date(Date.now() - 3600000).toISOString();
-
-// prettier-ignore
-export const DefaultMessage = () => html ` ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time value="${fourHours}"></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time value="${fourDays}"></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time value="${twoWeeks}"></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time value="${threeMonths}"></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time value="${twoYears}"></dx-relative-date-time>
-
-    <span class="date-label">1 Hour</span>
-    <dx-relative-date-time value="${oneHour}"></dx-relative-date-time>
-`;
-
-export const CustomMessage = () => html`
-    ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time
-        value="${fourHours}"
-        message-when-hours-past="hours since upload"
-    ></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time
-        value="${fourDays}"
-        message-when-days-past="days since broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time
-        value="${twoWeeks}"
-        message-when-weeks-past="weeks since last broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time
-        value="${threeMonths}"
-        message-when-months-past="months since the event"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time
-        value="${twoYears}"
-        message-when-years-past="years ago"
-    ></dx-relative-date-time>
-`;