@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
129 lines (128 loc) • 7.01 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 user_event_1 = require("@testing-library/user-event");
const PageContainer_1 = require("./PageContainer");
const describeConformance_1 = __importDefault(require("../utils/describeConformance"));
const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
(0, vitest_1.describe)("PageContainer", () => {
(0, describeConformance_1.default)((0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}), () => ({
skip: ["themeDefaultProps"],
slots: {
toolbar: {}
}
}));
(0, vitest_1.test)("renders page container correctly", async () => {
const user = user_event_1.userEvent.setup();
const router = {
pathname: "/orders",
searchParams: new URLSearchParams(),
navigate: vitest_1.vi.fn()
};
(0, react_1.act)(() => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: [
{ segment: "", title: "Home" },
{ segment: "orders", title: "Orders" }
], router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
});
const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
const homeLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Home" });
await user.click(homeLink);
(0, vitest_1.expect)(router.navigate).toHaveBeenCalledWith("/", vitest_1.expect.objectContaining({}));
router.navigate.mockClear();
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Orders")).toBeTruthy();
(0, vitest_1.expect)(react_1.screen.getByText("Orders", { ignore: "nav *" }));
});
(0, vitest_1.test)("renders nested", async () => {
const navigation = [
{ segment: "", title: "ACME" },
{
segment: "home",
title: "Home",
children: [
{
segment: "orders",
title: "Orders"
}
]
}
];
const router = {
pathname: "/home/orders",
searchParams: new URLSearchParams(),
navigate: vitest_1.vi.fn()
};
const branding = { title: "ACME" };
(0, react_1.act)(() => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { branding: branding, navigation: navigation, router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
});
const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("ACME")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Home")).toBeTruthy();
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Orders")).toBeTruthy();
});
(0, vitest_1.test)("renders dynamic correctly", async () => {
const user = user_event_1.userEvent.setup();
const router = {
pathname: "/orders/123",
searchParams: new URLSearchParams(),
navigate: vitest_1.vi.fn()
};
(0, react_1.act)(() => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: [
{ segment: "", title: "Home" },
{ segment: "orders", title: "Orders", pattern: "orders/:id" }
], router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
});
const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
const homeLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Home" });
await user.click(homeLink);
(0, vitest_1.expect)(router.navigate).toHaveBeenCalledWith("/", vitest_1.expect.objectContaining({}));
router.navigate.mockClear();
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Orders")).toBeTruthy();
(0, vitest_1.expect)(react_1.screen.getByText("Orders", { ignore: "nav *" }));
});
(0, vitest_1.test)("renders nested dynamic correctly", async () => {
const router = {
pathname: "/users/invoices/123",
searchParams: new URLSearchParams(),
navigate: vitest_1.vi.fn()
};
(0, react_1.act)(() => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(AppProviderComponent_1.AppProvider, { navigation: [
{
segment: "users",
title: "Users",
children: [
{
segment: "invoices",
title: "Invoices",
pattern: "invoices/:id"
}
]
}
], router: router, children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }) }));
});
const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
const homeLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Users" });
(0, vitest_1.expect)(homeLink.getAttribute("href")).toBe("/users");
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("Invoices")).toBeTruthy();
});
(0, vitest_1.test)("renders custom breadcrumbs", async () => {
(0, react_1.act)(() => {
(0, react_1.render)((0, jsx_runtime_1.jsx)(PageContainer_1.PageDataContextProvider, { breadcrumbs: [
{ title: "Hello", path: "/hello" },
{ title: "World", path: "/world" }
], children: (0, jsx_runtime_1.jsx)(PageContainer_1.PageContainer, {}) }));
});
const breadcrumbs = react_1.screen.getByRole("navigation", { name: "breadcrumb" });
const helloLink = (0, react_1.within)(breadcrumbs).getByRole("link", { name: "Hello" });
(0, vitest_1.expect)(helloLink.getAttribute("href")).toBe("/hello");
(0, vitest_1.expect)((0, react_1.within)(breadcrumbs).getByText("World")).toBeTruthy();
});
});