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

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

@@ -1,147 +0,0 @@
-import Footer from "dx/footer";
-import { createRenderComponent } from "utils/tests";
-import { socialLinks, termsLinks, generalLinksRaw } from "../links";
-import mockLocales from "./mockLocales";
-
-const generalLength = generalLinksRaw.reduce(
-    // @ts-ignore
-    (acc, links) => [...acc, ...links.options],
-    []
-    // @ts-ignore
-).length;
-
-const TAG = "dx-footer";
-const render = createRenderComponent(TAG, Footer);
-
-describe(TAG, () => {
-    it("renders a footer, doesn't render locales dropdown when no locales provideded, doesn't render large newsletter section by default", () => {
-        const element = render();
-
-        const footerEl = element.shadowRoot.querySelector("footer");
-        expect(footerEl).not.toBeNull();
-
-        const dropdown = element.shadowRoot.querySelector(".locales");
-        expect(dropdown).toBeNull();
-
-        const newsletterSection = element.shadowRoot.querySelector(
-            ".content-container_top"
-        );
-        const newsletterSectionLarge = element.shadowRoot.querySelector(
-            ".content-container_top_large"
-        );
-        expect(newsletterSection).toBeTruthy();
-        expect(newsletterSectionLarge).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders large signup when specified", () => {
-        const element = render({ variant: "large-signup" });
-
-        const newsletterSection = element.shadowRoot.querySelector(
-            ".content-container_top"
-        );
-        const newsletterSectionLarge = element.shadowRoot.querySelector(
-            ".content-container_top_large"
-        );
-        expect(newsletterSection).toBeNull();
-        expect(newsletterSectionLarge).toBeTruthy();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no signup when specified", () => {
-        const element = render({ variant: "no-signup" });
-
-        const newsletterSection = element.shadowRoot.querySelector(
-            ".content-container_top"
-        );
-        const newsletterSectionLarge = element.shadowRoot.querySelector(
-            ".content-container_top_large"
-        );
-        expect(newsletterSection).toBeNull();
-        expect(newsletterSectionLarge).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the terms only when specified", () => {
-        const element = render({ variant: "terms-only" });
-
-        const linksSection = element.shadowRoot.querySelector(
-            ".content-container_middle"
-        );
-        expect(linksSection).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders all links", () => {
-        const element = render();
-
-        const socials = element.shadowRoot.querySelectorAll(".socials a");
-        expect(socials.length).toEqual(socialLinks.length);
-
-        const terms = element.shadowRoot.querySelectorAll(".terms a");
-        expect(terms.length).toEqual(termsLinks.length + 2); // +2 accounts for all rights reserved link and the one trust link
-
-        const general = element.shadowRoot.querySelectorAll(
-            ".general dx-footer-option"
-        );
-        expect(general.length).toEqual(generalLength);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("displays locale dropdown and fires callbacks for localechange with correct payload", () => {
-        const mockLocalChange = jest.fn();
-        const nextLocale = mockLocales[1].id;
-        const element = render({
-            locale: "en",
-            locales: mockLocales
-        });
-
-        element.addEventListener("localechange", mockLocalChange);
-
-        const dropdown = element.shadowRoot.querySelector(".locales");
-
-        dropdown.dispatchEvent(
-            new CustomEvent("change", { detail: nextLocale })
-        );
-
-        expect(mockLocalChange.mock.calls[0][0].detail).toEqual(nextLocale);
-        expect(mockLocalChange).toHaveBeenCalledTimes(1);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't blow up when given locales with no locale specified", () => {
-        const element = render({
-            locales: mockLocales
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders newsletter section when specified, reroutes to correct href on email submission", () => {
-        const email = "test@test.io";
-        const emailHref = `/newsletter?subscriberEmail=${email}`;
-        const mockAssign = jest.fn();
-
-        //@ts-ignore
-        delete window.location;
-        //@ts-ignore
-        window.location = {
-            assign: mockAssign
-        };
-
-        const element = render({ showNewsletterSignup: true });
-
-        const emailInput = element.shadowRoot.querySelector("dx-input");
-
-        emailInput.dispatchEvent(new CustomEvent("submit", { detail: email }));
-
-        expect(mockAssign).toHaveBeenCalledWith(emailHref);
-        expect(mockAssign).toHaveBeenCalledTimes(1);
-    });
-});

package/src/modules/dx/footer/__tests__/mockLocales.ts

@@ -1,7 +0,0 @@
-export default [
-    { label: "Afrikaans", id: "af" },
-    { label: "Belarusian", id: "be" },
-    { label: "Chinese", id: "zh-cn" },
-    { label: "English", id: "en" },
-    { label: "Russian", id: "ru" }
-];

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

@@ -1,88 +0,0 @@
-import { html } from "lit-html";
-import mockLocales from "./__tests__/mockLocales";
-
-export default {
-    title: "dx/dx-footer",
-    component: "dx-footer"
-};
-
-const mockState = () => {
-    window.addEventListener("DOMContentLoaded", () => {
-        const footer = document.documentElement.querySelector("dx-footer");
-
-        if (footer) {
-            // @ts-ignore
-            footer.addEventListener("localechange", (e: CustomEvent) => {
-                footer.setAttribute("locale", e.detail);
-            });
-        }
-    });
-};
-
-export const Base = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer locales="${args.locales}" locale="en"></dx-footer>
-    `;
-};
-
-Base.args = { locales: JSON.stringify(mockLocales) };
-
-export const LargeNewsletter = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer
-            variant="large-signup"
-            locales="${args.locales}"
-            locale="en"
-        ></dx-footer>
-    `;
-};
-
-LargeNewsletter.args = { locales: JSON.stringify(mockLocales) };
-
-export const NoNewsletter = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer
-            variant="no-signup"
-            locales="${args.locales}"
-            locale="en"
-        ></dx-footer>
-    `;
-};
-
-NoNewsletter.args = { locales: JSON.stringify(mockLocales) };
-
-export const TermsOnly = (args: any) => {
-    mockState();
-    return html`
-        <style>
-            body {
-                padding: 0 !important;
-            }
-        </style>
-        <dx-footer
-            variant="terms-only"
-            locales="${args.locales}"
-            locale="en"
-        ></dx-footer>
-    `;
-};
-
-TermsOnly.args = { locales: JSON.stringify(mockLocales) };

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

@@ -1,34 +0,0 @@
-import FooterOption from "dx/footerOption";
-import { createRenderComponent } from "utils/tests";
-import { MOCK_BUTTON_PROPS } from "./mockProps";
-
-const TAG = "dx-footer-option";
-const render = createRenderComponent(TAG, FooterOption);
-
-describe(TAG, () => {
-    it("renders a single dx-button component", () => {
-        const element = render(MOCK_BUTTON_PROPS);
-
-        const button = element.shadowRoot.querySelectorAll("dx-button");
-
-        expect(button.length).toEqual(1);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires sendGtm function when button is clicked", () => {
-        const sendGtmMock = jest.fn();
-        const element = render({
-            ...MOCK_BUTTON_PROPS,
-            onclick: sendGtmMock
-        });
-
-        const button = element.shadowRoot.querySelector("dx-button");
-
-        button.click();
-
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,7 +0,0 @@
-export const MOCK_BUTTON_PROPS = {
-    generalLabel: "Popular Resources",
-    label: "Trailhead",
-    href: "https://trailhead.salesforce.com/",
-    iconSymbol: "learning",
-    iconSprite: "salesforcebrand"
-};

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

@@ -1,25 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import FormattedDateTime from "dx/formattedDateTime";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-const TAG = "dx-formatted-date-time";
-const render = createRenderComponent(TAG, FormattedDateTime);
-
-describe(TAG, () => {
-    it("renders the date", () => {
-        const expectedDate = "Sunday, December 31, 1899, 12:00:00am GMT";
-        const component = render(mockProps);
-
-        expect(component).not.toBeNull();
-        expect(component.shadowRoot.textContent).toMatch(expectedDate);
-        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/formattedDateTime/__tests__/mockProps.ts

@@ -1,13 +0,0 @@
-const date = new Date(Date.UTC(0, 0, 0, 0, 0, 0));
-
-export default {
-    value: date,
-    day: "2-digit",
-    hour: "numeric",
-    minute: "numeric",
-    month: "long",
-    second: "numeric",
-    weekday: "long",
-    year: "numeric",
-    timeZoneName: "short"
-};

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

@@ -1,103 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-formatted-date-time",
-    component: "dx-formatted-date-time"
-};
-
-const date = new Date().toISOString();
-
-const createStyles = () => html`
-    <style>
-        span.date-label {
-            color: grey;
-        }
-
-        dx-formatted-date-time {
-            display: block;
-            margin-bottom: 25px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <span class="date-label">Date with Time</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        hour="2-digit"
-        minute="2-digit"
-        month="long"
-        second="2-digit"
-        time-zone-name="short"
-        weekday="long"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Date with "long" Month</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="long"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Date with Short Month</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="short"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span>Date all Digits</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="2-digit"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Date with Day of Week</span>
-    <dx-formatted-date-time
-        value="${date}"
-        day="2-digit"
-        month="long"
-        weekday="long"
-        year="numeric"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Time</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="2-digit"
-        minute="2-digit"
-        second="2-digit"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Time as Numeric without Seconds</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="numeric"
-        minute="2-digit"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Time with Timezone</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="2-digit"
-        minute="2-digit"
-        second="2-digit"
-        time-zone-name="short"
-        weekday="long"
-    ></dx-formatted-date-time>
-
-    <span class="date-label">Day of Week with Time</span>
-    <dx-formatted-date-time
-        value="${date}"
-        hour="2-digit"
-        minute="2-digit"
-        weekday="long"
-    ></dx-formatted-date-time>
-`;

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

@@ -1,37 +0,0 @@
-import Grid from "dx/grid";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-grid";
-const render = createRenderComponent(TAG, Grid);
-
-describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    [
-        [4, "four", "dynamic"],
-        [8, "four", "dynamic"],
-        [7, "four", "dynamic"],
-        [3, "three", "dynamic"],
-        [6, "three", "dynamic"],
-        [5, "three", "dynamic"],
-        [2, "three", "dynamic"],
-        [1, "three", "dynamic"]
-    ].forEach(([numElements, calculatedColumns, columns]) =>
-        it(`choses ${calculatedColumns} columns when there are ${numElements} elements`, () => {
-            const element = render({ columns });
-            const slot: HTMLSlotElement = element.shadowRoot.querySelector(
-                "slot"
-            );
-            const div = document.createElement("div");
-            slot.assignedElements = jest
-                .fn()
-                // @ts-ignore
-                .mockReturnValue(new Array(numElements).fill(div));
-            slot.dispatchEvent(new Event("slotchange"));
-
-            return expect(element.columns).toEqual(calculatedColumns);
-        })
-    );
-});

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

@@ -1,134 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-grid",
-    component: "dx-grid"
-};
-
-const createStyles = () => html`
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0;
-        }
-        .placeholder {
-            background-color: #ababab;
-            border-radius: 8px;
-            height: 200px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <h2>One Column</h2>
-
-    <dx-grid columns="one">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns</h2>
-
-    <dx-grid columns="two">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns (Slim Left)</h2>
-
-    <dx-grid columns="two-slim-left">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns (Slim Right)</h2>
-
-    <dx-grid columns="two-slim-right">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Three Columns</h2>
-
-    <dx-grid columns="three">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Four Columns</h2>
-
-    <dx-grid columns="four">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (6 cards / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (8 cards / 4 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (5 cards / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (7 cards / 4 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (1 card / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-    </dx-grid>
-`;

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

@@ -1,82 +0,0 @@
-import GroupBio from "dx/groupBio";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-group-bio";
-const render = createRenderComponent(TAG, GroupBio);
-
-describe(TAG, () => {
-    it("renders with passed in props", () => {
-        const element = render(mockProps);
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img.getAttribute("src")).toEqual(mockProps.imgSrc);
-        expect(img.getAttribute("alt")).toEqual(mockProps.imgAlt);
-
-        const name = element.shadowRoot.querySelector(".name");
-        expect(name.textContent).toEqual(mockProps.name);
-
-        const position = element.shadowRoot.querySelector(".position");
-        expect(position.textContent).toEqual(mockProps.position);
-
-        const descriptors = element.shadowRoot.querySelector(".descriptors");
-        expect(descriptors.textContent).toContain(
-            mockProps.descriptor1 +
-                mockProps.descriptor2 +
-                mockProps.descriptor3
-        );
-
-        const profileLink = element.shadowRoot.querySelector("dx-button");
-        expect(profileLink).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render <img> when imgSrc is falsy", () => {
-        const element = render({
-            ...mockProps,
-            imgSrc: ""
-        });
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render name when name is falsy", () => {
-        const element = render({
-            ...mockProps,
-            name: ""
-        });
-
-        const name = element.shadowRoot.querySelector(".name");
-        expect(name).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render position when position is falsy", () => {
-        const element = render({
-            ...mockProps,
-            position: ""
-        });
-
-        const position = element.shadowRoot.querySelector(".position");
-        expect(position).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render descriptors when variant is condensed", () => {
-        const element = render({
-            ...mockProps,
-            variant: "condensed"
-        });
-
-        const descriptors = element.shadowRoot.querySelector(".descriptors");
-        expect(descriptors).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});