@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,569 +0,0 @@
-import Button from "dx/button";
-import Input from "dx/input";
-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";
-
-const TAG = "dx-sidebar";
-const renderComponent = createRenderComponent(TAG, Sidebar);
-
-const COLLAPSED_CLASS = "collapsed";
-
-const EXPECTED_QUERY = "(max-width: 768px)";
-
-describe(TAG, () => {
-    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 h1"
-                );
-                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 h1"
-                );
-                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();
-
-                return Promise.resolve()
-                    .then(() => {
-                        expect(container.classList).toContain(COLLAPSED_CLASS);
-
-                        const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                            ".header h1"
-                        );
-                        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();
-                    })
-                    .then(() => {
-                        expect(container.classList).not.toContain(
-                            COLLAPSED_CLASS
-                        );
-
-                        const headerTitle: HTMLElement = component.shadowRoot.querySelector(
-                            ".header h1"
-                        );
-                        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 h1.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();
-
-                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 h1.header-title"
-                        );
-                        expect(headerTitleDesktop).toBeNull();
-
-                        const toggleButtonDesktop = component.shadowRoot.querySelector(
-                            "dx-button.header-toggle-button"
-                        );
-                        expect(toggleButtonDesktop).toBeNull();
-
-                        toggleDiv.click();
-                    })
-                    .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();
-                });
-            });
-        });
-    });
-});

package/src/modules/dx/sidebar/sidebar.stories.ts

@@ -1,139 +0,0 @@
-import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
-
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-sidebar",
-    component: "dx-sidebar",
-    argTypes: {
-        header: {
-            defaultValue: "Guides",
-            control: {
-                type: "text"
-            }
-        },
-        trees: {
-            defaultValue: SAMPLE_TREES,
-            control: {
-                type: "object"
-            }
-        },
-        value: {
-            defaultValue: "terminology",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-const styles = (addStyles: string = "") => html`
-    <style>
-        dx-sidebar {
-            ${addStyles}
-        }
-
-        body.sb-main-padded.sb-show-main {
-            padding: 0;
-        }
-    </style>
-`;
-
-export const Base = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 100vh;")}
-
-    <dx-sidebar
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar>
-`;
-
-export const WidthAndMinHeightVariables = (args: any) => html`
-    ${styles(`
-        min-height: 500px;
-        --dx-c-sidebar-width: 400px;
-        --dx-c-sidebar-min-height: 500px;
-    `)}
-
-    <dx-sidebar
-        header="${args.header}"
-        trees="${JSON.stringify(args.trees)}"
-    ></dx-sidebar>
-`;
-
-export const WidthDrivenByContainer = (args: any) => html`
-    ${styles(`
-        display: block;
-        --dx-c-sidebar-min-height: 500px;
-        --dx-c-sidebar-width: unset;
-    `)}
-
-    <style>
-        @media screen and (min-width: 768px) {
-            .container {
-                width: 40%;
-            }
-        }
-    </style>
-    <div class="container">
-        <dx-sidebar
-            header="${args.header}"
-            trees="${JSON.stringify(args.trees)}"
-            value="${args.value}"
-        ></dx-sidebar>
-    </div>
-`;
-
-export const WithBadges = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 500px;")}
-
-    <div class="container">
-        <dx-sidebar
-            header="${args.header}"
-            trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
-            value="${args.value}"
-        ></dx-sidebar>
-    </div>
-`;
-
-export const PositionSticky = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-    `)}
-    <dx-sidebar
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    ></dx-sidebar>
-`;
-
-export const UseSlot = ({ header, trees, value }: any) => html`
-    ${styles(`
-        display: block;
-        position: sticky;
-        height: 100vh;
-
-        --dx-c-sidebar-height: 100%;
-        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
-        --dx-c-sidebar-width: 300px;
-    `)}
-
-    <style>
-        span {
-            margin-left: auto;
-        }
-    </style>
-
-    <dx-sidebar
-        header="${header}"
-        trees="${JSON.stringify(trees)}"
-        value="${value}"
-    >
-        <span slot="header">I'm in the sidebar</span>
-    </dx-sidebar>
-`;