c0dcccd970
This commit introduces a suite of unit tests for the Vue.js frontend,
significantly improving code coverage and reliability.
Key areas covered:
- **Setup**: Configured Vitest and @vue/test-utils.
- **Core UI Components**: Added tests for SocialLoginButtons and NotificationDisplay.
- **Pinia Stores**: Implemented tests for auth, notifications, and offline stores,
including detailed testing of actions, getters, and state management.
Offline store tests were adapted to its event-driven design.
- **Services**:
- `api.ts`: Tested Axios client config, interceptors (auth token refresh),
and wrapper methods.
- `choreService.ts` & `groupService.ts`: Tested all existing service
functions for CRUD operations, mocking API interactions.
- **Pages**:
- `AccountPage.vue`: Tested rendering, data fetching, form submissions
(profile, password, preferences), and error handling.
- `ChoresPage.vue`: Tested rendering, chore display (personal & grouped),
CRUD modals, and state handling (loading, error, empty).
- `LoginPage.vue`: Verified existing comprehensive tests.
These tests provide a solid foundation for frontend testing. The next planned
step is to enhance E2E tests using Playwright.
|
||
|---|---|---|
| .. | ||
| .vscode | ||
| dev-dist | ||
| e2e | ||
| public | ||
| src | ||
| .editorconfig | ||
| .env | ||
| .gitattributes | ||
| .gitignore | ||
| .prettierrc.json | ||
| Dockerfile | ||
| env.d.ts | ||
| eslint.config.ts | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.ts | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.vitest.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
fe
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + Volar (and disable Vetur).
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Playwright
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
Lint with ESLint
npm run lint