feat(frontend): add marketplace component tests and fix version filtering

autogpt_platform/frontend/package.json

@@ -132,6 +132,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",

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__/auth-state.test.tsx

@@ -0,0 +1,62 @@
+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__/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,55 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } 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} />);
+
+    expect(
+      await screen.findByText("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} />);
+
+    expect(
+      await screen.findByText("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} />);
+
+    expect(
+      await screen.findByText("Failed to load creator data", { exact: false }),
+    ).toBeInTheDocument();
+  });
+
+  test("retry button is visible on error", async () => {
+    server.use(getGetV2GetCreatorDetailsMockHandler422());
+
+    render(<MainCreatorPage params={defaultParams} />);
+
+    expect(
+      await screen.findByRole("button", { name: /try again/i }),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@/tests/integrations/test-utils";
+import { MainCreatorPage } from "../MainCreatorPage";
+
+const defaultParams = {
+  creator: "test-creator",
+};
+
+describe("MainCreatorPage - Rendering", () => {
+  test("renders creator description", async () => {
+    render(<MainCreatorPage params={defaultParams} />);
+    expect(
+      await screen.findByTestId("creator-description"),
+    ).toBeInTheDocument();
+  });
+
+  test("renders breadcrumbs with marketplace link", async () => {
+    render(<MainCreatorPage params={defaultParams} />);
+
+    expect(
+      await screen.findByRole("link", { name: /marketplace/i }),
+    ).toBeInTheDocument();
+  });
+
+  test("renders about section", async () => {
+    render(<MainCreatorPage params={defaultParams} />);
+
+    expect(await screen.findByText("About")).toBeInTheDocument();
+  });
+
+  test("renders agents by creator section", async () => {
+    render(<MainCreatorPage params={defaultParams} />);
+
+    expect(
+      await screen.findByText(/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();
+  });
+});