@react-spa-scaffold/mcp 0.3.0

package/templates/tests/unit/hooks/useExampleQuery.test.tsx

@@ -0,0 +1,94 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import type { ReactNode } from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { useExampleQuery } from '@/hooks/useExampleQuery';
+import { createTestQueryClient, server } from '@/test';
+
+// Create a wrapper with QueryClient for hook testing
+function createWrapper() {
+  const queryClient = createTestQueryClient();
+
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+describe('useExampleQuery', () => {
+  it('fetches todos successfully', async () => {
+    const { result } = renderHook(() => useExampleQuery(), {
+      wrapper: createWrapper(),
+    });
+
+    // Initially loading
+    expect(result.current.isLoading).toBe(true);
+
+    // Wait for success
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    // Verify data
+    expect(result.current.data).toHaveLength(5);
+    expect(result.current.data?.[0]).toMatchObject({
+      id: expect.any(Number),
+      title: expect.any(String),
+      completed: expect.any(Boolean),
+    });
+  });
+
+  it('handles server error gracefully', async () => {
+    // Override handler for this specific test
+    server.use(
+      http.get('https://jsonplaceholder.typicode.com/todos', () => {
+        return new HttpResponse(null, { status: 500 });
+      }),
+    );
+
+    const { result } = renderHook(() => useExampleQuery(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.error).toBeDefined();
+  });
+
+  it('handles network error', async () => {
+    server.use(
+      http.get('https://jsonplaceholder.typicode.com/todos', () => {
+        return HttpResponse.error();
+      }),
+    );
+
+    const { result } = renderHook(() => useExampleQuery(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+  });
+
+  it('handles empty response', async () => {
+    server.use(
+      http.get('https://jsonplaceholder.typicode.com/todos', () => {
+        return HttpResponse.json([]);
+      }),
+    );
+
+    const { result } = renderHook(() => useExampleQuery(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toEqual([]);
+  });
+});

package/templates/tests/unit/hooks/useLanguage.test.tsx

@@ -0,0 +1,75 @@
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+import { renderHook, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock the storage module
+vi.mock('@/lib/storage', () => ({
+  setStorageItem: vi.fn(() => true),
+}));
+
+// Mock dynamicActivate
+vi.mock('@/i18n/loadCatalog', () => ({
+  dynamicActivate: vi.fn(() => Promise.resolve()),
+}));
+
+import { useLanguage } from '@/hooks/useLanguage';
+import { dynamicActivate } from '@/i18n/loadCatalog';
+import { setStorageItem } from '@/lib/storage';
+
+// Setup i18n for tests
+i18n.loadAndActivate({ locale: 'en', messages: {} });
+
+describe('useLanguage', () => {
+  const wrapper = ({ children }: { children: ReactNode }) => <I18nProvider i18n={i18n}>{children}</I18nProvider>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns current locale', () => {
+    const { result } = renderHook(() => useLanguage(), { wrapper });
+
+    expect(result.current.currentLocale).toBeDefined();
+    expect(typeof result.current.currentLocale).toBe('string');
+  });
+
+  it('returns supported locales', () => {
+    const { result } = renderHook(() => useLanguage(), { wrapper });
+
+    expect(result.current.supportedLocales).toBeDefined();
+    expect(Array.isArray(result.current.supportedLocales)).toBe(true);
+    expect(result.current.supportedLocales).toContain('en');
+    expect(result.current.supportedLocales).toContain('es');
+    expect(result.current.supportedLocales).toContain('de');
+  });
+
+  it('returns changeLanguage function', () => {
+    const { result } = renderHook(() => useLanguage(), { wrapper });
+
+    expect(typeof result.current.changeLanguage).toBe('function');
+  });
+
+  it('changeLanguage calls dynamicActivate and setStorageItem', async () => {
+    const { result } = renderHook(() => useLanguage(), { wrapper });
+
+    await result.current.changeLanguage('es');
+
+    await waitFor(() => {
+      expect(dynamicActivate).toHaveBeenCalledWith('es');
+      expect(setStorageItem).toHaveBeenCalledWith('myapp-locale', 'es');
+    });
+  });
+
+  it('changeLanguage handles different locales', async () => {
+    const { result } = renderHook(() => useLanguage(), { wrapper });
+
+    await result.current.changeLanguage('de');
+
+    await waitFor(() => {
+      expect(dynamicActivate).toHaveBeenCalledWith('de');
+      expect(setStorageItem).toHaveBeenCalledWith('myapp-locale', 'de');
+    });
+  });
+});

package/templates/tests/unit/hooks/useMediaQuery.test.ts

@@ -0,0 +1,57 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { BREAKPOINTS, useIsDesktop, useIsMobile, useMediaQuery } from '@/hooks/useMediaQuery';
+import { mockMatchMedia } from '@/test';
+
+describe('useMediaQuery', () => {
+  beforeEach(() => {
+    window.matchMedia = mockMatchMedia(false);
+  });
+
+  it.each([
+    { matches: false, expected: false },
+    { matches: true, expected: true },
+  ])('returns $expected when query matches=$matches', ({ matches, expected }) => {
+    window.matchMedia = mockMatchMedia(matches);
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+    expect(result.current).toBe(expected);
+  });
+
+  it('updates when media query changes', () => {
+    let listener: ((e: MediaQueryListEvent) => void) | null = null;
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn((_: string, cb: (e: MediaQueryListEvent) => void) => {
+        listener = cb;
+      }),
+      removeEventListener: vi.fn(),
+    }));
+
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+    expect(result.current).toBe(false);
+
+    act(() => listener?.({ matches: true } as MediaQueryListEvent));
+    expect(result.current).toBe(true);
+  });
+});
+
+describe('BREAKPOINTS', () => {
+  it('has correct values', () => {
+    expect(BREAKPOINTS).toEqual({ sm: 640, md: 768, lg: 1024, xl: 1280 });
+  });
+});
+
+describe('useIsMobile / useIsDesktop', () => {
+  it.each([
+    { hook: useIsMobile, matches: false, expected: true, name: 'useIsMobile (mobile)' },
+    { hook: useIsMobile, matches: true, expected: false, name: 'useIsMobile (desktop)' },
+    { hook: useIsDesktop, matches: true, expected: true, name: 'useIsDesktop (desktop)' },
+    { hook: useIsDesktop, matches: false, expected: false, name: 'useIsDesktop (mobile)' },
+  ])('$name returns $expected', ({ hook, matches, expected }) => {
+    window.matchMedia = mockMatchMedia(matches);
+    const { result } = renderHook(() => hook());
+    expect(result.current).toBe(expected);
+  });
+});

package/templates/tests/unit/hooks/useThemeEffect.test.ts

@@ -0,0 +1,42 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useThemeEffect } from '@/hooks/useThemeEffect';
+import { usePreferencesStore } from '@/stores/preferencesStore';
+import { mockMatchMedia } from '@/test';
+
+describe('useThemeEffect', () => {
+  beforeEach(() => {
+    usePreferencesStore.setState({ theme: 'light' });
+    document.documentElement.classList.remove('dark');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it.each([
+    { theme: 'light', systemDark: false, expectDark: false },
+    { theme: 'dark', systemDark: false, expectDark: true },
+    { theme: 'system', systemDark: true, expectDark: true },
+    { theme: 'system', systemDark: false, expectDark: false },
+  ] as const)('applies dark=$expectDark for theme=$theme (system=$systemDark)', ({ theme, systemDark, expectDark }) => {
+    usePreferencesStore.setState({ theme });
+    window.matchMedia = mockMatchMedia(systemDark);
+
+    renderHook(() => useThemeEffect());
+
+    expect(document.documentElement.classList.contains('dark')).toBe(expectDark);
+  });
+
+  it('updates theme when store changes', () => {
+    window.matchMedia = mockMatchMedia(false);
+    renderHook(() => useThemeEffect());
+
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+
+    act(() => usePreferencesStore.setState({ theme: 'dark' }));
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+});

package/templates/tests/unit/i18n/detectLanguage.test.ts

@@ -0,0 +1,40 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { detectLanguage } from '@/i18n/detectLanguage';
+import { STORAGE_KEYS } from '@/lib/storageKeys';
+
+describe('detectLanguage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.stubGlobal('navigator', { languages: ['en-US', 'en'], language: 'en-US' });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    localStorage.clear();
+  });
+
+  describe('from localStorage', () => {
+    it.each([
+      { stored: '"es"', expected: 'es', desc: 'JSON format' },
+      { stored: 'de', expected: 'de', desc: 'plain string' },
+      { stored: '{invalid', expected: 'en', desc: 'invalid JSON (falls back)' },
+    ])('returns $expected for $desc', ({ stored, expected }) => {
+      localStorage.setItem(STORAGE_KEYS.locale, stored);
+      expect(detectLanguage()).toBe(expected);
+    });
+  });
+
+  describe('from browser', () => {
+    it.each([
+      { languages: ['es-ES', 'es'], language: 'es-ES', expected: 'es' },
+      { languages: ['de-AT'], language: 'de-AT', expected: 'de' },
+      { languages: [], language: 'es', expected: 'es' },
+      { languages: ['fr-FR'], language: 'fr-FR', expected: 'en' },
+      { languages: ['zh-CN'], language: 'zh-CN', expected: 'en' },
+    ])('returns $expected for languages=$languages', ({ languages, language, expected }) => {
+      vi.stubGlobal('navigator', { languages, language });
+      expect(detectLanguage()).toBe(expected);
+    });
+  });
+});

package/templates/tests/unit/i18n/loadCatalog.test.ts

@@ -0,0 +1,70 @@
+import { i18n } from '@lingui/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { dynamicActivate } from '@/i18n/loadCatalog';
+
+// Mock the i18n module
+vi.mock('@lingui/core', () => ({
+  i18n: {
+    locale: '',
+    messages: {} as Record<string, object>,
+    activate: vi.fn(),
+    loadAndActivate: vi.fn(),
+  },
+}));
+
+describe('dynamicActivate', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    // Reset i18n state
+    (i18n as { locale: string }).locale = '';
+    (i18n as { messages: Record<string, object> }).messages = {};
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('does nothing if locale is already active with messages', async () => {
+    (i18n as { locale: string }).locale = 'en';
+    (i18n as { messages: Record<string, object> }).messages = { en: { hello: 'Hello' } };
+
+    await dynamicActivate('en');
+
+    expect(i18n.activate).not.toHaveBeenCalled();
+    expect(i18n.loadAndActivate).not.toHaveBeenCalled();
+  });
+
+  it('activates locale if messages already loaded but different locale active', async () => {
+    (i18n as { locale: string }).locale = 'pl';
+    (i18n as { messages: Record<string, object> }).messages = { en: { hello: 'Hello' } };
+
+    await dynamicActivate('en');
+
+    expect(i18n.activate).toHaveBeenCalledWith('en');
+    expect(i18n.loadAndActivate).not.toHaveBeenCalled();
+  });
+
+  it('activates default locale if already loaded during fallback', async () => {
+    (i18n as { locale: string }).locale = '';
+    (i18n as { messages: Record<string, object> }).messages = { en: { hello: 'Hello' } };
+
+    // Try to load non-default locale (will fail in test env)
+    await dynamicActivate('de');
+
+    // Should activate the default locale since it's already loaded
+    expect(i18n.activate).toHaveBeenCalledWith('en');
+  });
+
+  it('logs error when locale fails to load', async () => {
+    (i18n as { locale: string }).locale = '';
+    (i18n as { messages: Record<string, object> }).messages = {};
+
+    // Try to load a locale (will fail in test env due to dynamic import)
+    await dynamicActivate('de');
+
+    // Should have logged an error about failing to load
+    expect(console.error).toHaveBeenCalled();
+  });
+});

package/templates/tests/unit/lib/api.test.ts

@@ -0,0 +1,142 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { api, ApiClientError } from '@/lib/api';
+
+describe('api client', () => {
+  const mockFetch = vi.fn();
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    global.fetch = mockFetch;
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  describe('HTTP methods', () => {
+    it.each([
+      { method: 'get', httpMethod: 'GET' },
+      { method: 'post', httpMethod: 'POST' },
+      { method: 'put', httpMethod: 'PUT' },
+      { method: 'patch', httpMethod: 'PATCH' },
+      { method: 'delete', httpMethod: 'DELETE' },
+    ] as const)('$method makes $httpMethod request', async ({ method, httpMethod }) => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({ id: 1 }),
+      });
+
+      await api[method]('/test');
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining('/test'),
+        expect.objectContaining({ method: httpMethod }),
+      );
+    });
+
+    it('sends request body for POST/PUT/PATCH', async () => {
+      const body = { name: 'Test' };
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({ id: 1 }),
+      });
+
+      await api.post('/test', body);
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ body: JSON.stringify(body) }),
+      );
+    });
+
+    it('handles full URL without prepending base URL', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({}),
+      });
+
+      await api.get('https://external.api/data');
+
+      expect(mockFetch).toHaveBeenCalledWith('https://external.api/data', expect.anything());
+    });
+  });
+
+  describe('error handling', () => {
+    it.each([
+      { status: 404, message: 'Resource not found', hasJson: true },
+      { status: 500, message: 'Internal Server Error', hasJson: false },
+    ])('handles $status error response', async ({ status, message, hasJson }) => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status,
+        statusText: message,
+        json: hasJson ? () => Promise.resolve({ message }) : () => Promise.reject(new Error('No JSON')),
+      });
+
+      const error = (await api.get('/error').catch((e) => e)) as ApiClientError;
+
+      expect(error).toBeInstanceOf(ApiClientError);
+      expect(error.message).toBe(message);
+      expect(error.status).toBe(status);
+    });
+
+    it('handles timeout with TIMEOUT code', async () => {
+      vi.useFakeTimers();
+      mockFetch.mockImplementationOnce(
+        () =>
+          new Promise((_, reject) => {
+            const error = new Error('Aborted');
+            error.name = 'AbortError';
+            setTimeout(() => reject(error), 100);
+          }),
+      );
+
+      const promise = api.get('/slow', { timeout: 50 });
+      vi.advanceTimersByTime(100);
+
+      const error = (await promise.catch((e) => e)) as ApiClientError;
+      expect(error.code).toBe('TIMEOUT');
+      expect(error.status).toBe(408);
+
+      vi.useRealTimers();
+    });
+
+    it.each([
+      { rejection: new Error('Network failure'), code: 'NETWORK_ERROR' },
+      { rejection: 'string error', code: 'UNKNOWN' },
+    ])('handles $code errors', async ({ rejection, code }) => {
+      mockFetch.mockRejectedValueOnce(rejection);
+
+      const error = (await api.get('/error').catch((e) => e)) as ApiClientError;
+
+      expect(error).toBeInstanceOf(ApiClientError);
+      expect(error.code).toBe(code);
+    });
+
+    it('returns undefined for 204 No Content', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 204 });
+
+      const result = await api.delete('/test/1');
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('ApiClientError', () => {
+    it('has correct properties', () => {
+      const error = new ApiClientError('Test error', 400, 'TEST_CODE');
+
+      expect(error).toMatchObject({
+        message: 'Test error',
+        status: 400,
+        code: 'TEST_CODE',
+        name: 'ApiClientError',
+      });
+    });
+  });
+});

package/templates/tests/unit/lib/format.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  formatBytes,
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  formatNumber,
+  formatPercent,
+  formatRelativeTime,
+} from '@/lib/format';
+
+describe('formatDate', () => {
+  it('formats date objects and strings', () => {
+    const date = new Date('2024-01-15T12:00:00Z');
+    expect(formatDate(date, {}, 'en-US')).toContain('2024');
+    expect(formatDate('2024-06-20', {}, 'en-US')).toContain('2024');
+  });
+
+  it('returns "Invalid date" for invalid input', () => {
+    expect(formatDate('invalid')).toBe('Invalid date');
+  });
+
+  it('respects custom options', () => {
+    const date = new Date('2024-01-15');
+    expect(formatDate(date, { weekday: 'long' }, 'en-US')).toContain('Monday');
+  });
+});
+
+describe('formatDateTime', () => {
+  it('includes time in output', () => {
+    const date = new Date('2024-01-15T14:30:00Z');
+    expect(formatDateTime(date, {}, 'en-US')).toMatch(/\d{1,2}:\d{2}/);
+  });
+});
+
+describe('formatRelativeTime', () => {
+  it.each([
+    { offset: -30 * 1000, unit: 'seconds', pattern: /second|now/i },
+    { offset: -5 * 60 * 1000, unit: 'minutes', pattern: /minute/i },
+    { offset: -60 * 60 * 1000, unit: 'hours', pattern: /hour|ago/i },
+    { offset: 24 * 60 * 60 * 1000, unit: 'days (future)', pattern: /day|tomorrow/i },
+    { offset: -45 * 24 * 60 * 60 * 1000, unit: 'months', pattern: /month/i },
+    { offset: -400 * 24 * 60 * 60 * 1000, unit: 'years', pattern: /year/i },
+  ])('formats $unit correctly', ({ offset, pattern }) => {
+    const date = new Date(Date.now() + offset);
+    expect(formatRelativeTime(date, 'en-US')).toMatch(pattern);
+  });
+
+  it('returns "Invalid date" for invalid input', () => {
+    expect(formatRelativeTime('invalid')).toBe('Invalid date');
+  });
+
+  it('accepts timestamp numbers', () => {
+    const timestamp = Date.now() - 60 * 60 * 1000;
+    expect(formatRelativeTime(timestamp, 'en-US')).toMatch(/hour|ago/i);
+  });
+});
+
+describe('formatNumber', () => {
+  it.each([
+    { value: 1234567.89, options: {}, expected: '1,234,567.89' },
+    { value: 1234.5, options: { minimumFractionDigits: 2 }, expected: '1,234.50' },
+  ])('formats $value with options', ({ value, options, expected }) => {
+    expect(formatNumber(value, options, 'en-US')).toBe(expected);
+  });
+});
+
+describe('formatCurrency', () => {
+  it.each([
+    { value: 99.99, currency: 'USD', locale: 'en-US', expected: '$99.99' },
+    { value: 99.99, currency: 'EUR', locale: 'de-DE', contains: '€' },
+  ])('formats $currency correctly', ({ value, currency, locale, expected, contains }) => {
+    const result = formatCurrency(value, currency, locale);
+    if (expected) expect(result).toBe(expected);
+    if (contains) expect(result).toContain(contains);
+  });
+});
+
+describe('formatPercent', () => {
+  it.each([
+    { value: 0.25, decimals: 0, expected: '25%' },
+    { value: 0.2567, decimals: 2, expected: '25.67%' },
+  ])('formats $value with $decimals decimals', ({ value, decimals, expected }) => {
+    expect(formatPercent(value, decimals, 'en-US')).toBe(expected);
+  });
+});
+
+describe('formatBytes', () => {
+  it.each([
+    { bytes: 0, expected: '0 Bytes' },
+    { bytes: 1024, expected: '1 KB' },
+    { bytes: 1024 * 1024, expected: '1 MB' },
+    { bytes: 1024 * 1024 * 1024, expected: '1 GB' },
+    { bytes: 1536, decimals: 1, expected: '1.5 KB' },
+    { bytes: 1536, decimals: 0, expected: '2 KB' },
+  ])('formats $bytes bytes', ({ bytes, decimals, expected }) => {
+    expect(formatBytes(bytes, decimals)).toBe(expected);
+  });
+});