Skip to main content

Attendance UI Testing Guide

Summary​

Test Attendance UI with synthetic users and data against isolated gateway/service environments. No frontend Attendance test files were found.

Audience​

  • Frontend/backend developers, QA engineers, accessibility reviewers, and release owners

Prerequisites​

  • Isolated frontend, gateway, and backend environment
  • Synthetic tenant users covering employee, review, settings, and report capabilities
  • Seeded Attendance/Time Office data without personal information

Procedure​

  1. Verify unauthenticated, unauthorized, tenant, employee-only, and permitted route behavior.
  2. Exercise weekly navigation, filters, empty/loading/error states, manual entry, bulk selection, approval/rejection, details and export.
  3. Exercise punch-in/out disabling, manual/bulk dates, weekly-off work, and reopen creation.
  4. Exercise reviewer reopen decisions and Payroll-lock failure.
  5. Exercise Shift create/edit/deactivate, policy create/edit/default/active behavior, and weekly-off toggles.
  6. Exercise report validation, filtering, pagination, and both export formats.
  7. Inject API failures and confirm safe recovery without stale success state.
  8. Test responsive layouts, keyboard navigation, focus, labels, status colors and screen-reader announcements.
  9. Repeat compatibility and extracted-service paths and compare user-visible outcomes.

Validation or Expected Result​

Routes enforce intended access; every confirmed state renders; actions call the expected API family; success refreshes data; failures remain non-destructive; keyboard and responsive checks produce recorded evidence.

Troubleshooting​

If behavior differs by routing mode, record the route, user capability set, correlation context, request category, response category, and screenshot with synthetic data, then use the Gateway and compatibility guide.

Source References​

  • UI/salary-ui/apps/client-hrms-portal/src/App.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/pages/AttendanceStatus.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/pages/hr/PayrollFeaturePages.tsx
  • UI/salary-ui/apps/client-hrms-portal/src/pages/AttendanceReportPage.tsx
  • microservices/scripts/smoke-attendance.ps1

See Also​

Keywords​

  • Attendance UI
  • React
  • User workflow

Revision Information​

  • Status: Draft
  • Last reviewed: 2026-07-15
  • Review cycle: Quarterly