@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha.13

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

@@ -1,568 +0,0 @@
-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();
-                });
-            });
-        });
-    });
-});