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

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

@@ -1,115 +0,0 @@
-import Button from "dx/button";
-import Toc from "dx/toc";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-toc";
-const render = createRenderComponent(TAG, Toc);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const container: HTMLElement = element.shadowRoot.querySelector(".toc");
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "h2"
-        );
-        const button: Button = element.shadowRoot.querySelector(
-            ".toggle-button"
-        );
-        expect(renderedTitle).not.toBeNull();
-        expect(container).not.toBeNull();
-        expect(renderedTitle.textContent).toEqual(mockProps.title);
-        expect(button.iconSymbol).toEqual("open_panel");
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders table of contents buttons, and the first one is selected", () => {
-        const element = render(mockProps);
-
-        const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "a"
-        );
-        expect(optionsListComponent).toHaveLength(mockProps.options.length);
-        expect(optionsListComponent[0].className).toEqual(
-            "content-button selected"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it('sends custom event "selectedcontent" with id on click', () => {
-        const element = render(mockProps);
-
-        const EVENT_DETAIL_PARAMETER = { name: mockProps.options[0].id };
-        const handler = jest.fn();
-        element.addEventListener("selectedcontent", handler);
-
-        return Promise.resolve().then(() => {
-            const linkEl = element.shadowRoot.querySelector("a");
-            linkEl.click();
-            expect(handler).toHaveBeenCalled();
-            expect(handler.mock.calls[0][0].detail).toEqual(
-                EVENT_DETAIL_PARAMETER
-            );
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it('Validate "value" recieved ', () => {
-        const element = render({ ...mockProps });
-
-        return Promise.resolve().then(() => {
-            const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
-            optionsListComponent.forEach((e) => {
-                if (e.getAttribute("contentid") === mockProps.value) {
-                    expect(e.className).toEqual("content-button selected");
-                }
-            });
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it('Validate no "value" recieved', () => {
-        const element = render({ ...mockProps, value: undefined });
-
-        return Promise.resolve().then(() => {
-            const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
-            expect(buttons[0].className).toEqual("content-button selected");
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("toggles the hidden className on click of toggle button", () => {
-        const element = render(mockProps);
-
-        const linkToggle = element.shadowRoot.querySelector(".toggle-button");
-        linkToggle.click();
-        return Promise.resolve().then(() => {
-            const container = element.shadowRoot.querySelector(".toc_content");
-            expect(container).toBe(null);
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    it("test list recieved as string ", () => {
-        const optionsListParameter = [
-            { label: "Introduction", id: "12312", anchor: "#test" }
-        ];
-        const element = render({
-            ...mockProps,
-            options: JSON.stringify(optionsListParameter)
-        });
-
-        return Promise.resolve().then(() => {
-            const optionListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
-            expect(optionListComponent).toHaveLength(element.options.length);
-            return expect(element).toBeAccessible();
-        });
-    });
-});

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

@@ -1,26 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-toc",
-    component: "dx-toc"
-};
-
-const options = JSON.stringify(mockProps.options);
-// prettier-ignore
-export const Base = () => html`
-    <dx-toc
-        title="In this guide"
-        options="${options}"
-        value="intro"
-    >
-        <dx-button
-            slot="view-pdf"
-            href="http://www.google.com"
-            target="_blank"
-            variant="inline"
-            icon-symbol="new_window"
-        >
-            View PDF
-        </dx-button>
-    </dx-toc>`;

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

@@ -1,23 +0,0 @@
-import Tooltip from "dx/tooltip";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-tooltip";
-const render = createRenderComponent(TAG, Tooltip);
-
-describe(TAG, () => {
-    it("calls tippy constructor with correct parameters", () => {
-        const element = render({ label: "First Label", placement: "top" });
-
-        const slotContainer: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
-
-        expect(slotContainer).not.toBeNull();
-        expect(slotContainer.getAttribute("data-microtip-position")).toEqual(
-            "top"
-        );
-        expect(slotContainer.getAttribute("aria-label")).toEqual("First Label");
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,46 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-tooltip",
-    component: "dx-tooltip",
-    argTypes: {
-        placement: {
-            defaultValue: "top",
-            control: {
-                type: "select",
-                options: [
-                    "top",
-                    "top-left",
-                    "top-right",
-                    "bottom",
-                    "bottom-left",
-                    "bottom-right",
-                    "left",
-                    "right"
-                ]
-            }
-        },
-        label: {
-            defaultValue: "Hello, world!",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        .story-container {
-            margin: 100px;
-        }
-    </style>`;
-
-// prettier-ignore
-export const Default = (args: any) => html `${createStyles()}
-    <div class="story-container">
-        <dx-tooltip label="${args.label}" placement="${args.placement}">
-            <button>Hover</button>
-        </dx-tooltip>
-    </div>`;

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

@@ -1,215 +0,0 @@
-import { InternalTreeNode, TreeNode } from "typings/custom";
-
-export const SAMPLE_TREE_ONE_LEVEL: TreeNode = {
-    label: "Getting started",
-    name: "started",
-    isExpanded: true,
-    children: [
-        {
-            label: "Introduction",
-            name: "introduction"
-        },
-        {
-            label: "Getting started",
-            name: "started-child"
-        },
-        {
-            label: "Authentication",
-            name: "authentication"
-        },
-        {
-            label: "Token",
-            name: "token"
-        },
-        {
-            label: "Error",
-            name: "error"
-        },
-        {
-            label: "Limits",
-            name: "limit"
-        },
-        {
-            label: "Release note",
-            name: "release-note"
-        }
-    ]
-};
-
-export const SAMPLE_TREE_MULTIPLE_LEVELS: TreeNode = {
-    label: "Einstein Vision",
-    name: "einstein-vision",
-    children: [
-        {
-            label: "Introduction",
-            name: "introduction"
-        },
-        {
-            label: "Terminology",
-            name: "terminology"
-        },
-        {
-            label: "Object detection quickstart for beginner",
-            name: "object-quickstart",
-            children: [
-                {
-                    label: "Scenario",
-                    name: "scenario",
-                    children: [
-                        {
-                            label: "Scenario A",
-                            name: "scenario-a"
-                        },
-                        {
-                            label: "Scenario B",
-                            name: "scenario-b"
-                        }
-                    ]
-                },
-                {
-                    label: "Prerequisites",
-                    name: "prerequisites"
-                }
-            ]
-        },
-        {
-            label: "Best Practices",
-            name: "best-practices"
-        }
-    ]
-};
-
-export const SAMPLE_TREE_WITH_LINKS: TreeNode = {
-    label: "Introduction",
-    name: "introduction",
-    isExpanded: true,
-    children: [
-        {
-            label: "Generate an OAuth Token",
-            name: "oauth-token",
-            link: {
-                href: "/oauth"
-            }
-        },
-        {
-            label: "Delete a Refresh Token",
-            name: "refresh-token",
-            link: {
-                href: "/refresh"
-            }
-        },
-        {
-            label: "Get API Usage",
-            name: "api-usage",
-            link: {
-                href: "/usage"
-            }
-        },
-        {
-            label: "Error",
-            name: "error",
-            link: {
-                href: "/error"
-            }
-        },
-        {
-            label: "External",
-            name: "external",
-            children: [
-                {
-                    label: "Salesforce",
-                    name: "salesforce",
-                    link: {
-                        href: "https://www.salesforce.com/",
-                        target: "_blank"
-                    }
-                },
-                {
-                    label: "Google",
-                    name: "google",
-                    link: {
-                        href: "https://www.google.com/",
-                        target: "_blank"
-                    }
-                }
-            ]
-        }
-    ]
-};
-
-export const SAMPLE_TREE_WITH_BADGES: TreeNode = {
-    label: "Getting started",
-    name: "started",
-    isExpanded: true,
-    children: [
-        {
-            label: "Introduction",
-            name: "introduction",
-            method: "post"
-        },
-        {
-            label: "Getting started",
-            name: "started-child",
-            method: "get"
-        },
-        {
-            label: "Authentication",
-            name: "authentication",
-            method: "delete"
-        },
-        {
-            label: "Token",
-            name: "token",
-            method: "patch"
-        },
-        {
-            label: "Error",
-            name: "error",
-            method: "put"
-        },
-        {
-            label: "Limits",
-            name: "limit",
-            method: "get"
-        },
-        {
-            label: "Release note",
-            name: "release-note",
-            method: "post"
-        }
-    ]
-};
-
-export const INITIALIZE_MOCK_PARAMETER: TreeNode = {
-    label: "Test Label",
-    name: "test-name",
-    isExpanded: true,
-    link: {
-        href: "https://salesforce.com",
-        target: "_blank"
-    }
-};
-
-export const INITIALIZE_MOCK_RESULT: InternalTreeNode = {
-    ...INITIALIZE_MOCK_PARAMETER,
-    key: "0",
-    level: 0,
-    children: []
-};
-
-export const MOCK_TILE_DETAIL = {
-    detail: {
-        key: "0.1",
-        name: "test name"
-    },
-    composed: true,
-    bubble: true
-};
-
-export const MOCK_ICON_DETAIL = {
-    detail: {
-        key: "0.1"
-    },
-    composed: true,
-    bubble: true
-};