Test Documentation

Overview

The vuetify-grid package includes comprehensive unit tests for all composables using Vitest and Vue Test Utils.

Test Coverage

$3

#### useCrudGrid (18 tests)

Tests for CRUD operations, pagination, search, filtering, and sorting:

- ✅ Initialization with defaults and custom options
- ✅ Data loading (success and error handling)
- ✅ Pagination (page count calculation, page reset on limit change)
- ✅ Search (page reset, search params)
- ✅ Filtering (page reset, filter params spreading)
- ✅ Sorting (ascending/descending, sort params)
- ✅ Reload and goToFirstPageAndLoad methods

#### useActions (21 tests)

Tests for action management and execution:

- ✅ Parameter resolution (getParam with functions and values)
- ✅ Action click handling (success, errors, loading states)
- ✅ Action visibility (boolean and function-based)
- ✅ Action disabled state (boolean and function-based)
- ✅ Action text generation (static and dynamic)
- ✅ Default handlers and error callbacks

#### useSearch (16 tests)

Tests for search functionality:

- ✅ Initialization (empty and with initial value)
- ✅ Search model changes and emit
- ✅ External prop changes
- ✅ Clear search functionality
- ✅ Show/hide search mode
- ✅ Search field ref management and focus

Running Tests

``bash


Run all tests

pnpm test

Run tests in watch mode

pnpm test:watch

Run tests with UI

pnpm test:ui

Run tests with coverage

pnpm test:coverage
`

Test Structure

`
src/
├── composables/
│ ├── __tests__/
│ │ ├── useCrudGrid.spec.ts
│ │ ├── useActions.spec.ts
│ │ └── useSearch.spec.ts
│ ├── useCrudGrid.ts
│ ├── useActions.ts
│ └── useSearch.ts
└── test-setup.ts
`

Test Setup

The tests use:

- Vitest - Fast unit test framework
- @vue/test-utils - Official Vue testing utilities
- happy-dom - Lightweight DOM implementation
- Mock functions - For testing callbacks and async operations

$3

The test-setup.ts file provides:

- ResizeObserver mock
- IntersectionObserver mock
- Other DOM API mocks for happy-dom compatibility

Writing New Tests

When adding new composables or features:

1. Create a new spec file in src/composables/__tests__/
2. Follow the existing test structure
3. Test all public methods and state changes
4. Mock external dependencies
5. Test error cases and edge cases

$3

`typescript
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { useMyComposable } from '../useMyComposable';

describe('useMyComposable', () => {
beforeEach(() => {
vi.clearAllMocks();
});

describe('feature group', () => {
it('should do something', () => {
const { method } = useMyComposable();

method();

expect(something).toBe(expected);
});
});
});
``

CI/CD Integration

Tests run automatically on:

- Pre-commit hooks
- Pull request checks
- CI/CD pipelines

All tests must pass before merging to main branch.

Test Results

Current test status:

- ✅ 55 tests passing
- ✅ 3 test files
- ✅ All composables covered
- ⏱️ ~489ms execution time