pleno-vue/tests/unit/action-settings-wheel-button.spec.js

// @vitest-environment jsdom
import { mount } from "@vue/test-utils";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { createI18n } from "vue-i18n";
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const getUserIdMock = vi.hoisted(() => vi.fn(() => Promise.resolve({ data: { data: { user_id: 777 } } })));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    adminUser: {
      customers: {
        fromCustomerNumber: {
          getUserId: getUserIdMock,
        },
      },
    },
    request: vi.fn(() => Promise.resolve()),
    canAccessAdmin: vi.fn(() => false),
    canAccessSuperUser: vi.fn(() => true),
    canAccessUser: vi.fn(() => false),
    functions: {
      ucFirst: (value) => value,
      parseErrorMessage: () => "error",
      device: {
        isMobile: vi.fn(() => false),
      },
      redirectTo: {
        department: vi.fn(),
        superUser: vi.fn(),
        user: vi.fn(),
      },
    },
    superUser: {
      intimidate: {
        intimidateUser: vi.fn(() => Promise.resolve()),
        getImpersonationToken: vi.fn(() => Promise.resolve("token")),
        showImpersonationQRCode: vi.fn(() => Promise.resolve({ value: "qr" })),
      },
    },
    objects: {
      order_bookings: {
        meta: {
          labels: {
            single: "Booking",
            multiple: "Bookings",
          },
        },
        showEditObjectFieldForm: vi.fn(() => Promise.resolve()),
        functions: {
          showCompleteConfirmationModal: vi.fn(() => Promise.resolve()),
          showDeleteConfirmationModal: vi.fn(() => Promise.resolve()),
        },
      },
      department_lanes: {
        meta: {
          labels: {
            single: "Lane",
          },
        },
        functions: {
          forceEnableMachine: vi.fn(() => Promise.resolve()),
          forceDisableMachine: vi.fn(() => Promise.resolve()),
        },
      },
      orders: {
        meta: {
          labels: {
            single: "Order",
          },
        },
        functions: {
          fetchAttachments: vi.fn(() => Promise.resolve([])),
          get_department_id: vi.fn(() => Promise.resolve(1)),
          showAttachWashCertificateForm: vi.fn(() => Promise.resolve()),
          showChangeCustomerForm: vi.fn(() => Promise.resolve()),
          showChangeInvoiceCollectionForm: vi.fn(() => Promise.resolve()),
          showDeleteConfirmationModal: vi.fn(() => Promise.resolve()),
          downloadAttachment: vi.fn(() => Promise.resolve()),
        },
      },
      collectedOrderInvoices: {
        meta: {
          title: "Invoices",
        },
        functions: {
          download: vi.fn(() => Promise.resolve()),
        },
      },
      vehicles: {
        meta: {
          labels: {
            single: "Vehicle",
            multiple: "Vehicles",
          },
        },
      },
      global: {
        language: {
          customer: "Customer",
        },
      },
      subuser_grants: {
        functions: {
          showPermissionEditForm: vi.fn(() => Promise.resolve()),
        },
        delete: vi.fn(() => Promise.resolve()),
      },
    },
  },
}));

const i18n = createI18n({
  legacy: false,
  locale: "en",
  messages: {
    en: {},
  },
});

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

describe("ActionSettingsWheelButton", () => {
  beforeEach(() => {
    getUserIdMock.mockClear();
    SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm.mockClear();
  });

  it("resolves customer user id once on mount and not on unrelated rerenders", async () => {
    const wrapper = mount(ActionSettingsWheelButton, {
      props: {
        displayActionsDirectly: true,
        customer_number: 123456,
        order_id: null,
      },
      global: {
        plugins: [i18n],
        stubs: {
          ActionSettingsWheelItem: { template: "<div />" },
          ActionSettingsWheelItemLabel: { template: "<div />" },
          CustomerModal: { template: "<div />" },
        },
      },
    });

    await flushMicrotasks();
    expect(getUserIdMock).toHaveBeenCalledTimes(1);
    expect(getUserIdMock).toHaveBeenLastCalledWith(123456);

    await wrapper.setProps({ icon: "fas fa-ellipsis-v" });
    await flushMicrotasks();
    expect(getUserIdMock).toHaveBeenCalledTimes(1);

    await wrapper.setProps({ customer_number: 654321 });
    await flushMicrotasks();
    expect(getUserIdMock).toHaveBeenCalledTimes(2);
    expect(getUserIdMock).toHaveBeenLastCalledWith(654321);
  });

  it("does not perform customer lookup when explicit user id is provided", async () => {
    mount(ActionSettingsWheelButton, {
      props: {
        displayActionsDirectly: true,
        user_id: 77,
        customer_number: null,
      },
      global: {
        plugins: [i18n],
        stubs: {
          ActionSettingsWheelItem: { template: "<div />" },
          ActionSettingsWheelItemLabel: { template: "<div />" },
          CustomerModal: { template: "<div />" },
        },
      },
    });

    await flushMicrotasks();
    expect(getUserIdMock).not.toHaveBeenCalled();
  });

  it("routes 'change invoice collection' action without opening a new tab", async () => {
    const windowOpenSpy = vi.spyOn(window, "open").mockImplementation(() => null);

    const wrapper = mount(ActionSettingsWheelButton, {
      props: {
        order_id: 42,
        invoice_collection_id: 991,
      },
      slots: {
        actions: "",
      },
      global: {
        plugins: [i18n],
        stubs: {
          CustomerModal: { template: "<div />" },
        },
      },
    });

    await flushMicrotasks();
    await wrapper.find(".dropdown-trigger button").trigger("click");

    const buttons = wrapper.findAll("button.dropdown-item-action");
    const changeInvoiceCollectionButton = buttons.find((buttonWrapper) =>
      buttonWrapper.text().includes("admin.pos.settings_wheel.change_invoice_collection")
    );

    expect(changeInvoiceCollectionButton).toBeTruthy();
    await changeInvoiceCollectionButton.trigger("click");
    await flushMicrotasks();

    expect(SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm).toHaveBeenCalledTimes(1);
    expect(SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm).toHaveBeenCalledWith(
      42,
      expect.any(Function)
    );
    expect(windowOpenSpy).not.toHaveBeenCalled();

    windowOpenSpy.mockRestore();
  });

  it("routes 'view invoice collection in new tab' action to window.open only", async () => {
    const windowOpenSpy = vi.spyOn(window, "open").mockImplementation(() => null);

    const wrapper = mount(ActionSettingsWheelButton, {
      props: {
        order_id: 42,
        invoice_collection_id: 777,
      },
      slots: {
        actions: "",
      },
      global: {
        plugins: [i18n],
        stubs: {
          CustomerModal: { template: "<div />" },
        },
      },
    });

    await flushMicrotasks();
    SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm.mockClear();
    await wrapper.find(".dropdown-trigger button").trigger("click");

    const buttons = wrapper.findAll("button.dropdown-item-action");
    const viewInvoiceCollectionButton = buttons.find((buttonWrapper) =>
      buttonWrapper.text().includes("admin.pos.settings_wheel.view_invoice_collection_new_tab")
    );

    expect(viewInvoiceCollectionButton).toBeTruthy();
    await viewInvoiceCollectionButton.trigger("click");
    await flushMicrotasks();

    expect(windowOpenSpy).toHaveBeenCalledWith("/superuser/invoices/777", "_blank");
    expect(SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm).not.toHaveBeenCalled();

    windowOpenSpy.mockRestore();
  });
});