# Vitest Setup and Migration Guide

## Vitest vs Jasmine Comparison

| Feature    | Vitest                  | Jasmine/Karma         |
| ---------- | ----------------------- | --------------------- |
| Speed      | Faster (native ESM)     | Slower                |
| Watch mode | Instant feedback        | Slower rebuilds       |
| Mocking    | `vi.fn()`, `vi.mock()`  | `jasmine.createSpy()` |
| Assertions | `expect()` (Chai-style) | `expect()` (Jasmine)  |
| UI         | Built-in UI mode        | Karma browser         |
| Config     | `angular.json`          | `karma.conf.js`       |

## Migration from Jasmine to Vitest

### Spy Migration

```typescript
// Jasmine
const spy = jasmine.createSpy('callback');
spy.and.returnValue('value');
expect(spy).toHaveBeenCalledWith('arg');

// Vitest
const spy = vi.fn();
spy.mockReturnValue('value');
expect(spy).toHaveBeenCalledWith('arg');
```

### SpyOn Migration

```typescript
// Jasmine
spyOn(service, 'method').and.returnValue(of(data));

// Vitest
vi.spyOn(service, 'method').mockReturnValue(of(data));
```

### createSpyObj Migration

```typescript
// Jasmine
const mockService = jasmine.createSpyObj('UserService', ['getUser', 'updateUser']);
mockService.getUser.and.returnValue(of({ id: '1', name: 'Test' }));

// Vitest
const mockService = {
    getUser: vi.fn(),
    updateUser: vi.fn(),
};
mockService.getUser.mockReturnValue(of({ id: '1', name: 'Test' }));
```

### Async Testing Migration

```typescript
// Jasmine - using done callback
it('should load data', (done) => {
    service.loadData().subscribe((data) => {
        expect(data).toBeDefined();
        done();
    });
});

// Vitest - using async/await
it('should load data', async () => {
    const data = await firstValueFrom(service.loadData());
    expect(data).toBeDefined();
});
```

### Clock/Timer Migration

```typescript
// Jasmine
jasmine.clock().install();
jasmine.clock().tick(1000);
jasmine.clock().uninstall();

// Vitest
vi.useFakeTimers();
vi.advanceTimersByTime(1000);
vi.useRealTimers();
```

## Vitest Configuration Details

### Full angular.json Configuration

```json
{
    "projects": {
        "your-app": {
            "architect": {
                "test": {
                    "builder": "@angular/build:unit-test",
                    "options": {
                        "tsConfig": "tsconfig.spec.json",
                        "buildTarget": "your-app:build"
                    }
                }
            }
        }
    }
}
```

### tsconfig.spec.json

```json
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "types": ["vitest/globals"]
    },
    "include": ["src/**/*.spec.ts"]
}
```

### Optional vite.config.ts

For advanced configuration, create a `vite.config.ts`:

```typescript
import { defineConfig } from 'vitest/config';

export default defineConfig({
    test: {
        globals: true,
        environment: 'jsdom',
        include: ['src/**/*.spec.ts'],
        coverage: {
            provider: 'v8',
            reporter: ['text', 'html', 'lcov'],
            exclude: ['node_modules/', 'src/test-setup.ts', '**/*.spec.ts', '**/*.d.ts'],
        },
    },
});
```

## Running Vitest

```bash
# Run tests
ng test

# Watch mode
ng test --watch

# Coverage
ng test --code-coverage

# Run specific file pattern
ng test --include='**/user*.spec.ts'

# CI mode (single run)
ng test --watch=false
```