Add comprehensive e2e tests for Grievance module - #84
Conversation
As it is all Dockerfiles and configs
As suggested by sonar scan’s security results
Also maps auth tests to UAT test numbers
Also give time for group creation
|
- Add JWT cookie check for idempotent login command - Use unique program codes with timestamps to avoid conflicts - Move ensureSufficientIndividuals to before hook - Update navigation selectors to use MUI accordion IDs - Add update, status, and detail view test suites - Remove non-existent flag/channel filter tests - Fix checkGrievanceFieldValues to use correct assertions
Extends grievance tests with full workflow coverage: - Grievance update: edit title, category, priority and details - Grievance status workflow: resolve with comment, reopen (unlock) - Detail view: verify all field values persisted correctly - Additional filters: flag, channel, and combined multi-filter search - Comment suite: move ensureSufficientIndividuals to before() hook to avoid redundant uploads across tests - Commands: resolveGrievance now uses comment-based resolution flow (add comment → click resolve button on comment) - Commands: unlockGrievance uses paperHeaderAction lock icon - Commands: addGrievanceComment reloads page after save to confirm persistence - Commands: login skips credentials form when JWT cookie already present - Navigation tests: use #Grievance-header and "Add Grievance" selectors matching the actual rendered DOM
…e-grievance # Conflicts: # .github/workflows/ci.yaml # cypress/e2e/admin.cy.js # cypress/support/commands.js # cypress/support/utils.js
- Fix DOM detachment during comment input by using native HTMLInputElement value setter instead of cy.type(), avoiding per-keystroke React re-renders - Fix TicketFilter category filter tests to use specific title assertions instead of iterating all rows (DropDownCategoryPicker sends object to filter) - Fix priority filter tests with positive/negative title assertions for reliability - Fix openProgramForEditFromList to search by name before finding row, resolving pagination-related failures in Beneficiary before hooks - Fix status workflow tests: add tfoot wait before enterMuiInput to prevent DOM detachment from initial page load re-renders in full suite runs - Update unlockGrievance to reuse searchAndOpenGrievanceForEdit and include journal check; use cy.unlockGrievance() in Reopen test - Replace cy.wait(2000) in addGrievanceComment with deterministic progress bar wait matching the pattern used by createGrievance and updateGrievance - Remove dead testGrievanceCodes array and redundant getGrievanceCodeFromList calls from creation tests (codes were collected but never used) - Remove redundant inner beforeEach cy.login() in update workflow describe block (outer beforeEach already covers all tests) - Remove duplicate cy.login() call inside detail view test body
There was a problem hiding this comment.
Pull request overview
Adds a new Cypress E2E test suite for the Grievance module and extends shared Cypress commands to support common Grievance workflows (create/update/comment/resolve/filter/navigation), alongside a couple of small test/support cleanups.
Changes:
- Added
cypress/e2e/grievance.cy.jscovering grievance creation, list filters, comments, status transitions, detail view checks, and navigation. - Extended
cypress/support/commands.jswith Grievance-specific custom commands and a more “session-aware”cy.login(). - Minor cleanup/adjustments in existing admin E2E test and README formatting.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| cypress/support/commands.js | Adds Grievance helpers (create/update/comment/resolve/etc.) and modifies cy.login() behavior. |
| cypress/e2e/grievance.cy.js | New end-to-end test suite covering Grievance module workflows. |
| cypress/e2e/admin.cy.js | Removes unused import and updates expected menu text for “Programs”. |
| README.md | Removes trailing blank line. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Select first available staff | ||
| cy.contains('label', 'Complainant') | ||
| .siblings('.MuiInputBase-root') | ||
| .find('input') | ||
| .click(); | ||
| cy.get('[role="menu"] li, [role="presentation"] li').first().click(); |
There was a problem hiding this comment.
Consider extracting a shared command chooseMuiSelectFirstAvailable and use here and above, given it's been used 3 times.
There was a problem hiding this comment.
refactored and used chooseMuiAutocomplete command
| cy.get('button[title="Edit"]').click(); | ||
| }); | ||
|
|
||
| // Update fields (excluding reporter type and reporter info) |
There was a problem hiding this comment.
Are these two fields expected to be disabled for edit? If so, consider adding asserts
There was a problem hiding this comment.
added the assert
| Cypress.Commands.add('addGrievanceComment', (commentText, commentData = {}) => { | ||
| cy.contains('button', 'Add Comment').click(); | ||
| // Use native HTMLInputElement value setter to avoid DOM detachment caused by | ||
| // React's per-keystroke re-renders in TicketCommentsPanel (setInterval + controlled input). |
There was a problem hiding this comment.
Is this react or us misusing react? Should the input be debounced in the FE code? I'm not suggesting the fix (if any) block this PR. Just wanted to flag if it's an issue, we should log a ticket & fix it, then we can simplify the test code here.
There was a problem hiding this comment.
I don’t think this is a React issue or something that should be solved by debouncing the comment input. The bigger issue seems to be that TicketCommentsPanel keeps polling/refetching comments every 5 seconds even while the add-comment dialog is open, which can cause the dialog subtree to rerender while Cypress is typing. The current test code is working around that instability. I don’t think it should block this PR, but I agree it’s worth logging a follow-up FE ticket so we can pause polling while editing and then simplify the Cypress command back to a normal .type() flow.
Here is the link to the code which does continous polling after every 5 seconds: fe-grievance-module/ticketcommentspanel
There was a problem hiding this comment.
I see. It was @jdolkowski 's commit as part of openimis/openimis-fe-grievance_social_protection_js#7. The intend was probably just to get the updated status for when the ticket is resolved. As you pointed @Shahzaibahmad97 it's not the most efficient way to achieve it. Please go ahead and log a ticket
weilu
left a comment
weilu
left a comment
There was a problem hiding this comment.
@Shahzaibahmad97 LGTM, with one thing I missed in the previous round of review.
|
|
||
| cy.updateGrievance(grievanceCode, updateData, { | ||
| reporterFieldLabel: 'User', | ||
| }); |
There was a problem hiding this comment.
Check priority & details updated as expected?
|
Overview
This PR adds comprehensive end-to-end tests for the Grievance module, covering grievance creation, comments, filtering, resolution, and navigation workflows.
Dependencies
What's Changed
Custom Cypress Commands Added
selectDropdownByLabel(label, value)- Generic MUI dropdown selection with optional value parameter (selects first element by default if no value is provided)createGrievance(grievanceData)- Create grievances with all reporter typesaddGrievanceComment(commentText, commentData)- Add comments with optional reporter typescheckGrievanceFieldValues(...)- Verify field values on detail pagecheckGrievanceFieldValuesInListView(title, category)- Verify fields in list viewgetGrievanceCodeFromList(title)- Retrieve grievance code for cleanupsearchAndOpenGrievanceForEdit(grievanceCode)- Open grievance for editingTest Coverage
✅ Grievance Creation with Reporter Types
✅ Grievance List View and Filters
✅ Grievance Navigation and UI Elements
Grievance Comments with Reporter Types
Grievance Resolution