xtablo-source/ui/src/utils/testHelpers.tsx
2025-10-17 23:03:51 +02:00

72 lines
2.2 KiB
TypeScript

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RenderResult, render, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SessionTestProvider } from "@ui/contexts/SessionContext";
import { ThemeProvider } from "@ui/contexts/ThemeContext";
import { TestUserStoreProvider } from "@ui/providers/UserStoreProvider";
import React from "react";
import { BrowserRouter } from "react-router-dom";
const defaultUser = {
id: "123",
short_user_id: "123",
name: "John Doe",
first_name: "John",
last_name: "Doe",
email: "john@example.com",
avatar_url: "https://example.com/avatar.jpg",
streamToken: null,
is_temporary: false,
};
export const renderWithRouter = (ui: React.ReactNode, { route = "/" } = {}) => {
window.history.pushState({}, "Test page", route);
return {
user: userEvent.setup(),
...render(ui, { wrapper: BrowserRouter }),
};
};
export const renderWithProviders = (ui: React.ReactNode): RenderResult => {
// Create a new QueryClient instance for each test to avoid state pollution
const testQueryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
staleTime: Infinity,
},
},
});
return render(
<BrowserRouter>
<ThemeProvider>
<QueryClientProvider client={testQueryClient}>
<SessionTestProvider
testUser={{
id: defaultUser.id,
app_metadata: {},
aud: "test",
created_at: "2021-01-01",
user_metadata: {
first_name: defaultUser.first_name,
last_name: defaultUser.last_name,
avatar_url: defaultUser.avatar_url,
full_name: defaultUser.name,
},
}}
>
<TestUserStoreProvider user={defaultUser}>{ui}</TestUserStoreProvider>
</SessionTestProvider>
</QueryClientProvider>
</ThemeProvider>
</BrowserRouter>
);
};
export const waitForGridToBeInTheDOM = (): Promise<void> => {
return waitFor(() => {
expect(document.querySelector(".ag-root-wrapper")).toBeInTheDocument();
});
};