refactor(todos): streamline todo context reducer and improve formatting

This update simplifies the todo context reducer by consolidating conditional expressions for better readability. Additionally, it enhances the test suite by allowing real localStorage usage in tests, ensuring more accurate persistence behavior during testing. Minor formatting adjustments are also made for consistency.

Author: jaruesink

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import { TodoProvider, useTodoStore, getFilteredTodos } from '../todo-context';
 import type { Todo } from '@todo-starter/utils';
 
@@ -62,6 +62,8 @@ describe('todo-context', () => {
   const ORIGINAL_ENV = process.env.NODE_ENV;
 
   beforeEach(() => {
+    // Opt-in to using real localStorage inside tests for this suite
+    Object.defineProperty(globalThis, '__ALLOW_STORAGE_IN_TESTS__', { value: true, configurable: true });
     // allow storage helpers to operate by switching env off 'test' for these tests
     process.env.NODE_ENV = 'development';
     try {
@@ -74,6 +76,8 @@ describe('todo-context', () => {
   afterEach(() => {
     // restore jsdom localStorage cleanliness and env
     process.env.NODE_ENV = ORIGINAL_ENV;
+    // Remove opt-in flag after each test to avoid cross-suite leakage
+    Object.defineProperty(globalThis, '__ALLOW_STORAGE_IN_TESTS__', { value: undefined, configurable: true });
     try {
       window.localStorage.removeItem(STORAGE_KEY);
     } catch {
@@ -237,8 +241,9 @@ describe('todo-context', () => {
     expect(screen.getByTestId('todos-count')).toHaveTextContent('1');
   });
 
-  it('persists on addTodo, toggleTodo, setFilter', () => {
-    const spy = vi.spyOn(window.localStorage, 'setItem');
+  it('persists on addTodo, toggleTodo, setFilter', async () => {
+    const utils = await import('@todo-starter/utils');
+    const spy = vi.spyOn(utils, 'saveToStorage');
 
     renderWithProvider();
 
@@ -252,8 +257,8 @@ describe('todo-context', () => {
       screen.getByTestId('set-filter').click();
     });
 
-    // Called multiple times through effect
-    expect(spy).toHaveBeenCalled();
+    // Called via utils wrapper (effects may be scheduled)
+    await waitFor(() => expect(spy).toHaveBeenCalled());
 
     spy.mockRestore();
   });

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

@@ -66,9 +66,7 @@ function todoReducer(state: TodoState, action: TodoAction): TodoState {
       return {
         ...state,
         todos: state.todos.map(todo =>
-          todo.id === action.payload
-            ? { ...todo, completed: !todo.completed, updatedAt: new Date() }
-            : todo
+          todo.id === action.payload ? { ...todo, completed: !todo.completed, updatedAt: new Date() } : todo
         )
       };
     case 'DELETE_TODO':
@@ -80,9 +78,7 @@ function todoReducer(state: TodoState, action: TodoAction): TodoState {
       return {
         ...state,
         todos: state.todos.map(todo =>
-          todo.id === action.payload.id
-            ? { ...todo, text: action.payload.text.trim(), updatedAt: new Date() }
-            : todo
+          todo.id === action.payload.id ? { ...todo, text: action.payload.text.trim(), updatedAt: new Date() } : todo
         )
       };
     case 'SET_FILTER':
@@ -151,17 +147,12 @@ export function TodoProvider({ children }: { children: ReactNode }) {
     addTodo: (text: string) => dispatch({ type: 'ADD_TODO', payload: text }),
     toggleTodo: (id: string) => dispatch({ type: 'TOGGLE_TODO', payload: id }),
     deleteTodo: (id: string) => dispatch({ type: 'DELETE_TODO', payload: id }),
-    updateTodo: (id: string, text: string) => 
-      dispatch({ type: 'UPDATE_TODO', payload: { id, text } }),
+    updateTodo: (id: string, text: string) => dispatch({ type: 'UPDATE_TODO', payload: { id, text } }),
     setFilter: (filter: TodoFilter) => dispatch({ type: 'SET_FILTER', payload: filter }),
     clearCompleted: () => dispatch({ type: 'CLEAR_COMPLETED' })
   };
 
-  return (
-    <TodoContext.Provider value={contextValue}>
-      {children}
-    </TodoContext.Provider>
-  );
+  return <TodoContext.Provider value={contextValue}>{children}</TodoContext.Provider>;
 }
 
 // Custom hook to use the todo context

packages/utils/src/storage.ts

@@ -3,8 +3,13 @@
 export type StorageLike = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
 
 function getStorage(): StorageLike | null {
-  // Disable in test environments to keep tests deterministic
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') return null;
+  // Allow tests to opt-in to real storage by setting a runtime flag
+  const allowInTests =
+    typeof globalThis !== 'undefined' &&
+    // Use `unknown` and index signature to avoid `any`
+    (globalThis as unknown as Record<string, unknown>).__ALLOW_STORAGE_IN_TESTS__ === true;
+  // Disable in test environments unless explicitly allowed
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test' && !allowInTests) return null;
   if (typeof window === 'undefined') return null;
   try {
     return window.localStorage;