Resolved conflicts

.env

@@ -7,7 +7,7 @@ REACT_APP_COVER_IMAGE_ALT=https://cdn.ohc.network/care_logo.svg
 REACT_PUBLIC_URL=https://care.ohc.network
 
 # Care API URL without the /api prefix
-REACT_CARE_API_URL=https://care-api.do.ohc.network
+REACT_CARE_API_URL=https://careapi.ohc.network
 
 # Dev envs
 ESLINT_NO_DEV_ERRORS=true

care.config.ts

@@ -103,6 +103,14 @@ const careConfig = {
   },
 
   appointments: {
+    /**
+     * Relative number of days to show in the appointments page by default.
+     * 0 means today, positive for future days, negative for past days.
+     */
+    defaultDateFilter: env.REACT_APPOINTMENTS_DEFAULT_DATE_FILTER
+      ? parseInt(env.REACT_APPOINTMENTS_DEFAULT_DATE_FILTER)
+      : 7,
+
     // Kill switch in-case the heatmap API doesn't scale as expected
     useAvailabilityStatsAPI: boolean(
       "REACT_APPOINTMENTS_USE_AVAILABILITY_STATS_API",

cypress/docs/best-practices.md

@@ -1,32 +1,52 @@
 # Best Practices
 
 ## Test Independence
+
 - Each test should be independent and isolated
 - Clean up test data after tests
 - Don't rely on the state from other tests
 
 ## API Testing
+
 - Use cy.intercept() for API verification
 - Use waitUntil() for API completion
 - Avoid cy.wait() except for API responses
 
 ## Element Interaction
+
 - Always verify element state before interaction
 - Use data-cy attributes for selectors
 - Verify button text before clicking
+- Always verify loading states before and after interactions
 
 ## Code Organization
+
 - Keep tests focused and concise
 - Follow AAA pattern (Arrange, Act, Assert)
 - Use meaningful test descriptions
 
 ## Common Pitfalls to Avoid
+
 - Redundant visibility checks with verifyAndClickElement
 - Hardcoded values in page objects
 - Unnecessary waits
 - Test interdependencies
+- Skipping API verifications
+- Using arbitrary timeouts instead of proper waits
 
 ## Performance Considerations
+
 - Minimize unnecessary API calls
 - Use efficient selectors
-- Batch similar operations 
+- Batch similar operations
+
+## Testing Checklist
+
+Before submitting your test, verify:
+
+- [ ] All API calls are intercepted and verified
+- [ ] Loading states are handled properly
+- [ ] Success/error states are verified
+- [ ] No arbitrary timeouts used
+- [ ] Search operations include debounce handling
+- [ ] Form submissions verify both request and response

cypress/docs/file-structure.md

@@ -1,6 +1,7 @@
 # File Structure and Organization
 
 ## Directory Structure
+
 ```
 cypress/
 ├── docs/
@@ -9,31 +10,42 @@ cypress/
 │   ├── patterns.md
 │   └── best-practices.md
 ├── e2e/                    # Test files grouped by modules
-│   ├── patient/           
-│   ├── facility/          
-│   └── user/             
-├── fixtures/              
-├── pageObject/           
-└── support/              
+│   ├── patient/
+│   ├── facility/
+│   └── user/
+├── fixtures/
+├── pageObject/            # Page Objects grouped by modules
+│   ├── patient/
+│   ├── facility/
+│   └── user/
+├── utils/                 # Utility functions and helpers
+│   ├── facilityData.ts   # Facility-related utility functions
+│   └── commonUtils.ts    # Shared utility functions
+└── support/
 ```
 
 ## Module Organization
+
 Each module (patient, facility, user, etc.) should have:
+
 - Test files in `e2e/<module-name>/`
 - Page Object in `pageObject/<module-name>/`
 - Fixtures in `fixtures/<module-name>/`
 
 ## File Naming Conventions
+
 - Test files: `feature-name.cy.ts`
 - Page Object: `FeatureNamePage.ts`
 - Custom Commands: `feature-name.ts`
 - Fixtures: `feature-name-data.json`
 
 ## Support Files
+
 - `commands.ts`: Custom Cypress commands
 - `e2e.ts`: e2e configurations
 - `index.ts`: Main support file
 
 ## Storage Management
+
 - Use cy.saveLocalStorage() and cy.restoreLocalStorage()
-- Manage test data cleanup 
+- Manage test data cleanup

cypress/e2e/facility_spec/facility_creation.cy.ts

@@ -45,6 +45,9 @@ describe("Facility Management", () => {
     facilityPage.submitFacilityCreationForm();
     facilityPage.verifySuccessMessage();
 
+    // Wait for facility cards to load
+    facilityPage.waitForFacilityCardsToLoad();
+
     // Search for the facility and verify in card
     facilityPage.searchFacility(testFacility.name);
     facilityPage.verifyFacilityNameInCard(testFacility.name);

cypress/pageObject/facility/FacilityCreation.ts

@@ -95,10 +95,22 @@ export class FacilityCreation {
   }
 
   searchFacility(facilityName: string) {
-    cy.typeIntoField('[data-cy="search-facility"]', facilityName);
+    cy.intercept("GET", `**/api/v1/facility/?**`).as("searchFacility");
+
+    cy.get('[data-cy="search-facility"]')
+      .focus()
+      .type(facilityName, { force: true });
+
+    cy.wait("@searchFacility").its("response.statusCode").should("eq", 200);
   }
 
   verifyFacilityNameInCard(facilityName: string) {
     cy.get('[data-cy="facility-cards"]').should("contain", facilityName);
   }
+
+  waitForFacilityCardsToLoad(timeout = 10000) {
+    cy.get('[data-cy="facility-cards"]', { timeout })
+      .should("be.visible")
+      .should("not.be.empty");
+  }
 }

cypress/support/commands.ts

@@ -220,20 +220,32 @@ Cypress.Commands.add(
   (
     selector: string,
     value: string,
-    options: { clearBeforeTyping?: boolean; skipVerification?: boolean } = {},
+    options: {
+      clearBeforeTyping?: boolean;
+      skipVerification?: boolean;
+      delay?: number;
+    } = {},
   ) => {
-    const { clearBeforeTyping = false, skipVerification = false } = options;
+    const {
+      clearBeforeTyping = false,
+      skipVerification = false,
+      delay = 0,
+    } = options;
     const inputField = cy.get(selector);
 
     if (clearBeforeTyping) {
-      inputField.clear(); // Clear the input field if specified
+      inputField.clear();
     }
 
-    inputField.scrollIntoView().should("be.visible").click().type(value);
-
-    // Conditionally skip verification based on the skipVerification flag
-    if (!skipVerification) {
-      inputField.should("have.value", value); // Verify the value if skipVerification is false
-    }
+    inputField
+      .scrollIntoView()
+      .should("be.visible")
+      .click()
+      .type(value, { delay })
+      .then(() => {
+        if (!skipVerification) {
+          cy.get(selector).should("have.value", value);
+        }
+      });
   },
 );

cypress/support/index.ts

@@ -48,7 +48,11 @@ declare global {
       typeIntoField(
         selector: string,
         value: string,
-        options?: { clearBeforeTyping?: boolean; skipVerification?: boolean },
+        options?: {
+          clearBeforeTyping?: boolean;
+          skipVerification?: boolean;
+          delay?: number;
+        },
       ): Chainable<Element>;
     }
   }

package.json

@@ -77,8 +77,8 @@
     "@radix-ui/react-toast": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@sentry/browser": "^8.48.0",
-    "@tanstack/react-query": "^5.62.8",
-    "@tanstack/react-query-devtools": "^5.63.0",
+    "@tanstack/react-query": "^5.64.0",
+    "@tanstack/react-query-devtools": "^5.64.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@yudiel/react-qr-scanner": "^2.1.0",
     "bowser": "^2.11.0",