Refactor cypress tests with commands and data tags #144
Conversation
…als' into 137-refactor-cypress-tests
There was a problem hiding this comment.
Pull Request Overview
This PR refactors Cypress tests by introducing data-cy attributes and custom commands to improve test selector reliability and simplify test flows.
- Added consistent data-cy attributes across UI components
- Updated custom Cypress commands to leverage these new selectors
- Refactored test specs to use the new commands and selectors
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/pages/admin_page/UsersAdmin.tsx | Added data-cy attributes for delete, create, and edit user buttons |
| ui/src/components/TopBar.tsx | Added data-cy attributes for login and register buttons (including mobile variants) |
| ui/src/components/ProfileMenu.tsx | Added data-cy attributes for profile menu elements |
| ui/src/components/LoginModal.tsx | Integrated data-cy attributes for form fields and error alerts |
| ui/src/components/Button.tsx | Introduced a new dataCy prop that maps to the data-cy attribute in the rendered button |
| ui/src/components/Alert.tsx | Updated Alert to accept additional HTML attributes via a spread of props |
| ui/cypress/support/commands.js | Added custom Cypress commands leveraging the new data-cy attributes |
| ui/cypress/e2e/admin.cy.js | Refactored admin e2e tests to use the new custom commands |
| setOpenRegisterModal(true) | ||
| setSidebarOpen(false) | ||
| }} | ||
| data-cy="open-login-modal-mobile" |
There was a problem hiding this comment.
The same data-cy value 'open-login-modal-mobile' is used for both the login and register mobile buttons, which may cause ambiguity in tests. Consider using a unique identifier for each button.
| data-cy="open-login-modal-mobile" | |
| data-cy="open-register-modal-mobile" |
| cy.get('[data-cy="login-button"]').click(); | ||
| }, | ||
| logout() { | ||
| cy.get('[data-cy="toggle-profile-menu-dropdown"').click(); |
There was a problem hiding this comment.
The selector is missing a closing bracket. It should be corrected to: cy.get('[data-cy="toggle-profile-menu-dropdown"]').click();
| cy.get('[data-cy="toggle-profile-menu-dropdown"').click(); | |
| cy.get('[data-cy="toggle-profile-menu-dropdown"]').click(); |
| class={clsx('alert my-4', types[props.type].alert, props?.class)} | ||
| {...props} |
There was a problem hiding this comment.
[nitpick] Spreading {...props} after setting the 'class' attribute may override the computed class names. Consider reordering the props spread or merging the classes to preserve the intended styling.
| class={clsx('alert my-4', types[props.type].alert, props?.class)} | |
| {...props} | |
| {...props} | |
| class={clsx('alert my-4', types[props.type].alert, props?.class)} |
Closes #137