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.
113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
// @vitest-environment jsdom
|
|
import { defineComponent, nextTick } from "vue";
|
|
import { mount } from "@vue/test-utils";
|
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { formatLocalDateOnly } from "@/services/dateOnly.js";
|
|
|
|
const selectDateMock = vi.hoisted(() => vi.fn());
|
|
const sharedDateState = vi.hoisted(() => ({
|
|
selected_date: null,
|
|
selected_date_to: null,
|
|
}));
|
|
|
|
vi.mock("@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue", async () => {
|
|
const { ref } = await import("vue");
|
|
const selected_date = ref("2026-03-23");
|
|
const selected_date_to = ref("2026-03-23");
|
|
sharedDateState.selected_date = selected_date;
|
|
sharedDateState.selected_date_to = selected_date_to;
|
|
return {
|
|
selected_date,
|
|
selected_date_to,
|
|
selectDate: selectDateMock,
|
|
};
|
|
});
|
|
|
|
import DepartmentDashboardOverviewNavigation from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue";
|
|
|
|
const DatePeriodSelectorStub = defineComponent({
|
|
name: "DatePeriodSelector",
|
|
props: {
|
|
onSelectionChange: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
selection: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: ["update:selection"],
|
|
template: `
|
|
<div>
|
|
<button class="trigger-on-selection-change" @click="onSelectionChange(new Date(2026, 2, 24), new Date(2026, 2, 29))">
|
|
onSelectionChange
|
|
</button>
|
|
<button class="trigger-update-selection" @click="$emit('update:selection', { startDate: new Date(2026, 3, 1), endDate: new Date(2026, 3, 30) })">
|
|
update:selection
|
|
</button>
|
|
</div>
|
|
`,
|
|
});
|
|
|
|
describe("DepartmentDashboardOverviewNavigation", () => {
|
|
beforeEach(() => {
|
|
selectDateMock.mockReset();
|
|
if (sharedDateState.selected_date) {
|
|
sharedDateState.selected_date.value = "2026-03-23";
|
|
}
|
|
if (sharedDateState.selected_date_to) {
|
|
sharedDateState.selected_date_to.value = "2026-03-23";
|
|
}
|
|
});
|
|
|
|
it("maps DatePeriodSelector callbacks to shared selectDate and emits date-change", async () => {
|
|
const wrapper = mount(DepartmentDashboardOverviewNavigation, {
|
|
global: {
|
|
stubs: {
|
|
DatePeriodSelector: DatePeriodSelectorStub,
|
|
},
|
|
},
|
|
});
|
|
|
|
await wrapper.get(".trigger-on-selection-change").trigger("click");
|
|
await nextTick();
|
|
|
|
expect(selectDateMock).toHaveBeenNthCalledWith(1, "2026-03-24", "2026-03-29");
|
|
expect(wrapper.emitted("date-change")?.[0]).toEqual([
|
|
{
|
|
startDate: "2026-03-24",
|
|
endDate: "2026-03-29",
|
|
},
|
|
]);
|
|
|
|
await wrapper.get(".trigger-update-selection").trigger("click");
|
|
await nextTick();
|
|
|
|
expect(selectDateMock).toHaveBeenNthCalledWith(2, "2026-04-01", "2026-04-30");
|
|
expect(wrapper.emitted("date-change")?.[1]).toEqual([
|
|
{
|
|
startDate: "2026-04-01",
|
|
endDate: "2026-04-30",
|
|
},
|
|
]);
|
|
});
|
|
|
|
it("passes the currently selected shared date range to DatePeriodSelector", () => {
|
|
sharedDateState.selected_date.value = "2026-05-05";
|
|
sharedDateState.selected_date_to.value = "2026-05-11";
|
|
|
|
const wrapper = mount(DepartmentDashboardOverviewNavigation, {
|
|
global: {
|
|
stubs: {
|
|
DatePeriodSelector: DatePeriodSelectorStub,
|
|
},
|
|
},
|
|
});
|
|
|
|
const selector = wrapper.findComponent(DatePeriodSelectorStub);
|
|
expect(formatLocalDateOnly(selector.props("selection").startDate)).toBe("2026-05-05");
|
|
expect(formatLocalDateOnly(selector.props("selection").endDate)).toBe("2026-05-11");
|
|
});
|
|
});
|