Skip to content

test: add comprehensive test cases for attendance marker

Vaishnavi Prabhala requested to merge test/attendancemarker into develop

Overview

What does this MR do and why? This MR adds comprehensive unit tests for the AttendanceMarker component using Vitest and React Testing Library to achieve high code coverage.

Motivation: To ensure reliable and robust functionality for tracking volunteer attendance, specifically validating both the manual entry tab and the QR code scanner flows, including edge cases like API failures and camera permission denials. Approach: Simulated user interactions and mocked dependencies (like the QR scanner and API endpoints) to test the component in isolation. It also introduces necessary type declarations to fix TypeScript errors that were blocking Husky pre-commit hooks. Trade-offs: Mocking the react-qr-scanner limits end-to-end hardware testing, but it ensures the test suite runs quickly and deterministically in a CI pipeline without requiring actual camera hardware. Changes Made

Files added/modified: Added new test suite: tests/pages/AttendanceMarker.test.tsx containing tests for all primary user flows. New utilities introduced: Set up mocks for react-qr-scanner, react-toastify, and project API services to facilitate isolated testing. Technical Details

State management & data flow approach: Tests validate that internal component state transitions correctly—for example, switching between the "Manual Entry" and "QR Scanner" tabs conditionally renders the correct sub-components. Component validation: Ensures API payloads for markAttendance correctly capture input data (e.g., volunteer ID and timestamps), verifies interval management logic within the scanner, and explicitly tests error handling UI changes when a network request fails or camera access is denied.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

How to Set Up and Validate Locally

Testing Done

Screenshot_from_2026-03-26_10-41-33

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined (no any unless justified)
  • ESLint and Prettier checks pass 
    bun run lint

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports