pleno-vue/tests/e2e/userBookings.spec.ts

import { expect, test } from "@playwright/test";
import { bookingTestData } from "./fixtures";
import { completeBookingCreationFlow } from "./support/bookingFlow";
import { mockApi, primeMockSession } from "./support/network.js";

test.beforeEach(async ({ page }) => {
  await mockApi(page, {
    authenticated: true,
    sessionData: {
      display_name: "Booking User",
      customer_number: 12345679,
      permissions: ["user"],
    },
    pos: true,
  });

  await primeMockSession(page, { bootPath: "/user" });
});

test("[PAGES][User][/user/bookings] should load the page", async ({ page }) => {
  await page.goto("/user/bookings");
  await expect(page).toHaveURL(/user\/bookings/);
});

test("[PAGES][User][/user/bookings] should display the title", async ({ page }) => {
  await page.goto("/user/bookings");
  await expect(page.locator(".title")).toContainText("Oversigt over bookinger");
});

test("[BOOKINGS][User][Mobile] should keep booking overview cards within the viewport", async ({ page }) => {
  const today = new Date().toISOString().split("T")[0];

  await mockApi(page, {
    authenticated: true,
    sessionData: {
      display_name: "Booking User",
      customer_number: 12345679,
      permissions: ["user"],
    },
    pos: {
      orderBookings: [
        {
          id: 9101,
          customer_number: 12345679,
          customer_name: "Pleno Logistics ApS",
          department: 12,
          datetime: `${today} 08:30:00`,
          reg_1: "AB12345",
          reg_2: "CD67890",
          reference: "Lang intern reference der tidligere pressede kortet ud over kanten",
          po: "PO-MOBILE-OVERVIEW-123456789",
          pickup: true,
          order_id: null,
          items: [
            {
              id: 53,
              name: "Forvogn med ekstra lang servicenavn der tidligere pressede kortet",
              quantity: 1,
              is_wash: true,
            },
            { id: 63, name: "Vaskecertifikat - Safety Seal", quantity: 1, is_wash: false },
            { id: 65, name: "Ekstraordinær pr. 10 min inkl. kemi", quantity: 2, is_wash: false },
          ],
        },
        {
          id: 9102,
          customer_number: 12345679,
          customer_name: "Pleno Logistics ApS",
          department: 1,
          datetime: `${today} 14:15:00`,
          reg_1: "EF24680",
          reg_2: "",
          reference: "",
          po: "",
          pickup: false,
          order_id: 54518,
          items: [{ id: 54, name: "Indvendig vask Forvogn", quantity: 1, is_wash: true }],
        },
      ],
    },
  });

  await page.setViewportSize({ width: 393, height: 852 });
  await page.goto("/user/bookings");

  await expect(page.getByTestId("order-booking-card")).toHaveCount(2, { timeout: 10000 });
  await expect(page.getByTestId("user-bookings-new-booking")).toBeVisible();
  await expect(page.locator("body")).not.toContainText("Ingen bookinger fundet");

  const layout = await page.evaluate(() => {
    const scrollingElement = document.scrollingElement || document.documentElement;
    const cards = Array.from(document.querySelectorAll('[data-testid="order-booking-card"]')).map((card) => {
      const rect = card.getBoundingClientRect();
      return {
        left: rect.left,
        right: rect.right,
        width: rect.width,
      };
    });
    const newBookingButton = document.querySelector('[data-testid="user-bookings-new-booking"]');
    return {
      clientWidth: scrollingElement.clientWidth,
      scrollWidth: scrollingElement.scrollWidth,
      viewportWidth: window.innerWidth,
      newBookingButtonWidth: newBookingButton?.getBoundingClientRect().width || 0,
      cards,
    };
  });

  expect(layout.scrollWidth).toBeLessThanOrEqual(layout.clientWidth + 1);
  expect(layout.newBookingButtonWidth).toBeGreaterThan(150);
  for (const card of layout.cards) {
    expect(card.left).toBeGreaterThanOrEqual(0);
    expect(card.right).toBeLessThanOrEqual(layout.viewportWidth + 1);
    expect(card.width).toBeGreaterThan(320);
  }
});

test("[BOOKINGS][User][List] should show created booking after book wash flow", async ({ page }) => {
  await completeBookingCreationFlow(page, bookingTestData);

  await page.waitForLoadState("networkidle");
  await page.goto("/user/bookings");
  await expect(page.locator(".title")).toContainText("Oversigt over bookinger");
  const showOnlyTodayToggle = page.locator("#today").first();
  if (await showOnlyTodayToggle.isVisible().catch(() => false)) {
    await showOnlyTodayToggle.uncheck({ force: true });
  }
  await page.getByRole("button", { name: "Opdater" }).first().click();
  await page.waitForLoadState("networkidle");
  await expect(page.locator("body")).toContainText(bookingTestData.registrationNumber);
});