testing: Backlog Unit. Integration & E2E Testing

[DevonGifford]

Part 1: Research Phase

Objective

The application's components need isolated functionality testing via unit and integration tests using Jest & RTL .

Tasks

• [x] Identify components requiring unit tests.
• [x] Identify component interactions necessitating integration testing.

Part 2: Implementation Phase

Objective

Verify component interactions via integration tests using React Testing Library (RTL).

Unit Tests

---

Components

Form Components: Test rendering, input handling, and form validation.

• [ ] account-form.tsx,
• [ ] appearance-form.tsx,
• [ ] goals-form.tsx,
• [ ] notification-form.tsx,
• [ ] profile-form.tsx,
• [ ] login-form.tsx,
• [ ] register-form.tsx,
• [ ] onboarding-form.tsx,

UI behaviour. Validate rendering and interactions.

• [ ] Navbar.tsx,
• [ ] Sidebar.tsx,
• [ ] UserDropdown.tsx,
• [ ] UserFormHandler.tsx,

Other Custom UI Components: Ensure correct rendering, interactions, and state changes.

• [ ] Button.tsx,
• [ ] SidebarItem.tsx,
• [x] LandingPage.tsx, ⚠ Note:
  Testing is not required for UI components from ShadCN library - have their own tests & any breaks will be caught via other integration/unit tests.

Utilities

• [ ] useCustomToast.ts

  • Ensure the custom toast hook functions correctly under various scenarios.

• [ ] firebaseConfig.ts

  • Write tests for utility auth functions to check their outputs for given inputs.

Integration Tests

---

Application Functionality

Form Submissions: Test form submissions, validations, and API interactions.

• [ ] account-form.tsx,
• [ ] appearance-form.tsx,
• [ ] goals-form.tsx,
• [ ] notification-form.tsx,
• [ ] profile-form.tsx,
• [ ] login-form.tsx,
• [ ] register-form.tsx,
• [ ] onboarding-form.tsx,

Navigation: Validate navigation between different routes and components.

• [ ] Navbar.tsx,
• [ ] Sidebar.tsx,
• [ ] Navigation.tsx:
• [ ] UserDropdown.tsx,
• [ ] UserFormHandler.tsx,

Context Providers: Ensure correct context provisioning and updates to nested components.

• [ ] AuthProvider.tsx,
• [ ] SettingsReducerProvider.tsx:
• [ ] ModalReducerProvider.tsx
• [ ] SettingsReducerProvider.tsx
• [ ] ThemeProvider.tsx
• [ ] ToasterProvider.tsx

Modals: Test modal behaviour, open/close functionality, and actions.

• [ ] logout-modal.tsx,
• [ ] search-modal.tsx,
• [ ] settings-modal.tsx,

End-to-End Tests

User Flows

User Interaction Flow:

Validate complete user interaction cycles.

• [ ] Registering,
• [ ] Logging In,
• [ ] Updating Settings,
• [ ] Logging Out:

Persistence:

• [ ] Local Storage Handling: Verify user settings persist between sessions.

Error Handling

Application Error Scenarios:

• [ ] Local Storage Save Failures:
  Simulate and test how the app handles failed local storage saves.

• [ ] Network Error Handling:
  Ensure the app responds appropriately to network errors during API calls.

[DevonGifford]

As I develop new features or update existing ones, I’ll concurrently write corresponding tests. If any additional backlog should incur, I will update this issue.

This ensures each functionality is tested as it’s developed. By the end of year, I’ll write any remaining tests for components not covered during development.

This approach integrates testing into the development workflow.