@react-spa-scaffold/mcp 2.2.0 → 2.3.0

package/templates/src/main.tsx

@@ -10,46 +10,22 @@ import { ClerkThemeProvider } from '@/contexts/clerkContext';
 import { MobileProvider } from '@/contexts/mobileContext';
 import { PerformanceProviderWrapper } from '@/contexts/performanceContext';
 import { QueryProvider } from '@/contexts/queryContext';
+import { SupabaseProvider } from '@/contexts/supabaseContext';
 import { i18n, initI18n } from '@/i18n';
-import { SENTRY_CONFIG } from '@/lib/config';
+import { CLERK_CONFIG } from '@/lib/config';
+import { initSentry } from '@/lib/sentry';
 import { initPreferencesSync } from '@/stores/preferencesStore';
 
 import App from './App';
 
-// Import Clerk Publishable Key (per official docs)
-const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
-
-if (!PUBLISHABLE_KEY) {
-  throw new Error('Add your Clerk Publishable Key to the .env.local file');
-}
-
-/**
- * Lazy load Sentry after initial render to avoid blocking web vitals.
- * Returns the Sentry module for use in global error handlers.
- */
-async function initSentry() {
-  if (import.meta.env.PROD && SENTRY_CONFIG.enabled && SENTRY_CONFIG.dsn) {
-    try {
-      const Sentry = await import('@sentry/react');
-      Sentry.init({
-        dsn: SENTRY_CONFIG.dsn,
-        sendDefaultPii: true,
-        integrations: [Sentry.browserTracingIntegration()],
-        tracesSampleRate: SENTRY_CONFIG.tracesSampleRate,
-      });
-      return Sentry;
-    } catch (error) {
-      console.error('Failed to initialize Sentry:', error);
-    }
-  }
-  return null;
-}
+/** Sentry module type for error handlers */
+type SentryModule = Awaited<ReturnType<typeof initSentry>>;
 
 /**
  * Setup global error handlers for uncaught errors and promise rejections.
  * @param Sentry - The Sentry module or null if not available
  */
-function setupGlobalErrorHandlers(Sentry: Awaited<ReturnType<typeof initSentry>>) {
+function setupGlobalErrorHandlers(Sentry: SentryModule) {
   // Handle uncaught errors
   window.onerror = (message, source, lineno, colno, error) => {
     console.error('Uncaught error:', { message, source, lineno, colno, error });
@@ -82,15 +58,17 @@ initI18n().then(() => {
       <QueryProvider>
         <I18nProvider i18n={i18n}>
           <BrowserRouter>
-            <ClerkThemeProvider publishableKey={PUBLISHABLE_KEY}>
-              <MobileProvider>
-                <ErrorBoundary>
-                  <PerformanceProviderWrapper>
-                    <App />
-                    <Toaster />
-                  </PerformanceProviderWrapper>
-                </ErrorBoundary>
-              </MobileProvider>
+            <ClerkThemeProvider publishableKey={CLERK_CONFIG.publishableKey!}>
+              <SupabaseProvider>
+                <MobileProvider>
+                  <ErrorBoundary>
+                    <PerformanceProviderWrapper>
+                      <App />
+                      <Toaster />
+                    </PerformanceProviderWrapper>
+                  </ErrorBoundary>
+                </MobileProvider>
+              </SupabaseProvider>
             </ClerkThemeProvider>
           </BrowserRouter>
         </I18nProvider>

package/templates/src/mocks/constants.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared test constants for mocks and fixtures.
+ *
+ * Use these values across all mocks to ensure consistency
+ * between Clerk, Supabase, and other test utilities.
+ */
+
+/** Mock user data - consistent across all auth/database mocks */
+export const MOCK_USER = {
+  id: 'user_123',
+  email: 'test@example.com',
+  firstName: 'Test',
+  lastName: 'User',
+  fullName: 'Test User',
+  avatarUrl: 'https://example.com/avatar.jpg',
+} as const;
+
+/** Mock session ID for auth mocks */
+export const MOCK_SESSION_ID = 'sess_123';
+
+/** Mock auth token for API requests */
+export const MOCK_AUTH_TOKEN = 'mock-auth-token';
+
+/** Mock Supabase URL for MSW handlers */
+export const MOCK_SUPABASE_URL = 'https://mock.supabase.co';
+
+/** Default timestamps for fixtures */
+export const MOCK_TIMESTAMPS = {
+  created: '2024-01-01T00:00:00.000Z',
+  updated: '2024-01-01T00:00:00.000Z',
+} as const;

package/templates/src/mocks/fixtures/index.ts

@@ -1 +1,3 @@
-export { mockTodos, createTodo, createTodos, type Todo } from './todos';
+export { createTodo, createTodos, mockTodos, type Todo } from './todos';
+export { createProfile, createProfiles, mockProfiles } from './profiles';
+export { createUser, createUsers, defaultUser, mockUsers, type MockUser } from './users';

package/templates/src/mocks/fixtures/profiles.ts

@@ -0,0 +1,55 @@
+/**
+ * Mock profile fixtures for testing.
+ * Used by MSW handlers to simulate Supabase responses.
+ */
+
+import type { Profile } from '@/types/database';
+
+import { MOCK_TIMESTAMPS, MOCK_USER } from '../constants';
+
+/** Counter for unique ID generation */
+let idCounter = 0;
+
+/**
+ * Sample profiles for MSW handlers.
+ */
+export const mockProfiles: Profile[] = [
+  {
+    id: MOCK_USER.id,
+    email: MOCK_USER.email,
+    full_name: MOCK_USER.fullName,
+    avatar_url: null,
+    created_at: MOCK_TIMESTAMPS.created,
+    updated_at: MOCK_TIMESTAMPS.updated,
+  },
+];
+
+/**
+ * Create a profile with optional overrides.
+ */
+export function createProfile(overrides: Partial<Profile> = {}): Profile {
+  const now = new Date().toISOString();
+  return {
+    id: `user_${Date.now()}_${idCounter++}`,
+    email: MOCK_USER.email,
+    full_name: MOCK_USER.fullName,
+    avatar_url: null,
+    created_at: now,
+    updated_at: now,
+    ...overrides,
+  };
+}
+
+/**
+ * Create multiple profiles.
+ */
+export function createProfiles(count: number, overrides: Partial<Profile> = {}): Profile[] {
+  return Array.from({ length: count }, (_, i) =>
+    createProfile({
+      id: `user_${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      full_name: `User ${i + 1}`,
+      ...overrides,
+    }),
+  );
+}

package/templates/src/mocks/fixtures/users.ts

@@ -0,0 +1,91 @@
+/**
+ * Mock user fixtures for Clerk authentication testing.
+ * Used by clerkMock.tsx to simulate authenticated users.
+ */
+
+import { MOCK_USER } from '../constants';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface MockUser {
+  id: string;
+  firstName: string;
+  lastName: string;
+  fullName?: string;
+  primaryEmailAddress?: { emailAddress: string };
+  imageUrl?: string;
+}
+
+// =============================================================================
+// Default User
+// =============================================================================
+
+/** Default mock user based on MOCK_USER constants */
+export const defaultUser: MockUser = {
+  id: MOCK_USER.id,
+  firstName: MOCK_USER.firstName,
+  lastName: MOCK_USER.lastName,
+  fullName: MOCK_USER.fullName,
+  primaryEmailAddress: { emailAddress: MOCK_USER.email },
+  imageUrl: MOCK_USER.avatarUrl,
+};
+
+// =============================================================================
+// Static Fixtures
+// =============================================================================
+
+/** Sample users for MSW handlers */
+export const mockUsers: MockUser[] = [{ ...defaultUser }];
+
+// =============================================================================
+// Factory Functions
+// =============================================================================
+
+/** Counter for unique ID generation */
+let idCounter = 0;
+
+/**
+ * Create a mock user with optional overrides.
+ *
+ * @example
+ * ```ts
+ * const user = createUser({ firstName: 'Jane' });
+ * ```
+ */
+export function createUser(overrides: Partial<MockUser> = {}): MockUser {
+  const id = overrides.id ?? `user_${Date.now()}_${idCounter++}`;
+  const firstName = overrides.firstName ?? MOCK_USER.firstName;
+  const lastName = overrides.lastName ?? MOCK_USER.lastName;
+
+  return {
+    id,
+    firstName,
+    lastName,
+    fullName: `${firstName} ${lastName}`,
+    primaryEmailAddress: { emailAddress: MOCK_USER.email },
+    imageUrl: MOCK_USER.avatarUrl,
+    ...overrides,
+  };
+}
+
+/**
+ * Create multiple mock users.
+ *
+ * @example
+ * ```ts
+ * const users = createUsers(3);
+ * ```
+ */
+export function createUsers(count: number, overrides: Partial<MockUser> = {}): MockUser[] {
+  return Array.from({ length: count }, (_, i) =>
+    createUser({
+      id: `user_${i + 1}`,
+      firstName: `User${i + 1}`,
+      lastName: 'Test',
+      primaryEmailAddress: { emailAddress: `user${i + 1}@example.com` },
+      ...overrides,
+    }),
+  );
+}

package/templates/src/mocks/handlers/index.ts

@@ -1,7 +1,8 @@
+import { supabaseHandlers } from './supabase';
 import { todosHandlers } from './todos';
 
 /**
  * All MSW request handlers.
  * Add new feature handlers here as the application grows.
  */
-export const handlers = [...todosHandlers];
+export const handlers = [...todosHandlers, ...supabaseHandlers];

package/templates/src/mocks/handlers/supabase.ts

@@ -0,0 +1,64 @@
+/**
+ * MSW handlers for Supabase PostgREST API.
+ *
+ * Minimal handlers for testing. Extend as needed.
+ * @see https://postgrest.org/en/stable/references/api.html
+ */
+
+import { http, HttpResponse } from 'msw';
+
+import { MOCK_SUPABASE_URL, MOCK_USER } from '../constants';
+import { createProfile, mockProfiles } from '../fixtures/profiles';
+
+export const supabaseHandlers = [
+  // GET /rest/v1/profiles
+  http.get(`${MOCK_SUPABASE_URL}/rest/v1/profiles`, ({ request }) => {
+    const url = new URL(request.url);
+    const idFilter = url.searchParams.get('id');
+    const isSingle = request.headers.get('Accept')?.includes('vnd.pgrst.object');
+
+    let profiles = [...mockProfiles];
+
+    // Filter by ID if specified (eq.user_123 format)
+    if (idFilter?.startsWith('eq.')) {
+      const id = idFilter.replace('eq.', '');
+      profiles = profiles.filter((p) => p.id === id);
+    }
+
+    // Simulate RLS: only return current user's data
+    profiles = profiles.filter((p) => p.id === MOCK_USER.id);
+
+    if (isSingle) {
+      return profiles.length > 0
+        ? HttpResponse.json(profiles[0])
+        : HttpResponse.json({ message: 'No rows found', code: 'PGRST116' }, { status: 406 });
+    }
+
+    return HttpResponse.json(profiles);
+  }),
+
+  // POST /rest/v1/profiles
+  http.post(`${MOCK_SUPABASE_URL}/rest/v1/profiles`, async ({ request }) => {
+    const body = await request.json();
+    const profile = createProfile(body as Record<string, unknown>);
+
+    return request.headers.get('Prefer')?.includes('return=representation')
+      ? HttpResponse.json(profile, { status: 201 })
+      : new HttpResponse(null, { status: 201 });
+  }),
+
+  // PATCH /rest/v1/profiles
+  http.patch(`${MOCK_SUPABASE_URL}/rest/v1/profiles`, async ({ request }) => {
+    const body = await request.json();
+    const profile = { ...mockProfiles[0], ...(body as Record<string, unknown>), updated_at: new Date().toISOString() };
+
+    return request.headers.get('Prefer')?.includes('return=representation')
+      ? HttpResponse.json(profile)
+      : new HttpResponse(null, { status: 204 });
+  }),
+
+  // DELETE /rest/v1/profiles
+  http.delete(`${MOCK_SUPABASE_URL}/rest/v1/profiles`, () => {
+    return new HttpResponse(null, { status: 204 });
+  }),
+];

package/templates/src/mocks/handlers/todos.ts

@@ -4,7 +4,7 @@
  */
 import { delay, http, HttpResponse } from 'msw';
 
-import { API_CONFIG } from '@/lib/api';
+import { API_CONFIG } from '@/lib/config';
 import type { Todo } from '@/types/api';
 
 import { mockTodos } from '../fixtures/todos';

package/templates/src/mocks/index.ts

@@ -1,3 +1,9 @@
+// Shared test constants
+export * from './constants';
+
+// MSW handlers and server
 export { handlers } from './handlers';
 export { server } from './node';
+
+// Fixtures
 export * from './fixtures';

package/templates/src/pages/Profile.test.tsx

@@ -0,0 +1,263 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+import { render, resetClerkMocks, createProfile } from '@/test';
+
+import { ProfilePage } from './Profile';
+
+// Mock the hooks
+const mockMutate = vi.fn();
+const mockRefetch = vi.fn();
+
+// Default mock profile
+const defaultProfile = createProfile({
+  full_name: 'Test User',
+  email: 'test@example.com',
+  avatar_url: 'https://example.com/avatar.jpg',
+});
+
+// Hook mock state
+let mockProfileState: {
+  profile: ReturnType<typeof createProfile> | null;
+  isLoading: boolean;
+  error: Error | null;
+  exists: boolean;
+  isFetching: boolean;
+  refetch: typeof mockRefetch;
+} = {
+  profile: defaultProfile,
+  isLoading: false,
+  error: null,
+  exists: true,
+  isFetching: false,
+  refetch: mockRefetch,
+};
+
+let mockUpdateState = {
+  mutate: mockMutate,
+  isPending: false,
+  error: null as Error | null,
+};
+
+vi.mock('@/hooks', async () => {
+  const actual = await vi.importActual('@/hooks');
+  return {
+    ...actual,
+    useProfile: vi.fn(() => mockProfileState),
+    useUpdateProfile: vi.fn(() => mockUpdateState),
+  };
+});
+
+describe('ProfilePage', () => {
+  beforeEach(() => {
+    resetClerkMocks();
+    mockMutate.mockClear();
+    mockRefetch.mockClear();
+
+    // Reset mock state to defaults
+    mockProfileState = {
+      profile: defaultProfile,
+      isLoading: false,
+      error: null,
+      exists: true,
+      isFetching: false,
+      refetch: mockRefetch,
+    };
+
+    mockUpdateState = {
+      mutate: mockMutate,
+      isPending: false,
+      error: null,
+    };
+  });
+
+  it('renders profile page with title and description', () => {
+    render(<ProfilePage />);
+    // Verify both card title and description are present
+    expect(screen.getByText('Your Profile')).toBeInTheDocument();
+    expect(screen.getByText(/manage your profile information/i)).toBeInTheDocument();
+  });
+
+  it('shows loading skeleton when profile is loading', () => {
+    mockProfileState.isLoading = true;
+    mockProfileState.profile = null;
+
+    const { container } = render(<ProfilePage />);
+
+    // Should show skeleton elements
+    const skeletons = container.querySelectorAll('[class*="animate-pulse"]');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it('displays profile data when loaded', () => {
+    render(<ProfilePage />);
+
+    // Name appears in header and name field - use getAllByText
+    expect(screen.getAllByText('Test User').length).toBeGreaterThan(0);
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+    expect(screen.getByAltText(/profile avatar/i)).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+  });
+
+  it('shows avatar fallback when no avatar_url', () => {
+    mockProfileState.profile = createProfile({
+      full_name: 'John Doe',
+      avatar_url: null,
+    });
+
+    render(<ProfilePage />);
+
+    // Should show first letter of name as fallback
+    expect(screen.getByText('J')).toBeInTheDocument();
+  });
+
+  it('shows email initial when no name or avatar', () => {
+    mockProfileState.profile = createProfile({
+      full_name: null,
+      email: 'user@example.com',
+      avatar_url: null,
+    });
+
+    render(<ProfilePage />);
+
+    // Should show first letter of email as fallback
+    expect(screen.getByText('U')).toBeInTheDocument();
+  });
+
+  it('shows error state and retry button on fetch failure', async () => {
+    const user = userEvent.setup();
+    mockProfileState.error = new Error('Network error');
+    mockProfileState.profile = null;
+
+    render(<ProfilePage />);
+
+    expect(screen.getByText(/failed to load profile/i)).toBeInTheDocument();
+    expect(screen.getByText(/network error/i)).toBeInTheDocument();
+
+    const retryButton = screen.getByRole('button', { name: /try again/i });
+    await user.click(retryButton);
+
+    expect(mockRefetch).toHaveBeenCalled();
+  });
+
+  it('allows editing name field', async () => {
+    const user = userEvent.setup();
+    render(<ProfilePage />);
+
+    // Click edit button
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    await user.click(editButton);
+
+    // Should show input field
+    const input = screen.getByRole('textbox', { name: /full name/i });
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Test User');
+  });
+
+  it('saves updated name via useUpdateProfile', async () => {
+    const user = userEvent.setup();
+
+    // Mock successful mutation
+    mockMutate.mockImplementation((_data, options) => {
+      options?.onSuccess?.();
+    });
+
+    render(<ProfilePage />);
+
+    // Click edit
+    await user.click(screen.getByRole('button', { name: /edit/i }));
+
+    // Change name
+    const input = screen.getByRole('textbox', { name: /full name/i });
+    await user.clear(input);
+    await user.type(input, 'New Name');
+
+    // Click save
+    await user.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(mockMutate).toHaveBeenCalledWith({ full_name: 'New Name' }, expect.any(Object));
+    });
+  });
+
+  it('submits form on Enter key', async () => {
+    const user = userEvent.setup();
+
+    // Mock successful mutation
+    mockMutate.mockImplementation((_data, options) => {
+      options?.onSuccess?.();
+    });
+
+    render(<ProfilePage />);
+
+    // Enter edit mode
+    await user.click(screen.getByRole('button', { name: /edit/i }));
+
+    // Change name and press Enter
+    const input = screen.getByRole('textbox', { name: /full name/i });
+    await user.clear(input);
+    await user.type(input, 'Entered Name{Enter}');
+
+    await waitFor(() => {
+      expect(mockMutate).toHaveBeenCalledWith({ full_name: 'Entered Name' }, expect.any(Object));
+    });
+  });
+
+  it('shows saving state on button while updating', async () => {
+    const user = userEvent.setup();
+    mockUpdateState.isPending = true;
+
+    render(<ProfilePage />);
+
+    // Enter edit mode
+    await user.click(screen.getByRole('button', { name: /edit/i }));
+
+    // Should show saving state
+    expect(screen.getByRole('button', { name: /saving/i })).toBeDisabled();
+  });
+
+  it('cancel button reverts changes', async () => {
+    const user = userEvent.setup();
+    render(<ProfilePage />);
+
+    // Click edit
+    await user.click(screen.getByRole('button', { name: /edit/i }));
+
+    // Change name
+    const input = screen.getByRole('textbox', { name: /full name/i });
+    await user.clear(input);
+    await user.type(input, 'Changed Name');
+
+    // Click cancel
+    await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+    // Should exit edit mode and show original name (appears multiple times)
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    expect(screen.getAllByText('Test User').length).toBeGreaterThan(0);
+  });
+
+  it('shows error message when update fails', async () => {
+    const user = userEvent.setup();
+    mockUpdateState.error = new Error('Update failed');
+
+    render(<ProfilePage />);
+
+    // Enter edit mode
+    await user.click(screen.getByRole('button', { name: /edit/i }));
+
+    // Should show error message
+    expect(screen.getByText(/failed to update/i)).toBeInTheDocument();
+    expect(screen.getByText(/update failed/i)).toBeInTheDocument();
+  });
+
+  it('shows "Not set" when name is empty', () => {
+    mockProfileState.profile = createProfile({
+      full_name: null,
+      email: 'test@example.com',
+    });
+
+    render(<ProfilePage />);
+
+    expect(screen.getByText(/not set/i)).toBeInTheDocument();
+  });
+});