pleno-vue/tests/unit/department-overview-navigation.behavior.spec.js

// @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");
  });
});