Add Cypress Test Suite for Sample Test Request Workflow #8977
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…926/add-sample-test
WalkthroughThis pull request introduces a new Cypress test specification for requesting a sample test, encapsulated in Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
cypress/pageobject/Sample/SampleTestCreate.tsOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/parser'
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range and nitpick comments (8)
cypress/e2e/sample_test_spec/SampleTestRequest.cy.ts (1)
1-8: Consider improving test data management and type safety.
- Move test data to a separate fixture file for better maintainability and reusability.
- Add TypeScript type annotations for the constants.
import { SampleTestPage } from "pageobject/Sample/SampleTestCreate"; +import testData from '../fixtures/sampleTest.json'; describe("Sample Test", () => { const sampleTestPage = new SampleTestPage(); - const sampleTestType = "BA/ETA", - icmrCategory = "Cat 0", - icmrLabel = "Test Icmr Label"; + const sampleTestType: string = testData.sampleTestType; + const icmrCategory: string = testData.icmrCategory; + const icmrLabel: string = testData.icmrLabel;cypress/pageobject/Sample/SampleTestCreate.ts (2)
1-4: Add TypeScript type annotations and improve documentation.Consider adding type annotations and converting the inline comment to JSDoc format for better TypeScript integration and documentation.
export class SampleTestPage { - sampleTestReportHistory = 0; - patientName = ""; // to search for patient in sample page + private sampleTestReportHistory: number = 0; + /** Patient name used for searching in the sample page */ + private patientName: string = "";
1-79: Consider architectural improvements for better maintainability and debugging.While the Page Object Model implementation is good, consider these architectural improvements:
- Add logging for better debugging capabilities
- Create custom Cypress commands for common operations
- Implement retry strategies for flaky operations
- Consider splitting into smaller, more focused classes (e.g., separate navigation, form handling, and verification)
src/components/Patient/SampleTest.tsx (3)
230-230: Consider adding validation and improving accessibility for ICMR Category.While the
id="icmr-category"addition is good for testing, consider these improvements:
- Add validation in
validateForm()to ensure a valid category is selected.- Move the ICMR categories explanation to a separate component or tooltip for better maintainability and accessibility.
256-260: Consider adding format validation for ICMR Label.While the field has required validation, consider adding:
- Pattern validation to ensure the ICMR label follows the expected format
- Helper text to guide users on the expected format
Example implementation:
<TextFormField {...field("icmr_label", "ICMR Label")} required id="icmr-label" + pattern="[A-Z0-9-]+" + helperText="Enter the ICMR label in uppercase with numbers and hyphens only" />
Line range hint
1-326: Consider architectural improvements for better maintainability.While the changes for testing are good, consider these architectural improvements:
- Extract form validation logic into a custom hook for reusability
- Move ICMR categories to a configuration file
- Consider using a form library like React Hook Form or Formik for better form handling
src/components/Patient/SampleViewAdmin.tsx (1)
349-349: LGTM! Consider consistent ID naming.The addition of
id="search_patient_name"improves test automation capabilities. For consistency across the codebase, consider using either kebab-case (likesample-card) or snake_case (like current) for all IDs.src/components/Patient/PatientInfoCard.tsx (1)
Line range hint
1-673: Consider breaking down the component for better maintainability.The
PatientInfoCardcomponent handles multiple responsibilities and could benefit from being split into smaller, more focused components. Consider:
- Extracting modal-related logic into separate components
- Creating a dedicated component for the patient info section
- Moving the dropdown menu options into a separate component
- Consolidating modal state management using a reducer
This would improve code maintainability, readability, and testing.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
cypress/e2e/sample_test_spec/SampleTestRequest.cy.ts(1 hunks)cypress/pageobject/Sample/SampleTestCreate.ts(1 hunks)src/components/Patient/PatientHome.tsx(1 hunks)src/components/Patient/PatientInfoCard.tsx(1 hunks)src/components/Patient/SampleTest.tsx(4 hunks)src/components/Patient/SampleTestCard.tsx(1 hunks)src/components/Patient/SampleViewAdmin.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/components/Patient/SampleTestCard.tsx
🔇 Additional comments (4)
src/components/Patient/SampleTest.tsx (2)
215-215: LGTM! Verify test coverage for sample type selection.
The addition of id="sample-type" enhances test targeting. The field is properly integrated with form state and validation.
Let's verify the test coverage:
✅ Verification successful
The sample-type field is properly tested in the Cypress test suite
The added id="sample-type" attribute is being utilized effectively in the test suite:
- Implemented in the page object pattern (
SampleTestCreate.ts) - Used in E2E test flow (
SampleTestRequest.cy.ts) - Properly validated with visibility checks before interaction
- Integrated into the complete form submission workflow
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for test cases targeting the sample-type field
rg -l 'sample-type' cypress/
Length of output: 585
Script:
#!/bin/bash
# Let's search more broadly for any test files related to sample testing
fd . cypress/ -e ts -e js | xargs rg -l "sample.*test" -i
# Also search specifically for the sample type selector in test files
rg -A 5 "#sample-type" cypress/
Length of output: 738
Script:
#!/bin/bash
# Let's check the actual test implementation to verify the sample type testing
rg -A 10 "selectSampleType" cypress/e2e/sample_test_spec/SampleTestRequest.cy.ts
Length of output: 436
322-326: LGTM! Verify test coverage for form submission.
The addition of id="sample-test-submit-btn" enhances test targeting. The submission logic is comprehensive.
Let's verify the test coverage:
src/components/Patient/SampleViewAdmin.tsx (1)
149-149: LGTM! Good test automation support.
The addition of id="sample-card" improves test automation capabilities by making the sample card element easily identifiable in Cypress tests.
src/components/Patient/PatientInfoCard.tsx (1)
258-258: LGTM! Adding span wrapper improves accessibility.
The addition of a span element with id="patient-name" enhances DOM accessibility and makes it easier to target the patient's name for testing or styling purposes.
|
…926/add-sample-test
…are_fe into issues/8926/add-sample-test
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
cypress/e2e/users_spec/UsersManage.cy.ts (2)
Line range hint
1-192: Consider enhancing test maintainability with beforeEach setup.While the current implementation works well, consider moving the common setup steps (like advanced filter operations) into the
beforeEachblock to reduce code duplication and improve maintainability.Example refactor:
describe("Manage User", () => { // ... existing setup ... // Add shared test data const testData = { facilityToLinkSkill: "Dummy Facility 40", linkedSkill: "General Medicine", // ... other test data ... }; beforeEach(() => { cy.restoreLocalStorage(); cy.clearLocalStorage(/filters--.+/); cy.awaitUrl("/users"); // Add common setup for doctor skill tests cy.wrap(testData).as('testData'); }); // Specific test setup helper const setupDoctorSkillTest = () => { advanceFilters.clickAdvancedFiltersButton(); userPage.typeInFirstName(firstNameUserSkill); userPage.typeInLastName(lastNameUserSkill); userPage.selectHomeFacility(facilitytolinkskill); advanceFilters.applySelectedFilter(); }; it("linking skills for a doctor users and verify its reflection in doctor connect", () => { setupDoctorSkillTest(); // ... rest of the test ... }); });
Line range hint
1-192: Consider adding intercepts for API calls.As mentioned in the PR comments by nihal467, adding
cy.interceptfor form submissions and page loads would make the tests more reliable by ensuring proper API responses and page loads.Example enhancement:
// Add at the top of the file const ENDPOINTS = { LINK_SKILL: '**/api/v1/skill/link', USER_PROFILE: '**/api/v1/user/profile', // Add other endpoints }; it("linking skills for a doctor users and verify its reflection in doctor connect", () => { // Intercept API calls cy.intercept('POST', ENDPOINTS.LINK_SKILL).as('linkSkill'); cy.intercept('GET', ENDPOINTS.USER_PROFILE).as('userProfile'); // ... existing test steps ... // Wait for API responses cy.wait('@linkSkill'); cy.wait('@userProfile'); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
cypress/e2e/users_spec/UsersManage.cy.ts(1 hunks)
🔇 Additional comments (1)
cypress/e2e/users_spec/UsersManage.cy.ts (1)
63-63: LGTM! The home facility selection enhances test reliability.
The addition of selectHomeFacility helps narrow down the user search results before skill linking, making the test more robust and deterministic.
|
@JavidSumra 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
SampleTestPageclass with methods to automate sample request creation and verification.@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Improvements
idattributes for various form fields and components across the patient management interface.Bug Fixes
These updates enhance user experience and ensure robust functionality within the sample test management system.