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

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

@@ -0,0 +1,568 @@
+import Button from "dx/button";
+import { track } from "dx/instrumentation";
+import Sidebar from "dx/sidebar";
+import Tree from "dx/tree";
+import SidebarSearch from "dx/sidebarSearch";
+import {
+    createMediaMock,
+    mockQueryParameter,
+    unmockQueryParameter
+} from "utils-internal/jest";
+import { createRenderComponent } from "utils-internal/tests";
+import { coveoXMLDocsConfig } from "utils-internal/coveo";
+import mockSearchChangeEvent from "./mockSearchChangeEvent";
+import mockSearchChangeEmptyEvent from "./mockSearchChangeEmptyEvent";
+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, () => {
+    describe("desktop", () => {
+        beforeEach(() => {
+            unmockQueryParameter();
+        });
+
+        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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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 search: SidebarSearch =
+                    component.shadowRoot.querySelector("dx-sidebar-search");
+                expect(search).not.toBeNull();
+
+                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),
+                    ...coveoXMLDocsConfig
+                });
+
+                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 search: SidebarSearch =
+                    component.shadowRoot.querySelector("dx-sidebar-search");
+                expect(search).not.toBeNull();
+
+                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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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();
+            });
+
+            it("should render loading ui when ui loads with a non empty query parameter", () => {
+                mockQueryParameter("test");
+
+                const component = renderComponent({
+                    header: "Super cool title",
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                const loadingImg: Element = component.shadowRoot.querySelector(
+                    "img.loading-skeleton"
+                );
+
+                expect(loadingImg).not.toBeNull();
+            });
+
+            it("should not render loading ui when ui loads with an empty query parameter, but should when dx-sidebar-search fires onloading as true", () => {
+                const component = renderComponent({
+                    header: "Super cool title",
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                const loadingImg: Element = component.shadowRoot.querySelector(
+                    "img.loading-skeleton"
+                );
+                expect(loadingImg).toBeNull();
+
+                const search: SidebarSearch =
+                    component.shadowRoot.querySelector("dx-sidebar-search");
+                search.dispatchEvent(
+                    new CustomEvent("loading", { detail: true })
+                );
+
+                return Promise.resolve().then(() => {
+                    const loadingImgAfter: Element =
+                        component.shadowRoot.querySelector(
+                            "img.loading-skeleton"
+                        );
+                    expect(loadingImgAfter).not.toBeNull();
+                });
+            });
+
+            it("should render search results on change of dx-sidebar-search", () => {
+                const component = renderComponent({
+                    header: "Super cool title",
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                const search: SidebarSearch =
+                    component.shadowRoot.querySelector("dx-sidebar-search");
+                search.dispatchEvent(
+                    new CustomEvent("change", mockSearchChangeEvent)
+                );
+                search.dispatchEvent(
+                    new CustomEvent("loading", { detail: false })
+                );
+
+                return Promise.resolve().then(() => {
+                    const results = component.shadowRoot.querySelectorAll(
+                        "dx-sidebar-search-result"
+                    );
+                    expect(results).toHaveLength(
+                        mockSearchChangeEvent.detail.results.length
+                    );
+                });
+            });
+
+            it("should render the empty component if search results return empty", () => {
+                const component = renderComponent({
+                    header: "Super cool title",
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                const container =
+                    component.shadowRoot.querySelector(".container");
+                expect(container.classList).not.toContain("search-empty");
+
+                const search: SidebarSearch =
+                    component.shadowRoot.querySelector("dx-sidebar-search");
+                search.dispatchEvent(
+                    new CustomEvent("change", mockSearchChangeEmptyEvent)
+                );
+                search.dispatchEvent(
+                    new CustomEvent("loading", { detail: false })
+                );
+
+                return Promise.resolve().then(() => {
+                    const results = component.shadowRoot.querySelectorAll(
+                        "dx-sidebar-search-result"
+                    );
+
+                    expect(container.classList).toContain("search-empty");
+                    expect(results).toHaveLength(0);
+                });
+            });
+        });
+
+        describe("component interactions", () => {
+            it("should expand/collapse sidebar when toggle button is clicked", () => {
+                const component = renderComponent({
+                    header: "Cool Title",
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                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 expandButton: Button =
+                            component.shadowRoot.querySelector("dx-button");
+                        expect(expandButton).not.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
+                        );
+
+                        return expect(component).toBeAccessible();
+                    });
+            });
+
+            it("should make hover effect on toggle button hover", () => {
+                const component = renderComponent({
+                    header: "Cool Title",
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                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 component = renderComponent({
+                    trees: SAMPLE_TREES,
+                    ...coveoXMLDocsConfig
+                });
+
+                const container: HTMLElement =
+                    component.shadowRoot.querySelector(".container");
+                expect(container.classList).toContain(COLLAPSED_CLASS);
+
+                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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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 search: HTMLElement =
+                            component.shadowRoot.querySelector(
+                                "dx-sidebar-search"
+                            );
+                        expect(search).not.toBeNull();
+
+                        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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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,
+                    ...coveoXMLDocsConfig
+                });
+
+                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();
+                });
+            });
+        });
+    });
+});