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

// @vitest-environment jsdom
import { nextTick } from "vue";
import { mount } from "@vue/test-utils";
import { beforeEach, describe, expect, it, vi } from "vitest";

const getTransactionCountMock = vi.hoisted(() => vi.fn());
const getDepartmentMock = vi.hoisted(() => vi.fn());
const sharedDateState = vi.hoisted(() => ({
  selected_date: null,
  selected_date_to: null,
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    objects: {
      department_daily_reports: {
        functions: {
          getTransactionCount: getTransactionCountMock,
        },
      },
      departments: {
        get: {
          single: getDepartmentMock,
        },
      },
    },
    functions: {
      date: {
        isToday: () => false,
      },
      currency: {
        toLocal: (value) => String(value),
      },
    },
  },
}));

vi.mock("@/components/pagination/departmentTabs.vue", async () => {
  const { ref } = await import("vue");
  return {
    departments: ref([
      { id: 10, name: "Dept 10" },
      { id: 20, name: "Dept 20" },
    ]),
  };
});

vi.mock("@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue", () => {
  let fetchId = 0;
  return {
    next_fetch_id: () => {
      fetchId += 1;
      return fetchId;
    },
    is_latest_fetch: () => true,
    is_loading: () => false,
    finished_loading: vi.fn(),
  };
});

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: (startIso, endIso) => {
      selected_date.value = startIso;
      selected_date_to.value = endIso;
    },
  };
});

vi.mock("@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue", () => ({
  default: {
    name: "DepartmentDashboardOverviewNavigation",
    template: "<div class='overview-navigation-stub' />",
  },
}));

import DepartmentDailyReportThisWeek from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue";
import DepartmentDailyReportSmall from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue";

const flushAll = async () => {
  await nextTick();
  await Promise.resolve();
  await nextTick();
  await Promise.resolve();
};

describe("Department overview period sync behavior", () => {
  beforeEach(() => {
    getTransactionCountMock.mockReset();
    getDepartmentMock.mockReset();

    getDepartmentMock.mockResolvedValue({ id: 20, name: "Dept 20" });
    getTransactionCountMock.mockResolvedValue({
      data: {
        data: {
          earnings: 10,
          products: 2,
          quantity: 3,
          washes: 4,
          outside_hours: {
            total: 1,
            by_source: {
              orders: 0,
              xlvask: 1,
              selfserve: 0,
            },
            has_missing_opening_hours: false,
            missing_department_ids: [],
          },
        },
      },
    });

    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("list summary and compact cards fetch against the same shared period", async () => {
    mount(DepartmentDailyReportThisWeek, {
      props: {
        departments: [10],
      },
      global: {
        mocks: {
          $t: (value) => value,
        },
        stubs: {
          DepartmentDashboardOverviewNavigation: true,
          BSkeleton: true,
        },
      },
    });

    mount(DepartmentDailyReportSmall, {
      props: {
        department_id: 20,
      },
      global: {
        mocks: {
          $t: (value) => value,
        },
        stubs: {
          BLoading: true,
        },
      },
    });

    await flushAll();
    await flushAll();

    const initialCalls = getTransactionCountMock.mock.calls.map(
      ([departmentId, date, dateTo]) => `${departmentId}:${date}:${dateTo}`
    );
    expect(initialCalls).toEqual(expect.arrayContaining(["10:2026-03-23:2026-03-23", "20:2026-03-23:2026-03-23"]));
  });

  it("changing shared range refetches both list and cards with the new period", async () => {
    mount(DepartmentDailyReportThisWeek, {
      props: {
        departments: [10],
      },
      global: {
        mocks: {
          $t: (value) => value,
        },
        stubs: {
          DepartmentDashboardOverviewNavigation: true,
          BSkeleton: true,
        },
      },
    });

    mount(DepartmentDailyReportSmall, {
      props: {
        department_id: 20,
      },
      global: {
        mocks: {
          $t: (value) => value,
        },
        stubs: {
          BLoading: true,
        },
      },
    });

    await flushAll();
    await flushAll();
    getTransactionCountMock.mockClear();

    sharedDateState.selected_date_to.value = "2026-03-24";
    await flushAll();
    await flushAll();

    const rangeCalls = getTransactionCountMock.mock.calls.map(
      ([departmentId, date, dateTo]) => `${departmentId}:${date}:${dateTo}`
    );
    expect(rangeCalls).toEqual(expect.arrayContaining(["10:2026-03-23:2026-03-24", "20:2026-03-23:2026-03-24"]));
  });
});