pleno-vue/tests/unit/invoicing-period-queue-refresh.behavior.spec.js

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

const {
  requestMock,
  startDateRef,
  endDateRef,
  routeState,
  periodRefreshSignalRef,
  availableViewNamesRef,
  currentViewRef,
  sharedVariablesRef,
} = vi.hoisted(() => {
  const { reactive, ref } = require("vue");

  return {
    requestMock: vi.fn(),
    startDateRef: ref(new Date("2026-04-01T00:00:00.000Z")),
    endDateRef: ref(new Date("2026-04-30T23:59:59.000Z")),
    routeState: reactive({
      query: {
        activeTab: "period",
      },
    }),
    periodRefreshSignalRef: ref(0),
    availableViewNamesRef: ref({}),
    currentViewRef: ref("all"),
    sharedVariablesRef: ref({}),
  };
});

vi.mock("vue-router", () => ({
  useRoute: () => routeState,
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    request: requestMock,
    objects: {
      global: {
        language: {
          all: "All",
          invoice_per_order: "Invoice per order",
          fixed_price_arrangements: "Fixed pricing",
          only_tank_cleaning: "Tank cleaning",
          special_arrangements: "Special arrangements",
          possible_duplicates: "Possible duplicates",
        },
      },
      vehicles: {
        columns: {
          wash_subscription: {
            label: "Vehicle subscriptions",
          },
        },
      },
    },
  },
}));

vi.mock(
  "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportDates.vue",
  () => ({
    dates: {
      variables: {
        start: startDateRef,
        end: endDateRef,
      },
      computed: {
        isEntireMonth: computed(() => true),
      },
    },
  })
);

vi.mock(
  "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportView.vue",
  () => ({
    view: {
      variables: {
        sharedVariables: sharedVariablesRef,
        currentView: currentViewRef,
        availableViewNames: availableViewNamesRef,
      },
    },
  })
);

vi.mock(
  "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportInvoiceQueue.vue",
  () => ({
    invoiceQueue: {
      periodRefreshSignal: periodRefreshSignalRef,
    },
  })
);

import Right from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/displays/layout/Right.vue";

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

const mountRight = () =>
  mount(Right, {
    global: {
      stubs: {
        WhiteBox: { template: "<div><slot /></div>" },
        ColorIndicator: { template: "<div />" },
      },
    },
  });

describe("Invoicing period queue-driven refresh", () => {
  beforeEach(() => {
    requestMock.mockReset();
    requestMock.mockResolvedValue({
      data: {
        data: {
          types: {
            all: [],
            invoice_per_order: [],
            fixed_pricing: [],
            tank_cleaning: [],
            special_arrangements: [],
            vehicle_subscriptions: [],
            possible_duplicates: [],
          },
        },
      },
    });
    routeState.query.activeTab = "period";
    periodRefreshSignalRef.value = 0;
    sharedVariablesRef.value = {};
    availableViewNamesRef.value = {};
    currentViewRef.value = "all";
  });

  it("refreshes the period payload when queue activity signals a backend rehydrate", async () => {
    mountRight();
    await flushAll();

    expect(requestMock).toHaveBeenCalledTimes(1);

    periodRefreshSignalRef.value += 1;
    await flushAll();

    expect(requestMock).toHaveBeenCalledTimes(2);
    expect(requestMock).toHaveBeenLastCalledWith("/superuser/invoicing/period", "GET", {
      dateFrom: "2026-04-01",
      dateTo: "2026-04-30",
    });
  });

  it("refreshes when the Period tab becomes active after being in another tab", async () => {
    routeState.query.activeTab = "overview";

    mountRight();
    await flushAll();

    const initialCallCount = requestMock.mock.calls.length;
    expect(initialCallCount).toBeGreaterThanOrEqual(1);

    routeState.query.activeTab = "period";
    await flushAll();

    expect(requestMock.mock.calls.length).toBeGreaterThan(initialCallCount);
  });
});