fix(frontend): enhance testing and error handling in marketplace components

### Changes 🏗️
- Updated `MainMarketplacePage` tests to include rendering checks for various sections and error handling for API failures.
- Improved `AgentInfo` component to filter out NaN values from version numbers.
- Modified `customMutator` to conditionally log errors based on the environment.
- Enhanced Vitest configuration for better integration testing setup.
- Refactored existing tests for marketplace agents and creators to focus on cross-page flows.

### Checklist 📋
- [x] Verified that all tests pass with the new changes.
- [x] Ensured comprehensive coverage for error handling scenarios in tests.
- [x] Updated documentation for testing practices in `CLAUDE.md`.

.github/workflows/platform-frontend-ci.yml

@@ -128,7 +128,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           exitOnceUploaded: true
 
-  test:
+  e2e_test:
     runs-on: big-boi
     needs: setup
     strategy:
@@ -258,3 +258,39 @@ jobs:
       - name: Print Final Docker Compose logs
         if: always()
         run: docker compose -f ../docker-compose.yml logs
+
+  integration_test:
+    runs-on: ubuntu-latest
+    needs: setup
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.18.0"
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Restore dependencies cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ needs.setup.outputs.cache-key }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-${{ hashFiles('autogpt_platform/frontend/pnpm-lock.yaml') }}
+            ${{ runner.os }}-pnpm-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate API client
+        run: pnpm generate:api
+
+      - name: Run Integration Tests
+        run: pnpm test:unit

autogpt_platform/frontend/package.json

@@ -120,7 +120,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.2",
-    "happy-dom": "20.3.4",
     "@opentelemetry/instrumentation": "0.209.0",
     "@playwright/test": "1.56.1",
     "@storybook/addon-a11y": "9.1.5",
@@ -131,6 +130,7 @@
     "@tanstack/eslint-plugin-query": "5.91.2",
     "@tanstack/react-query-devtools": "5.90.2",
     "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@types/canvas-confetti": "1.9.0",
     "@types/lodash": "4.17.20",
@@ -148,6 +148,7 @@
     "eslint": "8.57.1",
     "eslint-config-next": "15.5.7",
     "eslint-plugin-storybook": "9.1.5",
+    "happy-dom": "20.3.4",
     "import-in-the-middle": "2.0.2",
     "msw": "2.11.6",
     "msw-storybook-addon": "2.0.6",

autogpt_platform/frontend/pnpm-lock.yaml

@@ -306,6 +306,9 @@ importers:
       '@testing-library/dom':
         specifier: 10.4.1
         version: 10.4.1
+      '@testing-library/jest-dom':
+        specifier: 6.9.1
+        version: 6.9.1
       '@testing-library/react':
         specifier: 16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)

autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentInfo/AgentInfo.tsx

@@ -80,6 +80,7 @@ export const AgentInfo = ({
   const allVersions = storeData?.versions
     ? storeData.versions
         .map((versionStr: string) => parseInt(versionStr, 10))
+        .filter((versionNum: number) => !isNaN(versionNum))
         .sort((a: number, b: number) => b - a)
         .map((versionNum: number) => ({
           version: versionNum,

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainAgentPage/__tests__/main.test.tsx

@@ -0,0 +1,173 @@
+import { describe, expect, test, afterEach } from "vitest";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+} from "@/tests/integrations/test-utils";
+import { MainAgentPage } from "../MainAgentPage";
+import { server } from "@/mocks/mock-server";
+import { getGetV2GetSpecificAgentMockHandler422 } from "@/app/api/__generated__/endpoints/store/store.msw";
+import { create500Handler } from "@/tests/integrations/helpers/create-500-handler";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+const defaultParams = {
+  creator: "test-creator",
+  slug: "test-agent",
+};
+
+describe("MainAgentPage", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  describe("rendering", () => {
+    test("renders agent info with title", async () => {
+      render(<MainAgentPage params={defaultParams} />);
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-title")).toBeInTheDocument();
+      });
+    });
+
+    test("renders agent creator info", async () => {
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-creator")).toBeInTheDocument();
+      });
+    });
+
+    test("renders agent description", async () => {
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-description")).toBeInTheDocument();
+      });
+    });
+
+    test("renders breadcrumbs with marketplace link", async () => {
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("link", { name: /marketplace/i }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("renders download button", async () => {
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-download-button")).toBeInTheDocument();
+      });
+    });
+
+    test("renders similar agents section", async () => {
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Similar agents", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("auth state", () => {
+    test("shows add to library button when authenticated", async () => {
+      mockAuthenticatedUser();
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId("agent-add-library-button"),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("hides add to library button when not authenticated", async () => {
+      mockUnauthenticatedUser();
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-title")).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByTestId("agent-add-library-button"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("renders page correctly when logged out", async () => {
+      mockUnauthenticatedUser();
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-title")).toBeInTheDocument();
+      });
+      expect(screen.getByTestId("agent-download-button")).toBeInTheDocument();
+    });
+
+    test("renders page correctly when logged in", async () => {
+      mockAuthenticatedUser();
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("agent-title")).toBeInTheDocument();
+      });
+      expect(
+        screen.getByTestId("agent-add-library-button"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("error handling", () => {
+    test("displays error when agent API returns 422", async () => {
+      server.use(getGetV2GetSpecificAgentMockHandler422());
+
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load agent data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+
+      await act(async () => {});
+    });
+
+    test("displays error when API returns 500", async () => {
+      server.use(
+        create500Handler("get", "*/api/store/agents/test-creator/test-agent"),
+      );
+
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load agent data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+
+      await act(async () => {});
+    });
+
+    test("retry button is visible on error", async () => {
+      server.use(getGetV2GetSpecificAgentMockHandler422());
+
+      render(<MainAgentPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /try again/i }),
+        ).toBeInTheDocument();
+      });
+
+      await act(async () => {});
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainCreatorPage/__tests__/main.test.tsx

@@ -0,0 +1,131 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { cleanup, render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainCreatorPage } from "../MainCreatorPage";
+import { server } from "@/mocks/mock-server";
+import {
+  getGetV2GetCreatorDetailsMockHandler422,
+  getGetV2ListStoreAgentsMockHandler422,
+} from "@/app/api/__generated__/endpoints/store/store.msw";
+import { create500Handler } from "@/tests/integrations/helpers/create-500-handler";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+const defaultParams = {
+  creator: "test-creator",
+};
+
+describe("MainCreatorPage", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  describe("rendering", () => {
+    test("renders creator info card", async () => {
+      render(<MainCreatorPage params={defaultParams} />);
+      await waitFor(() => {
+        expect(screen.getByTestId("creator-description")).toBeInTheDocument();
+      });
+    });
+
+    test("renders breadcrumbs with marketplace link", async () => {
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("link", { name: /marketplace/i }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("renders about section", async () => {
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("About")).toBeInTheDocument();
+      });
+    });
+
+    test("renders agents by creator section", async () => {
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Agents by/i, { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("auth state", () => {
+    test("renders page correctly when logged out", async () => {
+      mockUnauthenticatedUser();
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("creator-description")).toBeInTheDocument();
+      });
+    });
+
+    test("renders page correctly when logged in", async () => {
+      mockAuthenticatedUser();
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("creator-description")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("error handling", () => {
+    test("displays error when creator details API returns 422", async () => {
+      server.use(getGetV2GetCreatorDetailsMockHandler422());
+
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load creator data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("displays error when creator agents API returns 422", async () => {
+      server.use(getGetV2ListStoreAgentsMockHandler422());
+
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load creator data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("displays error when API returns 500", async () => {
+      server.use(create500Handler("get", "*/api/store/creator/test-creator"));
+
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load creator data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("retry button is visible on error", async () => {
+      server.use(getGetV2GetCreatorDetailsMockHandler422());
+
+      render(<MainCreatorPage params={defaultParams} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /try again/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/__tests__/main.test.tsx

@@ -0,0 +1,132 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+import { server } from "@/mocks/mock-server";
+import {
+  getGetV2ListStoreAgentsMockHandler422,
+  getGetV2ListStoreCreatorsMockHandler422,
+} from "@/app/api/__generated__/endpoints/store/store.msw";
+import { create500Handler } from "@/tests/integrations/helpers/create-500-handler";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+describe("MainMarketplacePage", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  describe("rendering", () => {
+    test("renders hero section with search bar", async () => {
+      render(<MainMarkeplacePage />);
+
+      expect(
+        await screen.findByText("Featured agents", { exact: false }),
+      ).toBeInTheDocument();
+      
+      expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+    });
+
+    test("renders featured agents section", async () => {
+      render(<MainMarkeplacePage />);
+
+      expect(
+        await screen.findByText("Featured agents", { exact: false }),
+      ).toBeInTheDocument();
+    });
+
+    test("renders top agents section", async () => {
+      render(<MainMarkeplacePage />);
+
+      expect(
+        await screen.findByText("Top Agents", { exact: false }),
+      ).toBeInTheDocument();
+    });
+
+    test("renders featured creators section", async () => {
+      render(<MainMarkeplacePage />);
+
+      expect(
+        await screen.findByText("Featured creators", { exact: false }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("auth state", () => {
+    test("renders page correctly when logged out", async () => {
+      mockUnauthenticatedUser();
+      render(<MainMarkeplacePage />);
+
+      expect(
+        await screen.findByText("Featured agents", { exact: false }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("Top Agents", { exact: false }),
+      ).toBeInTheDocument();
+    });
+
+    test("renders page correctly when logged in", async () => {
+      mockAuthenticatedUser();
+      render(<MainMarkeplacePage />);
+
+      expect(
+        await screen.findByText("Featured agents", { exact: false }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("Top Agents", { exact: false }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("error handling", () => {
+    test("displays error when featured agents API returns 422", async () => {
+      server.use(getGetV2ListStoreAgentsMockHandler422());
+
+      render(<MainMarkeplacePage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load marketplace data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("displays error when creators API returns 422", async () => {
+      server.use(getGetV2ListStoreCreatorsMockHandler422());
+
+      render(<MainMarkeplacePage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load marketplace data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("displays error when API returns 500", async () => {
+      server.use(create500Handler("get", "*/api/store/agents*"));
+
+      render(<MainMarkeplacePage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load marketplace data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("retry button is visible on error", async () => {
+      server.use(getGetV2ListStoreAgentsMockHandler422());
+
+      render(<MainMarkeplacePage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /try again/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainSearchResultPage/__tests__/main.test.tsx

@@ -0,0 +1,114 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainSearchResultPage } from "../MainSearchResultPage";
+import { server } from "@/mocks/mock-server";
+import {
+  getGetV2ListStoreAgentsMockHandler422,
+  getGetV2ListStoreCreatorsMockHandler422,
+} from "@/app/api/__generated__/endpoints/store/store.msw";
+import { create500Handler } from "@/tests/integrations/helpers/create-500-handler";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+const defaultProps = {
+  searchTerm: "test-search",
+  sort: undefined as undefined,
+};
+
+describe("MainSearchResultPage", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  describe("rendering", () => {
+    test("renders search results header with search term", async () => {
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Results for:")).toBeInTheDocument();
+      });
+      expect(screen.getByText("test-search")).toBeInTheDocument();
+    });
+
+    test("renders search bar", async () => {
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("auth state", () => {
+    test("renders page correctly when logged out", async () => {
+      mockUnauthenticatedUser();
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Results for:")).toBeInTheDocument();
+      });
+    });
+
+    test("renders page correctly when logged in", async () => {
+      mockAuthenticatedUser();
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText("Results for:")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("error handling", () => {
+    test("displays error when agents API returns 422", async () => {
+      server.use(getGetV2ListStoreAgentsMockHandler422());
+
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load marketplace data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("displays error when creators API returns 422", async () => {
+      server.use(getGetV2ListStoreCreatorsMockHandler422());
+
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load marketplace data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("displays error when API returns 500", async () => {
+      server.use(create500Handler("get", "*/api/store/agents*"));
+
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Failed to load marketplace data", { exact: false }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("retry button is visible on error", async () => {
+      server.use(getGetV2ListStoreAgentsMockHandler422());
+
+      render(<MainSearchResultPage {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /try again/i }),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+});

autogpt_platform/frontend/src/app/api/mutators/custom-mutator.ts

@@ -136,16 +136,19 @@ export const customMutator = async <
       response.statusText ||
       `HTTP ${response.status}`;
 
-    console.error(
-      `Request failed ${environment.isServerSide() ? "on server" : "on client"}`,
-      {
-        status: response.status,
-        method,
-        url: fullUrl.replace(baseUrl, ""), // Show relative URL for cleaner logs
-        errorMessage,
-        responseData: responseData || "No response data",
-      },
-    );
+      const isTestEnv = process.env.NODE_ENV === 'test';
+      if (!isTestEnv) {
+        console.error(
+          `Request failed ${environment.isServerSide() ? "on server" : "on client"}`,
+          {
+            status: response.status,
+            method,
+            url: fullUrl.replace(baseUrl, ""), // Show relative URL for cleaner logs
+            errorMessage,
+            responseData: responseData || "No response data",
+          },
+        );
+      }
 
     throw new ApiError(errorMessage, response.status, responseData);
   }

autogpt_platform/frontend/src/tests/CLAUDE.md

@@ -218,3 +218,61 @@ test("shows error when deletion fails", async () => {
 4. **Co-locate integration tests** - Keep `__tests__/` folder next to the component
 5. **E2E is expensive** - Only for critical happy paths; prefer integration tests
 6. **AI agents are good at writing integration tests** - Start with these when adding test coverage
+
+---
+
+## Testing 500 Server Errors
+
+Orval auto-generates 422 validation error handlers, but 500 errors must be created manually. Use the helper:
+
+```tsx
+import { create500Handler } from "@/tests/integrations/helpers/create-500-handler";
+
+test("handles server error", async () => {
+  server.use(create500Handler("get", "*/api/store/agents"));
+  render(<Component />);
+  expect(await screen.findByText("Failed to load")).toBeInTheDocument();
+});
+```
+
+Options:
+
+- `delayMs`: Add delay before response (for testing loading states)
+- `body`: Custom error response body
+
+---
+
+## Testing Auth-Dependent Components
+
+For components that behave differently based on login state:
+
+```tsx
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+describe("MyComponent", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  test("shows feature when logged in", async () => {
+    mockAuthenticatedUser();
+    render(<MyComponent />);
+    expect(await screen.findByText("Premium Feature")).toBeInTheDocument();
+  });
+
+  test("hides feature when logged out", async () => {
+    mockUnauthenticatedUser();
+    render(<MyComponent />);
+    expect(screen.queryByText("Premium Feature")).not.toBeInTheDocument();
+  });
+
+  test("with custom user data", async () => {
+    mockAuthenticatedUser({ email: "custom@test.com" });
+    // ...
+  });
+});
+```

autogpt_platform/frontend/src/tests/integrations/helpers/create-500-handler.ts

@@ -0,0 +1,31 @@
+import { http, HttpResponse, delay } from "msw";
+
+type HttpMethod = "get" | "post" | "put" | "patch" | "delete";
+
+interface Create500HandlerOptions {
+  delayMs?: number;
+  body?: Record<string, unknown>;
+}
+
+export function create500Handler(
+  method: HttpMethod,
+  url: string,
+  options?: Create500HandlerOptions,
+) {
+  const { delayMs = 0, body } = options ?? {};
+
+  const responseBody = body ?? {
+    detail: "Internal Server Error",
+  };
+
+  return http[method](url, async () => {
+    if (delayMs > 0) {
+      await delay(delayMs);
+    }
+
+    return HttpResponse.json(responseBody, {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  });
+}

autogpt_platform/frontend/src/tests/integrations/helpers/mock-onboarding-provider.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, ReactNode } from "react";
+import { UserOnboarding } from "@/lib/autogpt-server-api";
+import { PostV1CompleteOnboardingStepStep } from "@/app/api/__generated__/models/postV1CompleteOnboardingStepStep";
+import type { LocalOnboardingStateUpdate } from "@/providers/onboarding/helpers";
+
+const MockOnboardingContext = createContext<{
+  state: UserOnboarding | null;
+  updateState: (state: LocalOnboardingStateUpdate) => void;
+  step: number;
+  setStep: (step: number) => void;
+  completeStep: (step: PostV1CompleteOnboardingStepStep) => void;
+}>({
+  state: null,
+  updateState: () => {},
+  step: 1,
+  setStep: () => {},
+  completeStep: () => {},
+});
+
+export function useOnboarding(
+  step?: number,
+  completeStep?: PostV1CompleteOnboardingStepStep,
+) {
+  const context = useContext(MockOnboardingContext);
+  return context;
+}
+
+export function MockOnboardingProvider({ children }: { children: ReactNode }) {
+  return (
+    <MockOnboardingContext.Provider
+      value={{
+        state: null,
+        updateState: () => {},
+        step: 1,
+        setStep: () => {},
+        completeStep: () => {},
+      }}
+    >
+      {children}
+    </MockOnboardingContext.Provider>
+  );
+}

autogpt_platform/frontend/src/tests/integrations/helpers/mock-supabase-auth.ts

@@ -0,0 +1,40 @@
+import type { User } from "@supabase/supabase-js";
+import { useSupabaseStore } from "@/lib/supabase/hooks/useSupabaseStore";
+
+export const mockUser: User = {
+  id: "test-user-id",
+  email: "test@example.com",
+  aud: "authenticated",
+  role: "authenticated",
+  created_at: new Date().toISOString(),
+  app_metadata: {},
+  user_metadata: {},
+};
+
+export function mockAuthenticatedUser(user: Partial<User> = {}): User {
+  const mergedUser = { ...mockUser, ...user };
+
+  useSupabaseStore.setState({
+    user: mergedUser,
+    isUserLoading: false,
+    hasLoadedUser: true,
+  });
+
+  return mergedUser;
+}
+
+export function mockUnauthenticatedUser(): void {
+  useSupabaseStore.setState({
+    user: null,
+    isUserLoading: false,
+    hasLoadedUser: true,
+  });
+}
+
+export function resetAuthState(): void {
+  useSupabaseStore.setState({
+    user: null,
+    isUserLoading: true,
+    hasLoadedUser: false,
+  });
+}

autogpt_platform/frontend/src/tests/integrations/helpers/supress-react-query-update-warning.ts

@@ -0,0 +1,37 @@
+// Suppresses expected act(...) warnings from React Query and component async updates.
+// These warnings are normal behavior with React Query and don't indicate test failures.
+export function suppressReactQueryUpdateWarning() {
+    const originalError = console.error;
+  
+    console.error = (...args: unknown[]) => {
+      const isActWarning = args.some(
+        (arg) =>
+          typeof arg === "string" &&
+          (arg.includes("not wrapped in act(...)") ||
+            arg.includes("An update to") && arg.includes("inside a test"))
+      );
+  
+      if (isActWarning) {
+        const fullMessage = args
+          .map((arg) => String(arg))
+          .join("\n")
+          .toLowerCase();
+  
+        const isReactQueryRelated =
+          fullMessage.includes("queryclientprovider") ||
+          fullMessage.includes("react query") ||
+          fullMessage.includes("@tanstack/react-query");
+  
+        if (isReactQueryRelated || fullMessage.includes("testproviders")) {
+          return;
+        }
+      }
+  
+      originalError(...args);
+    };
+  
+    // Return cleanup function
+    return () => {
+      console.error = originalError;
+    };
+  }

autogpt_platform/frontend/src/tests/integrations/test-utils.tsx

@@ -1,14 +1,22 @@
 import { BackendAPIProvider } from "@/lib/autogpt-server-api/context";
-import OnboardingProvider from "@/providers/onboarding/onboarding-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, RenderOptions } from "@testing-library/react";
+import { render, RenderOptions, act } from "@testing-library/react";
 import { ReactElement, ReactNode } from "react";
+import { MockOnboardingProvider, useOnboarding as mockUseOnboarding } from "./helpers/mock-onboarding-provider";
+
+vi.mock("@/providers/onboarding/onboarding-provider", () => ({
+  useOnboarding: mockUseOnboarding,
+  default: vi.fn(),
+}));
 
 function createTestQueryClient() {
   return new QueryClient({
     defaultOptions: {
       queries: {
         retry: false,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
       },
     },
   });
@@ -19,7 +27,7 @@ function TestProviders({ children }: { children: ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
       <BackendAPIProvider>
-        <OnboardingProvider>{children}</OnboardingProvider>
+        <MockOnboardingProvider>{children}</MockOnboardingProvider>
       </BackendAPIProvider>
     </QueryClientProvider>
   );

autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsx

@@ -2,11 +2,17 @@ import { beforeAll, afterAll, afterEach } from "vitest";
 import { server } from "@/mocks/mock-server";
 import { mockNextjsModules } from "./setup-nextjs-mocks";
 import { mockSupabaseRequest } from "./mock-supabase-request";
+import "@testing-library/jest-dom";
+import { suppressReactQueryUpdateWarning } from "./helpers/supress-react-query-update-warning";
 
 beforeAll(() => {
   mockNextjsModules();
-  mockSupabaseRequest(); // If you need user's data - please mock supabase actions in your specific test - it sends null user [It's only to avoid cookies() call]
+  mockSupabaseRequest();
+  const restoreConsoleError = suppressReactQueryUpdateWarning();
+  afterAll(() => {
+    restoreConsoleError();
+  });
   return server.listen({ onUnhandledRequest: "error" });
 });
-afterEach(() => server.resetHandlers());
+afterEach(() => {server.resetHandlers()});
 afterAll(() => server.close());

autogpt_platform/frontend/src/tests/marketplace-agent.spec.ts

@@ -9,78 +9,7 @@ function escapeRegExp(value: string) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-test.describe("Marketplace Agent Page - Basic Functionality", () => {
-  test("User can access agent page when logged out", async ({ page }) => {
-    const marketplacePage = new MarketplacePage(page);
-
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const firstStoreCard = await marketplacePage.getFirstTopAgent();
-    await firstStoreCard.click();
-
-    await page.waitForURL("**/marketplace/agent/**");
-    await matchesUrl(page, /\/marketplace\/agent\/.+/);
-  });
-
-  test("User can access agent page when logged in", async ({ page }) => {
-    const loginPage = new LoginPage(page);
-    const marketplacePage = new MarketplacePage(page);
-
-    await loginPage.goto();
-    const richUser = getTestUserWithLibraryAgents();
-    await loginPage.login(richUser.email, richUser.password);
-    await hasUrl(page, "/marketplace");
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const firstStoreCard = await marketplacePage.getFirstTopAgent();
-    await firstStoreCard.click();
-
-    await page.waitForURL("**/marketplace/agent/**");
-    await matchesUrl(page, /\/marketplace\/agent\/.+/);
-  });
-
-  test("Agent page details are visible", async ({ page }) => {
-    const { getId } = getSelectors(page);
-
-    const marketplacePage = new MarketplacePage(page);
-    await marketplacePage.goto(page);
-
-    const firstStoreCard = await marketplacePage.getFirstTopAgent();
-    await firstStoreCard.click();
-    await page.waitForURL("**/marketplace/agent/**");
-
-    const agentTitle = getId("agent-title");
-    await isVisible(agentTitle);
-
-    const agentDescription = getId("agent-description");
-    await isVisible(agentDescription);
-
-    const creatorInfo = getId("agent-creator");
-    await isVisible(creatorInfo);
-  });
-
-  test("Download button functionality works", async ({ page }) => {
-    const { getId, getText } = getSelectors(page);
-
-    const marketplacePage = new MarketplacePage(page);
-    await marketplacePage.goto(page);
-
-    const firstStoreCard = await marketplacePage.getFirstTopAgent();
-    await firstStoreCard.click();
-    await page.waitForURL("**/marketplace/agent/**");
-
-    const downloadButton = getId("agent-download-button");
-    await isVisible(downloadButton);
-    await downloadButton.click();
-
-    const downloadSuccessMessage = getText(
-      "Your agent has been successfully downloaded.",
-    );
-    await isVisible(downloadSuccessMessage);
-  });
-
+test.describe("Marketplace Agent Page - Cross-Page Flows", () => {
   test("Add to library button works and agent appears in library", async ({
     page,
   }) => {

autogpt_platform/frontend/src/tests/marketplace-creator.spec.ts

@@ -1,64 +1,8 @@
 import { test } from "@playwright/test";
-import { getTestUserWithLibraryAgents } from "./credentials";
-import { LoginPage } from "./pages/login.page";
 import { MarketplacePage } from "./pages/marketplace.page";
-import { hasUrl, isVisible, matchesUrl } from "./utils/assertion";
-import { getSelectors } from "./utils/selectors";
-
-test.describe("Marketplace Creator Page – Basic Functionality", () => {
-  test("User can access creator's page when logged out", async ({ page }) => {
-    const marketplacePage = new MarketplacePage(page);
-
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const firstCreatorProfile =
-      await marketplacePage.getFirstCreatorProfile(page);
-    await firstCreatorProfile.click();
-
-    await page.waitForURL("**/marketplace/creator/**");
-    await matchesUrl(page, /\/marketplace\/creator\/.+/);
-  });
-
-  test("User can access creator's page when logged in", async ({ page }) => {
-    const loginPage = new LoginPage(page);
-    const marketplacePage = new MarketplacePage(page);
-
-    await loginPage.goto();
-    const richUser = getTestUserWithLibraryAgents();
-    await loginPage.login(richUser.email, richUser.password);
-    await hasUrl(page, "/marketplace");
-
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const firstCreatorProfile =
-      await marketplacePage.getFirstCreatorProfile(page);
-    await firstCreatorProfile.click();
-
-    await page.waitForURL("**/marketplace/creator/**");
-    await matchesUrl(page, /\/marketplace\/creator\/.+/);
-  });
-
-  test("Creator page details are visible", async ({ page }) => {
-    const { getId } = getSelectors(page);
-    const marketplacePage = new MarketplacePage(page);
-
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const firstCreatorProfile =
-      await marketplacePage.getFirstCreatorProfile(page);
-    await firstCreatorProfile.click();
-    await page.waitForURL("**/marketplace/creator/**");
-
-    const creatorTitle = getId("creator-title");
-    await isVisible(creatorTitle);
-
-    const creatorDescription = getId("creator-description");
-    await isVisible(creatorDescription);
-  });
+import { hasUrl, matchesUrl } from "./utils/assertion";
 
+test.describe("Marketplace Creator Page – Cross-Page Flows", () => {
   test("Agents in agent by sections navigation works", async ({ page }) => {
     const marketplacePage = new MarketplacePage(page);
 

autogpt_platform/frontend/src/tests/marketplace.spec.ts

@@ -1,74 +1,8 @@
 import { expect, test } from "@playwright/test";
-import { getTestUserWithLibraryAgents } from "./credentials";
-import { LoginPage } from "./pages/login.page";
 import { MarketplacePage } from "./pages/marketplace.page";
-import { hasMinCount, hasUrl, isVisible, matchesUrl } from "./utils/assertion";
-
-// Marketplace tests for store agent search functionality
-test.describe("Marketplace – Basic Functionality", () => {
-  test("User can access marketplace page when logged out", async ({ page }) => {
-    const marketplacePage = new MarketplacePage(page);
-
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const marketplaceTitle = await marketplacePage.getMarketplaceTitle(page);
-    await isVisible(marketplaceTitle);
-
-    console.log(
-      "User can access marketplace page when logged out test passed ✅",
-    );
-  });
-
-  test("User can access marketplace page when logged in", async ({ page }) => {
-    const loginPage = new LoginPage(page);
-    const marketplacePage = new MarketplacePage(page);
-
-    await loginPage.goto();
-    const richUser = getTestUserWithLibraryAgents();
-    await loginPage.login(richUser.email, richUser.password);
-    await hasUrl(page, "/marketplace");
-
-    await marketplacePage.goto(page);
-    await hasUrl(page, "/marketplace");
-
-    const marketplaceTitle = await marketplacePage.getMarketplaceTitle(page);
-    await isVisible(marketplaceTitle);
-
-    console.log(
-      "User can access marketplace page when logged in test passed ✅",
-    );
-  });
-
-  test("Featured agents, top agents, and featured creators are visible", async ({
-    page,
-  }) => {
-    const marketplacePage = new MarketplacePage(page);
-    await marketplacePage.goto(page);
-
-    const featuredAgentsSection =
-      await marketplacePage.getFeaturedAgentsSection(page);
-    await isVisible(featuredAgentsSection);
-    const featuredAgentCards =
-      await marketplacePage.getFeaturedAgentCards(page);
-    await hasMinCount(featuredAgentCards, 1);
-
-    const topAgentsSection = await marketplacePage.getTopAgentsSection(page);
-    await isVisible(topAgentsSection);
-    const topAgentCards = await marketplacePage.getTopAgentCards(page);
-    await hasMinCount(topAgentCards, 1);
-
-    const featuredCreatorsSection =
-      await marketplacePage.getFeaturedCreatorsSection(page);
-    await isVisible(featuredCreatorsSection);
-    const creatorProfiles = await marketplacePage.getCreatorProfiles(page);
-    await hasMinCount(creatorProfiles, 1);
-
-    console.log(
-      "Featured agents, top agents, and featured creators are visible test passed ✅",
-    );
-  });
+import { isVisible, matchesUrl } from "./utils/assertion";
 
+test.describe("Marketplace – Navigation", () => {
   test("Can navigate and interact with marketplace elements", async ({
     page,
   }) => {
@@ -96,7 +30,7 @@ test.describe("Marketplace – Basic Functionality", () => {
     await matchesUrl(page, /\/marketplace\/creator\/.+/);
 
     console.log(
-      "Can navigate and interact with marketplace elements test passed ✅",
+      "Can navigate and interact with marketplace elements test passed",
     );
   });
 
@@ -121,32 +55,6 @@ test.describe("Marketplace – Basic Functionality", () => {
     const results = await marketplacePage.getSearchResultsCount(page);
     expect(results).toBeGreaterThan(0);
 
-    console.log("Complete search flow works correctly test passed ✅");
-  });
-
-  // We need to add a test search with filters, but the current business logic for filters doesn't work as expected. We'll add it once we modify that.
-});
-
-test.describe("Marketplace – Edge Cases", () => {
-  test("Search for non-existent item shows no results", async ({ page }) => {
-    const marketplacePage = new MarketplacePage(page);
-    await marketplacePage.goto(page);
-
-    await marketplacePage.searchAndNavigate("xyznonexistentitemxyz123", page);
-
-    await marketplacePage.waitForSearchResults();
-
-    await matchesUrl(page, /\/marketplace\/search\?searchTerm=/);
-
-    const resultsHeading = page.getByText("Results for:");
-    await isVisible(resultsHeading);
-
-    const searchTerm = page.getByText("xyznonexistentitemxyz123");
-    await isVisible(searchTerm);
-
-    const results = await marketplacePage.getSearchResultsCount(page);
-    expect(results).toBe(0);
-
-    console.log("Search for non-existent item shows no results test passed ✅");
+    console.log("Complete search flow works correctly test passed");
   });
 });

autogpt_platform/frontend/tsconfig.json

@@ -14,6 +14,7 @@
     "jsx": "preserve",
     "incremental": true,
     "plugins": [{ "name": "next" }],
+    "types": ["vitest/globals", "@testing-library/jest-dom/vitest"],
     "paths": {
       "@/*": ["./src/*"]
     }

autogpt_platform/frontend/vitest.config.mts

@@ -8,5 +8,6 @@ export default defineConfig({
     environment: "happy-dom",
     include: ["src/**/*.test.tsx"],
     setupFiles: ["./src/tests/integrations/vitest.setup.tsx"],
+    globals: true,
   },
 });