@salesforcedevs/dx-components 0.16.2 → 0.18.1

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

@@ -0,0 +1,574 @@
+import Button from "dx/button";
+import Input from "dx/input";
+import { track } from "dx/instrumentation";
+import SidebarOld from "dx/sidebarOld";
+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-old";
+const renderComponent = createRenderComponent(TAG, SidebarOld);
+
+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();
+                });
+            });
+        });
+    });
+});