This commit introduces a suite of unit and E2E tests for the Vue.js
frontend, significantly improving code coverage and reliability.
Unit Test Summary:
- Setup: Configured Vitest and @vue/test-utils.
- Core UI Components: Added tests for EssentialLink, 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.
E2E Test (Playwright) Summary:
- Auth (`auth.spec.ts`):
- User signup, login, and logout flows.
- Logout test updated with correct UI selectors.
- Group Management (`groups.spec.ts`):
- User login handled via `beforeAll` and `storageState`.
- Create group and view group details.
- Update and Delete group tests are skipped as corresponding UI
functionality is not present in GroupDetailPage.vue.
- Selectors updated based on component code.
- List Management (`lists.spec.ts`):
- User login handled similarly.
- Create list (within a group), view list, add item to list,
and mark item as complete.
- Delete list test is skipped as corresponding UI functionality
is not present.
- Selectors based on component code.
This work establishes a strong testing foundation for the frontend.
Skipped E2E tests highlight areas where UI functionality for certain
CRUD operations (group update/delete, list delete) may need to be added
if desired.