@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
313 lines (312 loc) • 17.8 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const vitest_1 = require("vitest");
const react_1 = require("@testing-library/react");
const Dashboard_1 = __importDefault(require("@mui/icons-material/Dashboard"));
const ShoppingCart_1 = __importDefault(require("@mui/icons-material/ShoppingCart"));
const BarChart_1 = __importDefault(require("@mui/icons-material/BarChart"));
const Description_1 = __importDefault(require("@mui/icons-material/Description"));
const Layers_1 = __importDefault(require("@mui/icons-material/Layers"));
const user_event_1 = __importDefault(require("@testing-library/user-event"));
require("@testing-library/jest-dom/vitest");
const DashboardLayout_1 = require("./DashboardLayout");
const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
(0, vitest_1.describe)("DashboardLayout", () => {
(0, vitest_1.test)("renders content correctly", async () => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }));
(0, vitest_1.expect)(react_1.screen.getByText("Hello world")).toBeTruthy();
});
(0, vitest_1.test)("renders branding correctly in header", async () => {
const BRANDING = {
title: "My Company",
logo: (0, jsx_runtime_1.jsx)("img", { src: "https://placehold.co/600x400", alt: "Placeholder Logo" })
};
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { branding: BRANDING, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
const header = react_1.screen.getByRole("banner");
(0, vitest_1.expect)((0, react_1.within)(header).getByText("My Company")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(header).getByAltText("Placeholder Logo")).toBeTruthy();
});
(0, vitest_1.test)("can switch theme", async () => {
const user = user_event_1.default.setup();
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { showThemeSwitcher: true, children: "Hello world" }) }));
const getBackgroundColorCSSVariable = () => getComputedStyle(document.documentElement).getPropertyValue("--mui-palette-common-background");
const header = react_1.screen.getByRole("banner");
const themeSwitcherButton = (0, react_1.within)(header).getByLabelText("Switch to dark mode");
(0, vitest_1.expect)(getBackgroundColorCSSVariable()).toBe("#fff");
await user.click(themeSwitcherButton);
(0, vitest_1.expect)(getBackgroundColorCSSVariable()).toBe("#000");
await user.click(themeSwitcherButton);
(0, vitest_1.expect)(getBackgroundColorCSSVariable()).toBe("#fff");
});
(0, vitest_1.test)("navigation works correctly", async () => {
const NAVIGATION = [
{
kind: "header",
title: "Main items"
},
{
title: "Dashboard",
segment: "dashboard",
icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
},
{
title: "Orders",
segment: "orders",
icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
},
{
kind: "divider"
},
{
kind: "header",
title: "Analytics"
},
{
segment: "reports",
title: "Reports",
icon: (0, jsx_runtime_1.jsx)(BarChart_1.default, {}),
children: [
{
segment: "sales",
title: "Sales",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
},
{
segment: "traffic",
title: "Traffic",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
}
]
},
{
segment: "integrations",
title: "Integrations",
icon: (0, jsx_runtime_1.jsx)(Layers_1.default, {})
}
];
const user = user_event_1.default.setup();
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
const desktopNavigation = react_1.screen.getByRole("navigation", {
name: "Desktop"
});
// List subheaders are present
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Main items")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Analytics")).toBeTruthy();
// List items and their links are present
const dashboardLink = (0, react_1.within)(desktopNavigation).getByRole("link", {
name: "Dashboard"
});
const ordersLink = (0, react_1.within)(desktopNavigation).getByRole("link", {
name: "Orders"
});
(0, vitest_1.expect)(dashboardLink.getAttribute("href")).toBe("/dashboard");
(0, vitest_1.expect)(ordersLink.getAttribute("href")).toBe("/orders");
const reportsItem = (0, react_1.within)(desktopNavigation).getByText("Reports");
(0, vitest_1.expect)(reportsItem).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Integrations")).toBeTruthy();
// Nested list items show when parent item is clicked
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Sales")).toBeNull();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Traffic")).toBeNull();
await user.click(reportsItem);
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Sales")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Traffic")).toBeTruthy();
});
(0, vitest_1.test)("starts with parent items expanded if any of their children is the current page", () => {
const NAVIGATION = [
{
segment: "reports",
title: "Reports",
icon: (0, jsx_runtime_1.jsx)(BarChart_1.default, {}),
children: [
{
segment: "sales",
title: "Sales",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
},
{
segment: "traffic",
title: "Traffic",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
},
{
segment: "hidden",
title: "Hidden",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
hidden: true
}
]
}
];
const mockRouter = {
pathname: "/reports/sales",
searchParams: new URLSearchParams(),
navigate: vitest_1.vi.fn()
};
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, router: mockRouter, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
const desktopNavigation = react_1.screen.getByRole("navigation", {
name: "Desktop"
});
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Sales")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Traffic")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Hidden")).toBeNull();
});
(0, vitest_1.test)("shows correct selected page item", () => {
const NAVIGATION = [
{
title: "Dashboard",
segment: "dashboard",
icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
},
{
title: "Orders",
segment: "orders",
icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {}),
children: [
{
segment: "nested",
title: "Nested",
hidden: true
}
]
},
{
segment: "dynamic",
title: "Dynamic",
icon: (0, jsx_runtime_1.jsx)(BarChart_1.default, {}),
pattern: "dynamic/:dynamicId"
},
{
segment: "optional",
title: "Optional",
pattern: "optional{/:optionalId}?"
},
{
segment: "oneOrMore",
title: "One or more",
pattern: "oneormore{/:oneormoreId}+"
},
{
segment: "zeroOrMore",
title: "Zero or more",
pattern: "zeroormore{/:zeroormoreId}*"
}
];
function AppWithPathname({ pathname }) {
const mockRouter = {
pathname,
searchParams: new URLSearchParams(),
navigate: vitest_1.vi.fn()
};
return ((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, router: mockRouter, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
}
const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dashboard" }));
const desktopNavigation = react_1.screen.getByRole("navigation", {
name: "Desktop"
});
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dashboard" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dashboard" })).not.toHaveClass("Mui-selected");
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders/nested" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic/123" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic/123/456" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/optional" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Optional" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/optional/123" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Optional" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/optional/123/456" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Optional" })).not.toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/oneormore" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "One or more" })).not.toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/oneormore/123" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "One or more" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/oneormore/123/456" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "One or more" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/zeroormore" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Zero or more" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/zeroormore/123" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Zero or more" })).toHaveClass("Mui-selected");
rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/zeroormore/123/456" }));
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Zero or more" })).toHaveClass("Mui-selected");
});
(0, vitest_1.test)("renders navigation actions", async () => {
const NAVIGATION = [
{
title: "Item 1",
segment: "item1",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
action: (0, jsx_runtime_1.jsx)("div", { children: "Action 1" })
},
{
title: "Item",
segment: "item2",
icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
action: (0, jsx_runtime_1.jsx)("div", { children: "Action 2" })
}
];
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { children: "Hello world" }) }));
const desktopNavigation = react_1.screen.getByRole("navigation", {
name: "Desktop"
});
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Action 1")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Action 2")).toBeTruthy();
});
(0, vitest_1.test)("renders sidebar footer slot content", async () => {
function SidebarFooter() {
return (0, jsx_runtime_1.jsx)("div", { children: "I am footer" });
}
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { slots: { sidebarFooter: SidebarFooter }, children: "Hello world" }) }));
const desktopNavigation = react_1.screen.getByRole("navigation", {
name: "Desktop"
});
(0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("I am footer")).toBeTruthy();
});
(0, vitest_1.test)("renders without the navigation and toggle button", async () => {
const NAVIGATION = [
{
title: "Dashboard",
segment: "dashboard",
icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
},
{
title: "Orders",
segment: "orders",
icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
}
];
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { hideNavigation: true, children: "Hello world" }) }));
const desktopNavigation = react_1.screen.queryByRole("navigation", {
name: "Desktop"
});
const navigationToggle = react_1.screen.queryByLabelText("Collapse menu");
// Expect that navigation and menu button are not rendered
(0, vitest_1.expect)(desktopNavigation).toBeNull();
(0, vitest_1.expect)(navigationToggle).toBeNull();
// Ensure that main content is still rendered
(0, vitest_1.expect)(react_1.screen.getByText("Hello world")).toBeTruthy();
});
(0, vitest_1.test)("renders without default collapsed navigation on desktop", async () => {
const NAVIGATION = [
{
title: "Dashboard",
segment: "dashboard",
icon: (0, jsx_runtime_1.jsx)(Dashboard_1.default, {})
}
];
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: NAVIGATION, children: (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout, { defaultSidebarCollapsed: true, children: "Hello world" }) }));
// Expect that menu button has expand action
(0, vitest_1.expect)(react_1.screen.getAllByLabelText("Expand menu")).toBeTruthy();
(0, vitest_1.expect)(react_1.screen.queryByLabelText("Collapse menu")).toBeNull();
// Ensure that main content is still rendered
(0, vitest_1.expect)(react_1.screen.getByText("Hello world")).toBeTruthy();
});
});