Test Documentation

Overview

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

Test Coverage

Composables

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

# 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

Global Test Setup

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

Example Test Structure

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