-
Notifications
You must be signed in to change notification settings - Fork 46.2k
feat(frontend): add integration testing setup with Vitest, MSW, and RTL #11813
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
β¦d document testing rules.
- Introduced new npm scripts for unit testing: `test:unit` and `test:unit:watch`. - Updated Vitest configuration to include test files located in `src/**/*.test.tsx`.
- Added `NEXT_PUBLIC_IS_TESTING_ENVIRONMENT` variable to `.env.default` for testing environment indication. - Updated `orval.config.ts` to enable mocking during API calls. - Modified `layout.tsx` to initialize mocks when in testing environment. - Removed `has_sensitive_action` properties from `openapi.json` to streamline API schema. - Implemented `isTestingEnvironment` function in `environment` service for environment checks.
β¦ setup - Removed `NEXT_PUBLIC_IS_TESTING_ENVIRONMENT` variable from `.env.default` as it is no longer needed. - Updated Vitest configuration to include a setup file for tests. - Cleaned up `layout.tsx` by removing the testing environment check and mock initialization. - Updated `MainMarketplacePage.test.tsx` to use a custom render utility for better test isolation. - Deleted unused `Badge.test.tsx` file to streamline test suite. - Added comments in `mocks/index.ts` to clarify usage context for mocks.
- Updated `orval.config.ts` to configure MSW for API mocking with detailed settings. - Added `happy-dom` as a new dependency for testing environment. - Modified `vitest.config.mts` to use `happy-dom` for the testing environment. - Introduced new boolean properties `has_sensitive_action` and `sensitive_action_safe_mode` in `openapi.json` for better control over agent behavior. - Removed obsolete test files and utility functions to streamline the testing process. - Updated test setup to improve isolation and configuration.
WalkthroughThe changes establish a comprehensive testing infrastructure for the frontend using Vitest, Mock Service Worker (MSW), and testing-library tools. This includes framework configuration, dependency additions, mock server/worker initialization, test utilities for providers and Next.js mocking, and documentation on testing patterns. Changes
Suggested labels
Suggested reviewers
Poem
Estimated code review effort: π― 2 (Simple) | β±οΈ ~12 minutes π₯ Pre-merge checks | β 2 | β 1β Failed checks (1 warning)
β Passed checks (2 passed)
βοΈ Tip: You can configure your own custom pre-merge checks in the settings. π§Ή Recent nitpick comments
π Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
π Files selected for processing (1)
π§° Additional context usedπ Path-based instructions (1)autogpt_platform/frontend/**π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Files:
π§ Learnings (15)π Common learningsπ Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:49:03.583ZApplied to files:
π Learning: 2025-11-25T08:48:55.844ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:49:03.583ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:49:03.583ZApplied to files:
π Learning: 2025-11-25T08:48:55.844ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:48:55.844ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
π Learning: 2025-11-25T08:48:33.246ZApplied to files:
πͺ markdownlint-cli2 (0.18.1)autogpt_platform/frontend/src/tests/CLAUDE.md38-38: Fenced code blocks should have a language specified (MD040, fenced-code-language) 49-49: Fenced code blocks should have a language specified (MD040, fenced-code-language) 116-116: Fenced code blocks should have a language specified (MD040, fenced-code-language) 141-141: Fenced code blocks should have a language specified (MD040, fenced-code-language) β° Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
π Additional comments (1)
βοΈ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This stack of pull requests is managed by Graphite. Learn more about stacking. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 5
π€ Fix all issues with AI agents
In `@autogpt_platform/frontend/package.json`:
- Line 83: Move the "happy-dom" entry out of the dependencies section and into
devDependencies in package.json: remove the "happy-dom" key from the
"dependencies" object and add the same version string under the
"devDependencies" object so tests can use it while production installs skip it.
In `@autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx`:
- Around line 14-17: The mock for refreshSession is missing the session field;
update the vi.fn().mockResolvedValue for refreshSession to return the full shape
{ data: { session, user }, error } (e.g., include data.session: null when there
is no session) so tests that read session won't break; locate the refreshSession
mock in mock-supabase-request.tsx and add the session property to the data
object while keeping error: null and user: null.
- Around line 21-24: The current vi.mock call inside mockSupabaseRequest defeats
hoisting; move the vi.mock("@/lib/supabase/server/getServerSupabase", ...) call
out of the mockSupabaseRequest function to the module top-level so the mock for
getServerSupabase (returning mockSupabaseClient) is applied before imports, or
if you need runtime control keep the function but replace vi.mock with vi.doMock
and call vi.doMock inside mockSupabaseRequest to apply the mock at runtime;
update references to getServerSupabase and mockSupabaseClient accordingly.
In `@autogpt_platform/frontend/src/tests/integrations/test-utils.tsx`:
- Around line 17-26: TestProviders currently wraps OnboardingProvider with
BackendAPIProvider which uses the deprecated backend API; remove
BackendAPIProvider from the TestProviders component so tests rely on MSW mocks
(e.g., getOnboardingMock()) and OnboardingProviderβs existing generated-endpoint
hooks; alternatively, if you prefer preserving isolation, refactor
OnboardingProvider to stop calling useBackendAPI() and instead call the
generated hooks directly (update references in OnboardingProvider and tests
accordingly) to eliminate any dependency on "@/lib/autogpt-server-api/context".
In `@autogpt_platform/frontend/vitest.config.mts`:
- Around line 5-12: Update the vitest config's test include pattern so it
matches both .ts and .tsx test files: in the defineConfig test block (the
test.include array) change the current glob that only matches
"src/**/*.test.tsx" to a pattern that also captures ".test.ts" (for example
"src/**/*.test.{ts,tsx}" or separate globs) so files like helpers.test.ts are
picked up by Vitest; modify the include entry used in the test config
accordingly.
π§Ή Nitpick comments (4)
autogpt_platform/frontend/src/tests/integrations/test-utils.tsx (1)
35-36: Re-export pattern may conflict with coding guidelines.The wildcard re-export on line 35 (
export * from "@testing-library/react") functions similarly to a barrel file pattern. Per coding guidelines: "No barrel files or index.ts re-exports in frontend."However, this is a common and pragmatic pattern in test utilities to provide a single import point. If the team considers test utilities an exception to this rule, this is acceptable.
autogpt_platform/frontend/src/tests/AGENTS.md (1)
38-45: Add language specifiers to code blocks for better rendering.Several code blocks are missing language specifiers. While the content is excellent, adding language hints improves syntax highlighting and IDE support.
Proposed fix for the code blocks
Line 38: Add
textor leave empty for plain directory structure-``` +```text ComponentName/Line 49:
-``` +```text /library/Line 116:
-``` +```text Does it need a REAL browser/backend?Line 141:
-``` +```text src/Also applies to: 49-57, 116-126, 141-170
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx (1)
41-53: HardcodedusePathnamevalue may limit test flexibility.The
usePathnamemock always returns"/marketplace", which could cause issues when testing components that depend on the current pathname for conditional rendering or navigation logic.Consider making this configurable or providing a way to override per-test:
Alternative approach
// Option 1: Export a setter function let mockPathname = "/marketplace"; export const setMockPathname = (path: string) => { mockPathname = path; }; // Then in the mock: usePathname: () => mockPathname, // Option 2: Use vi.fn() so tests can override usePathname: vi.fn(() => "/marketplace"),autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsx (1)
1-1: Unused import:vi.The
viimport from Vitest is not used in this file. The mock functions are called from the imported modules, not directly here.Proposed fix
-import { beforeAll, afterAll, afterEach, vi } from "vitest"; +import { beforeAll, afterAll, afterEach } from "vitest";
π Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
β Files ignored due to path filters (1)
autogpt_platform/frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
π Files selected for processing (14)
autogpt_platform/frontend/.env.defaultautogpt_platform/frontend/orval.config.tsautogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsxautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsxautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/vitest.config.mts
π€ Files with no reviewable changes (1)
- autogpt_platform/frontend/src/components/atoms/Badge/Badge.test.tsx
π§° Additional context used
π Path-based instructions (11)
autogpt_platform/frontend/**/*.{ts,tsx}
π CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/orval.config.tsautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
autogpt_platform/frontend/**/*.{ts,tsx,json}
π CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/orval.config.tsautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
π CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/(generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
π CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/orval.config.tsautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
autogpt_platform/frontend/**
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/orval.config.tsautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/mocks/mock-server.tsautogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/orval.config.tsautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
autogpt_platform/frontend/src/**/*.tsx
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
{autogpt_platform/backend/.env.default,autogpt_platform/backend/.env,autogpt_platform/frontend/.env.default,autogpt_platform/frontend/.env,.env.default,.env,docker-compose.yml}
π CodeRabbit inference engine (.github/copilot-instructions.md)
Configuration files priority: Backend: /backend/.env.default β /backend/.env. Frontend: /frontend/.env.default β /frontend/.env. Platform: /.env.default β /.env. Docker Compose environment sections override file-based config. Shell environment variables have highest precedence
Files:
autogpt_platform/frontend/.env.default
autogpt_platform/frontend/.env*
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Frontend environment configuration uses
/frontend/.env.default(defaults) overridden by/frontend/.env(user overrides)
Files:
autogpt_platform/frontend/.env.default
autogpt_platform/**/.env*
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Platform environment configuration uses
/.env.default(Supabase/shared defaults) overridden by/.env(user overrides)
Files:
autogpt_platform/frontend/.env.default
autogpt_platform/frontend/package.json
π CodeRabbit inference engine (.github/copilot-instructions.md)
Use pnpm for Node.js package management in frontend. Verify pnpm lock validation
Files:
autogpt_platform/frontend/package.json
π§ Learnings (24)
π Common learnings
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : Run `pnpm test` or `pnpm test-ui` for frontend Playwright tests before committing
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add Storybook stories for new frontend components and Playwright E2E tests for features
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : For frontend E2E testing with Playwright, always run pnpm dev first before pnpm test, as Playwright requires a running instance
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add or update Storybook stories for UI components (pnpm storybook). Run Playwright E2E tests with pnpm test
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add Storybook stories for new frontend components and Playwright E2E tests for features
Applied to files:
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/mock-browser.tsautogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π Learning: 2025-11-25T08:48:55.844Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : Run `pnpm test` or `pnpm test-ui` for frontend Playwright tests before committing
Applied to files:
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : For frontend E2E testing with Playwright, always run pnpm dev first before pnpm test, as Playwright requires a running instance
Applied to files:
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/mocks/index.tsautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add or update Storybook stories for UI components (pnpm storybook). Run Playwright E2E tests with pnpm test
Applied to files:
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/src/app/**/*.tsx : Create frontend pages in `src/app/(platform)/feature-name/page.tsx` with corresponding `usePageName.ts` hook and local `components/` subfolder
Applied to files:
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsxautogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsx
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` for data fetching in frontend
Applied to files:
autogpt_platform/frontend/src/mocks/mock-handlers.tsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/src/tests/integrations/test-utils.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Applied to files:
autogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/src/tests/integrations/test-utils.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Applied to files:
autogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.{ts,tsx} : Structure frontend components as `ComponentName/ComponentName.tsx` plus `useComponentName.ts` hook plus `helpers.ts` file
Applied to files:
autogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : No barrel files or index.ts re-exports in frontend
Applied to files:
autogpt_platform/frontend/vitest.config.mtsautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/integrations/test-utils.tsxautogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Frontend state management uses React Query for server state and co-located UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/tests/integrations/test-utils.tsx
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/.env* : Frontend environment configuration uses `/frontend/.env.default` (defaults) overridden by `/frontend/.env` (user overrides)
Applied to files:
autogpt_platform/frontend/.env.default
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/**/.env* : Platform environment configuration uses `/.env.default` (Supabase/shared defaults) overridden by `/.env` (user overrides)
Applied to files:
autogpt_platform/frontend/.env.default
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/backend/.env* : Backend environment configuration uses `/backend/.env.default` (defaults) overridden by `/backend/.env` (user overrides)
Applied to files:
autogpt_platform/frontend/.env.default
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx,json} : Use Node.js 21+ with pnpm package manager for frontend development
Applied to files:
autogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/package.json : Use pnpm for Node.js package management in frontend. Verify pnpm lock validation
Applied to files:
autogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/** : Install frontend dependencies using `pnpm i` instead of npm
Applied to files:
autogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:48:55.844Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{js,ts,jsx,tsx} : Format frontend code using `pnpm format`
Applied to files:
autogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
Applied to files:
autogpt_platform/frontend/package.json
π Learning: 2025-11-25T08:48:55.844Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : If adding protected frontend routes, update `frontend/lib/supabase/middleware.ts`
Applied to files:
autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/lib/supabase/middleware.ts : When adding protected routes in frontend, update frontend/lib/supabase/middleware.ts
Applied to files:
autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: JWT-based authentication with Supabase integration for backend API security
Applied to files:
autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
𧬠Code graph analysis (5)
autogpt_platform/frontend/src/mocks/mock-server.ts (1)
autogpt_platform/frontend/src/mocks/mock-handlers.ts (1)
mockHandlers(25-48)
autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsx (3)
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx (1)
mockNextjsModules(4-63)autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx (1)
mockSupabaseRequest(21-25)autogpt_platform/frontend/src/mocks/mock-server.ts (1)
server(4-4)
autogpt_platform/frontend/src/mocks/mock-browser.ts (1)
autogpt_platform/frontend/src/mocks/mock-handlers.ts (1)
mockHandlers(25-48)
autogpt_platform/frontend/src/mocks/index.ts (2)
autogpt_platform/frontend/src/mocks/mock-server.ts (1)
server(4-4)autogpt_platform/frontend/src/mocks/mock-browser.ts (1)
worker(4-4)
autogpt_platform/frontend/src/tests/integrations/test-utils.tsx (2)
autogpt_platform/frontend/src/lib/autogpt-server-api/context.tsx (1)
BackendAPIProvider(16-32)autogpt_platform/frontend/src/providers/onboarding/onboarding-provider.tsx (1)
OnboardingProvider(88-314)
πͺ markdownlint-cli2 (0.18.1)
autogpt_platform/frontend/src/tests/AGENTS.md
38-38: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
49-49: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
116-116: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
141-141: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
β° Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Seer Code Review
- GitHub Check: test
- GitHub Check: types
- GitHub Check: Check PR Status
π Additional comments (13)
autogpt_platform/frontend/.env.default (1)
32-32: LGTM!The trailing newline ensures the file follows POSIX standards for text files. No functional changes to environment configuration.
autogpt_platform/frontend/src/tests/integrations/test-utils.tsx (1)
7-15: LGTM: Test-optimized QueryClient configuration.Disabling retries is appropriate for unit tests to ensure fast, deterministic test execution without retry delays masking failures.
autogpt_platform/frontend/package.json (2)
18-19: LGTM: Test scripts are well-structured.The
test:unitandtest:unit:watchscripts follow conventional naming patterns and integrate cleanly with the existing test commands.
162-164: No action needed. Vitest 4.0.17 is the latest release and is correctly specified.Likely an incorrect or invalid review comment.
autogpt_platform/frontend/src/mocks/mock-handlers.ts (1)
1-48: LGTM: Clean MSW handler aggregation.This provides a well-organized central point for all API mocks. The pattern of spreading individual mock arrays is idiomatic for MSW and maintains good separation of concerns with the generated endpoint mocks.
autogpt_platform/frontend/src/mocks/mock-server.ts (1)
1-4: LGTM: Standard MSW Node server setup.This follows the conventional MSW pattern for Node environments, correctly using
setupServerwith the aggregated mock handlers for Vitest test execution.autogpt_platform/frontend/src/mocks/mock-browser.ts (1)
1-4: LGTM: Standard MSW browser worker setup.This follows the conventional MSW pattern for browser environments, correctly using
setupWorkerwith the aggregated mock handlers. This integrates well with the existing MSW Storybook addon configuration in the project.autogpt_platform/frontend/src/mocks/index.ts (1)
1-13: LGTM!The environment detection and dynamic imports are well-structured. The
onUnhandledRequest: "bypass"setting is appropriate for development where you want real requests to pass through for APIs not yet mocked. The clarifying comment about test usage is helpful.autogpt_platform/frontend/orval.config.ts (1)
19-24: LGTM!The MSW mock configuration is well-suited for the testing infrastructure:
generateEachHttpStatus: trueenables testing error scenarios as documented in AGENTS.mddelay: 0ensures fast test executionbaseUrlcorrectly points to the API proxy endpointautogpt_platform/frontend/src/tests/AGENTS.md (1)
1-220: Comprehensive and well-structured testing documentation.The documentation provides clear guidance on:
- When to use each test type (E2E vs Integration vs Unit)
- File organization patterns that align with the codebase structure
- Practical MSW usage examples with the Orval-generated handlers
- Golden rules that promote maintainable tests
This will be valuable for the team adopting the new testing infrastructure.
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx (1)
4-63: Samevi.mock()hoisting concern applies here.As noted in
mock-supabase-request.tsx, callingvi.mock()inside a function doesn't work as typically expected since Vitest hoists these calls. The function wrapper is effectively decorativeβthe mocks are applied when the module loads, not whenmockNextjsModules()is called.This may still work for the current setup since the function is called in
beforeAll, but it's worth being aware of this behavior.autogpt_platform/frontend/src/tests/integrations/vitest.setup.tsx (1)
6-12: LGTM! Well-structured test lifecycle setup.The MSW server lifecycle is correctly managed:
beforeAll: Start server with strict unhandled request handling ("error")afterEach: Reset handlers for test isolationafterAll: Clean shutdownThe comment on line 8 helpfully explains the null user default and how to customize it per-test.
autogpt_platform/frontend/vitest.config.mts (1)
1-3: LGTM on imports!Good selection of plugins:
tsconfigPathsensures path aliases fromtsconfig.jsonwork in tests.reactplugin provides proper JSX/TSX transformation.
βοΈ Tip: You can disable this entire section by setting review_details to false in your review settings.
autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
Outdated
Show resolved
Hide resolved
autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
π€ Fix all issues with AI agents
In `@autogpt_platform/frontend/src/tests/AGENTS.md`:
- Around line 38-45: Multiple fenced code blocks in AGENTS.md lack language
identifiers; update each block (the ones showing directory trees like the block
starting with "ComponentName/", the "/library/" block, the decision tree block
beginning "Does it need a REAL browser/backend?", and the large "src/" tree
block) to include an appropriate language tag (e.g., ```text for plain directory
trees, ```tsx for React/TSX snippets) so markdownlint rule MD040 is satisfied;
apply the same fix to the other reported blocks referenced (lines 49-57,
116-126, 141-170) by adding the correct language identifier to each opening
fenced code block.
In `@autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx`:
- Around line 3-62: The current vi.mock calls inside mockNextjsModules won't be
hoisted and thus won't apply; refactor by removing the wrapper function and turn
each vi.mock into a hoisted mock factory (use vi.hoisted(...) returning the mock
implementations) or move them to top-level so they run at import time; also
export a shared mockRouter object (referenced by useRouter mock) so tests can
import and assert on navigation calls (e.g., mockRouter.push/replace) instead of
creating ephemeral router instances inside the mockNextjsModules function.
π§Ή Nitpick comments (3)
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx (3)
40-52: Router mock methods are recreated on eachuseRouter()call.Each invocation of
useRouter()returns a new object with freshvi.fn()instances. Tests cannot spy on or assert against these methods since they're not stable references.β»οΈ Create stable mock references
+// Define outside the mock factory +export const mockRouter = { + push: vi.fn(), + replace: vi.fn(), + prefetch: vi.fn(), + back: vi.fn(), + forward: vi.fn(), + refresh: vi.fn(), +}; + vi.mock("next/navigation", () => ({ - useRouter: () => ({ - push: vi.fn(), - replace: vi.fn(), - prefetch: vi.fn(), - back: vi.fn(), - forward: vi.fn(), - refresh: vi.fn(), - }), + useRouter: () => mockRouter, usePathname: () => "/marketplace", useSearchParams: () => new URLSearchParams(), useParams: () => ({}), }));This allows tests to assert:
expect(mockRouter.push).toHaveBeenCalledWith('/expected-path').
49-49: Hardcoded pathname limits test flexibility.
usePathnamealways returns"/marketplace", which may not suit tests for other routes. Consider making this configurable or documenting the limitation.+let mockPathname = "/marketplace"; +export const setMockPathname = (path: string) => { mockPathname = path; }; + vi.mock("next/navigation", () => ({ // ... - usePathname: () => "/marketplace", + usePathname: () => mockPathname, // ... }));
6-16: Consider using a function declaration per coding guidelines.The coding guidelines specify using function declarations for components and handlers, not arrow functions. The mock component could be a named function for consistency.
vi.mock("next/image", () => ({ __esModule: true, - default: ({ - fill, - priority, - quality, - placeholder, - blurDataURL, - loader, - ...props - }: any) => { - return <img {...props} />; + default: function MockImage({ + fill, + priority, + quality, + placeholder, + blurDataURL, + loader, + ...props + }: any) { + return <img {...props} />; }, }));As per coding guidelines, function declarations are preferred over arrow functions for components.
π Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
π Files selected for processing (3)
autogpt_platform/frontend/src/tests/AGENTS.mdautogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsxautogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
π§ Files skipped from review as they are similar to previous changes (1)
- autogpt_platform/frontend/src/tests/integrations/mock-supabase-request.tsx
π§° Additional context used
π Path-based instructions (7)
autogpt_platform/frontend/**/*.{ts,tsx}
π CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
autogpt_platform/frontend/**/*.{ts,tsx,json}
π CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
π CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/(generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
π CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
autogpt_platform/frontend/**
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
autogpt_platform/frontend/src/**/*.tsx
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
π CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
π§ Learnings (12)
π Common learnings
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : Run `pnpm test` or `pnpm test-ui` for frontend Playwright tests before committing
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add Storybook stories for new frontend components and Playwright E2E tests for features
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add or update Storybook stories for UI components (pnpm storybook). Run Playwright E2E tests with pnpm test
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add Storybook stories for new frontend components and Playwright E2E tests for features
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add or update Storybook stories for UI components (pnpm storybook). Run Playwright E2E tests with pnpm test
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:48:55.844Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : Run `pnpm test` or `pnpm test-ui` for frontend Playwright tests before committing
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/src/app/**/*.tsx : Create frontend pages in `src/app/(platform)/feature-name/page.tsx` with corresponding `usePageName.ts` hook and local `components/` subfolder
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` for data fetching in frontend
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : No barrel files or index.ts re-exports in frontend
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
π Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.{ts,tsx} : Structure frontend components as `ComponentName/ComponentName.tsx` plus `useComponentName.ts` hook plus `helpers.ts` file
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsx
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx} : For frontend E2E testing with Playwright, always run pnpm dev first before pnpm test, as Playwright requires a running instance
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Applied to files:
autogpt_platform/frontend/src/tests/integrations/setup-nextjs-mocks.tsxautogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/tests/AGENTS.md
π Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Applied to files:
autogpt_platform/frontend/src/tests/AGENTS.md
πͺ markdownlint-cli2 (0.18.1)
autogpt_platform/frontend/src/tests/AGENTS.md
38-38: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
49-49: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
116-116: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
141-141: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
β° Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Seer Code Review
- GitHub Check: test
- GitHub Check: chromatic
- GitHub Check: types
- GitHub Check: Check PR Status
βοΈ Tip: You can disable this entire section by setting review_details to false in your review settings.
- Removed `happy-dom` from dependencies in `package.json` and `pnpm-lock.yaml`. - Re-added `happy-dom` to `devDependencies` in `package.json` and updated its entry in `pnpm-lock.yaml` to ensure proper testing environment setup.
- Modified the `refreshSession` method in the mock Supabase client to return a session object along with the user, improving the accuracy of the mock implementation for testing purposes.
f5ceef6 to
1b4ced3
Compare
|
Looking good, I will add a CI workflow for this PR tomorrow β€οΈ |
- Deleted AGENTS.md, which contained frontend testing rules and guidelines, as it is no longer relevant to the current testing framework and practices.
|
@Abhi1992002 it's looking good β€οΈ , let me push a commit adding them to the Front-end CI ππ½ |
0ubbe
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good, great work π . Once the CI passes on this PR we can merge ππ½ββοΈ

Changes ποΈ
AGENTS.mdChecklist π
For code changes:
pnpm test:unitto verify tests passFor configuration changes:
.env.defaultis updated or already compatible with my changesdocker-compose.ymlis updated or already compatible with my changes