Jeppe B
5cc22f14bc
Use local date-only parsing and formatting across date inputs and filters so clicked dates persist exactly.\n\nVerified with local format, lint, i18n, build, full unit tests, PR E2E, focused date E2E, broad smoke reruns, and GitHub PR checks.
111 lines
3.3 KiB
JavaScript
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");
|
|
});
|
|
});
|