@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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

@@ -1,400 +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/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();
-
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
-        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/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"
-};

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

@@ -1,179 +0,0 @@
-import TreeTile from "dx/treeTile";
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
-
-import { SINGLE_NODE, SINGLE_NODE_WITH_METHOD } from "./mockProps";
-
-const TAG = "dx-tree-tile";
-const render = createRenderComponent(TAG, TreeTile);
-
-const assertLevelAndLabel = (container: HTMLElement) => {
-    const levelDiv: Element = container.querySelector(
-        `[aria-level="${SINGLE_NODE.level + 2}"]`
-    )!;
-
-    expect(levelDiv).not.toBeNull();
-
-    const tileLabel: Element = levelDiv.querySelector("span.tile-label")!;
-    expect(tileLabel).not.toBeNull();
-    expect(tileLabel.textContent).toBe(SINGLE_NODE.label);
-    expect(tileLabel.getAttribute("title")).toBe(SINGLE_NODE.label);
-};
-
-describe(TAG, () => {
-    describe("render", () => {
-        it("should render as a leaf tile", () => {
-            const component = render({ treeNode: SINGLE_NODE, href: "/test" });
-            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile"
-            );
-
-            expect(tileAnchor.getAttribute("href")).toBe("/test");
-            expect(tileAnchor.classList).toHaveLength(1);
-            expect(tileAnchor).not.toBeNull();
-            assertLevelAndLabel(tileAnchor);
-
-            const arrowIcon: Icon = component.shadowRoot.querySelector(
-                "dx-icon"
-            );
-            expect(arrowIcon).toBeNull();
-
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
-            expect(typeBadge).toBeNull();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render as a root tile collapsed", () => {
-            const component = render({
-                treeNode: SINGLE_NODE,
-                isRoot: true,
-                hasChildren: true
-            });
-            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile.tile-root"
-            );
-            expect(tileAnchor).not.toBeNull();
-            expect(tileAnchor.classList).toHaveLength(2);
-            assertLevelAndLabel(tileAnchor);
-
-            const arrowIcon: Icon = component.shadowRoot.querySelector(
-                "dx-icon"
-            )!;
-            expect(arrowIcon).not.toBeNull();
-            expect(arrowIcon.getAttribute("aria-expanded")).toBe("false");
-            expect(arrowIcon.size).toBe("small");
-
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
-            expect(typeBadge).toBeNull();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render an expanded tile with no brand method", () => {
-            const component = render({
-                treeNode: SINGLE_NODE_WITH_METHOD,
-                hasChildren: true,
-                isExpanded: true
-            });
-            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile.tile-with-children"
-            );
-
-            expect(tileAnchor).not.toBeNull();
-            expect(tileAnchor.classList).toHaveLength(2);
-            assertLevelAndLabel(tileAnchor);
-
-            const arrowIcon: Icon = component.shadowRoot.querySelector(
-                "dx-icon"
-            );
-            expect(arrowIcon).not.toBeNull();
-            expect(arrowIcon.getAttribute("aria-expanded")).toBe("true");
-            expect(arrowIcon.size).toBe("xsmall");
-
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
-            expect(typeBadge).toBeNull();
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render a selected tile", () => {
-            const component = render({
-                treeNode: SINGLE_NODE,
-                isSelected: true
-            });
-            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile.tile-selected"
-            );
-            expect(tileAnchor).not.toBeNull();
-            expect(tileAnchor.classList).toHaveLength(2);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render a leaf tile with a valid brand method", () => {
-            const component = render({ treeNode: SINGLE_NODE_WITH_METHOD });
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
-
-            expect(typeBadge).not.toBeNull();
-            expect(typeBadge.classList).toHaveLength(3);
-            expect(typeBadge.classList).toContain(
-                SINGLE_NODE_WITH_METHOD.method!
-            );
-            expect(typeBadge.classList).toContain("flex");
-            expect(typeBadge.classList).toContain("tile-icon");
-            expect(typeBadge.value).toBe("GET");
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render a leaf tile with a non valid brand method", () => {
-            const method = "not_valid";
-            const component = render({
-                treeNode: { ...SINGLE_NODE_WITH_METHOD, method }
-            });
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
-
-            expect(typeBadge).not.toBeNull();
-            expect(typeBadge.classList).toHaveLength(3);
-            expect(typeBadge.classList).toContain(method);
-            expect(typeBadge.classList).toContain("flex");
-            expect(typeBadge.classList).toContain("tile-icon");
-            expect(typeBadge.value).toBe("");
-
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    describe("interactions", () => {
-        it("should fire iconclick event when the icon is clicked", () => {
-            const component = render({
-                treeNode: SINGLE_NODE_WITH_METHOD,
-                hasChildren: true,
-                isExpanded: true
-            });
-
-            const arrowIcon: HTMLElement = component.shadowRoot.querySelector(
-                "dx-icon"
-            );
-
-            const mockIconClick = jest.fn();
-            component.addEventListener("iconclick", mockIconClick);
-
-            expect(arrowIcon).not.toBeNull();
-            arrowIcon.click();
-
-            expect(mockIconClick).toBeCalledTimes(1);
-        });
-    });
-});

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

@@ -1,63 +0,0 @@
-import TypeBadge from "dx/typeBadge";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-type-badge";
-const render = createRenderComponent(TAG, TypeBadge);
-
-const value = "banana";
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render({ value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el).not.toBeNull();
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the correct value", () => {
-        const element = render({ value });
-        const span = element.shadowRoot.querySelector("div");
-        expect(span.textContent).toEqual(value);
-        expect(element.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders medium class by default", () => {
-        const element = render({ value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-medium");
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render small class", () => {
-        const element = render({ size: "small", value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-small");
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render branded badges", () => {
-        const element = render({ size: "small", brand: "industries", value });
-
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-small");
-        expect(el.getAttribute("style")).toContain(
-            `--dx-c-type-badge-color: var(--dx-g-brand-industries-color)`
-        );
-        expect(el.getAttribute("style")).toContain(
-            `--dx-c-type-badge-background: var(--dx-g-brand-industries-color-background);`
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render xs class", () => {
-        const element = render({ size: "xs", value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(element.getAttribute("style")).toBe(null);
-        expect(el.className).toContain("size-xs");
-        return expect(element).toBeAccessible();
-    });
-});