diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue index 0d023525..c83aaf89 100644 --- a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue +++ b/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} diff --git a/tests/e2e/pos-mobile-order-flow.spec.js b/tests/e2e/pos-mobile-order-flow.spec.js index 89eef0db..675416ee 100644 --- a/tests/e2e/pos-mobile-order-flow.spec.js +++ b/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 }) => { diff --git a/tests/unit/pos-mobile-popup-controls.spec.js b/tests/unit/pos-mobile-popup-controls.spec.js new file mode 100644 index 00000000..f12f56c4 --- /dev/null +++ b/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); + } + }); +});