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

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"
-    }
-};

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

@@ -1,370 +0,0 @@
-import {
-    SINGLE_NODE,
-    NODE_WITH_CHILDREN,
-    SINGLE_NODE_WITH_LINK
-} from "./mockProps";
-import TreeItem from "dx/treeItem";
-import TreeTile from "dx/treeTile";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-tree-item";
-const renderComponent = createRenderComponent(TAG, TreeItem);
-
-const assertTile = (tile: TreeTile, properties: { [key: string]: any }) =>
-    Object.keys(properties).forEach((key) =>
-        expect(tile).toHaveProperty(key, properties[key])
-    );
-
-describe(TAG, () => {
-    describe("render", () => {
-        it("should render as the root with children collapsed", () => {
-            const component = renderComponent({
-                treeNode: NODE_WITH_CHILDREN,
-                isRoot: true
-            });
-
-            const link = component.shadowRoot.querySelector("a");
-            expect(link).toBeNull();
-
-            const button: HTMLElement = component.shadowRoot.querySelector(
-                "button"
-            );
-            expect(button).not.toBeNull();
-            expect(button.getAttribute("aria-label")).toBe(
-                NODE_WITH_CHILDREN.label
-            );
-
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "button > dx-tree-tile"
-            );
-            expect(tile).not.toBeNull();
-            assertTile(tile, {
-                isRoot: true,
-                treeNode: NODE_WITH_CHILDREN,
-                isExpanded: false,
-                hasChildren: true,
-                isSelected: false
-            });
-
-            const childTreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            expect(childTreeItem).toBeNull();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render the children when it's expanded", () => {
-            const treeNode = { ...NODE_WITH_CHILDREN, isExpanded: true };
-            const component = renderComponent({
-                treeNode
-            });
-
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "button > dx-tree-tile"
-            );
-            expect(tile).not.toBeNull();
-            assertTile(tile, {
-                isRoot: false,
-                treeNode,
-                isExpanded: true,
-                hasChildren: true,
-                isSelected: false
-            });
-
-            const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                "dx-tree-item"
-            );
-            expect(children).toHaveLength(NODE_WITH_CHILDREN.children!.length);
-
-            children.forEach((child, index) => {
-                expect(child.treeNode).toEqual(
-                    NODE_WITH_CHILDREN.children![index]
-                );
-            });
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render as a selected link", () => {
-            const component = renderComponent({
-                treeNode: SINGLE_NODE_WITH_LINK,
-                selectedKey: SINGLE_NODE_WITH_LINK.key
-            });
-
-            const link: HTMLElement = component.shadowRoot.querySelector("a");
-            expect(link).not.toBeNull();
-
-            expect(link.getAttribute("href")).toBe(
-                SINGLE_NODE_WITH_LINK.link!.href
-            );
-            expect(link.getAttribute("target")).toBe(
-                SINGLE_NODE_WITH_LINK.link!.target
-            );
-
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
-            expect(tile).not.toBeNull();
-            assertTile(tile, {
-                isRoot: false,
-                treeNode: SINGLE_NODE_WITH_LINK,
-                isExpanded: false,
-                hasChildren: false,
-                isSelected: true
-            });
-
-            const anyChild: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            expect(anyChild).toBeNull();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render as a link with default target", () => {
-            const expectedPath = "/path";
-            const component = renderComponent({
-                treeNode: {
-                    ...SINGLE_NODE_WITH_LINK,
-                    link: { href: expectedPath }
-                }
-            });
-
-            const link: HTMLElement = component.shadowRoot.querySelector("a");
-            expect(link).not.toBeNull();
-
-            expect(link.getAttribute("href")).toBe(expectedPath);
-            expect(link.getAttribute("target")).toBe("_self");
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should not render as a selected node if key does not match", () => {
-            const component = renderComponent({
-                treeNode: SINGLE_NODE_WITH_LINK,
-                selectedKey: "not_this"
-            });
-
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
-            expect(tile).not.toBeNull();
-            assertTile(tile, {
-                isRoot: false,
-                treeNode: SINGLE_NODE_WITH_LINK,
-                isExpanded: false,
-                hasChildren: false,
-                isSelected: false
-            });
-
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    describe("interactions", () => {
-        const mockExpandCollapse = jest.fn();
-        const mockTileSelected = jest.fn();
-
-        afterEach(() => {
-            jest.resetAllMocks();
-        });
-
-        it("should render the children when the dx-tree-tile emits iconclick", () => {
-            const component = renderComponent({
-                treeNode: NODE_WITH_CHILDREN
-            });
-
-            component.addEventListener("expandcollapse", mockExpandCollapse);
-            component.addEventListener("tileselected", mockTileSelected);
-
-            const anyChild: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
-            expect(anyChild).toBeNull();
-
-            const tile: HTMLElement = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            )!;
-            expect(tile).toHaveProperty("isExpanded", false);
-            tile.dispatchEvent(new CustomEvent("iconclick"));
-
-            return Promise.resolve().then(() => {
-                const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                    "dx-tree-item"
-                );
-                expect(children).toHaveLength(
-                    NODE_WITH_CHILDREN.children!.length
-                );
-
-                expect(tile).toHaveProperty("isExpanded", true);
-
-                expect(mockExpandCollapse).toBeCalledTimes(1);
-                expect(mockTileSelected).not.toBeCalled();
-
-                const [singleCall] = mockExpandCollapse.mock.calls[0];
-                expect(singleCall.detail).toEqual({
-                    key: NODE_WITH_CHILDREN.key
-                });
-                expect(singleCall.composed).toBe(true);
-                expect(singleCall.bubbles).toBe(true);
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should hide the children when the tile is expanded and dx-tree-tile emits iconclick", () => {
-            const component = renderComponent({
-                treeNode: { ...NODE_WITH_CHILDREN, isExpanded: true }
-            });
-
-            component.addEventListener("expandcollapse", mockExpandCollapse);
-            component.addEventListener("tileselected", mockTileSelected);
-
-            const tile: HTMLElement = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
-            expect(tile).toHaveProperty("isExpanded", true);
-
-            const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                "dx-tree-item"
-            );
-            expect(children).toHaveLength(NODE_WITH_CHILDREN.children!.length);
-
-            tile.dispatchEvent(new CustomEvent("iconclick"));
-
-            return Promise.resolve().then(() => {
-                expect(tile).toHaveProperty("isExpanded", false);
-
-                const anyChild: TreeItem = component.shadowRoot.querySelector(
-                    "dx-tree-item"
-                );
-                expect(anyChild).toBeNull();
-
-                expect(mockExpandCollapse).toBeCalledTimes(1);
-                expect(mockTileSelected).not.toBeCalled();
-
-                const [singleCall] = mockExpandCollapse.mock.calls[0];
-                expect(singleCall.detail).toEqual({
-                    key: NODE_WITH_CHILDREN.key
-                });
-                expect(singleCall.composed).toBe(true);
-                expect(singleCall.bubbles).toBe(true);
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should dispatch selectedtile and expandcollapse event as it has children", () => {
-            const component = renderComponent({
-                treeNode: NODE_WITH_CHILDREN
-            });
-
-            component.addEventListener("tileselected", mockTileSelected);
-            component.addEventListener("expandcollapse", mockExpandCollapse);
-
-            const button: HTMLElement = component.shadowRoot.querySelector(
-                "button"
-            );
-            expect(button).not.toBeNull();
-            button.click();
-
-            return Promise.resolve().then(() => {
-                expect(mockExpandCollapse).toBeCalledTimes(1);
-                const [expandCall] = mockExpandCollapse.mock.calls[0];
-                expect(expandCall.detail).toEqual({
-                    key: NODE_WITH_CHILDREN.key
-                });
-                expect(expandCall.composed).toBe(true);
-                expect(expandCall.bubbles).toBe(true);
-
-                expect(mockTileSelected).toBeCalledTimes(1);
-                const [tileCall] = mockTileSelected.mock.calls[0];
-                expect(tileCall.detail).toEqual({
-                    name: NODE_WITH_CHILDREN.name,
-                    key: NODE_WITH_CHILDREN.key
-                });
-                expect(tileCall.composed).toBe(true);
-                expect(tileCall.bubbles).toBe(true);
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should keep the tile as selected and not dispatch expandcollapse", () => {
-            const component = renderComponent({
-                treeNode: SINGLE_NODE,
-                selectedKey: NODE_WITH_CHILDREN.key
-            });
-
-            component.addEventListener("tileselected", mockTileSelected);
-            component.addEventListener("expandcollapse", mockExpandCollapse);
-
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
-            expect(tile).toHaveProperty("isSelected", true);
-
-            const button: HTMLElement = component.shadowRoot.querySelector(
-                "button"
-            );
-            expect(button).not.toBeNull();
-            button.click();
-
-            return Promise.resolve().then(() => {
-                expect(tile).toHaveProperty("isSelected", true);
-                expect(mockExpandCollapse).not.toBeCalled();
-
-                expect(mockTileSelected).toBeCalledTimes(1);
-                const [tileCall] = mockTileSelected.mock.calls[0];
-                expect(tileCall.detail).toEqual({
-                    name: NODE_WITH_CHILDREN.name,
-                    key: NODE_WITH_CHILDREN.key
-                });
-                expect(tileCall.composed).toBe(true);
-                expect(tileCall.bubbles).toBe(true);
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        it("should fire a register event when is connected and can expand with provided setExpanded function", () => {
-            const mockRegister = jest.fn();
-            document.addEventListener("register", mockRegister);
-
-            const component = renderComponent({
-                treeNode: NODE_WITH_CHILDREN,
-                isRoot: true
-            });
-
-            expect(mockRegister).toBeCalledTimes(1);
-            const {
-                key: actualKey,
-                setExpanded
-            } = mockRegister.mock.calls[0][0].detail;
-            expect(actualKey).toBe(NODE_WITH_CHILDREN.key);
-            expect(typeof setExpanded).toBe("function");
-
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
-            expect(tile).not.toBeNull();
-            expect(tile).toHaveProperty("isExpanded", false);
-
-            expect(
-                component.shadowRoot.querySelector("dx-tree-item")
-            ).toBeNull();
-
-            setExpanded(true);
-
-            return Promise.resolve().then(() => {
-                expect(tile).toHaveProperty("isExpanded", true);
-
-                const trees = component.shadowRoot.querySelectorAll(
-                    "dx-tree-item"
-                );
-                expect(trees).toHaveLength(NODE_WITH_CHILDREN.children!.length);
-            });
-        });
-    });
-});

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

@@ -1,16 +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 SINGLE_NODE_WITH_METHOD: InternalTreeNode = {
-    label: "Test label",
-    name: "test-name",
-    key: "0.1",
-    level: 1,
-    method: "get"
-};