Dan Ditomaso
1 year ago
14 changed files with 260 additions and 934 deletions
File diff suppressed because it is too large
@ -1,27 +0,0 @@ |
|||
import MapPage from "@app/pages/Map/index.tsx"; |
|||
import { useDevice } from "@core/stores/deviceStore.ts"; |
|||
import ChannelsPage from "@pages/Channels.tsx"; |
|||
import ConfigPage from "@pages/Config/index.tsx"; |
|||
import MessagesPage from "@pages/Messages.tsx"; |
|||
import NodesPage from "./pages/Nodes/index.tsx"; |
|||
import { ErrorBoundary } from "react-error-boundary"; |
|||
import { ErrorPage } from "@components/UI/ErrorPage.tsx"; |
|||
|
|||
export const ErrorBoundaryWrapper = ({ |
|||
children, |
|||
}: { children: React.ReactNode }) => ( |
|||
<ErrorBoundary FallbackComponent={ErrorPage}>{children}</ErrorBoundary> |
|||
); |
|||
|
|||
export const PageRouter = () => { |
|||
const { activePage } = useDevice(); |
|||
return ( |
|||
<ErrorBoundary FallbackComponent={ErrorPage}> |
|||
{activePage === "messages" && <MessagesPage />} |
|||
{activePage === "map" && <MapPage />} |
|||
{activePage === "config" && <ConfigPage />} |
|||
{activePage === "channels" && <ChannelsPage />} |
|||
{activePage === "nodes" && <NodesPage />} |
|||
</ErrorBoundary> |
|||
); |
|||
}; |
|||
@ -1,80 +0,0 @@ |
|||
import { |
|||
createMemoryHistory, |
|||
createRouter, |
|||
Outlet, |
|||
RootRoute, |
|||
Route, |
|||
RouterProvider, |
|||
} from "@tanstack/react-router"; |
|||
import { render as rtlRender, RenderOptions } from "@testing-library/react"; |
|||
import type { FunctionComponent, ReactElement, ReactNode } from "react"; |
|||
|
|||
// a root route for the test router.
|
|||
const rootRoute = new RootRoute({ |
|||
component: () => ( |
|||
<> |
|||
<Outlet /> |
|||
</> |
|||
), |
|||
}); |
|||
|
|||
interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> { |
|||
initialEntries?: string[]; |
|||
ui?: ReactElement; |
|||
} |
|||
|
|||
let currentRouter: ReturnType<typeof createRouter> | null = null; |
|||
|
|||
/** |
|||
* Custom render function for testing components that need TanStack Router context. |
|||
* @param ui The main ReactElement to render (your component under test). |
|||
* @param options Custom render options including initialEntries for the router. |
|||
* @returns An object containing the testing-library render result and the router instance. |
|||
*/ |
|||
const customRender = ( |
|||
ui: ReactElement, |
|||
options: CustomRenderOptions = {}, |
|||
) => { |
|||
const { initialEntries = ["/"], ...renderOptions } = options; |
|||
|
|||
// A specific route that renders the component under test (ui).
|
|||
// It defaults to the first path in initialEntries or '/'.
|
|||
const testComponentRoute = new Route({ |
|||
getParentRoute: () => rootRoute, |
|||
path: initialEntries[0] || "/", |
|||
component: () => ui, // The component passed to render will be the element for this route
|
|||
}); |
|||
|
|||
const routeTree = rootRoute.addChildren([testComponentRoute]); |
|||
|
|||
const router = createRouter({ |
|||
history: createMemoryHistory({ initialEntries }), |
|||
routeTree, |
|||
// You can add default error components or other router options if needed for tests.
|
|||
// defaultErrorComponent: ({ error }) => <div>Test Error: {error.message}</div>,
|
|||
}); |
|||
|
|||
currentRouter = router; // Store the router instance for access in tests
|
|||
|
|||
const Wrapper: FunctionComponent<{ children?: ReactNode }> = ( |
|||
{ children }, |
|||
) => { |
|||
return ( |
|||
<> |
|||
<RouterProvider router={router} /> |
|||
{children} |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
const renderResult = rtlRender(ui, { wrapper: Wrapper, ...renderOptions }); |
|||
|
|||
return { |
|||
...renderResult, |
|||
router, |
|||
}; |
|||
}; |
|||
|
|||
export * from "@testing-library/react"; |
|||
export { customRender as render }; |
|||
export const getTestRouter = () => currentRouter; |
|||
@ -0,0 +1,37 @@ |
|||
import { ReactElement } from "react"; |
|||
import { render, RenderOptions } from "@testing-library/react"; |
|||
import { |
|||
createMemoryHistory, |
|||
createRouter, |
|||
RouterProvider, |
|||
} from "@tanstack/react-router"; |
|||
import "../i18n/config.ts"; |
|||
import { routeTree } from "../routeTree.gen.ts"; |
|||
|
|||
import { DeviceWrapper } from "@app/DeviceWrapper.tsx"; |
|||
|
|||
const Providers = () => { |
|||
const memoryHistory = createMemoryHistory({ |
|||
initialEntries: ["/"], |
|||
}); |
|||
|
|||
const router = createRouter({ |
|||
routeTree, |
|||
history: memoryHistory, |
|||
}); |
|||
|
|||
return ( |
|||
<DeviceWrapper> |
|||
<RouterProvider router={router} /> |
|||
</DeviceWrapper> |
|||
); |
|||
}; |
|||
|
|||
const renderWithProviders = ( |
|||
ui: ReactElement, |
|||
options?: Omit<RenderOptions, "wrapper">, |
|||
) => render(ui, { wrapper: Providers, ...options }); |
|||
|
|||
export * from "@testing-library/react"; |
|||
|
|||
export { renderWithProviders as render }; |
|||
Loading…
Reference in new issue