refactor(frontend): reorganize marketplace integration tests into file-specific locations

- Split main.test.tsx files into dedicated test files:
  - rendering.test.tsx - Component rendering tests
  - auth-state.test.tsx - Authentication state tests
  - error-handling.test.tsx - API error handling tests

- Add new test files:
  - loading-state.test.tsx - Loading skeleton tests
  - empty-state.test.tsx - Empty data handling tests
  - no-results.test.tsx - Search with no results tests

Test coverage:
- MainMarketplacePage: 14 tests (5 files)
- MainAgentPage: 13 tests (3 files)
- MainCreatorPage: 10 tests (3 files)
- MainSearchResultPage: 11 tests (4 files)
- Total: 48 tests across 15 files

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainAgentPage/__tests__/auth-state.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainAgentPage } from "../MainAgentPage";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+const defaultParams = {
+  creator: "test-creator",
+  slug: "test-agent",
+};
+
+describe("MainAgentPage - Auth State", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  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();
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainAgentPage/__tests__/error-handling.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, test } 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";
+
+const defaultParams = {
+  creator: "test-creator",
+  slug: "test-agent",
+};
+
+describe("MainAgentPage - 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/MainAgentPage/__tests__/main.test.tsx

@@ -1,173 +0,0 @@
-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/MainAgentPage/__tests__/rendering.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainAgentPage } from "../MainAgentPage";
+
+const defaultParams = {
+  creator: "test-creator",
+  slug: "test-agent",
+};
+
+describe("MainAgentPage - 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();
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainCreatorPage/__tests__/auth-state.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainCreatorPage } from "../MainCreatorPage";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+const defaultParams = {
+  creator: "test-creator",
+};
+
+describe("MainCreatorPage - Auth State", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  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();
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainCreatorPage/__tests__/error-handling.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, test } from "vitest";
+import { 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";
+
+const defaultParams = {
+  creator: "test-creator",
+};
+
+describe("MainCreatorPage - 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/MainCreatorPage/__tests__/main.test.tsx

@@ -1,131 +0,0 @@
-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/MainCreatorPage/__tests__/rendering.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainCreatorPage } from "../MainCreatorPage";
+
+const defaultParams = {
+  creator: "test-creator",
+};
+
+describe("MainCreatorPage - 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();
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/__tests__/auth-state.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { render, screen } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+describe("MainMarketplacePage - Auth State", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  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();
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/__tests__/empty-state.test.tsx

@@ -0,0 +1,87 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+import { server } from "@/mocks/mock-server";
+import { http, HttpResponse } from "msw";
+
+describe("MainMarketplacePage - Empty State", () => {
+  test("handles empty featured agents gracefully", async () => {
+    server.use(
+      http.get("*/api/store/agents*", () => {
+        return HttpResponse.json({
+          agents: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    render(<MainMarkeplacePage />);
+
+    // Page should still render without crashing
+    expect(
+      await screen.findByText("Featured creators", { exact: false }),
+    ).toBeInTheDocument();
+  });
+
+  test("handles empty creators gracefully", async () => {
+    server.use(
+      http.get("*/api/store/creators*", () => {
+        return HttpResponse.json({
+          creators: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    render(<MainMarkeplacePage />);
+
+    // Page should still render without crashing
+    expect(
+      await screen.findByText("Featured agents", { exact: false }),
+    ).toBeInTheDocument();
+  });
+
+  test("handles all empty data gracefully", async () => {
+    server.use(
+      http.get("*/api/store/agents*", () => {
+        return HttpResponse.json({
+          agents: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+      http.get("*/api/store/creators*", () => {
+        return HttpResponse.json({
+          creators: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    render(<MainMarkeplacePage />);
+
+    // Page should still render the search bar
+    expect(
+      await screen.findByPlaceholderText(/search/i),
+    ).toBeInTheDocument();
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/__tests__/error-handling.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, test } 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";
+
+describe("MainMarketplacePage - 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/MainMarketplacePage/__tests__/loading-state.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "vitest";
+import { render } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+import { server } from "@/mocks/mock-server";
+import { http, HttpResponse, delay } from "msw";
+
+describe("MainMarketplacePage - Loading State", () => {
+  test("shows loading skeleton while data is being fetched", async () => {
+    // Override handlers to add delay to simulate loading
+    server.use(
+      http.get("*/api/store/agents*", async () => {
+        await delay(500);
+        return HttpResponse.json({
+          agents: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+      http.get("*/api/store/creators*", async () => {
+        await delay(500);
+        return HttpResponse.json({
+          creators: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    const { container } = render(<MainMarkeplacePage />);
+
+    // Check for loading skeleton elements (animated pulse elements)
+    const loadingElements = container.querySelectorAll('[class*="animate-pulse"]');
+    expect(loadingElements.length).toBeGreaterThan(0);
+  });
+});

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

@@ -1,132 +0,0 @@
-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/MainMarketplacePage/__tests__/rendering.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+
+describe("MainMarketplacePage - 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();
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainSearchResultPage/__tests__/auth-state.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, test, afterEach } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainSearchResultPage } from "../MainSearchResultPage";
+import {
+  mockAuthenticatedUser,
+  mockUnauthenticatedUser,
+  resetAuthState,
+} from "@/tests/integrations/helpers/mock-supabase-auth";
+
+const defaultProps = {
+  searchTerm: "test-search",
+  sort: undefined as undefined,
+};
+
+describe("MainSearchResultPage - Auth State", () => {
+  afterEach(() => {
+    resetAuthState();
+  });
+
+  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();
+    });
+  });
+});

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainSearchResultPage/__tests__/error-handling.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, test } 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";
+
+const defaultProps = {
+  searchTerm: "test-search",
+  sort: undefined as undefined,
+};
+
+describe("MainSearchResultPage - 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/(platform)/marketplace/components/MainSearchResultPage/__tests__/main.test.tsx

@@ -1,114 +0,0 @@
-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/(platform)/marketplace/components/MainSearchResultPage/__tests__/no-results.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, test } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainSearchResultPage } from "../MainSearchResultPage";
+import { server } from "@/mocks/mock-server";
+import { http, HttpResponse } from "msw";
+
+const defaultProps = {
+  searchTerm: "nonexistent-search-term-xyz",
+  sort: undefined as undefined,
+};
+
+describe("MainSearchResultPage - No Results", () => {
+  test("shows empty state when no agents match search", async () => {
+    server.use(
+      http.get("*/api/store/agents*", () => {
+        return HttpResponse.json({
+          agents: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+      http.get("*/api/store/creators*", () => {
+        return HttpResponse.json({
+          creators: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    render(<MainSearchResultPage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Results for:")).toBeInTheDocument();
+    });
+    
+    // Verify search term is displayed
+    expect(screen.getByText("nonexistent-search-term-xyz")).toBeInTheDocument();
+  });
+
+  test("displays search term even with no results", async () => {
+    server.use(
+      http.get("*/api/store/agents*", () => {
+        return HttpResponse.json({
+          agents: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    render(<MainSearchResultPage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("nonexistent-search-term-xyz")).toBeInTheDocument();
+    });
+  });
+
+  test("search bar remains functional with no results", async () => {
+    server.use(
+      http.get("*/api/store/agents*", () => {
+        return HttpResponse.json({
+          agents: [],
+          pagination: {
+            total_items: 0,
+            total_pages: 0,
+            current_page: 1,
+            page_size: 10,
+          },
+        });
+      }),
+    );
+
+    render(<MainSearchResultPage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import { describe, expect, test } from "vitest";
+import { render, screen, waitFor } from "@/tests/integrations/test-utils";
+import { MainSearchResultPage } from "../MainSearchResultPage";
+
+const defaultProps = {
+  searchTerm: "test-search",
+  sort: undefined as undefined,
+};
+
+describe("MainSearchResultPage - 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();
+    });
+  });
+});