[QA-214] Fix flaky device service history edit flow test

tests/facility/patient/encounter/medicine/prescriptionCreate.spec.ts

@@ -14,6 +14,16 @@ test.describe("Create Patient Prescription", () => {
   test.describe.configure({ mode: "serial" });
   let facilityId: string;
 
+  // These tests run serially against the same encounter, so every prescription
+  // they create shows up in one shared table. Pick two distinct medicines so
+  // the highlighted (non-unit) test and the unit test never land on rows that
+  // match the same medicine name — otherwise the unit test could match the
+  // other test's highlighted row and fail intermittently.
+  const [highlightedMedicine, unitMedicine] = faker.helpers.arrayElements(
+    medicineNames,
+    2,
+  );
+
   test.beforeEach(async ({ page }) => {
     facilityId = getFacilityId();
     const createdDateAfter = format(subDays(new Date(), 90), "yyyy-MM-dd");
@@ -26,7 +36,7 @@ test.describe("Create Patient Prescription", () => {
   });
 
   test("Add medication to patient prescription", async ({ page }) => {
-    const medicineName = faker.helpers.arrayElement(medicineNames);
+    const medicineName = highlightedMedicine;
     // Use a non-unit dose (value !== 1) so the dosage is highlighted
     const dosage = faker.number.int({ min: 2, max: 100 }).toString();
     const frequency = faker.helpers.arrayElement(frequencies);
@@ -119,7 +129,7 @@ test.describe("Create Patient Prescription", () => {
   test("Unit dosage is not highlighted in patient prescription", async ({
     page,
   }) => {
-    const medicineName = faker.helpers.arrayElement(medicineNames);
+    const medicineName = unitMedicine;
     // Use a unit dose (value === 1) so the dosage is NOT highlighted
     const dosage = "1";
     const frequency = faker.helpers.arrayElement(frequencies);

tests/facility/settings/devices/deviceServiceHistory.spec.ts

@@ -72,25 +72,37 @@ test.describe("Device Service History", () => {
 
     await expect(page.getByText(notes)).toBeVisible();
 
+    // Wait for the Add sheet to fully close before opening Edit; otherwise its
+    // controls linger in the DOM during the close animation and collide with
+    // the edit sheet's controls.
+    await expect(page.getByRole("button", { name: "Save" })).toBeHidden();
+
     await page
       .locator('[data-slot="card"]')
       .filter({ hasText: notes })
       .locator("button:has(.lucide-square-pen)")
       .first()
       .click();
 
+    // With the Add sheet closed, the edit sheet is the only open dialog, so
+    // scope interactions to it instead of matching a hard-coded dialog title.
+    const editSheet = page.getByRole("dialog");
+    await expect(editSheet).toBeVisible({ timeout: 10000 });
+
     const pastYear = new Date().getFullYear() - 1;
-    await page
+    await editSheet
       .locator('[data-slot="form-item"]')
       .filter({ hasText: "Service Date" })
       .locator('[data-slot="popover-trigger"]')
       .click();
     await page.locator(".rdp-years_dropdown").selectOption(pastYear.toString());
     await page.locator('[role="gridcell"]:not([data-outside])').first().click();
 
-    await page.getByRole("textbox", { name: "Notes *" }).fill(updatedNotes);
+    await editSheet
+      .getByRole("textbox", { name: "Notes *" })
+      .fill(updatedNotes);
 
-    await page.getByRole("button", { name: "Update" }).click();
+    await editSheet.getByRole("button", { name: "Update" }).click();
 
     const updatedCard = page
       .locator('[data-slot="card"]')
@@ -176,21 +188,33 @@ test.describe("Device Service History", () => {
 
     await expect(page.getByText(notes)).toBeVisible();
 
+    // Wait for the Add sheet to fully close before opening Edit; otherwise its
+    // controls linger in the DOM during the close animation and collide with
+    // the edit sheet's controls.
+    await expect(page.getByRole("button", { name: "Save" })).toBeHidden();
+
     await page
       .locator('[data-slot="card"]')
       .filter({ hasText: notes })
       .locator("button:has(.lucide-square-pen)")
       .first()
       .click();
 
-    const updateButton = page.getByRole("button", { name: "Update" });
+    // With the Add sheet closed, the edit sheet is the only open dialog, so
+    // scope interactions to it instead of matching a hard-coded dialog title.
+    const editSheet = page.getByRole("dialog");
+    await expect(editSheet).toBeVisible({ timeout: 10000 });
+
+    const updateButton = editSheet.getByRole("button", { name: "Update" });
     await expect(updateButton).toBeDisabled();
 
-    await page.getByRole("textbox", { name: "Notes *" }).fill(updatedNotes);
+    await editSheet
+      .getByRole("textbox", { name: "Notes *" })
+      .fill(updatedNotes);
 
     await expect(updateButton).toBeEnabled();
 
-    await page.getByRole("textbox", { name: "Notes *" }).fill(notes);
+    await editSheet.getByRole("textbox", { name: "Notes *" }).fill(notes);
 
     await expect(updateButton).toBeDisabled();
   });