@etus/bhono-app 0.1.1

package/templates/base/src/client/__tests__/routes/authenticated-layout.test.tsx

@@ -0,0 +1,252 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { screen, waitFor, act } from '@testing-library/react'
+import { renderRoute } from '../test-utils'
+
+// Mock user for authenticated tests
+const mockUser = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  name: 'Test User',
+  isSuperAdmin: false,
+  avatarUrl: null,
+}
+
+describe('Authenticated Layout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('AuthenticatedLayout', () => {
+    it('should render sidebar and main content area', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ user: mockUser }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        // Sidebar should be visible
+        expect(screen.getByRole('navigation')).toBeInTheDocument()
+      })
+
+      // Main content should be rendered
+      expect(screen.getByRole('main')).toBeInTheDocument()
+    })
+
+    it('should render dashboard page inside layout', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ user: mockUser }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        // Dashboard shows "Welcome back, {firstName}"
+        expect(screen.getByRole('heading', { name: /welcome back/i })).toBeInTheDocument()
+      })
+    })
+
+    it('should render settings page inside layout', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ user: mockUser }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      renderRoute({ initialEntries: ['/settings'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { name: /settings/i })).toBeInTheDocument()
+      })
+    })
+
+    it('should render team page inside layout', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ user: mockUser }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      renderRoute({ initialEntries: ['/team'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { name: /team/i })).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('AuthenticatedPendingComponent', () => {
+    it('should show loading skeleton while auth is pending', async () => {
+      // Create a promise that never resolves to simulate pending state
+      let resolveAuth: (value: Response) => void
+      const pendingPromise = new Promise<Response>((resolve) => {
+        resolveAuth = resolve
+      })
+
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return pendingPromise
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      // Should show skeleton loading states
+      await waitFor(() => {
+        const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+        expect(skeletons.length).toBeGreaterThan(0)
+      }, { timeout: 1000 })
+
+      // Clean up by resolving the pending promise
+      act(() => {
+        resolveAuth!({
+          ok: true,
+          json: () => Promise.resolve({ user: mockUser }),
+        } as Response)
+      })
+    })
+
+    it('should show sidebar skeleton during loading', async () => {
+      let resolveAuth: (value: Response) => void
+      const pendingPromise = new Promise<Response>((resolve) => {
+        resolveAuth = resolve
+      })
+
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return pendingPromise
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      // Should show skeleton elements
+      await waitFor(() => {
+        const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+        expect(skeletons.length).toBeGreaterThan(0)
+      }, { timeout: 1000 })
+
+      // Clean up
+      act(() => {
+        resolveAuth!({
+          ok: true,
+          json: () => Promise.resolve({ user: mockUser }),
+        } as Response)
+      })
+    })
+  })
+
+  describe('Redirect to login', () => {
+    it('should redirect to login when not authenticated', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: false,
+            status: 401,
+            json: () => Promise.resolve({ error: 'Not authenticated' }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      const { router } = renderRoute({ initialEntries: ['/dashboard'] })
+
+      // Should redirect to login
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/login')
+      }, { timeout: 3000 })
+    })
+
+    it('should redirect from settings when not authenticated', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: false,
+            status: 401,
+            json: () => Promise.resolve({ error: 'Not authenticated' }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      const { router } = renderRoute({ initialEntries: ['/settings'] })
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/login')
+      }, { timeout: 3000 })
+    })
+
+    it('should redirect from team when not authenticated', async () => {
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: false,
+            status: 401,
+            json: () => Promise.resolve({ error: 'Not authenticated' }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+
+      const { router } = renderRoute({ initialEntries: ['/team'] })
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/login')
+      }, { timeout: 3000 })
+    })
+  })
+
+})

package/templates/base/src/client/__tests__/routes/dashboard.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import { renderRoute } from '../test-utils'
+
+// Mock user for authenticated tests
+const mockUser = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  name: 'Test User',
+  isSuperAdmin: false,
+  avatarUrl: null,
+}
+
+describe('Dashboard Page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('when authenticated', () => {
+    beforeEach(() => {
+      // Mock fetch to return authenticated user
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve({ user: mockUser }),
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+    })
+
+    it('should render dashboard when authenticated', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should display user first name in welcome message', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText(/welcome back, test/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should display dashboard stats cards', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText('Total Users')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Accounts')).toBeInTheDocument()
+      expect(screen.getByText('API Requests')).toBeInTheDocument()
+      expect(screen.getByText('Uptime')).toBeInTheDocument()
+    })
+
+    it('should show navigation sidebar', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText('Dashboard')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Team')).toBeInTheDocument()
+      expect(screen.getByText('Integrations')).toBeInTheDocument()
+      expect(screen.getByText('Settings')).toBeInTheDocument()
+    })
+
+    it('should display user information in sidebar', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText(mockUser.name)).toBeInTheDocument()
+      })
+
+      expect(screen.getByText(mockUser.email)).toBeInTheDocument()
+    })
+
+    it('should display quick action cards', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText('Invite Team Members')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('Database')).toBeInTheDocument()
+      expect(screen.getByText('Security')).toBeInTheDocument()
+    })
+
+    it('should display recent activity section', async () => {
+      renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(() => {
+        expect(screen.getByText('Recent Activity')).toBeInTheDocument()
+      })
+
+      expect(screen.getByText('No recent activity')).toBeInTheDocument()
+    })
+  })
+
+  describe('when unauthenticated', () => {
+    beforeEach(() => {
+      // Mock fetch to return unauthenticated
+      vi.spyOn(global, 'fetch').mockImplementation((url) => {
+        if (url === '/auth/me') {
+          return Promise.resolve({
+            ok: false,
+            status: 401,
+          } as Response)
+        }
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({}),
+        } as Response)
+      })
+    })
+
+    it('should redirect to login when not authenticated', async () => {
+      const { router } = renderRoute({ initialEntries: ['/dashboard'] })
+
+      await waitFor(
+        () => {
+          expect(router.state.location.pathname).toBe('/login')
+        },
+        { timeout: 3000 }
+      )
+    })
+  })
+})

package/templates/base/src/client/__tests__/routes/error-components.test.tsx

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+// Mock TanStack Router hooks before importing components
+vi.mock('@tanstack/react-router', () => ({
+  createRootRoute: vi.fn(() => ({ component: vi.fn(), errorComponent: vi.fn() })),
+  createFileRoute: vi.fn(() => vi.fn(() => ({}))),
+  Outlet: () => null,
+  redirect: vi.fn(),
+  useRouter: () => ({
+    invalidate: vi.fn(),
+    navigate: vi.fn(),
+    history: { back: vi.fn() },
+  }),
+  useLocation: () => ({
+    pathname: '/dashboard',
+  }),
+  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
+    <a href={to}>{children}</a>
+  ),
+}))
+
+// Mock useAuth for Sidebar component
+vi.mock('@/hooks/use-auth', () => ({
+  useAuth: () => ({
+    user: { id: '1', email: 'test@example.com', name: 'Test User', avatarUrl: null },
+    logout: vi.fn(),
+    isLoggingOut: false,
+    isAuthenticated: true,
+    isLoading: false,
+  }),
+}))
+
+// Mock useTheme for Sidebar component
+vi.mock('@/hooks/use-theme', () => ({
+  useTheme: () => ({
+    theme: 'system',
+    resolvedTheme: 'light',
+    setTheme: vi.fn(),
+  }),
+}))
+
+// Import components after mocks are set up
+import { RootErrorComponent } from '../../routes/__root'
+import { AuthenticatedErrorComponent, AuthenticatedPendingComponent } from '../../routes/_authenticated'
+
+describe('RootErrorComponent', () => {
+  it('renders error message with application error title', () => {
+    const error = new Error('Test error message')
+    render(<RootErrorComponent error={error} />)
+
+    expect(screen.getByText('Application Error')).toBeInTheDocument()
+    expect(screen.getByText(/something went wrong/i)).toBeInTheDocument()
+  })
+
+  it('displays the error details', () => {
+    const error = new Error('Detailed error for debugging')
+    render(<RootErrorComponent error={error} />)
+
+    expect(screen.getByText(/Detailed error for debugging/)).toBeInTheDocument()
+  })
+
+  it('renders try again button', () => {
+    const error = new Error('Error')
+    render(<RootErrorComponent error={error} />)
+
+    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument()
+  })
+
+  it('renders go home button', () => {
+    const error = new Error('Error')
+    render(<RootErrorComponent error={error} />)
+
+    expect(screen.getByRole('button', { name: /go home/i })).toBeInTheDocument()
+  })
+
+  it('calls router.invalidate when try again is clicked', () => {
+    const error = new Error('Error')
+    render(<RootErrorComponent error={error} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /try again/i }))
+    // The mock should have been called
+  })
+
+  it('has centered layout', () => {
+    const error = new Error('Error')
+    const { container } = render(<RootErrorComponent error={error} />)
+
+    const wrapper = container.firstChild as HTMLElement
+    expect(wrapper).toHaveClass('flex', 'min-h-screen', 'items-center', 'justify-center')
+  })
+})
+
+describe('AuthenticatedErrorComponent', () => {
+  it('renders error message with correct title', () => {
+    const error = new Error('Test authentication error')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText(/an error occurred while loading this page/i)).toBeInTheDocument()
+  })
+
+  it('displays error details in development', () => {
+    const error = new Error('Detailed auth error message')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    expect(screen.getByText(/Detailed auth error message/)).toBeInTheDocument()
+  })
+
+  it('renders sidebar alongside error', () => {
+    const error = new Error('Error')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    // Sidebar should be present (navigation)
+    expect(screen.getByRole('navigation')).toBeInTheDocument()
+  })
+
+  it('renders try again button', () => {
+    const error = new Error('Error')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument()
+  })
+
+  it('renders go back button', () => {
+    const error = new Error('Error')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    expect(screen.getByRole('button', { name: /go back/i })).toBeInTheDocument()
+  })
+
+  it('renders go home button', () => {
+    const error = new Error('Error')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    expect(screen.getByRole('button', { name: /go home/i })).toBeInTheDocument()
+  })
+
+  it('has correct layout structure', () => {
+    const error = new Error('Error')
+    const { container } = render(<AuthenticatedErrorComponent error={error} />)
+
+    const wrapper = container.firstChild as HTMLElement
+    expect(wrapper).toHaveClass('flex', 'h-screen', 'overflow-hidden')
+  })
+
+  it('handles button clicks', () => {
+    const error = new Error('Error')
+    render(<AuthenticatedErrorComponent error={error} />)
+
+    // Click all action buttons - they should not throw
+    fireEvent.click(screen.getByRole('button', { name: /try again/i }))
+    fireEvent.click(screen.getByRole('button', { name: /go back/i }))
+    fireEvent.click(screen.getByRole('button', { name: /go home/i }))
+  })
+})
+
+describe('AuthenticatedPendingComponent', () => {
+  it('renders skeleton loader', () => {
+    render(<AuthenticatedPendingComponent />)
+
+    const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+
+  it('has correct layout structure', () => {
+    const { container } = render(<AuthenticatedPendingComponent />)
+
+    const wrapper = container.firstChild as HTMLElement
+    expect(wrapper).toHaveClass('flex', 'h-screen', 'overflow-hidden')
+  })
+
+  it('renders main content area', () => {
+    render(<AuthenticatedPendingComponent />)
+
+    expect(screen.getByRole('main')).toBeInTheDocument()
+  })
+
+  it('renders sidebar skeleton area', () => {
+    const { container } = render(<AuthenticatedPendingComponent />)
+
+    // Should have the sidebar skeleton (aside element)
+    const aside = container.querySelector('aside')
+    expect(aside).toBeInTheDocument()
+  })
+})

package/templates/base/src/client/__tests__/routes/login.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderRoute } from '../test-utils'
+
+describe('Login Page', () => {
+  beforeEach(() => {
+    // Reset all mocks before each test
+    vi.clearAllMocks()
+
+    // Mock fetch to return unauthenticated by default
+    vi.spyOn(global, 'fetch').mockImplementation((url) => {
+      if (url === '/auth/me') {
+        return Promise.resolve({
+          ok: false,
+          status: 401,
+        } as Response)
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({}),
+      } as Response)
+    })
+  })
+
+  it('should render login page at /login route', async () => {
+    renderRoute({ initialEntries: ['/login'] })
+
+    await waitFor(() => {
+      expect(screen.getByText('Welcome back')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('Sign in to your account to continue')).toBeInTheDocument()
+  })
+
+  it('should display Google OAuth login button', async () => {
+    renderRoute({ initialEntries: ['/login'] })
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /continue with google/i })).toBeInTheDocument()
+    })
+  })
+
+  it('should render login content without waiting for authentication', async () => {
+    // Login page is public - should render immediately without blocking on auth
+    const { container } = renderRoute({ initialEntries: ['/login'] })
+
+    // Login page should render quickly without spinner/loading state
+    await waitFor(() => {
+      expect(screen.getByText('Welcome back')).toBeInTheDocument()
+    })
+
+    // All interactive elements should be available immediately
+    expect(screen.getByRole('button', { name: /continue with google/i })).toBeInTheDocument()
+    expect(screen.getByText('Sign in to your account to continue')).toBeInTheDocument()
+
+    // Should not show any loading indicators
+    expect(container.querySelector('[data-loading]')).not.toBeInTheDocument()
+    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument()
+  })
+
+  it('should trigger OAuth flow when clicking login button', async () => {
+    const user = userEvent.setup()
+
+    // Mock window.location.href with try/finally for guaranteed cleanup
+    const originalLocation = window.location
+    const locationMock = {
+      ...originalLocation,
+      href: '',
+    }
+    Object.defineProperty(window, 'location', {
+      value: locationMock,
+      writable: true,
+    })
+
+    try {
+      renderRoute({ initialEntries: ['/login'] })
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /continue with google/i })).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole('button', { name: /continue with google/i }))
+
+      expect(window.location.href).toBe('/auth/login')
+    } finally {
+      // Restore original location even if test fails
+      Object.defineProperty(window, 'location', {
+        value: originalLocation,
+        writable: true,
+      })
+    }
+  })
+
+  it('should show Terms of Service and Privacy Policy links', async () => {
+    renderRoute({ initialEntries: ['/login'] })
+
+    await waitFor(() => {
+      expect(screen.getByText('Terms of Service')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('Privacy Policy')).toBeInTheDocument()
+  })
+
+  it('should have a link back to home page', async () => {
+    renderRoute({ initialEntries: ['/login'] })
+
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: /hono/i })).toBeInTheDocument()
+    })
+  })
+})