refactor(tests): enhance todo-context tests with improved localStorage handling and cleanup

This update refines the todo-context tests by introducing a consistent localStorage polyfill for Node environments, ensuring reliable test execution. It also improves the cleanup logic in the tests to maintain a clean state between runs. Additionally, minor formatting adjustments are made for better readability.

Author: jaruesink

apps/todo-app/app/lib/__tests__/todo-context.test.tsx

@@ -1,8 +1,7 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
 import { TodoProvider, useTodoStore, getFilteredTodos } from '../todo-context';
 import type { Todo } from '@todo-starter/utils';
-import * as Utils from '@todo-starter/utils';
 
 // Mock crypto.randomUUID for consistent testing
 Object.defineProperty(global, 'crypto', {
@@ -22,23 +21,15 @@ function TestComponent() {
       <button type="button" onClick={() => addTodo('New todo')} data-testid="add-todo">
         Add Todo
       </button>
-      <button 
-        type="button"
-        onClick={() => todos.length > 0 && toggleTodo(todos[0].id)} 
-        data-testid="toggle-todo"
-      >
+      <button type="button" onClick={() => todos.length > 0 && toggleTodo(todos[0].id)} data-testid="toggle-todo">
         Toggle First Todo
       </button>
-      <button 
-        type="button"
-        onClick={() => todos.length > 0 && deleteTodo(todos[0].id)} 
-        data-testid="delete-todo"
-      >
+      <button type="button" onClick={() => todos.length > 0 && deleteTodo(todos[0].id)} data-testid="delete-todo">
         Delete First Todo
       </button>
-      <button 
+      <button
         type="button"
-        onClick={() => todos.length > 0 && updateTodo(todos[0].id, 'Updated text')} 
+        onClick={() => todos.length > 0 && updateTodo(todos[0].id, 'Updated text')}
         data-testid="update-todo"
       >
         Update First Todo
@@ -73,13 +64,21 @@ describe('todo-context', () => {
   beforeEach(() => {
     // allow storage helpers to operate by switching env off 'test' for these tests
     process.env.NODE_ENV = 'development';
-    try { window.localStorage.removeItem(STORAGE_KEY); } catch {}
+    try {
+      window.localStorage.removeItem(STORAGE_KEY);
+    } catch {
+      /* ignore */
+    }
   });
 
   afterEach(() => {
     // restore jsdom localStorage cleanliness and env
     process.env.NODE_ENV = ORIGINAL_ENV;
-    try { window.localStorage.removeItem(STORAGE_KEY); } catch {}
+    try {
+      window.localStorage.removeItem(STORAGE_KEY);
+    } catch {
+      /* ignore */
+    }
   });
 
   describe('TodoProvider and useTodoStore', () => {
@@ -172,7 +171,7 @@ describe('todo-context', () => {
       // Suppress console.error for this test
       const originalError = console.error;
       console.error = () => undefined;
-      
+
       expect(() => {
         render(<TestComponent />);
       }).toThrow('useTodoStore must be used within a TodoProvider');
@@ -220,7 +219,13 @@ describe('todo-context', () => {
   it('hydrates and revives date instances on mount when persisted state exists', () => {
     const seeded = {
       todos: [
-        { id: 'x', text: 'seed', completed: false, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }
+        {
+          id: 'x',
+          text: 'seed',
+          completed: false,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString()
+        }
       ],
       filter: 'all' as const
     };
@@ -233,13 +238,19 @@ describe('todo-context', () => {
   });
 
   it('persists on addTodo, toggleTodo, setFilter', () => {
-    const spy = vi.spyOn(Utils, 'saveToStorage');
+    const spy = vi.spyOn(window.localStorage, 'setItem');
 
     renderWithProvider();
 
-    act(() => { screen.getByTestId('add-todo').click(); });
-    act(() => { screen.getByTestId('toggle-todo').click(); });
-    act(() => { screen.getByTestId('set-filter').click(); });
+    act(() => {
+      screen.getByTestId('add-todo').click();
+    });
+    act(() => {
+      screen.getByTestId('toggle-todo').click();
+    });
+    act(() => {
+      screen.getByTestId('set-filter').click();
+    });
 
     // Called multiple times through effect
     expect(spy).toHaveBeenCalled();
@@ -252,7 +263,9 @@ describe('todo-context', () => {
     const original = window.localStorage;
     // @ts-ignore - override for test
     Object.defineProperty(window, 'localStorage', {
-      get() { throw new Error('unavailable'); },
+      get() {
+        throw new Error('unavailable');
+      },
       configurable: true
     });
 

packages/utils/src/__tests__/storage.test.ts

@@ -7,6 +7,33 @@ const KEY = 'test/storage@v1';
 const ORIGINAL_ENV = process.env.NODE_ENV;
 
 describe('storage utils', () => {
+  function ensureWindowWithLocalStorage() {
+    // Ensure a Window-like global for Node environment
+    if (typeof window === 'undefined') {
+      Object.defineProperty(globalThis, 'window', {
+        // unknown avoids explicit any; cast to Window shape for tests
+        value: {} as unknown as Window & typeof globalThis,
+        configurable: true
+      });
+    }
+    // Polyfill localStorage if missing
+    if (!('localStorage' in window)) {
+      const store = new Map<string, string>();
+      Object.defineProperty(window, 'localStorage', {
+        value: {
+          getItem: (k: string) => store.get(k) ?? null,
+          setItem: (k: string, v: string) => {
+            store.set(k, v);
+          },
+          removeItem: (k: string) => {
+            store.delete(k);
+          }
+        },
+        configurable: true
+      });
+    }
+  }
+
   beforeEach(() => {
     // Ensure clean slate
     try {
@@ -35,45 +62,15 @@ describe('storage utils', () => {
   it('Malformed JSON returns fallback', () => {
     // Enable storage access by switching to a non-test env for this test
     process.env.NODE_ENV = 'development';
-    // Ensure localStorage exists in case test env didn't provide it
-    if (typeof window === 'undefined' || !('localStorage' in window)) {
-      // @ts-ignore
-      global.window = {} as any;
-    }
-    if (!('localStorage' in window)) {
-      const store = new Map<string, string>();
-      Object.defineProperty(window, 'localStorage', {
-        value: {
-          getItem: (k: string) => store.get(k) ?? null,
-          setItem: (k: string, v: string) => void store.set(k, v),
-          removeItem: (k: string) => void store.delete(k)
-        },
-        configurable: true
-      });
-    }
+    ensureWindowWithLocalStorage();
     window.localStorage.setItem(KEY, '{not json');
     const result = loadFromStorage(KEY, { good: true });
     expect(result).toEqual({ good: true });
   });
 
   it('save/remove round-trip behavior works', () => {
     process.env.NODE_ENV = 'development';
-    // Ensure localStorage exists (same polyfill as above)
-    if (typeof window === 'undefined' || !('localStorage' in window)) {
-      // @ts-ignore
-      global.window = {} as any;
-    }
-    if (!('localStorage' in window)) {
-      const store = new Map<string, string>();
-      Object.defineProperty(window, 'localStorage', {
-        value: {
-          getItem: (k: string) => store.get(k) ?? null,
-          setItem: (k: string, v: string) => void store.set(k, v),
-          removeItem: (k: string) => void store.delete(k)
-        },
-        configurable: true
-      });
-    }
+    ensureWindowWithLocalStorage();
 
     const value = { a: 1, b: 'two' };
     saveToStorage(KEY, value);
@@ -88,39 +85,33 @@ describe('storage utils', () => {
 
   it('validate guard: rejects invalid shape and returns fallback', () => {
     process.env.NODE_ENV = 'development';
-    const store = new Map<string, string>();
-    Object.defineProperty(window, 'localStorage', {
-      value: {
-        getItem: (k: string) => store.get(k) ?? null,
-        setItem: (k: string, v: string) => void store.set(k, v),
-        removeItem: (k: string) => void store.delete(k)
-      },
-      configurable: true
-    });
+    ensureWindowWithLocalStorage();
 
     window.localStorage.setItem(KEY, JSON.stringify({ nope: true }));
 
     const fallback = { ok: true };
-    const result = loadFromStorage(KEY, fallback, (v): v is typeof fallback => typeof (v as any).ok === 'boolean');
+    const result = loadFromStorage(
+      KEY,
+      fallback,
+      (v): v is typeof fallback =>
+        typeof v === 'object' && v !== null && 'ok' in v && typeof (v as { ok: unknown }).ok === 'boolean'
+    );
     expect(result).toEqual(fallback);
   });
 
   it('validate guard: accepts valid shape', () => {
     process.env.NODE_ENV = 'development';
-    const store = new Map<string, string>();
-    Object.defineProperty(window, 'localStorage', {
-      value: {
-        getItem: (k: string) => store.get(k) ?? null,
-        setItem: (k: string, v: string) => void store.set(k, v),
-        removeItem: (k: string) => void store.delete(k)
-      },
-      configurable: true
-    });
+    ensureWindowWithLocalStorage();
 
     const value = { ok: true };
     window.localStorage.setItem(KEY, JSON.stringify(value));
 
-    const result = loadFromStorage(KEY, { ok: false }, (v): v is typeof value => typeof (v as any).ok === 'boolean');
+    const result = loadFromStorage(
+      KEY,
+      { ok: false },
+      (v): v is typeof value =>
+        typeof v === 'object' && v !== null && 'ok' in v && typeof (v as { ok: unknown }).ok === 'boolean'
+    );
     expect(result).toEqual(value);
   });
 });