diff --git a/autogpt_platform/frontend/.env.default b/autogpt_platform/frontend/.env.default index 73310d23db..197a37e8bb 100644 --- a/autogpt_platform/frontend/.env.default +++ b/autogpt_platform/frontend/.env.default @@ -30,5 +30,3 @@ NEXT_PUBLIC_TURNSTILE=disabled # PR previews NEXT_PUBLIC_PREVIEW_STEALING_DEV= -# Testing -NEXT_PUBLIC_IS_TESTING_ENVIRONMENT=false diff --git a/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx b/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx index 07fece5b1a..299f699abc 100644 --- a/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/MainMarketplacePage.test.tsx @@ -1,8 +1,8 @@ -import { expect, test } from 'vitest' -import { render, screen } from '@testing-library/react' -import { MainMarkeplacePage } from './MainMarketplacePage' - -test('MainMarketplacePage', () => { - render() - expect(screen.getByText('Featured Agents')).toBeDefined() -}) \ No newline at end of file +import { expect, test } from "vitest"; +import { render, screen } from "@/tests/test-utils"; +import { MainMarkeplacePage } from "./MainMarketplacePage"; + +test("MainMarketplacePage", () => { + render(); + expect(screen.getByText("Featured Agents")).toBeDefined(); +}); \ No newline at end of file diff --git a/autogpt_platform/frontend/src/app/layout.tsx b/autogpt_platform/frontend/src/app/layout.tsx index 06e04ae6cb..1836b1d4f2 100644 --- a/autogpt_platform/frontend/src/app/layout.tsx +++ b/autogpt_platform/frontend/src/app/layout.tsx @@ -37,11 +37,6 @@ export default async function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - if (environment.isTestingEnvironment()) { - const { initMocks } = await import("@/mocks"); - await initMocks(); - } - const headersList = await headers(); const host = headersList.get("host") || ""; diff --git a/autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx b/autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx deleted file mode 100644 index cd8531375b..0000000000 --- a/autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -// import { render, screen } from "@testing-library/react"; -// import { describe, expect, it } from "vitest"; -// import { Badge } from "./Badge"; - -// describe("Badge Component", () => { -// it("renders badge with content", () => { -// render(Success); - -// expect(screen.getByText("Success")).toBeInTheDocument(); -// }); - -// it("applies correct variant styles", () => { -// const { rerender } = render(Success); -// let badge = screen.getByText("Success"); -// expect(badge).toHaveClass("bg-green-100", "text-green-800"); - -// rerender(Error); -// badge = screen.getByText("Error"); -// expect(badge).toHaveClass("bg-red-100", "text-red-800"); - -// rerender(Info); -// badge = screen.getByText("Info"); -// expect(badge).toHaveClass("bg-slate-100", "text-slate-800"); -// }); - -// it("applies custom className", () => { -// render( -// -// Success -// , -// ); - -// const badge = screen.getByText("Success"); -// expect(badge).toHaveClass("custom-class"); -// }); - -// it("renders as span element", () => { -// render(Success); - -// const badge = screen.getByText("Success"); -// expect(badge.tagName).toBe("SPAN"); -// }); - -// it("renders children correctly", () => { -// render( -// -// Custom Content -// , -// ); - -// expect(screen.getByText("Custom")).toBeInTheDocument(); -// expect(screen.getByText("Content")).toBeInTheDocument(); -// }); - -// it("supports all badge variants", () => { -// const variants = ["success", "error", "info"] as const; - -// variants.forEach((variant) => { -// const { unmount } = render( -// -// {variant} -// , -// ); - -// expect(screen.getByTestId(`badge-${variant}`)).toBeInTheDocument(); -// unmount(); -// }); -// }); - -// it("handles long text content", () => { -// render( -// -// Very long text that should be handled properly by the component -// , -// ); - -// const badge = screen.getByText(/Very long text/); -// expect(badge).toBeInTheDocument(); -// expect(badge).toHaveClass("overflow-hidden", "text-ellipsis"); -// }); -// }); diff --git a/autogpt_platform/frontend/src/mocks/index.ts b/autogpt_platform/frontend/src/mocks/index.ts index 5fb6db5eb2..f11c1fb398 100644 --- a/autogpt_platform/frontend/src/mocks/index.ts +++ b/autogpt_platform/frontend/src/mocks/index.ts @@ -1,3 +1,5 @@ +// We are not using this for tests because Vitest runs our tests in a Node.js environment. +// However, we can use it for development purposes to test our UI in the browser with fake data. export async function initMocks() { if (typeof window === "undefined") { const { server } = await import("./mock-server"); diff --git a/autogpt_platform/frontend/src/services/environment/index.ts b/autogpt_platform/frontend/src/services/environment/index.ts index 98ac792fa1..cdd5b421b5 100644 --- a/autogpt_platform/frontend/src/services/environment/index.ts +++ b/autogpt_platform/frontend/src/services/environment/index.ts @@ -116,10 +116,6 @@ function areFeatureFlagsEnabled() { return process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "enabled"; } -function isTestingEnvironment() { - return process.env.NEXT_PUBLIC_IS_TESTING_ENVIRONMENT === "true"; -} - export const environment = { // Generic getEnvironmentStr, @@ -143,5 +139,4 @@ export const environment = { isLocal, isVercelPreview, areFeatureFlagsEnabled, - isTestingEnvironment, }; diff --git a/autogpt_platform/frontend/src/tests/test-utils.tsx b/autogpt_platform/frontend/src/tests/test-utils.tsx new file mode 100644 index 0000000000..a71583a98c --- /dev/null +++ b/autogpt_platform/frontend/src/tests/test-utils.tsx @@ -0,0 +1,30 @@ +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { render, RenderOptions } from "@testing-library/react"; +import { ReactElement, ReactNode } from "react"; + +function createTestQueryClient() { + return new QueryClient({ + defaultOptions: { + queries: { + retry: false, + }, + }, + }); +} + +function TestProviders({ children }: { children: ReactNode }) { + const queryClient = createTestQueryClient(); + return ( + {children} + ); +} + +function customRender( + ui: ReactElement, + options?: Omit, +) { + return render(ui, { wrapper: TestProviders, ...options }); +} + +export * from "@testing-library/react"; +export { customRender as render }; diff --git a/autogpt_platform/frontend/src/tests/vitest.setup.ts b/autogpt_platform/frontend/src/tests/vitest.setup.ts new file mode 100644 index 0000000000..bb7a57ae01 --- /dev/null +++ b/autogpt_platform/frontend/src/tests/vitest.setup.ts @@ -0,0 +1,6 @@ +import { beforeAll, afterAll, afterEach } from "vitest"; +import { server } from "@/mocks/mock-server"; + +beforeAll(() => server.listen({ onUnhandledRequest: "bypass" })); +afterEach(() => server.resetHandlers()); +afterAll(() => server.close()); diff --git a/autogpt_platform/frontend/vitest.config.mts b/autogpt_platform/frontend/vitest.config.mts index b1d7f45b4f..9778273630 100644 --- a/autogpt_platform/frontend/vitest.config.mts +++ b/autogpt_platform/frontend/vitest.config.mts @@ -7,5 +7,6 @@ export default defineConfig({ test: { environment: 'jsdom', include: ['src/**/*.test.tsx'], + setupFiles: ['./src/tests/vitest.setup.ts'], }, }) \ No newline at end of file