@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,273 +0,0 @@
-import {
-    HeadlessEngine,
-    buildStandaloneSearchBox,
-    searchAppReducers
-} from "@coveo/headless";
-import Input from "dx/input";
-import Button from "dx/button";
-import Dropdown from "dx/dropdown";
-import HeaderSearch from "dx/headerSearch";
-import { PopoverRequestCloseType } from "typings/custom";
-import { createRenderComponent } from "utils/tests";
-import { MOCK_SUGGESTIONS } from "./mockData";
-import mockProps, { coveoConfig } from "./mockProps";
-import scopes from "../scopes";
-
-const COVEO_CONFIG = {
-    configuration: {
-        organizationId: coveoConfig.coveoOrganizationId,
-        accessToken: coveoConfig.coveoPublicAccessToken,
-        search: {
-            pipeline: coveoConfig.coveoSearchPipeline,
-            searchHub: coveoConfig.coveoSearchHub
-        }
-    },
-    reducers: searchAppReducers
-};
-
-const BASE_SEARCH = "/search";
-const REDIRECT_URL = "https://beta.developer.salesforce.com";
-
-const DEFAULT_SCOPE = "all";
-const TAG = "dx-header-search";
-const render = createRenderComponent(TAG, HeaderSearch);
-
-let subscribeCallback: Function | null = null;
-const mockSubscribe = jest.fn((callback) => {
-    subscribeCallback = callback;
-});
-const mockUpdateText = jest.fn();
-
-jest.mock("@coveo/headless", () => {
-    return {
-        HeadlessEngine: jest.fn(),
-        buildStandaloneSearchBox: jest.fn(),
-        searchAppReducers: jest.fn()
-    };
-});
-
-const expectMobileToDefaultRender = ({
-    input,
-    dropdown,
-    button
-}: {
-    input: Input;
-    dropdown: Dropdown;
-    button: Button;
-}) => {
-    expect(dropdown).not.toBeNull();
-    expect(dropdown.classList).toHaveLength(1);
-    expect(dropdown.classList).toContain("mobile_search-dropdown");
-
-    expect(dropdown.open).toBe(false);
-
-    expect(input).not.toBeNull();
-    expect(input.classList).toHaveLength(1);
-    expect(input.classList).toContain("mobile_search-input");
-
-    expect(button).not.toBeNull();
-    expect(button.iconSymbol).toBe("search");
-    expect(button.ariaLabel).toBe("Show mobile search");
-};
-
-const expectSearchToInit = () => {
-    expect(HeadlessEngine).toHaveBeenCalledTimes(1);
-    expect(HeadlessEngine).toHaveBeenCalledWith(COVEO_CONFIG);
-    expect(buildStandaloneSearchBox).toHaveBeenCalledTimes(1);
-    const [
-        engine,
-        options
-    ] = (buildStandaloneSearchBox as jest.Mock).mock.calls[0];
-    expect(engine).toBeInstanceOf(HeadlessEngine);
-    expect(options).toEqual({
-        options: {
-            numberOfSuggestions: 3,
-            redirectionUrl: REDIRECT_URL
-        }
-    });
-    expect(mockSubscribe).toHaveBeenCalledTimes(1);
-    expect(subscribeCallback).not.toBeNull();
-    expect(subscribeCallback).toBeInstanceOf(Function);
-    expect(mockUpdateText).toHaveBeenCalledTimes(1);
-    expect(mockUpdateText).toHaveBeenCalledWith("");
-};
-
-describe(TAG, () => {
-    beforeEach(() => {
-        (buildStandaloneSearchBox as jest.Mock).mockReturnValue({
-            subscribe: mockSubscribe,
-            updateText: mockUpdateText,
-            state: { suggestions: MOCK_SUGGESTIONS }
-        });
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-        subscribeCallback = null;
-    });
-
-    describe("render", () => {
-        it("renders as desktop view", () => {
-            const defaultScopeLabel = "All";
-            const expetedScopes = scopes.map((scope) => {
-                return {
-                    ...scope,
-                    active: scope.id === DEFAULT_SCOPE
-                };
-            });
-
-            const element = render(mockProps);
-
-            const container: HTMLElement = element.shadowRoot.querySelector(
-                ".desktop_search-container"
-            );
-            expect(container).not.toBeNull();
-            expect(container.classList).toContain("desktop_search-container");
-
-            const dropdowns: Dropdown[] = element.shadowRoot.querySelectorAll(
-                "dx-dropdown"
-            );
-            expect(dropdowns).toHaveLength(2);
-            const [scopesDropdown, suggestionsDropdown] = dropdowns;
-            expect(scopesDropdown.classList).toHaveLength(1);
-            expect(scopesDropdown.classList).toContain(
-                "desktop_search-dropdown"
-            );
-            expect(scopesDropdown.options).toEqual(expetedScopes);
-            expect(scopesDropdown.value).toEqual(DEFAULT_SCOPE);
-            expect(suggestionsDropdown.options).toHaveLength(0);
-            expect(suggestionsDropdown.open).toBe(false);
-
-            const scopeLabel: HTMLElement = element.shadowRoot.querySelector(
-                "button.search_scope-toggle span"
-            );
-            expect(scopeLabel).not.toBeNull();
-            expect(scopeLabel.textContent).toBe(defaultScopeLabel);
-
-            const inputEl = element.shadowRoot.querySelector("dx-input");
-            expect(inputEl).not.toBeNull();
-
-            const button = element.shadowRoot.querySelector("dx-button");
-            expect(button).toBeNull();
-
-            expectSearchToInit();
-
-            return expect(element).toBeAccessible();
-        });
-
-        it("renders as mobile view", () => {
-            const element = render({ ...mockProps, mobile: true });
-            const container: HTMLElement = element.shadowRoot.querySelector(
-                "div"
-            );
-            expect(container).not.toBeNull();
-            expect(container.classList).toHaveLength(0);
-
-            const dropdowns: Dropdown[] = element.shadowRoot.querySelectorAll(
-                "dx-dropdown"
-            );
-            expect(dropdowns).toHaveLength(1);
-            const [dropdown] = dropdowns;
-            const input: Input = element.shadowRoot.querySelector("dx-input");
-            const button: Button = element.shadowRoot.querySelector(
-                "dx-button"
-            );
-            expectMobileToDefaultRender({
-                input,
-                dropdown,
-                button
-            });
-
-            expectSearchToInit();
-
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    describe("interactions", () => {
-        it("updates searchState when subscribe callback is called", () => {
-            const expectedOptions: Object[] = MOCK_SUGGESTIONS.map(
-                ({ value }) => {
-                    return {
-                        active: false,
-                        id: value,
-                        label: value,
-                        link: {
-                            href: `${BASE_SEARCH}#q=${value}&t=${DEFAULT_SCOPE}`,
-                            target: null
-                        }
-                    };
-                }
-            );
-            const element = render(mockProps);
-
-            const suggestionsDropdown: Dropdown = element.shadowRoot.querySelectorAll(
-                "dx-dropdown"
-            )[1];
-            expect(suggestionsDropdown).not.toBeNull();
-            expect(suggestionsDropdown.options).toHaveLength(0);
-
-            subscribeCallback!();
-
-            return Promise.resolve().then(() => {
-                expect(suggestionsDropdown.options).toHaveLength(3);
-                expect(suggestionsDropdown.options).toEqual(expectedOptions);
-                return expect(element).toBeAccessible();
-            });
-        });
-
-        it("can select and display another scope", async () => {
-            const nextScope = scopes[1];
-            const element = render(mockProps);
-
-            const button = element.shadowRoot.querySelector("button");
-            button.click();
-
-            const dropdown = element.shadowRoot.querySelector("dx-dropdown");
-            dropdown.dispatchEvent(
-                new CustomEvent("change", { detail: nextScope.id })
-            );
-
-            await Promise.resolve();
-            expect(button.textContent).toEqual(nextScope.label);
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    describe("mobile only interactions", () => {
-        it("opens dropdown on button click, input is focus and then is requestclose event as keypress-escape", () => {
-            const testType: PopoverRequestCloseType = "keypress-escape";
-            const element = render({ ...mockProps, mobile: true });
-
-            const input: Input = element.shadowRoot.querySelector("dx-input");
-            const dropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
-            const button = element.shadowRoot.querySelector("dx-button");
-            button.click();
-
-            return Promise.resolve()
-                .then(() => {
-                    expect(input.classList).toHaveLength(2);
-                    expect(input.classList).toContain("mobile_search-input");
-                    expect(input.classList).toContain("state-open");
-                    expect(button.iconSymbol).toBe("close");
-                    expect(button.ariaLabel).toBe("Hide mobile search");
-
-                    // yarn jest does not complain about it, but yarn test:unit yes. Comment this for now.
-                    // expect(dropdown.open).toBe(true);
-
-                    dropdown.dispatchEvent(
-                        new CustomEvent("requestclose", { detail: testType })
-                    );
-                })
-                .then(() => {
-                    expectMobileToDefaultRender({
-                        input,
-                        dropdown,
-                        button
-                    });
-                });
-        });
-    });
-});

package/src/modules/dx/headerSearch/__tests__/mockData.ts

@@ -1,11 +0,0 @@
-export const MOCK_SUGGESTIONS = [
-    {
-        value: "First Suggestion"
-    },
-    {
-        value: "Second Suggestion"
-    },
-    {
-        value: "Third Suggestion"
-    }
-];

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

@@ -1,11 +0,0 @@
-export const coveoConfig = {
-    coveoOrganizationId: "coveosalesforcetestakshatha",
-    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
-    coveoSearchPipeline: "salesforcedevdoc",
-    coveoSearchHub: "salesforcedevdoc"
-};
-
-export default {
-    mobile: false,
-    ...coveoConfig
-};

package/src/modules/dx/headerSearch/scopes.ts

@@ -1,10 +0,0 @@
-export default [
-    { label: "All", id: "all" },
-    { label: "Docs", id: "docs" },
-    { label: "Forums", id: "forums" },
-    { label: "APIs", id: "apis" },
-    { label: "Events", id: "events" },
-    { label: "Blog", id: "blog" },
-    { label: "Guides", id: "guides" },
-    { label: "Video", id: "video" }
-];

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

@@ -1,53 +0,0 @@
-import Helmet from "dx/helmet";
-import { createRenderComponent } from "utils/tests";
-import { HelmetVariant } from "typings/custom";
-
-const TAG = "dx-helmet";
-const render = createRenderComponent(TAG, Helmet);
-
-describe("dx-helmet", () => {
-    it("renders title according to the api", () => {
-        const title = "Super Cool Title";
-        const component = render({ title });
-
-        const titleSpan: HTMLElement = component.shadowRoot.querySelector(
-            ".home-link-title"
-        );
-        expect(titleSpan.textContent).toBe(title);
-
-        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
-        expect(links.length).toBe(1);
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders second link if currentPropertyHref is passed in through the api", () => {
-        const currentPropertyTitle = "Mulesoft";
-        const currentPropertyHref = "https://developer.mulesoft.com";
-        const component = render({ currentPropertyTitle, currentPropertyHref });
-
-        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
-        expect(links.length).toBe(2);
-
-        const currentPropertyLink: HTMLElement = links[1];
-        expect(currentPropertyLink.textContent).toBe(currentPropertyTitle);
-        expect(currentPropertyLink.getAttribute("href")).toBe(
-            currentPropertyHref
-        );
-
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders variant according to the api", () => {
-        const variant: HelmetVariant = "dark";
-        const component = render({ variant });
-
-        const div: HTMLElement = component.shadowRoot.querySelector("div");
-        expect(div).not.toBeNull();
-        expect(div.classList).toHaveLength(2);
-        expect(div.classList).toContain("helmet");
-        expect(div.classList).toContain("variant_dark");
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,53 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-helmet",
-    component: "dx-helmet"
-};
-
-const markup = html`
-    <style>
-        body {
-            padding: 0 !important;
-        }
-    </style>
-`;
-
-export const Clear = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="clear"></dx-helmet>
-`;
-
-export const Dark = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="dark"></dx-helmet>
-`;
-
-export const Light = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="light"></dx-helmet>
-`;
-
-export const Neutral = () => html`
-    ${markup}
-    <dx-helmet title="Salesforce Developers" variant="neutral"></dx-helmet>
-`;
-
-export const CustomPadding = () => html`
-    ${markup}
-    <dx-helmet
-        title="Salesforce Developers"
-        variant="neutral"
-        horizontal-padding="2rem"
-    ></dx-helmet>
-`;
-
-export const NeutralWithCurrentPropertyLink = () => html`
-    ${markup}
-    <dx-helmet
-        title="Salesforce Developers"
-        current-property-title="Mulesoft"
-        current-property-href="https://developer.mulesoft.com/"
-        variant="neutral"
-    ></dx-helmet>
-`;

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

@@ -1,77 +0,0 @@
-import Hr from "dx/hr";
-import { createRenderComponent } from "utils/tests";
-import {
-    separator as separatorProps,
-    heading as headingProps,
-    link as linkProps,
-    loadMore as loadMoreProps
-} from "./mockProps";
-
-const TAG = "dx-hr";
-const render = createRenderComponent(TAG, Hr);
-
-describe(TAG, () => {
-    it("renders with a heading", () => {
-        const element = render(headingProps);
-        const p = element.shadowRoot.querySelector("p");
-        expect(p.getAttribute("role")).toEqual("heading");
-        expect(p.getAttribute("aria-level")).toEqual(headingProps.ariaLevel);
-        expect(p.textContent).toEqual(headingProps.text);
-        return expect(element).toBeAccessible();
-    });
-
-    it("defaults to an aria-level when used with heading", () => {
-        const props = { ...headingProps, ariaLevel: null };
-        const element = render(props);
-        const p = element.shadowRoot.querySelector("p");
-        expect(p.getAttribute("role")).toEqual("heading");
-        expect(p.getAttribute("aria-level")).toEqual("3");
-        expect(p.textContent).toEqual(props.text);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with a button and the given text when used with the link variant", () => {
-        const element = render(linkProps);
-        const dxButton = element.shadowRoot.querySelector("dx-button");
-        expect(dxButton).not.toBeNull();
-        expect(dxButton.href).toEqual(linkProps.href);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with a button and the given text when used with the load-more variant", () => {
-        const element = render(loadMoreProps);
-        const dxButton = element.shadowRoot.querySelector("dx-button");
-        expect(dxButton).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers a custom loadmore event when used with the load-more variant and the button gets clicked", () => {
-        const element = render(loadMoreProps);
-        const mockLoadMore = jest.fn();
-        element.addEventListener("loadmore", mockLoadMore);
-        const dxButton = element.shadowRoot.querySelector("dx-button");
-
-        dxButton.click();
-        expect(mockLoadMore).toHaveBeenCalled();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders without text as a separator", () => {
-        const element = render(separatorProps);
-        const p = element.shadowRoot.querySelector("p");
-        expect(p.getAttribute("role")).toEqual("separator");
-        expect(p.getAttribute("aria-level")).toEqual(null);
-        expect(p.textContent).toEqual("");
-        return expect(element).toBeAccessible();
-    });
-
-    it("removes aria-level when used as a separator", () => {
-        const props = { ...separatorProps, ariaLevel: "1" };
-        const element = render(props);
-        const p = element.shadowRoot.querySelector("p");
-        expect(p.getAttribute("role")).toEqual("separator");
-        expect(p.getAttribute("aria-level")).toEqual(null);
-        expect(p.textContent).toEqual("");
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,18 +0,0 @@
-export const heading = {
-    ariaLevel: "1",
-    text: "Heading",
-    variant: "heading"
-};
-
-export const link = {
-    href: "https://salesforce.com",
-    text: "View more episodes",
-    variant: "link"
-};
-
-export const loadMore = {
-    text: "Load more stuff",
-    variant: "load-more"
-};
-
-export const separator = {};

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

@@ -1,55 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-hr",
-    component: "dx-hr"
-};
-
-const createStyles = () => html`
-    <style>
-        body {
-            padding: 12px 0 0 0 !important;
-        }
-        .title {
-            margin-left: 24px;
-        }
-    </style>
-`;
-
-const title = (value: string) => html`<span class="title">${value}</span>`;
-
-export const Base = () => html`
-    ${createStyles()} ${title("Horizontal rule without a heading")}
-    <dx-hr></dx-hr>
-`;
-
-export const Heading = () => html`
-    ${createStyles()} ${title("Horizontal rule with a heading and aria level")}
-    <dx-hr aria-level="2" variant="heading" text="Heading Level 2"></dx-hr>
-
-    ${title("Horizontal rule with a heading and default aria level")}
-    <dx-hr variant="heading" text="Heading Level 3"></dx-hr>
-
-    ${title("Less Spacing")}
-    <dx-hr variant="heading" text="Heading" spacing="md"></dx-hr>
-
-    ${title("No spacing")}
-    <dx-hr variant="heading" text="Heading" spacing="${null}"></dx-hr>
-
-    ${title("Storybook Controlled")}
-    <dx-hr variant="heading" text="Heading"></dx-hr>
-`;
-
-export const Link = () => html`
-    ${createStyles()} ${title("Link")}
-    <dx-hr
-        variant="link"
-        href="https://salesforce.com"
-        text="Visit another page"
-    ></dx-hr>
-`;
-
-export const LoadMore = () => html`
-    ${createStyles()} ${title("Load More")}
-    <dx-hr variant="load-more" text="Load more content"></dx-hr>
-`;

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

@@ -1,54 +0,0 @@
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-icon";
-const render = createRenderComponent(TAG, Icon);
-
-describe(TAG, () => {
-    it("renders null when not given a symbol property", () => {
-        const element = render();
-        const svgEl = element.shadowRoot.querySelector("svg");
-        expect(svgEl).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an icon defaulted to size small", () => {
-        const element = render({ symbol: "search" });
-        const svgEl = element.shadowRoot.querySelector("svg");
-        expect(svgEl.getAttribute("style")).toContain(
-            "--dx-c-icon-size: var(--dx-g-icon-size-sm)"
-        );
-        const href = element.shadowRoot
-            .querySelector("use")
-            .getAttribute("xlink:href");
-        expect(href).toContain(
-            "/assets/icons/utility-sprite/svg/symbols.svg#search"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an hot-orange-vibrant-30 medium icon", () => {
-        const element = render({
-            symbol: "search",
-            color: "hot-orange-vibrant-30"
-        });
-        const svgEl = element.shadowRoot.querySelector("svg");
-
-        expect(svgEl.getAttribute("style")).toContain(
-            "fill: var(--dx-g-hot-orange-vibrant-30);"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the use element with the correct xlink:href", () => {
-        const element = render({ symbol: "audio", sprite: "doctype" });
-
-        const useEl = element.shadowRoot.querySelector("use");
-        const href = useEl.getAttribute("xlink:href");
-        expect(href).toContain(
-            "/assets/icons/doctype-sprite/svg/symbols.svg#audio"
-        );
-
-        return expect(element).toBeAccessible();
-    });
-});