# Test Infrastructure Setup - README

## Quick Start

### Run Tests
```bash
# Run all tests in watch mode
npm run test

# Run tests once (CI mode)
npm run test:run

# Run with UI dashboard
npm run test:ui

# Run with coverage report
npm run test:coverage
```

## What's Included

### Configuration Files
- `vitest.config.ts` - Vitest configuration with Next.js support
- `tests/setup.ts` - Global test setup and mocks

### Test Utilities
- `tests/test-utils.tsx` - Custom render with Redux provider
- `tests/mocks/api.ts` - API mocking utilities
- `tests/mocks/nextAuth.ts` - NextAuth mocking utilities

### Example Tests
- `app/redux/cartSlice.test.js` - Redux state management tests
- `utils/imageHelper.test.ts` - Utility function tests
- `utils/apiClient.test.tsx` - API client tests
- `app/components/auth/loginForm.test.tsx` - Component tests

## Writing Tests

### Basic Test Structure
```typescript
import { describe, it, expect } from 'vitest';

describe('Feature name', () => {
  it('should do something when condition', () => {
    // Arrange - setup
    const input = 'test';
    
    // Act - execute
    const result = myFunction(input);
    
    // Assert - verify
    expect(result).toBe('expected');
  });
});
```

### Component Testing
```typescript
import { render, screen, fireEvent } from '@tests/test-utils';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    render(<MyComponent />);
    expect(screen.getByText('Hello')).toBeInTheDocument();
  });
});
```

### API Testing
```typescript
import { describe, it, expect, vi } from 'vitest';
import { mockApiSuccess } from '@tests/mocks/api';

describe('API endpoint', () => {
  it('should fetch data', async () => {
    global.fetch = vi.fn().mockResolvedValue(mockApiSuccess({ id: 1 }));
    
    const result = await fetchData();
    
    expect(result).toEqual({ id: 1 });
  });
});
```

## Project Structure
```
Morni/
├── tests/
│   ├── setup.ts              # Global test setup
│   ├── test-utils.tsx        # Custom render utilities
│   └── mocks/
│       ├── api.ts            # API mock helpers
│       └── nextAuth.ts       # NextAuth mocks
├── app/
│   ├── redux/
│   │   ├── cartSlice.js
│   │   └── cartSlice.test.js ✅
│   └── components/
│       └── auth/
│           ├── loginForm.tsx
│           └── loginForm.test.tsx ✅
├── utils/
│   ├── apiClient.tsx
│   ├── apiClient.test.tsx ✅
│   ├── imageHelper.ts
│   └── imageHelper.test.ts ✅
├── vitest.config.ts
└── TESTING_PLAN.md
```

## Next Steps

1. **Fix Known Bug:** Update `cartSlice.js` lines 23-32 (state.user → state.cart)
2. **Run Example Tests:** `npm run test`
3. **Review Test Plan:** See `TESTING_PLAN.md` for complete roadmap
4. **Start Writing Tests:** Follow the phases in TESTING_PLAN.md

## Need Help?

- 📖 See `TESTING_PLAN.md` for comprehensive testing strategy
- 🧪 Check example tests for patterns and best practices
- 📚 Visit [Vitest docs](https://vitest.dev/) for API reference
- 🎯 Focus on Phase 2 (Utility Tests) to get started

## Current Status

✅ Test infrastructure configured  
✅ 4 example tests created  
✅ Mocks and utilities ready  
🔲 Bug fix needed in cartSlice.js  
🔲 Continue with Phase 2 of testing plan