pleno-vue/tests/unit/date-period-selector.spec.js

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

const sharedState = vi.hoisted(() => ({
  width: null,
}));

vi.mock("@vueuse/core", async () => {
  const { ref: vueRef } = await import("vue");
  const width = vueRef(1024);
  sharedState.width = width;

  return {
    useWindowSize: () => ({ width }),
  };
});

vi.mock("buefy", () => ({
  BMessage: defineComponent({
    name: "BMessage",
    template: "<div><slot /></div>",
  }),
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    functions: {
      device: {
        isMobile: () => false,
      },
      ucFirst: (value) => String(value).charAt(0).toUpperCase() + String(value).slice(1),
    },
    objects: {
      global: {
        language: {
          text: {
            today: "Today",
            yesterday: "Yesterday",
            this_week: "This week",
            last_week: "Last week",
            this_month: "This month",
            last_month: "Last month",
            same_week_last_year: "Same week last year",
            same_month_last_year: "Same month last year",
            date_from: "From",
            date_to: "To",
            month: "Month",
            year: "Year",
          },
        },
      },
    },
  },
}));

import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";

describe("DatePeriodSelector mobile layout", () => {
  beforeEach(() => {
    sharedState.width.value = 480;
  });

  it("renders stacked mobile controls and hides advanced month and year selectors by default", async () => {
    const wrapper = mount(DatePeriodSelector, {
      props: {
        selection: {
          startDate: new Date("2026-03-01T00:00:00.000Z"),
          endDate: new Date("2026-03-03T00:00:00.000Z"),
        },
        onSelectionChange: vi.fn(),
        visibility: {
          showMonthSelector: true,
          showYearSelector: true,
          showUpdateButton: false,
        },
      },
    });

    expect(wrapper.get("[data-testid='date-period-mobile-layout']").exists()).toBe(true);
    expect(wrapper.get("[data-testid='date-period-shortcuts']").exists()).toBe(true);
    expect(wrapper.get("[data-testid='date-period-start']").exists()).toBe(true);
    expect(wrapper.get("[data-testid='date-period-end']").exists()).toBe(true);
    expect(wrapper.findAll("select")).toHaveLength(1);

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

    expect(wrapper.findAll("select")).toHaveLength(3);
  });

  it("preserves the update:selection and onSelectionChange contract on mobile", async () => {
    const onSelectionChange = vi.fn();
    const wrapper = mount(DatePeriodSelector, {
      props: {
        selection: {
          startDate: new Date("2026-03-01T00:00:00.000Z"),
          endDate: new Date("2026-03-03T00:00:00.000Z"),
        },
        onSelectionChange,
        visibility: {
          showMonthSelector: true,
          showYearSelector: true,
          showUpdateButton: false,
        },
      },
    });

    await wrapper.get("[data-testid='date-period-end']").setValue("2026-03-05");

    const emittedSelection = wrapper.emitted("update:selection")?.at(-1)?.[0];
    expect(emittedSelection.startDate.toISOString().split("T")[0]).toBe("2026-03-01");
    expect(emittedSelection.endDate.toISOString().split("T")[0]).toBe("2026-03-05");
    expect(onSelectionChange).toHaveBeenCalledTimes(1);
    expect(onSelectionChange.mock.calls[0][0].toISOString().split("T")[0]).toBe("2026-03-01");
    expect(onSelectionChange.mock.calls[0][1].toISOString().split("T")[0]).toBe("2026-03-05");
  });
});