Modified the cypress file structure docs #9925
Conversation
WalkthroughThis pull request introduces comprehensive updates to Cypress testing documentation and page object implementation. The changes focus on enhancing best practices documentation, clarifying file structure guidelines, and improving the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying care-fe with
|
| Latest commit: |
9a80534
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5cc0f778.care-fe.pages.dev |
| Branch Preview URL: | https://cypres-patch-2.care-fe.pages.dev |
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
cypres-patch-2
|
| Run status |
|
| Run duration | 01m 46s |
| Commit |
|
| Committer | Mohammed Nihal |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
4
|
| View all changes introduced in this branch ↗︎ | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
cypress/docs/file-structure.md (1)
Line range hint
4-24: Add examples for each directory's contents.The directory structure is well-organized, but would benefit from examples of what goes into each directory.
Consider adding example files under each directory:
cypress/ ├── docs/ │ ├── README.md │ ├── file-structure.md │ ├── patterns.md │ └── best-practices.md ├── e2e/ # Test files grouped by modules │ ├── patient/ +│ │ ├── patient-registration.cy.ts +│ │ └── patient-search.cy.ts │ ├── facility/ +│ │ ├── facility-creation.cy.ts +│ │ └── facility-search.cy.ts │ └── user/ ├── fixtures/ +│ ├── patient-data.json +│ └── facility-data.json ├── pageObject/ # Page Objects grouped by modules │ ├── patient/ +│ │ └── PatientRegistrationPage.ts │ ├── facility/ +│ │ └── FacilityCreationPage.ts │ └── user/ ├── utils/ # Utility functions and helpers │ ├── facilityData.ts # Facility-related utility functions │ └── commonUtils.ts # Shared utility functions └── support/🧰 Tools
🪛 LanguageTool
[uncategorized] ~44-~44: Loose punctuation mark.
Context: ...json## Support Files -commands.ts: Custom Cypress commands -e2e.ts`: e2e...(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~51-~51: Possible missing preposition found.
Context: ...torage() and cy.restoreLocalStorage() - Manage test data cleanup(AI_HYDRA_LEO_MISSING_TO)
cypress/docs/best-practices.md (2)
20-20: Add examples for loading state verification.The loading state verification guideline needs concrete examples.
Add example code:
- Always verify loading states before and after interactions + +Example: +```typescript +// Bad: No loading state verification +cy.get('button').click(); +cy.get('table').should('be.visible'); + +// Good: Verify loading states +cy.get('button').click(); +cy.get('[data-cy="loading-spinner"]').should('be.visible'); +cy.get('[data-cy="loading-spinner"]').should('not.exist'); +cy.get('table').should('be.visible'); +```
43-52: Enhance testing checklist with examples.The testing checklist is valuable but would benefit from examples for each item.
Add examples for each checklist item:
## Testing Checklist Before submitting your test, verify: - [ ] All API calls are intercepted and verified + Example: + ```typescript + cy.intercept('GET', '/api/users').as('getUsers'); + cy.wait('@getUsers').its('response.statusCode').should('eq', 200); + ``` - [ ] Loading states are handled properly + Example: See loading state verification example above - [ ] Success/error states are verified + Example: + ```typescript + cy.get('[data-cy="success-message"]').should('be.visible'); + cy.get('[data-cy="error-message"]').should('not.exist'); + ``` - [ ] No arbitrary timeouts used + Example: Use `cy.wait('@apiAlias')` instead of `cy.wait(5000)` - [ ] Search operations include debounce handling + Example: + ```typescript + cy.intercept('GET', '/api/search?q=*').as('search'); + cy.get('input').type('test'); + cy.wait('@search'); + ``` - [ ] Form submissions verify both request and response + Example: + ```typescript + cy.intercept('POST', '/api/submit').as('submit'); + cy.get('form').submit(); + cy.wait('@submit').then(interception => { + expect(interception.request.body).to.deep.equal(expectedData); + expect(interception.response.statusCode).to.equal(200); + }); + ```
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
cypress/docs/best-practices.md(1 hunks)cypress/docs/file-structure.md(2 hunks)cypress/pageObject/facility/FacilityCreation.ts(1 hunks)
🧰 Additional context used
📓 Learnings (1)
cypress/pageObject/facility/FacilityCreation.ts (1)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9145
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:177-180
Timestamp: 2024-11-18T10:44:30.303Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, when testing bed and staff capacity individually for additional error verification, we prefer to use separate method calls to handle bed and staff capacity, rather than using `facilityPage.createNewFacility(testFacilityData)` which also handles bed management.
🪛 LanguageTool
cypress/docs/file-structure.md
[uncategorized] ~44-~44: Loose punctuation mark.
Context: ...json ## Support Files -commands.ts: Custom Cypress commands - e2e.ts`: e2e...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~51-~51: Possible missing preposition found.
Context: ...torage() and cy.restoreLocalStorage() - Manage test data cleanup
(AI_HYDRA_LEO_MISSING_TO)
cypress/docs/best-practices.md
[uncategorized] ~25-~25: You might be missing the article “the” here.
Context: ...Keep tests focused and concise - Follow AAA pattern (Arrange, Act, Assert) - Use me...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
- GitHub Check: Cloudflare Pages: care-fe
| cy.intercept("GET", `**/api/v1/facility/**`).as("searchFacility"); | ||
| cy.typeIntoField('[data-cy="search-facility"]', facilityName); | ||
| cy.wait("@searchFacility").its("response.statusCode").should("eq", 200); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve API interception and search handling.
While adding API verification is good, there are a few improvements needed:
- The API intercept pattern
**/api/v1/facility/**is too broad and could catch unintended requests - Missing loading state verification
- Missing debounce handling for search operations
Consider this implementation:
searchFacility(facilityName: string) {
- cy.intercept("GET", `**/api/v1/facility/**`).as("searchFacility");
+ cy.intercept("GET", `**/api/v1/facility/search?name=${facilityName}`).as("searchFacility");
cy.typeIntoField('[data-cy="search-facility"]', facilityName);
+ cy.get('[data-cy="search-loading"]').should('be.visible');
cy.wait("@searchFacility").its("response.statusCode").should("eq", 200);
+ cy.get('[data-cy="search-loading"]').should('not.exist');
+ // Verify search results are displayed
+ cy.get('[data-cy="facility-cards"]').should('be.visible');
}Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
cypress/pageObject/facility/FacilityCreation.ts (1)
98-102: 🛠️ Refactor suggestionAdd loading state and search results verification.
The current implementation doesn't verify the loading state or search results visibility. This could lead to false positives if the UI doesn't update properly.
cy.intercept("GET", `**/api/v1/facility/?**`).as("searchFacility"); cy.typeIntoField('[data-cy="search-facility"]', facilityName, { delay: 100, }); + cy.get('[data-cy="search-loading"]').should('be.visible'); cy.wait("@searchFacility").its("response.statusCode").should("eq", 200); + cy.get('[data-cy="search-loading"]').should('not.exist'); + cy.get('[data-cy="facility-cards"]').should('be.visible');
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
cypress/pageObject/facility/FacilityCreation.ts(1 hunks)cypress/support/commands.ts(1 hunks)
🧰 Additional context used
📓 Learnings (1)
cypress/pageObject/facility/FacilityCreation.ts (2)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9145
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:177-180
Timestamp: 2024-11-18T10:44:30.303Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, when testing bed and staff capacity individually for additional error verification, we prefer to use separate method calls to handle bed and staff capacity, rather than using `facilityPage.createNewFacility(testFacilityData)` which also handles bed management.
Learnt from: nihal467
PR: ohcnetwork/care_fe#9846
File: cypress/pageObject/facility/FacilityCreation.ts:14-47
Timestamp: 2025-01-09T05:37:17.121Z
Learning: In the care_fe project's Cypress tests, facility test data is managed through the facilityData.ts utility which provides pre-validated data through the FacilityTestData interface, making additional validation in the FacilityCreation page object unnecessary.
🔇 Additional comments (2)
cypress/support/commands.ts (1)
247-247: Consider the impact of removing the default typing delay.Changing the default delay from 50ms to 0ms could potentially:
- Impact test stability across the entire test suite
- Cause race conditions in tests that rely on the default delay
- Lead to flaky tests, especially in components that have debounce or throttle mechanisms
Consider keeping a small default delay (e.g., 50ms) and explicitly set it to 0ms only where needed.
Let's verify the impact of this change:
✅ Verification successful
Removing the default typing delay is safe
The codebase analysis shows that:
- All inputs are standard form fields without complex async behavior
- Critical fields like phone and search already have custom delay configurations
- No evidence of debounce/throttle mechanisms that would require the delay
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Find all usages of typeIntoField to assess the impact rg -A 2 "typeIntoField" --type tsLength of output: 3032
Error: No shell scripts found
Script:
#!/bin/bash # Search for input field implementations rg -B2 -A2 'data-cy="(facility|patient)' --type tsxLength of output: 81
Script:
#!/bin/bash # Search for input field implementations rg -B2 -A2 'data-cy="(facility|patient)' --type tsLength of output: 10405
cypress/pageObject/facility/FacilityCreation.ts (1)
98-98: 🛠️ Refactor suggestionUse a more specific API interception pattern.
The current pattern
**/api/v1/facility/?**is too broad and could catch unintended requests. Consider using a more specific pattern that matches the actual search endpoint.- cy.intercept("GET", `**/api/v1/facility/?**`).as("searchFacility"); + cy.intercept("GET", `**/api/v1/facility/search?name=*`).as("searchFacility");Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
cypress/pageObject/facility/FacilityCreation.ts (2)
98-98: 🛠️ Refactor suggestionUse a more specific API interception pattern.
The current pattern
**/api/v1/facility/?**is too broad and could intercept unintended requests.- cy.intercept("GET", `**/api/v1/facility/?**`).as("searchFacility"); + cy.intercept("GET", `**/api/v1/facility/search?name=${facilityName}`).as("searchFacility");
119-122: 🛠️ Refactor suggestionAdd comprehensive search verification.
The current implementation lacks loading state verification and search results validation.
cy.get('[data-cy="search-facility"]').should("have.value", facilityName); + // Verify loading state + cy.get('[data-cy="search-loading"]').should('be.visible'); + cy.wait("@searchFacility").its("response.statusCode").should("eq", 200); + + // Verify loading state is removed + cy.get('[data-cy="search-loading"]').should('not.exist'); + + // Verify search results + cy.get('[data-cy="facility-cards"]') + .should('be.visible') + .should('not.be.empty');
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
cypress/pageObject/facility/FacilityCreation.ts(1 hunks)
🧰 Additional context used
📓 Learnings (1)
cypress/pageObject/facility/FacilityCreation.ts (1)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9145
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:177-180
Timestamp: 2024-11-18T10:44:30.303Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, when testing bed and staff capacity individually for additional error verification, we prefer to use separate method calls to handle bed and staff capacity, rather than using `facilityPage.createNewFacility(testFacilityData)` which also handles bed management.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
cypress/pageObject/facility/FacilityCreation.ts (1)
98-98: 🛠️ Refactor suggestionUse a more specific API intercept pattern.
The current pattern
**/api/v1/facility/?**is too broad and could catch unintended requests. Use a more specific pattern that matches the search endpoint.- cy.intercept("GET", `**/api/v1/facility/?**`).as("searchFacility"); + cy.intercept("GET", `**/api/v1/facility/search?name=${facilityName}`).as("searchFacility");
🧹 Nitpick comments (1)
cypress/pageObject/facility/FacilityCreation.ts (1)
98-104: Consider implementing error handling for failed searches.The current implementation doesn't handle API errors or no results scenarios. Consider adding error handling and empty results verification.
cy.intercept("GET", `**/api/v1/facility/search?name=${facilityName}`).as("searchFacility"); cy.get('[data-cy="search-facility"]') .should('be.visible') .should('be.enabled') .type(facilityName, { delay: 500 }) .should('have.value', facilityName); cy.get('[data-cy="search-loading"]').should('be.visible'); - cy.wait("@searchFacility").its("response.statusCode").should("eq", 200); + cy.wait("@searchFacility").then((interception) => { + if (interception.response?.statusCode === 200) { + if (interception.response.body.length === 0) { + cy.get('[data-cy="no-results"]').should('be.visible'); + } else { + cy.get('[data-cy="facility-cards"]').should('be.visible'); + } + } else { + cy.get('[data-cy="search-error"]').should('be.visible'); + } + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
cypress/pageObject/facility/FacilityCreation.ts(1 hunks)
🧰 Additional context used
📓 Learnings (1)
cypress/pageObject/facility/FacilityCreation.ts (2)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9145
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:177-180
Timestamp: 2024-11-18T10:44:30.303Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, when testing bed and staff capacity individually for additional error verification, we prefer to use separate method calls to handle bed and staff capacity, rather than using `facilityPage.createNewFacility(testFacilityData)` which also handles bed management.
Learnt from: nihal467
PR: ohcnetwork/care_fe#9846
File: cypress/pageObject/facility/FacilityCreation.ts:14-47
Timestamp: 2025-01-09T05:37:17.121Z
Learning: In the care_fe project's Cypress tests, facility test data is managed through the facilityData.ts utility which provides pre-validated data through the FacilityTestData interface, making additional validation in the FacilityCreation page object unnecessary.
🔇 Additional comments (2)
cypress/pageObject/facility/FacilityCreation.ts (2)
104-104: 🛠️ Refactor suggestionAdd loading state and search results verification.
The implementation should verify the loading state and ensure search results are displayed after the API call completes.
+ cy.get('[data-cy="search-loading"]').should('be.visible'); cy.wait("@searchFacility").its("response.statusCode").should("eq", 200); + cy.get('[data-cy="search-loading"]').should('not.exist'); + cy.get('[data-cy="facility-cards"]').should('be.visible');Likely invalid or redundant comment.
100-102: 🛠️ Refactor suggestionAvoid using force option and implement proper debounce handling.
The
force: trueoption bypasses Cypress's actionability checks which could mask potential issues. Additionally, the implementation should handle debounce timing.cy.get('[data-cy="search-facility"]') - .focus() - .type(facilityName, { force: true }); + .should('be.visible') + .should('be.enabled') + .type(facilityName, { delay: 500 }) // Match the debounce timing + .should('have.value', facilityName);Likely invalid or redundant comment.
|
@nihal467 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Documentation
New Features
Bug Fixes
Chores