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

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

@@ -1,175 +0,0 @@
-import { createElement } from "lwc";
-import SidebarSearch from "dx/sidebarSearch";
-import {
-    createRenderComponent,
-    renderLightningElement
-} from "utils-internal/tests";
-import { coveoXMLDocsConfig } from "utils-internal/coveo";
-import { mockQueryParameter, unmockQueryParameter } from "utils-internal/jest";
-import { SESSION_KEY } from "dx/sidebarSearch";
-import mockPreloadedState from "./mockPreloadedState";
-
-const TAG = "dx-sidebar-search";
-const render = createRenderComponent(TAG, SidebarSearch);
-
-const PROPS = coveoXMLDocsConfig;
-const QUERY = "test";
-
-describe(TAG, () => {
-    beforeEach(() => {
-        window.sessionStorage.clear();
-        jest.restoreAllMocks();
-    });
-    afterEach(unmockQueryParameter);
-
-    it("correctly sets coveo advanced configuration", () => {
-        const element = render(PROPS);
-
-        element.coveoAdvancedQueryConfig = JSON.stringify(
-            coveoXMLDocsConfig.coveoAdvancedQueryConfig
-        );
-
-        expect(element.coveoAdvancedQueryConfig).toEqual(
-            coveoXMLDocsConfig.coveoAdvancedQueryConfig
-        );
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("calls dispatchOnChangeEvent with empty query", () => {
-        const element = render(PROPS);
-
-        const mockOnChange = jest.fn();
-
-        element.addEventListener("change", mockOnChange);
-
-        element.setInputValue("reference");
-        element.setInputValue("");
-
-        expect(mockOnChange).toHaveBeenCalled();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with the correct initial empty query", () => {
-        const element = render(PROPS);
-
-        const input = element.shadowRoot.querySelector("dx-input");
-
-        expect(input.value).toEqual("");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with the correct initial query", () => {
-        mockQueryParameter(QUERY);
-
-        const element = render(PROPS);
-
-        const input = element.shadowRoot.querySelector("dx-input");
-
-        expect(input.value).toEqual(QUERY);
-
-        return expect(element).toBeAccessible();
-    });
-
-    describe("highlighting", () => {
-        afterEach(unmockQueryParameter);
-
-        it("triggers on initial render when a search value exists", () => {
-            mockQueryParameter(QUERY);
-            const element = createElement(TAG, { is: SidebarSearch });
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-            renderLightningElement(element, PROPS);
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: QUERY
-                })
-            );
-        });
-
-        it("does not trigger on initial render when a search value does not exist", () => {
-            const element = createElement(TAG, { is: SidebarSearch });
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-            renderLightningElement(element, PROPS);
-            expect(dispatchEventSpy).not.toHaveBeenCalledWith(
-                expect.objectContaining({ type: "highlightedtermchange" })
-            );
-        });
-
-        it("triggers on input change with non-empty value", () => {
-            const element = render(PROPS);
-            const dxInput = element.shadowRoot.querySelector("dx-input");
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-
-            dxInput.dispatchEvent(new CustomEvent("change", { detail: QUERY }));
-
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: QUERY
-                })
-            );
-        });
-
-        it("triggers on input change with empty value", () => {
-            const element = render(PROPS);
-            const dxInput = element.shadowRoot.querySelector("dx-input");
-            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-
-            dxInput.dispatchEvent(new CustomEvent("change", { detail: "" }));
-
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: ""
-                })
-            );
-        });
-    });
-
-    it("correctly consumes a valid session storage object", () => {
-        mockQueryParameter(mockPreloadedState.state.query.q);
-
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify(mockPreloadedState)
-        );
-
-        const element = render(PROPS);
-
-        expect(window.sessionStorage.getItem(SESSION_KEY)).not.toBeNull();
-
-        expect(element).toBeAccessible();
-    });
-
-    it("ignores and deletes a session storage object if query and config don't match", () => {
-        mockQueryParameter("test");
-
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify(mockPreloadedState)
-        );
-
-        const element = render(PROPS);
-
-        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
-
-        expect(element).toBeAccessible();
-    });
-
-    it("ignores and deletes a session storage object on incorrect config", () => {
-        mockQueryParameter(mockPreloadedState.state.query.q);
-
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify({ state: { query: { q: "test" } } })
-        );
-
-        const element = render(PROPS);
-
-        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
-
-        expect(element).toBeAccessible();
-    });
-});

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

@@ -1,96 +0,0 @@
-import SidebarSearchResult from "dx/sidebarSearchResult";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-sidebar-search-result";
-const render = createRenderComponent(TAG, SidebarSearchResult);
-
-const MOCK_RESULT = {
-    description: "test description here",
-    descriptionHighlights: [{ length: 5, offset: 5 }],
-    href: "/test",
-    selected: false,
-    title: "test title here",
-    titleHighlights: [{ length: 5, offset: 5 }]
-};
-
-const MOCK_RESULT_2 = {
-    description:
-        "Auth.MyDomainLoginDiscoveryHandler to show a custom error message on the My Domain login page ... Auth.LoginDiscoveryHandler to show an error message on the Experience Cloud site login page",
-    descriptionHighlights: [
-        { length: 4, offset: 0 },
-        { length: 4, offset: 98 }
-    ],
-    href: "/test",
-    selected: false,
-    title: "Auth Exceptions | Apex Reference Guide | Salesforce Developers",
-    titleHighlights: [{ length: 4, offset: 0 }]
-};
-
-describe(TAG, () => {
-    it("renders a result with the correct highlighted content", () => {
-        const element = render(MOCK_RESULT);
-
-        const title = element.shadowRoot.querySelector(".title");
-        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
-        expect(title.textContent).toEqual(MOCK_RESULT.title);
-        expect(titleBolds.length).toEqual(MOCK_RESULT.titleHighlights.length);
-        expect(titleBolds[0].textContent).toEqual("title");
-
-        const description = element.shadowRoot.querySelector(".description");
-        const descriptionBolds =
-            element.shadowRoot.querySelectorAll(".description .bold");
-        expect(description.textContent).toEqual(MOCK_RESULT.description);
-        expect(descriptionBolds.length).toEqual(
-            MOCK_RESULT.descriptionHighlights.length
-        );
-        expect(descriptionBolds[0].textContent).toEqual("descr");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders another result variant with the correct highlighted content", () => {
-        const element = render(MOCK_RESULT_2);
-
-        const title = element.shadowRoot.querySelector(".title");
-        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
-        expect(title.textContent).toEqual(MOCK_RESULT_2.title);
-        expect(titleBolds.length).toEqual(MOCK_RESULT_2.titleHighlights.length);
-        expect(titleBolds[0].textContent).toEqual("Auth");
-
-        const description = element.shadowRoot.querySelector(".description");
-        const descriptionBolds =
-            element.shadowRoot.querySelectorAll(".description .bold");
-        expect(description.textContent).toEqual(MOCK_RESULT_2.description);
-        expect(descriptionBolds.length).toEqual(
-            MOCK_RESULT_2.descriptionHighlights.length
-        );
-        expect(descriptionBolds[0].textContent).toEqual("Auth");
-        expect(descriptionBolds[1].textContent).toEqual("Auth");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a result as selected when specified", () => {
-        const element = render({ ...MOCK_RESULT, selected: true });
-
-        const selected = element.shadowRoot.querySelector(
-            ".sidebar-item-selected"
-        );
-        expect(selected).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't add bold class when there is no highlighted term", () => {
-        const element = render({
-            ...MOCK_RESULT,
-            descriptionHighlights: [],
-            titleHighlights: []
-        });
-
-        const selected = element.shadowRoot.querySelector(".bold");
-        expect(selected).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,48 +0,0 @@
-import slackCta from "dx/slackCta";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-slack-cta";
-const render = createRenderComponent(TAG, slackCta);
-
-describe(TAG, () => {
-    it("renders the button linking to slack", () => {
-        const element = render();
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button");
-        expect(slackBtn).not.toBe(undefined);
-        return expect(slackBtn.length).toBe(1);
-    });
-
-    it("renders a button meeting all accesibilty requirements", () => {
-        const element = render();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the inner button text correctly", () => {
-        const element = render({
-            innerText: "foobar"
-        });
-
-        const header = element.shadowRoot
-            .querySelectorAll(".container")
-            .item(0);
-        expect(header.textContent).toBe("Follow along with Slackfoobar");
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
-        return expect(slackBtn.textContent).toBe("foobar");
-    });
-
-    it("renders the header text correctly", () => {
-        const element = render({
-            headerText: "foobar"
-        });
-
-        const slackBtn = element.shadowRoot.querySelectorAll(".button").item(0);
-        expect(slackBtn.textContent).toBe("Add to Slack");
-
-        const header = element.shadowRoot
-            .querySelectorAll(".container")
-            .item(0);
-        return expect(header.textContent).toBe("foobarAdd to Slack");
-    });
-});

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

@@ -1,25 +0,0 @@
-export default {
-    title: "dx/dx-slack-cta",
-    component: "dx-slack-cta"
-};
-
-const createStyles = () => `
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0 30px 0;
-        }
-    </style>
-`;
-
-export const Base = () => `
-    ${createStyles()}
-    <h2>Add to Slack</h2>
-
-    <dx-slack-cta header-text="Get notified of new episodes with the new Salesforce Developers Slack app" background="podcast"></dx-slack-cta>
-    
-    <dx-slack-cta header-text="Get the latest Salesforce Developer posts exactly how you want." inner-text="Send posts to Slack" background="blog"></dx-slack-cta>
-
-    <dx-slack-cta header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-cta>
-`;

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

@@ -1,114 +0,0 @@
-import Socials from "dx/socials";
-import IconBadge from "dx/iconBadge";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-socials";
-const render = createRenderComponent(TAG, Socials);
-
-const TEST_URL = encodeURIComponent(window.location.href);
-
-describe(TAG, () => {
-    const originalConsole = global.console;
-
-    beforeAll(() => {
-        global.console = { ...global.console, error: jest.fn() };
-    });
-
-    afterAll(() => {
-        global.console = originalConsole;
-    });
-
-    it("renders dx-icon-badge for each social link", () => {
-        const component = render();
-
-        const links: Array<HTMLAnchorElement> =
-            component.shadowRoot.querySelectorAll("a");
-        expect(links).toHaveLength(3);
-
-        const [facebookLink, twitterLink, linkedinLink] = links;
-
-        expect(facebookLink.href).toBe(
-            `https://www.facebook.com/sharer/sharer.php?u=${TEST_URL}`
-        );
-        expect(facebookLink.target).toBe("_blank");
-        expect(facebookLink.title).toBe("Facebook");
-
-        expect(twitterLink.href).toBe(
-            `https://twitter.com/intent/tweet?url=${TEST_URL}&text=${document.title}`
-        );
-        expect(twitterLink.target).toBe("_blank");
-        expect(twitterLink.title).toBe("Twitter");
-
-        expect(linkedinLink.href).toBe(
-            `http://www.linkedin.com/sharing/share-offsite/?url=${TEST_URL}`
-        );
-        expect(linkedinLink.target).toBe("_blank");
-        expect(linkedinLink.title).toBe("Linkedin");
-
-        const iconBadge: Array<IconBadge> =
-            component.shadowRoot.querySelectorAll("dx-icon-badge");
-        expect(iconBadge).toHaveLength(3);
-
-        const [facebookIcon, twitterIcon, linkedinIcon] = iconBadge;
-
-        expect(facebookIcon.sprite).toBe("brand");
-        expect(facebookIcon.symbol).toBe("facebook-f");
-
-        expect(twitterIcon.sprite).toBe("brand");
-        expect(twitterIcon.symbol).toBe("twitter");
-
-        expect(linkedinIcon.sprite).toBe("brand");
-        expect(linkedinIcon.symbol).toBe("linkedin-in");
-
-        const detailSection =
-            component.shadowRoot.querySelector(".details-section");
-        expect(detailSection).toBeNull();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders the specified target for each 'a' tag", () => {
-        const expectedTarget = "_self";
-        const component = render({ linksTarget: expectedTarget });
-
-        const links: Array<HTMLAnchorElement> =
-            component.shadowRoot.querySelectorAll("a");
-        expect(links).toHaveLength(3);
-        links.forEach(({ target }) => expect(target).toBe(expectedTarget));
-
-        expect(global.console.error).not.toBeCalled();
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't update target if not valid", () => {
-        const testTarget = "not_valid_at_all";
-        const component = render({ linksTarget: testTarget });
-
-        const links: Array<HTMLAnchorElement> =
-            component.shadowRoot.querySelectorAll("a");
-        expect(links).toHaveLength(3);
-        links.forEach(({ target }) => expect(target).toBe("_blank"));
-
-        expect(global.console.error).toBeCalledTimes(1);
-        expect(global.console.error).toBeCalledWith(
-            "Invalid links target, valid options are: _self, _blank, _parent, _top, framename"
-        );
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders details section", () => {
-        const component = render({ details: "Test|Another Test" });
-
-        const details: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll(".details-section span");
-        expect(details).toHaveLength(2);
-
-        const [testDetail, anotherTestDetail] = details;
-        expect(testDetail.textContent).toBe("Test");
-        expect(anotherTestDetail.textContent).toBe("Another Test");
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,24 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-socials",
-    component: "dx-socials"
-};
-
-export const Base = () => html` <dx-socials></dx-socials> `;
-
-export const SocialWithTarget = ({ target }: any) => html`
-    <dx-socials links-target="${target}"></dx-socials>
-`;
-
-SocialWithTarget.args = {
-    target: "_top"
-};
-
-export const SocialWithDetails = ({ details }: any) => html`
-    <dx-socials details="${details}"></dx-socials>
-`;
-
-SocialWithDetails.args = {
-    details: "jan 18, 2021|12 min read"
-};

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

@@ -1,37 +0,0 @@
-import Spinner from "dx/spinner";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-spinner";
-const render = createRenderComponent(TAG, Spinner);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const component: HTMLElement = render();
-
-        expect(component.classList).toHaveLength(1);
-        expect(component.classList).toContain("spinner_container");
-        const container = component.shadowRoot!.querySelector(".spinner");
-
-        expect(container).not.toBeNull();
-        expect(container?.classList).toHaveLength(2);
-        expect(container?.classList).toContain(`spinner_medium`);
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders with size and variant", () => {
-        const size = "large";
-        const variant = "inverse";
-        const component: HTMLElement = render({
-            size,
-            variant
-        });
-
-        const container = component.shadowRoot?.querySelector(".spinner");
-        expect(container?.classList).toHaveLength(3);
-        expect(container?.classList).toContain(`spinner_${size}`);
-        expect(container?.classList).toContain(`spinner_${variant}`);
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,69 +0,0 @@
-import { html } from "lit-html";
-import { SpinnerSize, SpinnerVariant } from "typings/custom";
-
-type SpinnerStoryArgs = {
-    size: SpinnerSize;
-    variant: SpinnerVariant;
-};
-
-const sizeOptions: Array<SpinnerSize> = ["medium", "x-small", "small", "large"];
-const variantOptions: Array<SpinnerVariant> = ["base", "brand", "inverse"];
-const variantToBackgroundColor: { [key: string]: string } = {
-    inverse: "black"
-};
-
-export default {
-    title: "dx/dx-spinner",
-    component: "dx-spinner",
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-                options: sizeOptions
-            }
-        },
-        variant: {
-            control: {
-                type: "select",
-                options: variantOptions
-            }
-        }
-    }
-};
-
-const style = (variant: SpinnerVariant = "base") => html`
-    <style>
-        .spinner-wrapper {
-            position: relative;
-            height: 100vh;
-            background-color: ${variantToBackgroundColor[variant] || "white"};
-        }
-    </style>
-`;
-
-const [defaultSize] = sizeOptions;
-const [defaultVariant] = variantOptions;
-
-const Template = ({ size, variant }: SpinnerStoryArgs) => html`
-    ${style(variant)}
-    <div class="spinner-wrapper">
-        <dx-spinner
-            size="${size || defaultSize}"
-            variant="${variant || defaultVariant}"
-        ></dx-spinner>
-    </div>
-`;
-
-export const Base = Template;
-
-export const BrandLarge = (args: SpinnerStoryArgs) => Template(args);
-BrandLarge.args = {
-    size: "large",
-    variant: "brand"
-};
-
-export const InverseSmall = (args: SpinnerStoryArgs) => Template(args);
-InverseSmall.args = {
-    size: "small",
-    variant: "inverse"
-};