Merge branch 'codegen-bot/persist-todos-localstorage-STA-2-1754688724' of github.com:lambda-curry/react-router-starter into codegen/sta-10-testing-add-storage-hydration-tests-utils-todo-context

Author: jaruesink

apps/todo-app/app/components/__tests__/add-todo.test.tsx

@@ -1,9 +1,97 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { AddTodo } from '../add-todo';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import type { ReactElement, ReactNode, ChangeEvent, FormEvent } from 'react';
 
-function renderWithRouter(ui: React.ReactElement) {
+// Create a stateful mock for the input field
+let testInputValue = '';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Plus: () => null,
+}));
+
+// Mock the @lambdacurry/forms components
+interface TextFieldProps {
+  name: string;
+  placeholder: string;
+  className: string;
+}
+
+vi.mock('@lambdacurry/forms', () => ({
+  TextField: ({ name, placeholder, className }: TextFieldProps) => (
+    <input
+      name={name}
+      placeholder={placeholder}
+      className={className}
+      type="text"
+      value={testInputValue}
+      onChange={(e) => { testInputValue = e.target.value; }}
+    />
+  ),
+  FormError: () => null,
+}));
+
+interface ButtonProps {
+  children: ReactNode;
+  onClick: () => void;
+  type: 'button' | 'submit' | 'reset';
+}
+
+vi.mock('@lambdacurry/forms/ui', () => ({
+  Button: ({ children, onClick, type }: ButtonProps) => (
+    <button type={type} onClick={onClick}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock the remix-hook-form module
+interface RemixFormConfig {
+  submitHandlers?: {
+    onValid: (data: { text: string }) => void;
+  };
+  [key: string]: unknown;
+}
+
+vi.mock('remix-hook-form', () => ({
+  RemixFormProvider: ({ children }: { children: ReactNode }) => children,
+  useRemixForm: (config: RemixFormConfig) => {
+    return {
+      ...config,
+      getValues: (_name: string) => testInputValue,
+      reset: vi.fn(() => {
+        testInputValue = '';
+        // Force re-render by dispatching a custom event
+        const inputs = document.querySelectorAll('input[name="text"]');
+        inputs.forEach(input => {
+          (input as HTMLInputElement).value = '';
+        });
+      }),
+      setValue: vi.fn((_name: string, value: string) => {
+        testInputValue = value;
+      }),
+      register: vi.fn((name: string) => ({
+        name,
+        onChange: (e: ChangeEvent<HTMLInputElement>) => {
+          testInputValue = e.target.value;
+        },
+        value: testInputValue
+      })),
+      handleSubmit: vi.fn((onValid: (data: { text: string }) => void) => (e: FormEvent) => {
+        e.preventDefault();
+        if (testInputValue?.trim()) {
+          onValid({ text: testInputValue.trim() });
+        }
+      }),
+      formState: { errors: {} },
+      watch: vi.fn((_name: string) => testInputValue),
+    };
+  }
+}));
+
+function renderWithRouter(ui: ReactElement) {
   const router = createMemoryRouter([
     { path: '/', element: ui }
   ], { initialEntries: ['/'] });
@@ -13,10 +101,12 @@ function renderWithRouter(ui: React.ReactElement) {
 // hoist regex literals to top-level to satisfy biome's useTopLevelRegex
 const ADD_REGEX = /add/i;
 
-// hoist regex literals to top-level to satisfy biome's useTopLevelRegex
-const ADD_REGEX = /add/i;
-
 describe('AddTodo', () => {
+  beforeEach(() => {
+    // Reset the test state before each test
+    testInputValue = '';
+  });
+
   it('renders input and button', () => {
     const mockOnAdd = vi.fn();
     renderWithRouter(<AddTodo onAdd={mockOnAdd} />);
@@ -53,7 +143,7 @@ describe('AddTodo', () => {
 
   it('does not call onAdd with empty text', () => {
     const mockOnAdd = vi.fn();
-    render(<AddTodo onAdd={mockOnAdd} />);
+    renderWithRouter(<AddTodo onAdd={mockOnAdd} />);
 
     const button = screen.getByRole('button', { name: ADD_REGEX });
     fireEvent.click(button);

apps/todo-app/package.json

@@ -17,7 +17,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "biome lint .",
     "format": "biome format --write .",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:ci": "vitest run"

package.json

@@ -12,6 +12,7 @@
     "typecheck": "bun run turbo run typecheck",
     "biome-fix": "bun run biome check --fix",
     "test": "bun run turbo run test",
+    "test:watch": "bun run turbo run test:watch",
     "test:ci": "bun run turbo run test:ci"
   },
   "dependencies": {

packages/ui/package.json

@@ -16,7 +16,8 @@
     "lint": "biome lint .",
     "format": "biome format --write .",
     "typecheck": "tsc --noEmit",
-    "test": "vitest",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
     "test:ci": "vitest run --passWithNoTests"
   },
   "devDependencies": {

packages/utils/package.json

@@ -16,7 +16,8 @@
     "lint": "biome lint .",
     "format": "biome format --write .",
     "typecheck": "tsc --noEmit",
-    "test": "vitest",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
     "test:ci": "vitest run --passWithNoTests"
   },
   "devDependencies": {

turbo.json

@@ -29,11 +29,18 @@
     },
     "test": {
       "dependsOn": ["^build"],
-      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*", "vitest.config.*"],
       "outputs": []
     },
+    "test:watch": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*", "vitest.config.*"],
+      "outputs": [],
+      "cache": false,
+      "persistent": true
+    },
     "test:ci": {
-      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*", "vitest.config.*"],
       "outputs": []
     }
   }

vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+
+// Root Vitest configuration for monorepo
+// This enables running tests from the root with proper workspace support
+export default defineConfig({
+  test: {
+    projects: [
+      'apps/*/vitest.config.{ts,js}',
+      'packages/*/vitest.config.{ts,js}',
+    ],
+  },
+});