@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,215 @@
+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

@@ -0,0 +1,346 @@
+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();
+        });
+    });
+});