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