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

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

@@ -0,0 +1,377 @@
+import {
+    SINGLE_NODE,
+    NODE_WITH_CHILDREN,
+    SINGLE_NODE_WITH_LINK
+} from "./mockProps";
+import { track } from "dx/instrumentation";
+import TreeItem from "dx/treeItem";
+import TreeTile from "dx/treeTile";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-tree-item";
+const renderComponent = createRenderComponent(TAG, TreeItem);
+
+jest.mock("dx/instrumentation");
+
+const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
+
+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).not.toBeNull();
+
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > 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("a > 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();
+
+        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"));
+
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(tile, GTM_EVENT_NAME, {
+                clickText: NODE_WITH_CHILDREN.label,
+                sideNavAction: "expand"
+            });
+
+            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"));
+
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(tile, GTM_EVENT_NAME, {
+                clickText: NODE_WITH_CHILDREN.label,
+                sideNavAction: "collapse"
+            });
+
+            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 link: HTMLElement = component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            link.click();
+
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(link, GTM_EVENT_NAME, {
+                clickText: NODE_WITH_CHILDREN.label,
+                sideNavAction: "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 link: HTMLElement = component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+            link.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);
+            });
+        });
+
+        it("should call track from dx/instrumentation when link is clicked", () => {
+            const component = renderComponent({
+                treeNode: SINGLE_NODE_WITH_LINK
+            });
+
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
+            expect(link).not.toBeNull();
+
+            link.click();
+
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(link, GTM_EVENT_NAME, {
+                clickText: SINGLE_NODE_WITH_LINK.label,
+                sideNavAction: "click"
+            });
+        });
+    });
+});

package/src/modules/dx/treeItem/treeItem.css

@@ -0,0 +1,14 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+}
+
+button {
+    width: 100%;
+    text-align: left;
+}
+
+button:focus {
+    outline-offset: -1px;
+}

package/src/modules/dx/treeItem/treeItem.html

@@ -0,0 +1,22 @@
+<template>
+    <a href={href} target={target} onclick={onLinkClick}>
+        <dx-tree-tile
+            href={href}
+            is-root={isRoot}
+            tree-node={treeNode}
+            is-expanded={isExpanded}
+            has-children={hasChildren}
+            is-selected={isSelected}
+            oniconclick={onIconClick}
+        ></dx-tree-tile>
+    </a>
+    <template if:true={showChildren}>
+        <template for:each={treeNode.children} for:item="child">
+            <dx-tree-item
+                key={child.key}
+                tree-node={child}
+                selected-key={selectedKey}
+            ></dx-tree-item>
+        </template>
+    </template>
+</template>

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

@@ -0,0 +1,110 @@
+import { LightningElement, api } from "lwc";
+import { InternalTreeNode } from "typings/custom";
+import { track } from "dx/instrumentation";
+import { SidebarGtmAction } from "typings/custom";
+
+const DEFAULT_TARGET = "_self";
+
+export default class TreeItem extends LightningElement {
+    @api selectedKey?: string;
+    @api isRoot: boolean = false;
+
+    @api
+    public get treeNode() {
+        return this._treeNode;
+    }
+
+    public set treeNode(node) {
+        this._treeNode = node;
+        this.isExpanded = (node && node.isExpanded) || false;
+    }
+
+    private _treeNode!: InternalTreeNode;
+    private isExpanded: boolean = false;
+
+    private get isSelected(): boolean {
+        return this._treeNode.key === this.selectedKey;
+    }
+
+    private get hasChildren(): boolean {
+        return !!(
+            this.treeNode &&
+            this.treeNode.children &&
+            this.treeNode.children.length > 0
+        );
+    }
+
+    private get showChildren(): boolean {
+        return this.isExpanded && this.hasChildren;
+    }
+
+    private get href(): string | undefined {
+        return (
+            (this._treeNode.link && this._treeNode.link.href) ||
+            this._treeNode.name ||
+            ""
+        );
+    }
+
+    private get target(): string {
+        return (
+            (this._treeNode.link && this._treeNode.link.target) ||
+            DEFAULT_TARGET
+        );
+    }
+
+    connectedCallback(): void {
+        if (this.hasChildren) {
+            this.fireEvent("register", {
+                setExpanded: this.setExpanded.bind(this)
+            });
+        }
+    }
+
+    private onIconClick(event: CustomEvent): void {
+        this.doExpand();
+        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+    }
+
+    private onLinkClick(event: Event): void {
+        if (!(this._treeNode.link && this._treeNode.link.href)) {
+            event.preventDefault();
+        }
+
+        if (this.hasChildren) {
+            this.doExpand();
+        }
+
+        this.sendGtm(event, "click");
+        this.fireEvent("tileselected", { name: this._treeNode.name });
+    }
+
+    private doExpand(): void {
+        this.isExpanded = !this.isExpanded;
+        this.fireEvent("expandcollapse");
+    }
+
+    private fireEvent(type: string, detail = {}): void {
+        this.dispatchEvent(
+            new CustomEvent(type, {
+                detail: {
+                    ...detail,
+                    key: this._treeNode.key
+                },
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private setExpanded(value: boolean): void {
+        this.isExpanded = value;
+    }
+
+    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            clickText: this._treeNode.label,
+            sideNavAction
+        });
+    }
+}

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

@@ -0,0 +1,16 @@
+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"
+};