Files
resolutionflow/frontend/src/components/common/__tests__/EmailVerificationGate.test.tsx
Michael Chihlas ece82225f2 feat(billing): add FeatureGate, UpgradePrompt, EmailVerificationGate components
Three drop-in gating components for the self-serve signup flow.

- FeatureGate reads useFeature(flag) and renders children when enabled,
  else a fallback (default UpgradePrompt). UX-only — security boundary
  remains require_feature on the backend.
- UpgradePrompt resolves a feature key to display name + required plan
  via an inline catalog and links to /account/billing/select-plan.
- EmailVerificationGate gates protected content behind a 6-day grace
  period; renders a minimal EmailVerificationWall (resend + sign out)
  on Day 7+ unverified. Wall design will be refined in Task 37.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-06 21:01:53 -04:00

124 lines
3.6 KiB
TypeScript

import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import { BrowserRouter } from 'react-router-dom'
import { EmailVerificationGate } from '../EmailVerificationGate'
import { useAuthStore } from '@/store/authStore'
import type { User } from '@/types'
function makeUser(overrides: Partial<User> = {}): User {
return {
id: 'user-1',
email: 'test@example.com',
name: 'Test User',
role: 'engineer',
is_super_admin: false,
is_active: true,
must_change_password: false,
account_id: 'acct-1',
account_role: 'engineer',
team_id: null,
created_at: '2026-05-01T00:00:00Z',
last_login: null,
phone: null,
job_title: null,
timezone: 'UTC',
avatar_url: null,
email_verified_at: null,
...overrides,
}
}
const FROZEN_NOW = new Date('2026-05-06T00:00:00Z')
function renderWithRouter(ui: React.ReactElement) {
return render(<BrowserRouter>{ui}</BrowserRouter>)
}
describe('EmailVerificationGate', () => {
beforeEach(() => {
vi.useFakeTimers()
vi.setSystemTime(FROZEN_NOW)
useAuthStore.setState({ user: null, token: null, isAuthenticated: false })
})
afterEach(() => {
vi.useRealTimers()
})
it('renders children when no user is signed in', () => {
renderWithRouter(
<EmailVerificationGate>
<div>protected</div>
</EmailVerificationGate>,
)
expect(screen.getByText('protected')).toBeInTheDocument()
})
it('renders children when user has verified email', () => {
useAuthStore.setState({
user: makeUser({ email_verified_at: '2026-04-01T00:00:00Z' }),
})
renderWithRouter(
<EmailVerificationGate>
<div>protected</div>
</EmailVerificationGate>,
)
expect(screen.getByText('protected')).toBeInTheDocument()
})
it('renders children on day 1 unverified (within grace)', () => {
// created 1 day before frozen now.
useAuthStore.setState({
user: makeUser({ created_at: '2026-05-05T00:00:00Z' }),
})
renderWithRouter(
<EmailVerificationGate>
<div>protected</div>
</EmailVerificationGate>,
)
expect(screen.getByText('protected')).toBeInTheDocument()
})
it('renders children on day 6 unverified (last day of grace)', () => {
// created 6 days before frozen now.
useAuthStore.setState({
user: makeUser({ created_at: '2026-04-30T00:00:00Z' }),
})
renderWithRouter(
<EmailVerificationGate>
<div>protected</div>
</EmailVerificationGate>,
)
expect(screen.getByText('protected')).toBeInTheDocument()
})
it('renders wall on day 7 unverified user', () => {
// created 7 days before frozen now -> elapsed=7, > grace=6 -> wall.
useAuthStore.setState({
user: makeUser({ created_at: '2026-04-29T00:00:00Z' }),
})
renderWithRouter(
<EmailVerificationGate>
<div>protected</div>
</EmailVerificationGate>,
)
expect(screen.queryByText('protected')).not.toBeInTheDocument()
expect(screen.getByTestId('email-verification-wall')).toBeInTheDocument()
expect(screen.getByText(/Verify your email to continue/i)).toBeInTheDocument()
})
it('renders wall on day 8 unverified user', () => {
// created 8 days before frozen now.
useAuthStore.setState({
user: makeUser({ created_at: '2026-04-28T00:00:00Z' }),
})
renderWithRouter(
<EmailVerificationGate>
<div>protected</div>
</EmailVerificationGate>,
)
expect(screen.queryByText('protected')).not.toBeInTheDocument()
expect(screen.getByTestId('email-verification-wall')).toBeInTheDocument()
})
})