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

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

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

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

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

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

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

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