Add unit tests for shared date range synchronization and refactor DepartmentDashboardOverviewNavigation components:

- Added behavior tests covering shared date range updates across multiple components, including `DepartmentDailyReportThisWeek` and `DepartmentDailyReportSmall`. - Updated `DepartmentDashboardOverviewNavigation` to route date updates via the shared daily report store. - Refactored components to use shared `DepartmentDailyReportObject` for date state management. - Adjusted e2e tests to validate date range synchronization and department goal progress tracking.
2026-03-24 16:53:16 +01:00
parent 477688d16e
commit 1b97332c38
11 changed files with 431 additions and 29 deletions
@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+import { defineComponent, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+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-03-24T00:00:00.000Z'), new Date('2026-03-29T00:00:00.000Z'))">
+        onSelectionChange
+      </button>
+      <button class="trigger-update-selection" @click="$emit('update:selection', { startDate: new Date('2026-04-01T00:00:00.000Z'), endDate: new Date('2026-04-30T00:00:00.000Z') })">
+        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(selector.props("selection").startDate.toISOString().split("T")[0]).toBe("2026-05-05");
+    expect(selector.props("selection").endDate.toISOString().split("T")[0]).toBe("2026-05-11");
+  });
+});