Add unit and e2e tests for POS mobile popups:

- Introduced `headerCloseTestId` and `showHeaderClose` properties in visible-header popups for improved testability.
- Added unit tests to validate header close button behavior across popups.
- Enhanced e2e tests to verify popup visibility and header close functionality in mobile workflows.

src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue

@@ -235,6 +235,8 @@ const addDefaultPopups = () => {
     title: 'Vælg Kunde',
     message: 'Bekræft venligst valget af kunde til denne transaktion',
     component: 'select_customer',
+    showHeaderClose: true,
+    headerCloseTestId: 'pos-mobile-select-customer-header-close',
     style: {height: '50vh'},
     actionButtons: [{...defaultActionButtons.value.cancel}, {...defaultActionButtons.value.addCustomer, label: 'Ny kunde'}],
   });
@@ -243,6 +245,8 @@ const addDefaultPopups = () => {
     title: i18n.global.t('admin.pos.order_booking_selector.title'),
     message: i18n.global.t('admin.pos.order_booking_selector.help_text'),
     component: 'select_order_booking',
+    showHeaderClose: true,
+    headerCloseTestId: 'pos-mobile-order-booking-header-close',
     style: { maxHeight: '72dvh' },
     actionButtons: [],
   });
@@ -301,6 +305,8 @@ const addDefaultPopups = () => {
     title: 'Indtast reference',
     message: 'Indtast venligst en reference for denne transaktion',
     component: 'change_reference',
+    showHeaderClose: true,
+    headerCloseTestId: 'pos-mobile-change-reference-header-close',
     style: {maxHeight: '40vh'},
     actionButtons: [
       {...defaultActionButtons.value.confirm},
@@ -313,6 +319,8 @@ const addDefaultPopups = () => {
     title: 'Kundebemærkninger',
     message: 'Læs venligst kundens bemærkninger',
     component: 'customer_notes',
+    showHeaderClose: true,
+    headerCloseTestId: 'pos-mobile-customer-notes-header-close',
     style: {maxHeight: '50vh'},
     actionButtons: [
       {...defaultActionButtons.value.addNote},
@@ -326,6 +334,8 @@ const addDefaultPopups = () => {
     title: 'Billede',
     message: '',
     component: 'image_viewer',
+    showHeaderClose: true,
+    headerCloseTestId: 'pos-mobile-image-viewer-header-close',
     style: {maxHeight: '50vh'},
     actionButtons: [
       {...defaultActionButtons.value.close}
@@ -338,6 +348,8 @@ const addDefaultPopups = () => {
     title: 'Tilføj kunde',
     message: 'Indtast venligst oplysninger for den nye kunde',
     component: 'add_customer',
+    showHeaderClose: true,
+    headerCloseTestId: 'pos-mobile-add-customer-header-close',
     style: {maxHeight: '60vh'},
     actionButtons: [
       {...defaultActionButtons.value.cancel}

tests/e2e/pos-mobile-order-flow.spec.js

@@ -394,6 +394,14 @@ test.describe("POS mobile order flow", () => {
 
     await page.getByTestId("pos-mobile-next-step").click();
     await expect(page.getByTestId("pos-mobile-customer-popup")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("pos-mobile-select-customer-header-close")).toBeVisible({ timeout: 10_000 });
+
+    await page.getByTestId("pos-mobile-select-customer-header-close").click();
+    await expect(page.getByTestId("pos-mobile-customer-popup")).toBeHidden({ timeout: 10_000 });
+
+    await waitForMobileNextStepCooldown(page);
+    await page.getByTestId("pos-mobile-next-step").click();
+    await expect(page.getByTestId("pos-mobile-customer-popup")).toBeVisible({ timeout: 10_000 });
   });
 
   test("transaction history keeps each wash visually separated with a border", async ({ page }) => {

tests/unit/pos-mobile-popup-controls.spec.js

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+
+import { popups } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+
+const visibleHeaderPopupIds = [
+  "select_customer",
+  "select_order_booking",
+  "select_vehicle",
+  "change_reference",
+  "customer_notes",
+  "image",
+  "add_customer",
+];
+
+describe("POS mobile popup controls", () => {
+  it("defines a dedicated header close button for select customer", () => {
+    const popup = popups.getByKey("select_customer");
+
+    expect(popup).not.toBeNull();
+    expect(popup?.showHeaderClose).toBe(true);
+    expect(popup?.headerCloseTestId).toBe("pos-mobile-select-customer-header-close");
+  });
+
+  it("provides a header close trigger for every visible-header popup", () => {
+    for (const popupId of visibleHeaderPopupIds) {
+      const popup = popups.getByKey(popupId);
+
+      expect(popup).not.toBeNull();
+      expect(popup?.hideHeader ?? false).toBe(false);
+      expect(popup?.showHeaderClose).toBe(true);
+      expect(typeof popup?.headerCloseTestId).toBe("string");
+      expect(popup?.headerCloseTestId.length).toBeGreaterThan(0);
+    }
+  });
+});