pleno-vue/tests/unit/user-booking-date-time-selector.spec.js

// @vitest-environment jsdom
import { computed, defineComponent, ref } from "vue";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { mountWithApp } from "./helpers/mountWithApp.js";

import UserBookingDateTimeSelector from "@/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue";

const messages = {
  en: {
    common: {
      during_the_day: "During the day",
      select: "Select",
      approx: "Approx.",
      cancel: "Cancel",
    },
    user_dashboard: {
      bookings: {
        book: {
          expected_date_time: "Expected date and time",
        },
      },
    },
  },
};

const createDate = (year, month, day, hours = 0, minutes = 0) => new Date(year, month - 1, day, hours, minutes, 0, 0);

const serializeLocalDateTime = (value) =>
  [value.getFullYear(), String(value.getMonth() + 1).padStart(2, "0"), String(value.getDate()).padStart(2, "0")].join(
    "-"
  ) +
  " " +
  [String(value.getHours()).padStart(2, "0"), String(value.getMinutes()).padStart(2, "0")].join(":");

describe("UserBookingDateTimeSelector", () => {
  beforeEach(() => {
    vi.useFakeTimers();
    vi.setSystemTime(createDate(2026, 4, 14, 9, 0));
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  it("opens with the current prefilled during-the-day selection", () => {
    const wrapper = mountWithApp(UserBookingDateTimeSelector, {
      props: {
        dateTime: createDate(2026, 4, 14),
        open: true,
        variant: "desktop",
      },
      messages,
    });

    expect(wrapper.get('[data-testid="booking-date-time-day-2026-04-14"]').classes()).toContain("is-selected");
    expect(wrapper.get('[data-testid="booking-date-time-slot-00-00"]').classes()).toContain("is-selected");
    expect(wrapper.get('[data-testid="booking-date-time-confirm"]').text()).toContain("During the day");
  });

  it("keeps draft changes local until the user confirms a concrete time", async () => {
    const wrapper = mountWithApp(UserBookingDateTimeSelector, {
      props: {
        dateTime: createDate(2026, 4, 14),
        open: true,
        variant: "desktop",
      },
      messages,
    });

    await wrapper.get('[data-testid="booking-date-time-day-2026-04-16"]').trigger("click");
    await wrapper.get('[data-testid="booking-date-time-slot-10-00"]').trigger("click");

    expect(wrapper.emitted("confirm")).toBeUndefined();
    expect(wrapper.get('[data-testid="booking-date-time-confirm"]').text()).toContain("10:00");

    await wrapper.get('[data-testid="booking-date-time-confirm"]').trigger("click");

    const emittedValue = wrapper.emitted("confirm")?.at(0)?.[0];
    expect(emittedValue).toBeInstanceOf(Date);
    expect(serializeLocalDateTime(emittedValue)).toBe("2026-04-16 10:00");
  });

  it("closes on cancel without mutating the committed parent value", async () => {
    const Host = defineComponent({
      components: {
        UserBookingDateTimeSelector,
      },
      setup() {
        const currentDate = ref(createDate(2026, 4, 14));
        const open = ref(true);
        const committedValue = computed(() => serializeLocalDateTime(currentDate.value));

        const handleConfirm = (value) => {
          currentDate.value = value;
          open.value = false;
        };

        const handleClose = () => {
          open.value = false;
        };

        return {
          committedValue,
          currentDate,
          open,
          handleConfirm,
          handleClose,
        };
      },
      template: `
        <div>
          <div data-testid="committed-value">{{ committedValue }}</div>
          <UserBookingDateTimeSelector
            :dateTime="currentDate"
            :open="open"
            variant="mobile"
            @confirm="handleConfirm"
            @close="handleClose"
          />
        </div>
      `,
    });

    const wrapper = mountWithApp(Host, { messages });

    await wrapper.get('[data-testid="booking-date-time-day-2026-04-18"]').trigger("click");
    await wrapper.get('[data-testid="booking-date-time-slot-14-00"]').trigger("click");
    await wrapper.get('[data-testid="booking-date-time-cancel"]').trigger("click");

    expect(wrapper.get('[data-testid="committed-value"]').text()).toBe("2026-04-14 00:00");
    expect(wrapper.find('[data-testid="booking-date-time-selector-mobile"]').exists()).toBe(false);
  });
});