Files
pleno-vue/tests/unit/pagination-date-selection.spec.js
T

111 lines
3.3 KiB
JavaScript

// @vitest-environment jsdom
import { defineComponent } from "vue";
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: () => ({
t: (value) => value,
}),
};
});
vi.mock("@/components/session/token/SessionUser.vue", () => ({
SessionUser: {
objects: {
global: {
language: {
date_from: "From",
date_to: "To",
},
},
},
},
}));
import { formatLocalDateOnly } from "@/services/dateOnly.js";
import PaginationDisplayTemplateDate from "@/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue";
import PaginationDisplayTemplateDates from "@/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue";
import { dateFunctions } from "@/components/displays/pagination/PaginationDisplayDates.vue";
const PaginationDisplayItemColumnStub = defineComponent({
name: "PaginationDisplayItemColumn",
props: {
label: {
type: String,
required: true,
},
},
template: "<div><slot name='control' /></div>",
});
describe("pagination date selection", () => {
it("renders Date model values as the same local date", () => {
const wrapper = mount(PaginationDisplayTemplateDate, {
props: {
label: "Date",
modelValue: new Date(2026, 2, 31, 0, 0, 0, 0),
},
global: {
stubs: {
PaginationDisplayItemColumn: PaginationDisplayItemColumnStub,
},
},
});
expect(wrapper.get("input[type='date']").element.value).toBe("2026-03-31");
});
it("emits the clicked input date as the same local date", async () => {
const wrapper = mount(PaginationDisplayTemplateDate, {
props: {
label: "Date",
modelValue: new Date(2026, 2, 1, 0, 0, 0, 0),
},
global: {
stubs: {
PaginationDisplayItemColumn: PaginationDisplayItemColumnStub,
},
},
});
await wrapper.get("input[type='date']").setValue("2026-03-31");
const emittedDate = wrapper.emitted("update:date")?.at(-1)?.[0];
expect(formatLocalDateOnly(emittedDate)).toBe("2026-03-31");
});
it("uses the real first day of the month for month presets", () => {
const firstDay = dateFunctions.datePresetFunctions.month.firstDayOfMonth(new Date(2026, 4, 15, 12, 0, 0, 0));
expect(formatLocalDateOnly(firstDay)).toBe("2026-05-01");
expect(firstDay.getHours()).toBe(0);
expect(firstDay.getMinutes()).toBe(0);
});
it("emits both start and end updates from the paired date selector", async () => {
const wrapper = mount(PaginationDisplayTemplateDates, {
props: {
startDate: new Date(2026, 2, 1, 0, 0, 0, 0),
endDate: new Date(2026, 2, 31, 0, 0, 0, 0),
},
global: {
stubs: {
PaginationDisplayItemColumn: PaginationDisplayItemColumnStub,
},
},
});
const inputs = wrapper.findAll("input[type='date']");
await inputs[0].setValue("2026-04-01");
await inputs[1].setValue("2026-04-30");
expect(formatLocalDateOnly(wrapper.emitted("update:startDate")?.at(-1)?.[0])).toBe("2026-04-01");
expect(formatLocalDateOnly(wrapper.emitted("update:endDate")?.at(-1)?.[0])).toBe("2026-04-30");
});
});