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

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

@@ -1,65 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-tooltip",
-    component: "dx-tooltip",
-    argTypes: {
-        placement: {
-            defaultValue: "top-end",
-            control: {
-                type: "select",
-                options: [
-                    "auto",
-                    "auto-end",
-                    "auto-start",
-
-                    "bottom",
-                    "bottom-end",
-                    "bottom-start",
-
-                    "left",
-                    "left-end",
-                    "left-start",
-
-                    "right",
-                    "right-end",
-                    "right-start",
-
-                    "top",
-                    "top-end",
-                    "top-start"
-                ]
-            }
-        },
-        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>`;
-
-// prettier-ignore
-export const PersistOnClick = (args: any) => html `${createStyles()}
-    <div class="story-container">
-        <dx-tooltip label="${args.label}" persist=${true} placement="${args.placement}">
-            <button>Hover and click</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
-};

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

@@ -1,357 +0,0 @@
-import Tree from "dx/tree";
-import TreeItem from "dx/treeItem";
-import { createRenderComponent } from "utils/tests";
-import { TreeHandler } from "../treeHandler";
-import {
-    INITIALIZE_MOCK_PARAMETER,
-    INITIALIZE_MOCK_RESULT,
-    MOCK_TILE_DETAIL,
-    MOCK_ICON_DETAIL
-} from "./mockProps";
-
-const TAG = "dx-tree";
-const renderComponent = createRenderComponent(TAG, Tree);
-
-const mockInitialize = jest.fn();
-const mockGetKeyByName = jest.fn();
-const mockGetNode = jest.fn();
-const mockExpandToSelected = jest.fn();
-const mockRegisterSetExpanded = jest.fn();
-
-jest.mock("../treeHandler", () => {
-    return {
-        TreeHandler: jest.fn().mockImplementation(() => {
-            return {
-                initialize: mockInitialize,
-                getNode: mockGetNode,
-                getKeyByName: mockGetKeyByName,
-                expandToSelected: mockExpandToSelected,
-                registerSetExpanded: mockRegisterSetExpanded
-            };
-        })
-    };
-});
-
-describe(TAG, () => {
-    beforeEach(() => {
-        mockInitialize.mockReturnValue(INITIALIZE_MOCK_RESULT);
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    describe("component render", () => {
-        it("should render dx-tree-item with appropiate properties", () => {
-            const component = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER
-            });
-            expect(component.treeRoot).toEqual(INITIALIZE_MOCK_RESULT);
-            expect(component.value).toBeUndefined();
-
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            expect(treeItem).not.toBeNull();
-            expect(treeItem.treeNode).toEqual(INITIALIZE_MOCK_RESULT);
-            expect(treeItem.isRoot).toBe(true);
-            expect(treeItem.selectedKey).toBeUndefined();
-
-            expect(TreeHandler).toHaveBeenCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledWith(
-                INITIALIZE_MOCK_PARAMETER
-            );
-            expect(mockGetKeyByName).not.toBeCalled();
-            expect(mockGetNode).not.toBeCalled();
-            expect(mockExpandToSelected).not.toBeCalled();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render dx-tree-item with treeRoot assigned as json and provided value", () => {
-            const expectedKey = INITIALIZE_MOCK_RESULT.key;
-            mockGetKeyByName.mockReturnValue(expectedKey);
-
-            const component = renderComponent({
-                treeRoot: JSON.stringify(INITIALIZE_MOCK_PARAMETER),
-                value: INITIALIZE_MOCK_PARAMETER.name
-            });
-
-            expect(component.treeRoot).toEqual(INITIALIZE_MOCK_RESULT);
-            expect(component.value).toBe(INITIALIZE_MOCK_PARAMETER.name);
-
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            expect(treeItem).not.toBeNull();
-            expect(treeItem.treeNode).toEqual(INITIALIZE_MOCK_RESULT);
-            expect(treeItem.isRoot).toBe(true);
-            expect(treeItem.selectedKey).toBe(expectedKey);
-
-            expect(TreeHandler).toHaveBeenCalledTimes(1);
-
-            expect(mockInitialize).toHaveBeenCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledWith(
-                INITIALIZE_MOCK_PARAMETER
-            );
-
-            expect(mockGetKeyByName).toBeCalledTimes(1);
-            expect(mockGetKeyByName).toHaveBeenCalledWith(
-                INITIALIZE_MOCK_PARAMETER.name
-            );
-
-            expect(mockExpandToSelected).toBeCalledTimes(1);
-            expect(mockExpandToSelected).toHaveBeenCalledWith(expectedKey);
-
-            expect(mockGetNode).not.toBeCalled();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should update selectedKey to undefined if assigned value name does not exist", () => {
-            const expectedValue = "not_exist";
-            const validKey = "0.1";
-
-            mockGetKeyByName
-                .mockReturnValueOnce(validKey)
-                .mockReturnValueOnce(undefined);
-
-            const component = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER,
-                value: INITIALIZE_MOCK_PARAMETER.name
-            });
-
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            expect(treeItem).not.toBeNull();
-            expect(treeItem.selectedKey).toBe(validKey);
-
-            component.value = expectedValue;
-            expect(component.value).toBe(expectedValue);
-
-            expect(TreeHandler).toHaveBeenCalledTimes(1);
-
-            expect(mockInitialize).toHaveBeenCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledWith(
-                INITIALIZE_MOCK_PARAMETER
-            );
-
-            expect(mockGetKeyByName).toBeCalledTimes(2);
-            expect(mockGetKeyByName).toHaveBeenNthCalledWith(
-                1,
-                INITIALIZE_MOCK_PARAMETER.name
-            );
-            expect(mockGetKeyByName).toHaveBeenNthCalledWith(2, expectedValue);
-
-            expect(mockExpandToSelected).toHaveBeenCalledTimes(2);
-            expect(mockExpandToSelected).toHaveBeenNthCalledWith(1, validKey);
-            expect(mockExpandToSelected).toHaveBeenNthCalledWith(2, undefined);
-
-            expect(mockGetNode).not.toBeCalled();
-            return Promise.resolve().then(() => {
-                expect(treeItem.selectedKey).toBeUndefined();
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should update selectedKey when value is defined before treeRoot", () => {
-            const expectedKey = INITIALIZE_MOCK_RESULT.key;
-            mockGetKeyByName.mockReturnValue(expectedKey);
-
-            const component = renderComponent({
-                value: INITIALIZE_MOCK_PARAMETER.name
-            });
-            component.treeRoot = INITIALIZE_MOCK_PARAMETER;
-
-            expect(TreeHandler).toHaveBeenCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledWith(
-                INITIALIZE_MOCK_PARAMETER
-            );
-
-            expect(mockGetKeyByName).toBeCalledTimes(1);
-            expect(mockGetKeyByName).toBeCalledWith(
-                INITIALIZE_MOCK_PARAMETER.name
-            );
-
-            expect(mockExpandToSelected).toHaveBeenCalledTimes(1);
-            expect(mockExpandToSelected).toHaveBeenCalledWith(expectedKey);
-
-            expect(mockGetNode).not.toBeCalled();
-
-            return Promise.resolve().then(() => {
-                const treeItem: TreeItem = component.shadowRoot.querySelector(
-                    "dx-tree-item"
-                );
-                expect(treeItem).not.toBeNull();
-                expect(treeItem.selectedKey).toBe(expectedKey);
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should not render dx-tree-item if treeRoot is not defined", () => {
-            const component = renderComponent();
-            expect(
-                component.shadowRoot.querySelector("dx-tree-item")
-            ).toBeNull();
-
-            expect(TreeHandler).not.toBeCalled();
-            expect(mockGetKeyByName).not.toBeCalled();
-            expect(mockGetNode).not.toBeCalled();
-            expect(mockInitialize).not.toBeCalled();
-            expect(mockExpandToSelected).not.toBeCalled();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should do nothing if value setter is called with the same value", () => {
-            const { name: testName } = INITIALIZE_MOCK_PARAMETER;
-            const component: Tree = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER,
-                value: testName
-            });
-
-            expect(component.value).toBe(testName);
-            expect(TreeHandler).toBeCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledTimes(1);
-            expect(mockGetKeyByName).toBeCalledTimes(1);
-
-            component.value = testName;
-
-            expect(component.value).toBe(testName);
-            expect(TreeHandler).toBeCalledTimes(1);
-            expect(mockInitialize).toHaveBeenCalledTimes(1);
-            expect(mockGetKeyByName).toBeCalledTimes(1);
-        });
-    });
-
-    describe("event handle", () => {
-        it("should handle tileselected event", () => {
-            const component = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER
-            });
-
-            const mockSelect = jest.fn();
-            component.addEventListener("select", mockSelect);
-
-            const mockTileSelected = jest.fn();
-            component.addEventListener("tileselected", mockTileSelected);
-
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            treeItem.dispatchEvent(
-                new CustomEvent("tileselected", MOCK_TILE_DETAIL)
-            );
-
-            expect(component.value).toBe(MOCK_TILE_DETAIL.detail.name);
-
-            expect(TreeHandler).toBeCalledTimes(1);
-            expect(mockInitialize).toBeCalledTimes(1);
-            expect(mockGetNode).not.toBeCalled();
-            expect(mockGetKeyByName).not.toBeCalled();
-            expect(mockExpandToSelected).not.toBeCalled();
-            expect(mockTileSelected).not.toBeCalled();
-
-            expect(mockSelect).toBeCalledTimes(1);
-
-            const singleCall: CustomEvent = mockSelect.mock.calls[0][0];
-            expect(singleCall.detail).toEqual({
-                name: MOCK_TILE_DETAIL.detail.name
-            });
-            expect(singleCall.composed).toBe(true);
-            expect(singleCall.bubbles).toBe(true);
-
-            return Promise.resolve().then(() => {
-                expect(treeItem.selectedKey).toBe(MOCK_TILE_DETAIL.detail.key);
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should handle expandcollapse event", () => {
-            const mockedResult = { isExpanded: false };
-            mockGetNode.mockReturnValue(mockedResult);
-
-            const component = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER
-            });
-
-            const mockExpandCollapse = jest.fn();
-            component.addEventListener("expandcollapse", mockExpandCollapse);
-
-            component.shadowRoot
-                .querySelector("dx-tree-item")
-                .dispatchEvent(
-                    new CustomEvent("expandcollapse", MOCK_ICON_DETAIL)
-                );
-
-            expect(TreeHandler).toBeCalledTimes(1);
-            expect(mockInitialize).toBeCalledTimes(1);
-            expect(mockGetKeyByName).not.toBeCalled();
-            expect(mockExpandToSelected).not.toBeCalled();
-
-            expect(mockGetNode).toBeCalledTimes(1);
-            expect(mockGetNode).toBeCalledWith(MOCK_ICON_DETAIL.detail.key);
-            expect(mockedResult.isExpanded).toBe(true);
-            expect(mockExpandCollapse).not.toBeCalled();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should do nothing if key is not found for expandcollapse event", () => {
-            mockGetNode.mockReturnValue(undefined);
-
-            const component = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER
-            });
-            component.shadowRoot
-                .querySelector("dx-tree-item")
-                .dispatchEvent(
-                    new CustomEvent("expandcollapse", MOCK_ICON_DETAIL)
-                );
-
-            expect(TreeHandler).toBeCalledTimes(1);
-            expect(mockInitialize).toBeCalledTimes(1);
-            expect(mockGetKeyByName).not.toBeCalled();
-            expect(mockExpandToSelected).not.toBeCalled();
-
-            expect(mockGetNode).toBeCalledTimes(1);
-            expect(mockGetNode).toBeCalledWith(MOCK_ICON_DETAIL.detail.key);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should handle register event from dx-tree-item", () => {
-            const { key } = INITIALIZE_MOCK_RESULT;
-            const detail = {
-                key,
-                setExpanded: jest.fn()
-            };
-            const component = renderComponent({
-                treeRoot: INITIALIZE_MOCK_PARAMETER
-            });
-
-            const mockRegister = jest.fn();
-            component.addEventListener("register", mockRegister);
-
-            component.shadowRoot
-                .querySelector("dx-tree-item")
-                .dispatchEvent(
-                    new CustomEvent("register", {
-                        detail,
-                        bubbles: true,
-                        composed: true
-                    })
-                );
-
-            expect(mockRegisterSetExpanded).toBeCalledTimes(1);
-            expect(mockRegisterSetExpanded).toBeCalledWith(detail);
-            expect(mockRegister).not.toBeCalled();
-        });
-    });
-});