pleno-vue/tests/unit/buefy-datepicker.spec.js

// @vitest-environment jsdom
import { mount } from "@vue/test-utils";
import { describe, expect, it, vi } from "vitest";

vi.mock("vue-i18n", async (importOriginal) => {
  const actual = await importOriginal();

  return {
    ...actual,
    useI18n: () => ({
      locale: { value: "da-DK" },
    }),
  };
});

vi.mock("buefy", async () => {
  const { defineComponent } = await import("vue");

  return {
    BDatepicker: defineComponent({
      name: "BDatepicker",
      props: {
        modelValue: {
          type: Date,
          default: null,
        },
        iconRight: {
          type: String,
          default: "",
        },
        iconRightClickable: Boolean,
        appendToBody: Boolean,
        position: {
          type: String,
          default: "",
        },
        openOnFocus: Boolean,
        inline: Boolean,
      },
      emits: ["icon-right-click"],
      template: `
        <div
          data-testid="b-datepicker"
          :data-icon-right="iconRight || ''"
          :data-icon-right-clickable="String(iconRightClickable)"
          :data-append-to-body="String(appendToBody)"
          :data-position="position"
          :data-open-on-focus="String(openOnFocus)"
          :data-inline="String(inline)"
        >
          <button v-if="iconRight" data-testid="date-clear" type="button" @click="$emit('icon-right-click', $event)">clear</button>
        </div>
      `,
    }),
  };
});

import {
  formatDatepickerDateForApi,
  formatDatepickerMonthForApi,
  parseDatepickerInput,
  parseMonthpickerInput,
} from "@/services/buefyDatepicker.js";
import { formatLocalDateOnly } from "@/services/dateOnly.js";
import BuefyDateField from "@/components/forms/BuefyDateField.vue";
import BuefyMonthField from "@/components/forms/BuefyMonthField.vue";

describe("buefy datepicker helpers", () => {
  it("formats Date values as API-safe local date and month strings", () => {
    const date = new Date(2026, 2, 31, 15, 45, 0, 0);

    expect(formatDatepickerDateForApi(date)).toBe("2026-03-31");
    expect(formatDatepickerMonthForApi(date)).toBe("2026-03");
  });

  it("parses locale date input without shifting the local day", () => {
    const parsed = parseDatepickerInput("31.03.2026", "da-DK");

    expect(formatLocalDateOnly(parsed)).toBe("2026-03-31");
  });

  it("parses month picker input to the first local day of the selected month", () => {
    const parsed = parseMonthpickerInput("2026-03", "en-US");

    expect(formatLocalDateOnly(parsed)).toBe("2026-03-01");
  });
});

describe("BuefyDateField", () => {
  it("shows a clear icon for optional selected dates and emits an empty string when cleared", async () => {
    const wrapper = mount(BuefyDateField, {
      props: {
        modelValue: "2026-03-31",
        clearable: true,
      },
    });

    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-icon-right")).toBe("times-circle");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-append-to-body")).toBe("true");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-position")).toBe("is-bottom-left");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-open-on-focus")).toBe("true");

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

    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([""]);
    expect(wrapper.emitted("change")?.at(-1)).toEqual([""]);
  });

  it("does not show the clear icon when clearable is false", () => {
    const wrapper = mount(BuefyDateField, {
      props: {
        modelValue: "2026-03-31",
      },
    });

    expect(wrapper.find("[data-testid='date-clear']").exists()).toBe(false);
  });

  it("emits null when clearing nullable string fields", async () => {
    const wrapper = mount(BuefyDateField, {
      props: {
        modelValue: "2026-03-31",
        valueType: "nullable-string",
        clearable: true,
      },
    });

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

    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([null]);
  });
});

describe("BuefyMonthField", () => {
  it("uses body-appended popouts and can clear optional selected months", async () => {
    const wrapper = mount(BuefyMonthField, {
      props: {
        modelValue: "2026-03",
        clearable: true,
      },
    });

    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-icon-right")).toBe("times-circle");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-append-to-body")).toBe("true");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-open-on-focus")).toBe("true");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-inline")).toBe("false");

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

    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([""]);
  });

  it("can render the Buefy month picker inline", () => {
    const wrapper = mount(BuefyMonthField, {
      props: {
        modelValue: "2026-03",
        inline: true,
        appendToBody: false,
      },
    });

    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-inline")).toBe("true");
    expect(wrapper.get("[data-testid='b-datepicker']").attributes("data-append-to-body")).toBe("false");
  });
});