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

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

@@ -1,346 +0,0 @@
-import Tree from "dx/tree";
-import TreeItem from "dx/treeItem";
-import { createRenderComponent } from "utils-internal/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);
-    });
-
-    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();
-        });
-    });
-});

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

@@ -1,194 +0,0 @@
-import { TreeHandler } from "../treeHandler";
-import { TreeNode, InternalTreeNode } from "typings/custom";
-import {
-    SAMPLE_TREE_MULTIPLE_LEVELS,
-    SAMPLE_TREE_ONE_LEVEL,
-    SAMPLE_TREE_WITH_LINKS
-} from "./mockProps";
-
-const assertTreeNode = (
-    internalTree: InternalTreeNode,
-    tree: TreeNode,
-    expectedLevel: number,
-    expectedKey: string
-) => {
-    expect(internalTree.label).toBe(tree.label);
-    expect(internalTree.name).toBe(tree.name);
-    expect(internalTree.isExpanded).toBe(tree.isExpanded || false);
-    expect(internalTree.link).toEqual(tree.link);
-    expect(internalTree.level).toBe(expectedLevel);
-    expect(internalTree.key).toBe(expectedKey);
-
-    if (internalTree.children) {
-        expect(internalTree.children).toHaveLength(tree.children!.length);
-        internalTree.children.forEach((child, index) => {
-            assertTreeNode(
-                child as InternalTreeNode,
-                tree.children![index],
-                expectedLevel + 1,
-                `${expectedKey}.${index}`
-            );
-        });
-    }
-};
-
-const getAllKeys = (tree: InternalTreeNode): Array<string> => {
-    if (!tree.children || tree.children.length === 0) {
-        return [tree.key];
-    }
-    const keys: Array<string> = [];
-    tree.children.forEach((child: InternalTreeNode) => {
-        keys.push(...getAllKeys(child));
-    });
-
-    return keys;
-};
-
-describe("TreeHandler", () => {
-    describe("initialize", () => {
-        it("should convert a single level tree structure into the internal structure", () => {
-            const treeHandler = new TreeHandler();
-            const result = treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
-            expect(result).toBeTruthy();
-            assertTreeNode(result, SAMPLE_TREE_ONE_LEVEL, 0, "0");
-        });
-
-        it("should convert a multiple level tree structure into the internal structure", () => {
-            const treeHandler = new TreeHandler();
-            const result = treeHandler.initialize(SAMPLE_TREE_MULTIPLE_LEVELS);
-            expect(result).toBeTruthy();
-            assertTreeNode(result, SAMPLE_TREE_MULTIPLE_LEVELS, 0, "0");
-        });
-
-        it("should convert a tree structure with links into the internal structure", () => {
-            const treeHandler = new TreeHandler();
-            const result = treeHandler.initialize(SAMPLE_TREE_WITH_LINKS);
-            expect(result).toBeTruthy();
-            assertTreeNode(result, SAMPLE_TREE_WITH_LINKS, 0, "0");
-        });
-    });
-
-    describe("getNode", () => {
-        it("should return a node when key exist", () => {
-            const treeHandler = new TreeHandler();
-            const treeStructure = treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
-            expect(treeHandler.getNode(treeStructure.key)).toEqual(
-                treeStructure
-            );
-
-            treeStructure.children!.forEach((child) => {
-                expect(
-                    treeHandler.getNode((child as InternalTreeNode).key)
-                ).toEqual(child);
-            });
-        });
-
-        it("should return undefined in case the key does not exist", () => {
-            const treeHandler = new TreeHandler();
-            treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
-            expect(treeHandler.getNode("not_exist")).toBeUndefined();
-        });
-    });
-
-    describe("getKeyByName", () => {
-        it("should return the key value if name exist", () => {
-            const treeHandler = new TreeHandler();
-            const treeStructure = treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
-            expect(treeHandler.getKeyByName(treeStructure.name)).toBe(
-                treeStructure.key
-            );
-
-            treeStructure.children!.forEach((child) => {
-                const { key, name } = child as InternalTreeNode;
-                expect(treeHandler.getKeyByName(name)).toBe(key);
-            });
-        });
-
-        it("should return undefined in case the name does not exist", () => {
-            const treeHandler = new TreeHandler();
-            treeHandler.initialize(SAMPLE_TREE_ONE_LEVEL);
-            expect(treeHandler.getKeyByName("not_exist")).toBeUndefined();
-        });
-    });
-
-    describe("expandToSelected", () => {
-        it("should mark a node as isExpanded recursively until the root", () => {
-            const expectedKeys = ["0.2.0", "0.2", "0"];
-            const treeHandler = new TreeHandler();
-            const treeStructure = treeHandler.initialize(
-                SAMPLE_TREE_MULTIPLE_LEVELS
-            );
-            treeHandler.expandToSelected(expectedKeys[0]);
-
-            expectedKeys.forEach((expectedKey) =>
-                expect(treeHandler.getNode(expectedKey)!.isExpanded).toBe(true)
-            );
-            getAllKeys(treeStructure)
-                .filter((key) =>
-                    expectedKeys.some((expectedKey) => expectedKey !== key)
-                )
-                .forEach((key) =>
-                    expect(treeHandler.getNode(key)!.isExpanded).toBeFalsy()
-                );
-        });
-
-        it("should not mark any node as isExpanded if no key is provided", () => {
-            const treeHandler = new TreeHandler();
-            const treeStructure = treeHandler.initialize(
-                SAMPLE_TREE_MULTIPLE_LEVELS
-            );
-            treeHandler.expandToSelected();
-            getAllKeys(treeStructure).forEach((key) =>
-                expect(treeHandler.getNode(key)!.isExpanded).toBeFalsy()
-            );
-        });
-
-        it("should not mark any node as isExpanded if provided key does not exist", () => {
-            const treeHandler = new TreeHandler();
-            const treeStructure = treeHandler.initialize(
-                SAMPLE_TREE_MULTIPLE_LEVELS
-            );
-            treeHandler.expandToSelected("not_exist");
-            getAllKeys(treeStructure).forEach((key) =>
-                expect(treeHandler.getNode(key)!.isExpanded).toBeFalsy()
-            );
-        });
-    });
-
-    describe("registerSetExpanded", () => {
-        it("should register a setExpanded callback if key is valid", () => {
-            const treeHandler = new TreeHandler();
-            const treeStructure = treeHandler.initialize(
-                SAMPLE_TREE_MULTIPLE_LEVELS
-            );
-
-            const { key } = treeStructure;
-            const mockSetExpanded = jest.fn();
-
-            treeHandler.registerSetExpanded({
-                key,
-                setExpanded: mockSetExpanded
-            });
-
-            treeHandler.expandToSelected(key);
-            expect(mockSetExpanded).toBeCalledTimes(1);
-            expect(mockSetExpanded).toBeCalledWith(true);
-        });
-
-        it("should not register a not valid key", () => {
-            const treeHandler = new TreeHandler();
-            treeHandler.initialize(SAMPLE_TREE_MULTIPLE_LEVELS);
-
-            const key = "not_valid";
-            const mockSetExpanded = jest.fn();
-
-            treeHandler.registerSetExpanded({
-                key,
-                setExpanded: mockSetExpanded
-            });
-
-            treeHandler.expandToSelected(key);
-            expect(mockSetExpanded).not.toBeCalled();
-        });
-    });
-});

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

@@ -1,65 +0,0 @@
-import {
-    SAMPLE_TREE_MULTIPLE_LEVELS,
-    SAMPLE_TREE_ONE_LEVEL,
-    SAMPLE_TREE_WITH_BADGES,
-    SAMPLE_TREE_WITH_LINKS
-} from "./__tests__/mockProps";
-
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-tree",
-    component: "dx-tree"
-};
-
-// prettier-ignore
-const styles = (addStyles: string = "") => html `
-    <style>
-        .tree {
-            max-width: 300px;
-            background-color: var(--dx-g-gray-95);
-            ${addStyles}
-        }
-    </style>`;
-
-const oneLevelTreeRoot = JSON.stringify(SAMPLE_TREE_ONE_LEVEL);
-const multipleLevelsTreeRoot = JSON.stringify(SAMPLE_TREE_MULTIPLE_LEVELS);
-const treeLinksTreeRoot = JSON.stringify(SAMPLE_TREE_WITH_LINKS);
-const treeWithBadges = JSON.stringify(SAMPLE_TREE_WITH_BADGES);
-
-// prettier-ignore
-export const Base = () => html` ${styles()}
-    <dx-tree
-        class="tree"
-        tree-root="${oneLevelTreeRoot}"
-    ></dx-tree>`;
-
-// prettier-ignore
-export const MultilevelWithValue = () => html` ${styles()}
-    <dx-tree
-        class="tree"
-        value="scenario"
-        tree-root="${multipleLevelsTreeRoot}"
-    ></dx-tree>`;
-
-// prettier-ignore
-export const MultipleLevels = () => html` ${styles()}
-    <dx-tree
-        class="tree"
-        tree-root="${multipleLevelsTreeRoot}"
-    ></dx-tree>`;
-
-// prettier-ignore
-export const WithLinks = () => html` ${styles()}
-    <dx-tree
-        class="tree"
-        tree-root="${treeLinksTreeRoot}"
-    ></dx-tree>`;
-
-MultipleLevels.story = { parameters: { docs: { disable: true } } };
-WithLinks.story = { parameters: { docs: { disable: true } } };
-
-export const WithMethodBadges = () => html`
-    ${styles()}
-    <dx-tree class="tree" tree-root="${treeWithBadges}"></dx-tree>
-`;

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

@@ -1,46 +0,0 @@
-import { InternalTreeNode } from "typings/custom";
-
-export const SINGLE_NODE: InternalTreeNode = {
-    label: "Test label",
-    name: "test-name",
-    key: "0.1",
-    level: 1
-};
-
-export const NODE_WITH_CHILDREN: InternalTreeNode = {
-    label: "Test label",
-    name: "test-name",
-    key: "0.1",
-    level: 1,
-    children: [
-        {
-            label: "First Child",
-            name: "first-child",
-            key: "0.1.0",
-            level: 2
-        },
-        {
-            label: "Second Child",
-            name: "second-child",
-            key: "0.1.1",
-            level: 2
-        },
-        {
-            label: "Third Child",
-            name: "third-child",
-            key: "0.1.2",
-            level: 2
-        }
-    ]
-};
-
-export const SINGLE_NODE_WITH_LINK: InternalTreeNode = {
-    label: "Test label",
-    name: "test-name",
-    key: "0.1",
-    level: 1,
-    link: {
-        href: "https://salesforce.com",
-        target: "_parent"
-    }
-};