9 posts tagged with "saas-development"

// ❌ Depends on real backend
test('create agent', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/')

  // Click create button
  await authenticatedPage.click('button:has-text("Create")')

  // Fill form
  await authenticatedPage.fill('input[name="name"]', 'Test Agent')
  await authenticatedPage.click('button[type="submit"]')

  // Wait for API response
  await authenticatedPage.waitForTimeout(2000)

  // Verify... but what if backend is down? DB connection failed?
})

// e2e/fixtures.ts
export const mockAgents = [
  {
    agent_id: 'agent-1',
    user_id: 'test-user-id',
    name: 'Test Agent 1',
    skills: [],
    mcp_tools: [],
    llm_config: { provider: 'anthropic', model: 'claude-3-5-sonnet-20241022' },
    risk_threshold: 'medium',
    auto_confirm_low: true,
    created_at: '2024-01-01T00:00:00Z',
  },
]

export const mockSkills = [
  {
    skill_id: 'skill-1',
    owner_id: 'test-user-id',
    name: 'Test Skill',
    system_prompt: 'You are helpful.',
    is_public: false,
    is_own: true,
  },
]

export async function setupMockApi(page: Page) {
  // Mock GET /api/agents
  await page.route('**/api/agents', async (route) => {
    if (route.request().method() === 'GET') {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(mockAgents),
      })
    } else if (route.request().method() === 'POST') {
      // Simulate creation
      const body = route.request().postDataJSON()
      const newAgent = {
        agent_id: `agent-${Date.now()}`,
        user_id: 'test-user-id',
        name: body.name,
        created_at: new Date().toISOString(),
        ...body,
      }
      mockAgents.push(newAgent)
      await route.fulfill({
        status: 201,
        contentType: 'application/json',
        body: JSON.stringify(newAgent),
      })
    }
  })

  // Mock GET/PATCH/DELETE /api/agents/:id
  await page.route('**/api/agents/*', async (route) => {
    const url = route.request().url()
    const match = url.match(/\/api\/agents\/([^/]+)/)
    const agentId = match?.[1]

    if (route.request().method() === 'GET') {
      const agent = mockAgents.find((a) => a.agent_id === agentId)
      await route.fulfill({
        status: agent ? 200 : 404,
        contentType: 'application/json',
        body: JSON.stringify(agent || { error: 'Not found' }),
      })
    } else if (route.request().method() === 'DELETE') {
      const index = mockAgents.findIndex((a) => a.agent_id === agentId)
      if (index !== -1) mockAgents.splice(index, 1)
      await route.fulfill({ status: 204 })
    }
  })

  // Mock /api/skills
  await page.route('**/api/skills**', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify(mockSkills),
    })
  })

  // Mock /api/health
  await page.route('**/api/health', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ status: 'ok' }),
    })
  })
}

export const test = base.extend<{ authenticatedPage: Page }>({
  authenticatedPage: async ({ page }, use) => {
    await setupMockAuth(page)
    await setupMockApi(page)  // Intercept all API
    await use(page)
  },
})

// e2e/dashboard.spec.ts
import { test, expect, mockAgents } from './fixtures'

test('should display agent list', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/')

  // API automatically mocked, returns mockAgents
  const agentCards = authenticatedPage.locator('[data-testid="agent-card"]')

  // Assertion based on known mock data
  await expect(agentCards).toHaveCount(mockAgents.length)
})

test('should create new agent', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/')

  await authenticatedPage.click('button:has-text("Create")')

  const dialog = authenticatedPage.locator('[role="dialog"]')
  await dialog.locator('input[name="name"]').fill('New Agent')
  await dialog.locator('button[type="submit"]').click()

  // POST /api/agents mocked, returns 201
  await authenticatedPage.waitForTimeout(500)

  // Verify UI update
  await expect(authenticatedPage.locator('text=New Agent')).toBeVisible()
})

// Exact match
await page.route('**/api/agents', handler)

// Wildcard match
await page.route('**/api/agents/**', handler)

// Regex match
await page.route(/\/api\/agents\/\d+/, handler)

await page.route('**/api/agents', async (route) => {
  const body = route.request().postDataJSON()
  console.log('Request body:', body)

  // Return different responses based on request content
  if (body.name === 'error-test') {
    await route.fulfill({ status: 400, body: JSON.stringify({ error: 'Bad request' }) })
  } else {
    await route.fulfill({ status: 201, body: JSON.stringify({ id: 'new-id', ...body }) })
  }
})

// Network error
await page.route('**/api/agents', (route) => route.abort('failed'))

// Timeout
await page.route('**/api/agents', async (route) => {
  await new Promise((r) => setTimeout(r, 30000))
  route.continue()
})

// 500 error
await page.route('**/api/agents', (route) =>
  route.fulfill({ status: 500, body: JSON.stringify({ error: 'Internal error' }) })
)

// Only mock specific API, pass through others
await page.route('**/api/**', async (route) => {
  const url = route.request().url()

  if (url.includes('/api/agents')) {
    await route.fulfill({ status: 200, body: JSON.stringify(mockAgents) })
  } else {
    await route.continue()  // Other APIs use real requests
  }
})

// Centralize all mock data
// e2e/fixtures.ts
export const mockData = {
  agents: [...],
  skills: [...],
  apiKeys: [...],
  tasks: [...],
}

// Reset before each test
test.beforeEach(() => {
  Object.assign(mockData, JSON.parse(JSON.stringify(originalMockData)))
})

// ❌ Every test goes through login
test('dashboard', async ({ page }) => {
  await page.goto('/login')
  await page.fill('input[name="email"]', '[email protected]')
  await page.fill('input[name="password"]', 'password')
  await page.click('button[type="submit"]')
  await page.waitForURL('/dashboard')
  // Finally can start testing...
  await expect(page.locator('h1')).toBeVisible()
})

// e2e/fixtures.ts
import { test as base, expect, Page } from '@playwright/test'

// Mock user data
export const mockUser = {
  id: 'test-user-id',
  email: '[email protected]',
  aud: 'authenticated',
  role: 'authenticated',
}

export const mockAccessToken = 'mock-access-token-for-testing'

// Inject auth token into localStorage
export async function setupMockAuth(page: Page) {
  await page.addInitScript(
    ({ user, accessToken }) => {
      const mockSession = {
        access_token: accessToken,
        refresh_token: 'mock-refresh-token',
        expires_in: 3600,
        expires_at: Math.floor(Date.now() / 1000) + 3600,
        token_type: 'bearer',
        user,
      }
      // Supabase auth token key format: sb-{project}-auth-token
      localStorage.setItem('sb-placeholder-auth-token', JSON.stringify(mockSession))
    },
    { user: mockUser, accessToken: mockAccessToken }
  )
}

// Extend fixture
export const test = base.extend<{
  authenticatedPage: Page
}>({
  authenticatedPage: async ({ page }, use) => {
    await setupMockAuth(page)
    await use(page)
  },
})

export { expect }

// e2e/dashboard.spec.ts
import { test, expect } from './fixtures'

test.describe('Dashboard', () => {
  test('should display welcome message', async ({ authenticatedPage }) => {
    // Direct access to protected page, no login needed
    await authenticatedPage.goto('/dashboard')

    await expect(authenticatedPage.locator('h1')).toContainText('Welcome')
  })

  test('should show agent list', async ({ authenticatedPage }) => {
    await authenticatedPage.goto('/dashboard')

    const agents = authenticatedPage.locator('[data-testid="agent-card"]')
    await expect(agents.first()).toBeVisible()
  })
})

// Unauthenticated test (redirects to login)
test('redirects to login when not authenticated', async ({ page }) => {
  await page.goto('/dashboard')
  await page.waitForTimeout(500)

  expect(page.url()).toContain('/login')
})

// Authenticated test (direct dashboard access)
test('allows access when authenticated', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/dashboard')
  await authenticatedPage.waitForTimeout(500)

  expect(authenticatedPage.url()).not.toContain('/login')
})

// ❌ Wrong: Set after page load (may have already redirected)
await page.goto('/dashboard')
await page.evaluate(() => {
  localStorage.setItem('auth-token', '...')
})
// Auth guard already detected unauthenticated and redirected

// ✅ Correct: Inject before page load
await page.addInitScript(() => {
  localStorage.setItem('auth-token', '...')
})
await page.goto('/dashboard')  // Auth guard detects token on load

// playwright.config.ts
export default defineConfig({
  testDir: './e2e',
  fullyParallel: false,  // Serial execution to avoid state pollution
  workers: 1,
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
})

export const test = base.extend<{
  authenticatedPage: Page
}>({
  authenticatedPage: async ({ page }, use) => {
    await setupMockAuth(page)
    await setupMockApi(page)  // Also mock API
    await use(page)
  },
})

// AuthGuard component - tests get stuck here
export function AuthGuard({ children }: AuthGuardProps) {
  const { isAuthenticated, loading } = useAuth()

  if (loading) {
    return <Spinner />  // Forever showing spinner
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" />
  }

  return <>{children}</>
}

// authStore.ts - problematic code
export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      loading: true,  // 👈 Default is true
      // ...
    }),
    { name: 'auth-storage' }
  )
)

// hooks/useAuth.ts
export function useAuth() {
  const { user, token, loading, setUser, setToken, setLoading } = useAuthStore()

  useEffect(() => {
    const initAuth = async () => {
      // 👇 Check test mode first
      const testAuthUser = localStorage.getItem('test-auth-user')
      const testAuthToken = localStorage.getItem('test-auth-token')

      if (testAuthUser && testAuthToken) {
        try {
          const userData = JSON.parse(testAuthUser) as User
          setUser(userData)
          setToken(testAuthToken)
          setLoading(false)
          console.log('[useAuth] Using test mode auth')
          return  // 👈 Return early, skip Supabase init
        } catch (e) {
          console.error('Failed to parse test auth user:', e)
        }
      }

      // 👇 Normal mode: proceed with Supabase Auth
      try {
        const { data: { session } } = await supabase.auth.getSession()
        if (session) {
          setUser(session.user as User)
          setToken(session.access_token)
        }
      } catch (error) {
        console.error('Auth init failed:', error)
      } finally {
        setLoading(false)
      }
    }

    initAuth()

    // 👇 Skip auth state listener in test mode
    if (localStorage.getItem('test-auth-user')) {
      return
    }

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        // ... normal auth state handling
      }
    )

    return () => subscription.unsubscribe()
  }, [])
}

// stores/authStore.ts
export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      loading: false,  // 👈 Change to false, let useAuth hook control state
      setUser: (user) => set({ user }),
      setToken: (token) => set({ token }),
      setLoading: (loading) => set({ loading }),
      logout: () => set({ user: null, token: null, loading: false }),
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({ user: state.user, token: state.token }),
    }
  )
)

// e2e/fixtures.ts
import { test as base } from '@playwright/test'

export const mockUser = {
  id: 'test-user-id',
  email: '[email protected]',
  created_at: '2024-01-01T00:00:00Z',
}

export const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    // Visit page first to set localStorage origin
    await page.goto('/login')

    // 👇 Inject test auth state into localStorage
    await page.evaluate(
      ({ user, token }) => {
        localStorage.setItem('test-auth-user', JSON.stringify(user))
        localStorage.setItem('test-auth-token', token)
      },
      { user: mockUser, token: 'mock-access-token' }
    )

    // Navigate to protected page, useAuth will detect test mode
    await page.goto('/dashboard')

    await use(page)
  },
})

// e2e/dashboard.spec.ts
import { test, expect } from './fixtures'

test('dashboard shows user agents', async ({ authenticatedPage }) => {
  // authenticatedPage is already authenticated, no login needed
  await expect(authenticatedPage.getByText('Test Agent')).toBeVisible()
})

// ❌ No caching: requests on every mount
function McpToolsPage() {
  const [tools, setTools] = useState([])

  useEffect(() => {
    mcpToolsApi.list().then(setTools)
  }, [])

  return <ToolList tools={tools} />
}

// src/stores/mcpToolsStore.ts
import { create } from 'zustand'
import { mcpToolsApi, type McpTool } from '@/services/api'

const CACHE_TTL = 10 * 60 * 1000 // 10 minutes

interface McpToolsState {
  tools: McpTool[]
  lastFetchTime: number | null
  loading: boolean
  error: string | null

  fetchTools: (force?: boolean) => Promise<void>
  clearError: () => void
}

export const useMcpToolsStore = create<McpToolsState>((set, get) => ({
  tools: [],
  lastFetchTime: null,
  loading: false,
  error: null,

  fetchTools: async (force = false) => {
    const { tools, lastFetchTime } = get()

    // Has cache, not expired, not forced → skip
    if (tools.length && lastFetchTime && !force) {
      if (Date.now() - lastFetchTime < CACHE_TTL) {
        return  // Cache hit
      }
    }

    set({ loading: true, error: null })
    try {
      const data = await mcpToolsApi.list()
      set({ tools: data, lastFetchTime: Date.now(), loading: false })
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Failed to fetch tools'
      set({ error: message, loading: false })
    }
  },

  clearError: () => set({ error: null }),
}))

// ✅ Using store cache
function McpToolsPage() {
  const { tools, loading, fetchTools } = useMcpToolsStore()

  useEffect(() => {
    fetchTools()  // Auto-checks cache
  }, [fetchTools])

  if (loading) return <Spinner />
  return <ToolList tools={tools} />
}

// Force refresh
function RefreshButton() {
  const { fetchTools } = useMcpToolsStore()
  return <button onClick={() => fetchTools(true)}>Refresh</button>
}

// Cache check logic
if (tools.length && lastFetchTime && !force) {
  if (Date.now() - lastFetchTime < CACHE_TTL) {
    return  // Cache valid, skip request
  }
}

interface CacheOptions {
  ttl: number                    // Expiration time
  staleWhileRevalidate: boolean  // Return stale data while refreshing
}

// Background refresh after expiration, return cached data first
if (tools.length && lastFetchTime) {
  const age = Date.now() - lastFetchTime
  if (age < CACHE_TTL) {
    return  // Cache fresh
  }
  if (options.staleWhileRevalidate && age < CACHE_TTL * 2) {
    // Cache stale but acceptable, background refresh
    mcpToolsApi.list().then(data => set({ tools: data, lastFetchTime: Date.now() }))
    return
  }
}