@react-spa-scaffold/mcp 0.3.0

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

@@ -0,0 +1,90 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { clearAppStorage, getStorageItem, removeStorageItem, setStorageItem } from '@/lib/storage';
+import { STORAGE_KEYS } from '@/lib/storageKeys';
+
+describe('storage utilities', () => {
+  beforeEach(() => localStorage.clear());
+  afterEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  describe('setStorageItem', () => {
+    it('stores values and returns true', () => {
+      expect(setStorageItem(STORAGE_KEYS.preferences, { theme: 'dark' })).toBe(true);
+      expect(localStorage.getItem(STORAGE_KEYS.preferences)).toBe('{"theme":"dark"}');
+
+      expect(setStorageItem(STORAGE_KEYS.locale, 'en')).toBe(true);
+      expect(localStorage.getItem(STORAGE_KEYS.locale)).toBe('"en"');
+    });
+
+    it('returns false on storage failure', () => {
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+        throw new Error('QuotaExceeded');
+      });
+
+      expect(setStorageItem(STORAGE_KEYS.preferences, {})).toBe(false);
+    });
+  });
+
+  describe('getStorageItem', () => {
+    it.each([
+      { stored: '{"theme":"dark"}', defaultVal: { theme: 'light' }, expected: { theme: 'dark' } },
+      { stored: null, defaultVal: { theme: 'light' }, expected: { theme: 'light' } },
+      { stored: 'not-json', defaultVal: 'en', expected: 'not-json' },
+    ])('retrieves stored value or default', ({ stored, defaultVal, expected }) => {
+      if (stored) localStorage.setItem(STORAGE_KEYS.preferences, stored);
+      expect(getStorageItem(STORAGE_KEYS.preferences, defaultVal)).toEqual(expected);
+    });
+
+    it('returns default when storage cleared during parse', () => {
+      let callCount = 0;
+      vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+        callCount++;
+        return callCount === 1 ? 'invalid{' : null;
+      });
+
+      expect(getStorageItem(STORAGE_KEYS.locale, 'default')).toBe('default');
+    });
+  });
+
+  describe('removeStorageItem', () => {
+    it('removes value and returns true', () => {
+      localStorage.setItem(STORAGE_KEYS.preferences, '{}');
+      expect(removeStorageItem(STORAGE_KEYS.preferences)).toBe(true);
+      expect(localStorage.getItem(STORAGE_KEYS.preferences)).toBeNull();
+    });
+
+    it('returns false on failure', () => {
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.spyOn(Storage.prototype, 'removeItem').mockImplementation(() => {
+        throw new Error();
+      });
+
+      expect(removeStorageItem(STORAGE_KEYS.preferences)).toBe(false);
+    });
+  });
+
+  describe('clearAppStorage', () => {
+    it('clears only app keys', () => {
+      localStorage.setItem(STORAGE_KEYS.preferences, '{}');
+      localStorage.setItem(STORAGE_KEYS.locale, '"en"');
+      localStorage.setItem('other-key', 'value');
+
+      expect(clearAppStorage()).toBe(true);
+      expect(localStorage.getItem(STORAGE_KEYS.preferences)).toBeNull();
+      expect(localStorage.getItem('other-key')).toBe('value');
+    });
+
+    it('returns false on failure', () => {
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.spyOn(Storage.prototype, 'removeItem').mockImplementation(() => {
+        throw new Error();
+      });
+
+      expect(clearAppStorage()).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+
+import { cn } from '@/lib/utils';
+
+describe('cn utility', () => {
+  it('should merge class names', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('should handle conditional classes', () => {
+    const isHidden = false;
+    const isVisible = true;
+    expect(cn('base', isHidden && 'hidden', isVisible && 'visible')).toBe('base visible');
+  });
+
+  it('should merge tailwind classes correctly', () => {
+    expect(cn('px-2 py-1', 'px-4')).toBe('py-1 px-4');
+  });
+});

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

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+
+import { contactFormSchema, registerFormSchema } from '@/lib/validations';
+
+describe('contactFormSchema', () => {
+  const validContact = {
+    name: 'John Doe',
+    email: 'john@example.com',
+    message: 'This is a valid message that is long enough.',
+  };
+
+  it('accepts valid data', () => {
+    expect(contactFormSchema.safeParse(validContact).success).toBe(true);
+  });
+
+  it.each([
+    { field: 'name', value: 'J', errorContains: 'at least 2 characters' },
+    { field: 'email', value: 'not-an-email', errorContains: 'valid email' },
+    { field: 'message', value: 'Short', errorContains: 'at least 10 characters' },
+  ])('rejects invalid $field', ({ field, value, errorContains }) => {
+    const data = { ...validContact, [field]: value };
+    const result = contactFormSchema.safeParse(data);
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toContain(errorContains);
+    }
+  });
+});
+
+describe('registerFormSchema', () => {
+  const validRegister = {
+    username: 'john_doe',
+    email: 'john@example.com',
+    password: 'SecurePass123',
+    confirmPassword: 'SecurePass123',
+  };
+
+  it('accepts valid data', () => {
+    expect(registerFormSchema.safeParse(validRegister).success).toBe(true);
+  });
+
+  it.each([
+    { field: 'username', value: 'john@doe', errorContains: 'letters, numbers, and underscores' },
+    { field: 'password', value: 'weakpass', errorContains: null },
+    { fields: { confirmPassword: 'DifferentPass123' }, errorContains: "don't match" },
+  ])('rejects invalid input', ({ field, fields, value, errorContains }) => {
+    const data = field ? { ...validRegister, [field]: value } : { ...validRegister, ...fields };
+    const result = registerFormSchema.safeParse(data);
+
+    expect(result.success).toBe(false);
+    if (!result.success && errorContains) {
+      expect(result.error.issues[0].message).toContain(errorContains);
+    }
+  });
+});

package/templates/tests/unit/stores/preferencesStore.test.ts

@@ -0,0 +1,75 @@
+import { act } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { initPreferencesSync, usePreferencesStore } from '@/stores/preferencesStore';
+import { mockMatchMedia } from '@/test';
+
+describe('preferencesStore', () => {
+  beforeEach(() => {
+    usePreferencesStore.setState({ theme: 'light' });
+    window.matchMedia = mockMatchMedia(false);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('setTheme', () => {
+    it.each(['light', 'dark', 'system'] as const)('sets theme to %s', (theme) => {
+      act(() => usePreferencesStore.getState().setTheme(theme));
+      expect(usePreferencesStore.getState().theme).toBe(theme);
+    });
+  });
+
+  describe('toggleTheme', () => {
+    it.each([
+      { initial: 'light', systemDark: false, expected: 'dark' },
+      { initial: 'dark', systemDark: false, expected: 'light' },
+      { initial: 'system', systemDark: false, expected: 'dark' },
+      { initial: 'system', systemDark: true, expected: 'light' },
+    ] as const)('toggles from $initial to $expected', ({ initial, systemDark, expected }) => {
+      window.matchMedia = mockMatchMedia(systemDark);
+      usePreferencesStore.setState({ theme: initial });
+
+      act(() => usePreferencesStore.getState().toggleTheme());
+
+      expect(usePreferencesStore.getState().theme).toBe(expected);
+    });
+  });
+
+  describe('getResolvedTheme', () => {
+    it.each([
+      { theme: 'light', systemDark: false, expected: 'light' },
+      { theme: 'dark', systemDark: false, expected: 'dark' },
+      { theme: 'system', systemDark: false, expected: 'light' },
+      { theme: 'system', systemDark: true, expected: 'dark' },
+    ] as const)('resolves $theme to $expected', ({ theme, systemDark, expected }) => {
+      window.matchMedia = mockMatchMedia(systemDark);
+      usePreferencesStore.setState({ theme });
+      expect(usePreferencesStore.getState().getResolvedTheme()).toBe(expected);
+    });
+  });
+
+  describe('reset', () => {
+    it('resets to initial state', () => {
+      usePreferencesStore.setState({ theme: 'dark' });
+      act(() => usePreferencesStore.getState().reset());
+      expect(usePreferencesStore.getState().theme).toBe('system');
+    });
+  });
+
+  describe('initPreferencesSync', () => {
+    it('adds and removes storage event listener', () => {
+      const addSpy = vi.spyOn(window, 'addEventListener');
+      const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+      const cleanup = initPreferencesSync();
+
+      expect(addSpy).toHaveBeenCalledWith('storage', expect.any(Function));
+
+      cleanup();
+
+      expect(removeSpy).toHaveBeenCalledWith('storage', expect.any(Function));
+    });
+  });
+});