Advanced data grid component for Vuetify 3
npm install @xosen/vuetify-gridThe vuetify-grid package includes comprehensive unit tests for all composables using Vitest and Vue Test Utils.
#### 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
``bashRun all tests
pnpm test
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);
});
});
});
``Tests run automatically on:
- Pre-commit hooks
- Pull request checks
- CI/CD pipelines
All tests must pass before merging to main branch.
Current test status:
- ✅ 55 tests passing
- ✅ 3 test files
- ✅ All composables covered
- ⏱️ ~489ms execution time