Testing Strategy

Purpose: Define how we test features at different layers. Audience: Developer, Owner Prerequisites: Node installed; optional Playwright for E2E.

Layers

• Unit: Pure functions and hooks (e.g., helpers in src/utils/ and custom hooks).
• Integration: Components with data fetching using mocked Supabase.
• E2E: Core flows using Playwright (@playwright/test in devDependencies).

Focus areas

• Auth flows: login, reset password.
• Listings: CRUD and moderation.
• Offers/Deals: create offer → accept → payment.
• Messaging: conversation list, send, mark-read.
• Subscriptions: Starter/Pro upgrade and feature gating.
• Blur Policy: field visibility by plan and role.
• Admin Analytics: refactorized components testing.

Playwright quickstart

• Install: pnpm add -D @playwright/test
• Init: npx playwright install
• Example spec:
  • Navigate to /auth, sign in test user.
  • Visit /explore, open a listing.
  • Start a conversation and send a message.

Admin Analytics Refactorized Components — Testing Strategy

Unit Testing

Test individual components in isolation:

AnalyticsHeader.tsx

• Renders title and subtitle correctly
• Period selector updates on change
• Handles different selected ranges

AnalyticsStatsCards.tsx

• Displays correct statistics
• Formats numbers with proper locale
• Shows growth indicators

AnalyticsCharts.tsx

• Renders all chart types
• Handles empty data gracefully
• Responds to theme changes
• Interactive controls work correctly

useAnalytics.ts Hook

• Fetches data correctly
• Processes data transformations
• Handles loading and error states
• Manages chart control state

Integration Testing

Test component interactions:

• Header period change updates all charts
• Chart controls affect data display
• Error states display correctly
• Loading states show skeleton components

E2E Testing

Test complete analytics flow:

• Navigate to /admin/analytics as admin user
• Verify all components load correctly
• Test period selection functionality
• Verify chart interactions
• Test responsive design

Create Listing — E2E Checklist

• Navigate to /auth and sign in as seller test user
• Go to /create-listing
• Fill Basic Information (title, category, website_url, screenshot_url, upload ≥1 image)
• Fill Overview (business_model, established_date, number_of_customers)
• Fill Financial Data (monthly_revenue, monthly_profit, price; optional: allow_negotiation, price_reasoning, revenue screenshot)
• Fill Traffic & Audience (monthly_traffic; optional: target_audience; optional: traffic screenshot)
• Fill Business Details (optional: competitors, growth_opportunities; required: reason_for_selling)
• Fill Resources & Technologies (optional: technologies[], included_assets[])
• Additional Terms (optional: terms_conditions)
• Submit → expect status pending
• Admin reviews in /admin/listings and approves → expect status active

Blur E2E scenarios

• Public/Free user:
  • Open /listing/:id and verify blur on monthly_profit, screenshots, website_url per matrix
• Starter/Pro active:
  • Verify the same fields are visible per plan level
• Admin/Owner:
  • Verify full bypass
• Explore page:
  • Verify explore_* if configured in blurred_fields

Contract tests (DB)

• can_view_field returns true/false for combinations of (user role, plan, unauth)
• View listing_view_secure returns NULL for blurred columns

Mocking Supabase

• For unit/integration, abstract Supabase calls; inject a test client with spies.
• Avoid hitting live DB in CI.

CI suggestions

• Lint: npm run lint
• Typecheck: tsc -noEmit
• Tests: run unit/integration; schedule E2E nightly.

Next steps

• See docs/troubleshooting/common-issues.md for flakey test fixes.
• Expand tests around supabase/functions/* with contract cases.