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

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

@@ -1,609 +0,0 @@
-import Button from "dx/button";
-import Input from "dx/input";
-import { track } from "dx/instrumentation";
-import Sidebar from "dx/sidebar";
-import Tree from "dx/tree";
-import { TreeNode } from "typings/custom";
-import { createMediaMock } from "utils/jest";
-import { createRenderComponent } from "utils/tests";
-import { SAMPLE_TREES } from "./mockProps";
-
-jest.mock("dx/instrumentation");
-
-const TAG = "dx-sidebar";
-const renderComponent = createRenderComponent(TAG, Sidebar);
-
-const COLLAPSED_CLASS = "collapsed";
-const EXPECTED_QUERY = "(max-width: 768px)";
-const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
-const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
-
-describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    describe("desktop", () => {
-        describe("component render", () => {
-            it("should render as expanded with all the elements that sidebar includes", () => {
-                const expectedTitle = "Super cool title";
-                const component = renderComponent({
-                    header: expectedTitle,
-                    trees: SAMPLE_TREES
-                });
-
-                expect(component.trees).toEqual(SAMPLE_TREES);
-
-                const container: HTMLElement = component.shadowRoot.querySelector(
-                    ".container"
-                );
-                expect(container).not.toBeNull();
-                expect(container.classList).not.toContain(COLLAPSED_CLASS);
-
-                const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                    ".header h2"
-                );
-                expect(headerTitle).not.toBeNull();
-                expect(headerTitle.textContent).toBe(expectedTitle);
-
-                const collapseButton: Button = component.shadowRoot.querySelector(
-                    "dx-button"
-                );
-                expect(collapseButton).not.toBeNull();
-                expect(collapseButton.iconSymbol).toBe("close_panel");
-
-                const searchBox: Input = component.shadowRoot.querySelector(
-                    "dx-input"
-                );
-                expect(searchBox).not.toBeNull();
-                expect(searchBox.value).toBe("");
-
-                const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
-                    "dx-tree"
-                );
-                expect(trees).toHaveLength(SAMPLE_TREES.length);
-                trees.forEach((tree, index) =>
-                    expect(tree.treeRoot).toHaveProperty(
-                        "name",
-                        SAMPLE_TREES[index].name
-                    )
-                );
-
-                // Mobile specific elements should not render
-                const headerTitleDesktop = component.shadowRoot.querySelector(
-                    ".header span.header-title"
-                );
-                expect(headerTitleDesktop).toBeNull();
-
-                const toggleButtonDesktop = component.shadowRoot.querySelector(
-                    ".header .header-toggle-icon"
-                );
-                expect(toggleButtonDesktop).toBeNull();
-
-                expect(window.matchMedia).toBeCalledTimes(1);
-                expect(window.matchMedia).toBeCalledWith(EXPECTED_QUERY);
-
-                return expect(component).toBeAccessible();
-            });
-
-            it("should accept a json string as trees", () => {
-                const expectedTitle = "Other super cool title";
-                const component = renderComponent({
-                    header: expectedTitle,
-                    trees: JSON.stringify(SAMPLE_TREES)
-                });
-
-                expect(component.trees).toEqual(SAMPLE_TREES);
-
-                const container: HTMLElement = component.shadowRoot.querySelector(
-                    ".container"
-                );
-                expect(container).not.toBeNull();
-                expect(container.classList).not.toContain(COLLAPSED_CLASS);
-
-                const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                    ".header h2"
-                );
-                expect(headerTitle).not.toBeNull();
-                expect(headerTitle.textContent).toBe(expectedTitle);
-
-                const collapseButton: Button = component.shadowRoot.querySelector(
-                    "dx-button"
-                );
-                expect(collapseButton).not.toBeNull();
-                expect(collapseButton.iconSymbol).toBe("close_panel");
-
-                const searchBox: Input = component.shadowRoot.querySelector(
-                    "dx-input"
-                );
-                expect(searchBox).not.toBeNull();
-                expect(searchBox.value).toBe("");
-
-                const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
-                    "dx-tree"
-                );
-                expect(trees).toHaveLength(SAMPLE_TREES.length);
-                trees.forEach((tree, index) =>
-                    expect(tree.treeRoot).toHaveProperty(
-                        "name",
-                        SAMPLE_TREES[index].name
-                    )
-                );
-
-                return expect(component).toBeAccessible();
-            });
-
-            it("should accept a value", () => {
-                const testValue = "introduction";
-
-                const component = renderComponent({
-                    header: "Non visible title",
-                    trees: SAMPLE_TREES,
-                    value: testValue
-                });
-
-                const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
-                    "dx-tree"
-                );
-
-                expect(trees).toHaveLength(SAMPLE_TREES.length);
-                trees.forEach((tree) => expect(tree.value).toBe(testValue));
-
-                return expect(component).toBeAccessible();
-            });
-        });
-
-        describe("component interactions", () => {
-            it("should expand/collapse sidebar when toggle button is clicked", () => {
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: SAMPLE_TREES
-                });
-
-                const container: HTMLElement = component.shadowRoot.querySelector(
-                    ".container"
-                );
-                const toggleButton: HTMLElement = component.shadowRoot.querySelector(
-                    "dx-button"
-                );
-                toggleButton.click();
-
-                expect(track).toBeCalledTimes(1);
-                expect(track).toBeCalledWith(toggleButton, GTM_EVENT_NAME, {
-                    sideNavAction: "collapse",
-                    clickText: TOGGLE_BUTTON_LABEL
-                });
-
-                return Promise.resolve()
-                    .then(() => {
-                        expect(container.classList).toContain(COLLAPSED_CLASS);
-
-                        const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                            ".header h2"
-                        );
-                        expect(headerTitle).toBeNull();
-
-                        const expandButton: Button = component.shadowRoot.querySelector(
-                            "dx-button"
-                        );
-                        expect(expandButton).not.toBeNull();
-
-                        const searchBox: Input = component.shadowRoot.querySelector(
-                            "dx-input"
-                        );
-                        expect(searchBox).toBeNull();
-
-                        const trees: Tree = component.shadowRoot.querySelector(
-                            "dx-tree"
-                        );
-                        expect(trees).toBeNull();
-
-                        toggleButton.click();
-
-                        expect(track).toBeCalledTimes(2);
-                        expect(track).toHaveBeenLastCalledWith(
-                            toggleButton,
-                            GTM_EVENT_NAME,
-                            {
-                                sideNavAction: "expand",
-                                clickText: TOGGLE_BUTTON_LABEL
-                            }
-                        );
-                    })
-                    .then(() => {
-                        expect(container.classList).not.toContain(
-                            COLLAPSED_CLASS
-                        );
-
-                        const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                            ".header h2"
-                        );
-                        expect(headerTitle).not.toBeNull();
-
-                        const searchBox: Input = component.shadowRoot.querySelector(
-                            "dx-input"
-                        );
-                        expect(searchBox).not.toBeNull();
-
-                        const trees: Tree = component.shadowRoot.querySelector(
-                            "dx-tree"
-                        );
-                        expect(trees).not.toBeNull();
-
-                        return expect(component).toBeAccessible();
-                    });
-            });
-
-            it("should make hover effect on toggle button hover", () => {
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: SAMPLE_TREES
-                });
-
-                const container: HTMLElement = component.shadowRoot.querySelector(
-                    ".container"
-                );
-                const toggleButton: Button = component.shadowRoot.querySelector(
-                    "dx-button"
-                );
-
-                expect(container.classList).not.toContain(
-                    "container-border-active"
-                );
-
-                toggleButton.dispatchEvent(new MouseEvent("mouseenter"));
-
-                return Promise.resolve()
-                    .then(() => {
-                        expect(container.classList).toContain(
-                            "container-border-active"
-                        );
-                        toggleButton.dispatchEvent(
-                            new MouseEvent("mouseleave")
-                        );
-                    })
-                    .then(() => {
-                        expect(container.classList).not.toContain(
-                            "container-border-active"
-                        );
-                    });
-            });
-        });
-    });
-
-    describe("mobile", () => {
-        const oldMatchMedia = window.matchMedia;
-
-        beforeAll(() => {
-            window.matchMedia = createMediaMock(true);
-        });
-
-        afterAll(() => {
-            window.matchMedia = oldMatchMedia;
-        });
-
-        describe("render", () => {
-            it("should render as collapsed", () => {
-                const expectedTitle = SAMPLE_TREES[0].label;
-                const component = renderComponent({
-                    trees: SAMPLE_TREES
-                });
-
-                const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                    ".header span.header-title"
-                );
-                expect(headerTitle).not.toBeNull();
-                expect(headerTitle.textContent).toBe(expectedTitle);
-
-                const headerIcon = component.shadowRoot.querySelector(
-                    ".header .header-toggle-icon dx-icon"
-                );
-                expect(headerIcon).not.toBeNull();
-
-                const searchBox: Input = component.shadowRoot.querySelector(
-                    "dx-input"
-                );
-                expect(searchBox).toBeNull();
-
-                const trees: Tree = component.shadowRoot.querySelector(
-                    "dx-tree"
-                );
-                expect(trees).toBeNull();
-
-                // Desktop specific elements should not render
-                const headerTitleDesktop = component.shadowRoot.querySelector(
-                    ".header h2.header-title"
-                );
-                expect(headerTitleDesktop).toBeNull();
-
-                const toggleButtonDesktop = component.shadowRoot.querySelector(
-                    "dx-button.header-toggle-button"
-                );
-                expect(toggleButtonDesktop).toBeNull();
-
-                expect(window.matchMedia).toBeCalledTimes(1);
-                expect(window.matchMedia).toBeCalledWith(EXPECTED_QUERY);
-
-                return expect(component).toBeAccessible();
-            });
-
-            it("should ignore null values for trees api", () => {
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: null
-                });
-
-                const tree: Tree = component.shadowRoot.querySelector(
-                    "dx-tree"
-                );
-                expect(tree).toBeNull();
-
-                const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                    ".header span.header-title"
-                );
-                expect(headerTitle).not.toBeNull();
-                expect(headerTitle.textContent).toBe("");
-            });
-        });
-
-        describe("component interactions", () => {
-            it("should expand/collapse sidebar when mobile toggle is clicked", () => {
-                const expectedTitle = SAMPLE_TREES[0].label;
-                const component = renderComponent({
-                    trees: SAMPLE_TREES
-                });
-
-                const container: HTMLElement = component.shadowRoot.querySelector(
-                    ".container"
-                );
-                const toggleDiv: HTMLElement = component.shadowRoot.querySelector(
-                    "div.header"
-                );
-                toggleDiv.click();
-
-                expect(track).toBeCalledTimes(1);
-                expect(track).toBeCalledWith(toggleDiv, GTM_EVENT_NAME, {
-                    sideNavAction: "expand",
-                    clickText: TOGGLE_BUTTON_LABEL
-                });
-
-                return Promise.resolve()
-                    .then(() => {
-                        expect(container.classList).not.toContain(
-                            COLLAPSED_CLASS
-                        );
-                        const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                            ".header span.header-title"
-                        );
-                        expect(headerTitle).not.toBeNull();
-                        expect(headerTitle.textContent).toBe(expectedTitle);
-
-                        const headerIcon = component.shadowRoot.querySelector(
-                            ".header .header-toggle-icon dx-icon"
-                        );
-                        expect(headerIcon).not.toBeNull();
-
-                        const searchBox: Input = component.shadowRoot.querySelector(
-                            "dx-input"
-                        );
-                        expect(searchBox).not.toBeNull();
-                        expect(searchBox.value).toBe("");
-
-                        const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
-                            "dx-tree"
-                        );
-                        expect(trees).toHaveLength(SAMPLE_TREES.length);
-                        trees.forEach((tree, index) =>
-                            expect(tree.treeRoot).toHaveProperty(
-                                "name",
-                                SAMPLE_TREES[index].name
-                            )
-                        );
-
-                        // Desktop specific elements should not render
-                        const headerTitleDesktop = component.shadowRoot.querySelector(
-                            ".header h2.header-title"
-                        );
-                        expect(headerTitleDesktop).toBeNull();
-
-                        const toggleButtonDesktop = component.shadowRoot.querySelector(
-                            "dx-button.header-toggle-button"
-                        );
-                        expect(toggleButtonDesktop).toBeNull();
-
-                        toggleDiv.click();
-
-                        expect(track).toBeCalledTimes(2);
-                        expect(track).toHaveBeenLastCalledWith(
-                            toggleDiv,
-                            GTM_EVENT_NAME,
-                            {
-                                sideNavAction: "collapse",
-                                clickText: TOGGLE_BUTTON_LABEL
-                            }
-                        );
-                    })
-                    .then(() => {
-                        expect(container.classList).toContain(COLLAPSED_CLASS);
-
-                        return expect(component).toBeAccessible();
-                    });
-            });
-
-            it("should update header with selected value label", () => {
-                const defaultTitle = SAMPLE_TREES[0].label;
-                const itemToSelect = SAMPLE_TREES[0].children![2];
-                const component = renderComponent({
-                    trees: SAMPLE_TREES
-                });
-
-                const toggleDiv: HTMLElement = component.shadowRoot.querySelector(
-                    "div.header"
-                );
-                const headerTitle: HTMLElement = toggleDiv.querySelector(
-                    ".header span.header-title"
-                )!;
-
-                toggleDiv.click();
-
-                return Promise.resolve()
-                    .then(() => {
-                        expect(headerTitle).not.toBeNull();
-                        expect(headerTitle.textContent).toBe(defaultTitle);
-
-                        const tree: Tree = component.shadowRoot.querySelector(
-                            "dx-tree"
-                        );
-                        tree.dispatchEvent(
-                            new CustomEvent("select", {
-                                detail: { name: itemToSelect.name }
-                            })
-                        );
-                    })
-                    .then(() => {
-                        expect(headerTitle.textContent).toBe(
-                            itemToSelect.label
-                        );
-                        return expect(component).toBeAccessible();
-                    });
-            });
-        });
-    });
-
-    describe("general", () => {
-        describe("render", () => {
-            it("should accept a single tree element", () => {
-                const [expectedTree] = SAMPLE_TREES;
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: expectedTree
-                });
-
-                const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
-                    "dx-tree"
-                );
-                expect(trees).toHaveLength(1);
-
-                const [singleTree] = trees;
-                expect(singleTree.treeRoot).toHaveProperty(
-                    "name",
-                    expectedTree.name
-                );
-            });
-        });
-
-        describe("component interactions", () => {
-            it("should handle onselect event fired from dx-tree", () => {
-                const mockSelect = jest.fn();
-                const expectedName = "test_name";
-
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: SAMPLE_TREES
-                });
-
-                component.addEventListener("select", mockSelect);
-
-                const tree: Tree = component.shadowRoot.querySelector(
-                    "dx-tree"
-                );
-                expect(tree).not.toBeNull();
-                expect(tree.value).toBeUndefined();
-
-                tree.dispatchEvent(
-                    new CustomEvent("select", {
-                        detail: { name: expectedName },
-                        composed: true,
-                        bubbles: true
-                    })
-                );
-
-                return Promise.resolve().then(() => {
-                    expect(tree.value).toBe(expectedName);
-                    expect(mockSelect).toBeCalledTimes(1);
-                    const {
-                        detail,
-                        composed,
-                        bubbles
-                    } = mockSelect.mock.calls[0][0];
-                    expect(detail).toEqual({
-                        name: expectedName
-                    });
-                    expect(composed).toBe(true);
-                    expect(bubbles).toBe(true);
-
-                    return expect(component).toBeAccessible();
-                });
-            });
-        });
-
-        describe("search", () => {
-            beforeAll(() => {
-                jest.useFakeTimers();
-            });
-
-            it("should filter trees element label based on the search text value", () => {
-                const testSearchText = " token ";
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: SAMPLE_TREES
-                });
-
-                const searchBox: Input = component.shadowRoot.querySelector(
-                    "dx-input"
-                );
-                searchBox.dispatchEvent(
-                    new CustomEvent("change", {
-                        detail: testSearchText
-                    })
-                );
-
-                jest.runAllTimers();
-
-                return Promise.resolve().then(() => {
-                    expect(searchBox.value).toBe(testSearchText);
-
-                    const trees: Array<Tree> = component.shadowRoot.querySelectorAll(
-                        "dx-tree"
-                    );
-                    expect(trees).toHaveLength(1);
-                    const treeNode = trees[0].treeRoot as TreeNode;
-                    expect(treeNode.name).toBe(SAMPLE_TREES[0].name);
-                    expect(treeNode.isExpanded).toBe(true);
-                    expect(treeNode.children).toHaveLength(1);
-                    expect(treeNode.children![0].name).toMatch(
-                        testSearchText.trim()
-                    );
-                });
-            });
-
-            it("should not display anything if search text does not match", () => {
-                const testSearchText = "this does not exist";
-                const component = renderComponent({
-                    header: "Cool Title",
-                    trees: SAMPLE_TREES
-                });
-
-                const searchBox: Input = component.shadowRoot.querySelector(
-                    "dx-input"
-                );
-                searchBox.dispatchEvent(
-                    new CustomEvent("change", {
-                        detail: testSearchText
-                    })
-                );
-
-                jest.runAllTimers();
-
-                return Promise.resolve().then(() => {
-                    expect(searchBox.value).toBe(testSearchText);
-
-                    const tree: Tree = component.shadowRoot.querySelector(
-                        "dx-tree"
-                    );
-                    expect(tree).toBeNull();
-                });
-            });
-        });
-    });
-});