Add test IDs to action elements (experimental)

[Copilot]

PR checklist

TaskId: (See problem statement)

Summary

Experimental implementation of test IDs for frontend action elements. Adds data-testid attributes to 5 buttons across 3 components to validate the pattern before broader rollout.

Components Updated:

• ClockOutModal: confirm and cancel buttons
• AddEditTimeEntry: submit and cancel buttons
• ProfileMenu: logout button

Implementation:

• Centralized test ID constants in testIds.ts following existing patterns
• Applied via dataTestId prop on Button components
• Naming convention: kebab-case (e.g., clock-out-confirm-btn)

Example:

// testIds.ts
export const attendanceModalsTestId = {
  clockOutModal: {
    confirmBtn: "clock-out-confirm-btn",
    cancelBtn: "clock-out-cancel-btn"
  }
};

// Component
<Button
  label="Confirm"
  dataTestId={attendanceModalsTestId.clockOutModal.confirmBtn}
/>

How to test

1. Inspect buttons in ClockOutModal, AddEditTimeEntry modal, and ProfileMenu
2. Verify data-testid attributes are present with expected values
3. Test in automated test framework using getByTestId('clock-out-confirm-btn') etc.

Project Checklist

• Changes build without any errors
• Have written adequate test cases
• Done developer testing in
  • Chrome
  • Firefox
  • Safari
• Code is formatted with npm run format
• Code is linted with npm run check-lint
• No unnecessary comments left in code
• Made corresponding changes to the documentation

Other

• New atomic components added
• New molecules added
• New pages(routes) added
• New dependencies installed

PR Checklist

• Pull request is raised from the correct source branch
• Pull request is raised to the correct destination branch
• Pull request is raised with correct title
• Pull request is self reviewed
• Pull request is self assigned
• Suitable pull request status labels are added (ready-for-code-review)

Additional Information

If this pattern is approved, can be systematically applied to remaining modals, forms, navigation elements, and input fields across the application.

Original prompt

On frontend, add test ids for all the action elements and to experiment it just out ids to few action elements and raise a pr so i can check the things

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud