pleno-vue/tests/unit/order-content-table-flags.spec.js

// @vitest-environment jsdom
import { flushPromises, mount } from "@vue/test-utils";
import { beforeEach, describe, expect, it, vi } from "vitest";
import OrderContentTable from "@/components/displays/superuser/tables/OrderContentTable.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { createTestI18n } from "./helpers/mountWithApp.js";

const showPopperMock = vi.hoisted(() => vi.fn());
const removePopperIfOpenMock = vi.hoisted(() => vi.fn());
const popperBoxMock = vi.hoisted(() => vi.fn((title, body) => ({ title, body })));
const swalFireMock = vi.hoisted(() => vi.fn(() => Promise.resolve({ isConfirmed: false })));

vi.mock("sweetalert2", () => ({
  default: {
    fire: swalFireMock,
  },
}));

vi.mock("@/components/displays/PopperDefault.vue", () => ({
  showPopper: showPopperMock,
  removePopperIfOpen: removePopperIfOpenMock,
  popperBox: popperBoxMock,
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    request: vi.fn(() => Promise.resolve({ data: { data: [] } })),
    functions: {
      currency: {
        toLocal: (value) => String(value ?? ""),
      },
      redirectTo: {
        department: vi.fn(),
      },
    },
    objects: {
      vehicles: {
        columns: {
          wash_subscription: {
            label: "Wash subscription",
          },
        },
      },
    },
  },
}));

const i18n = createTestI18n({
  en: {
    global: {
      cancel: "Cancel",
      no_data: "No data",
      quantity: "Quantity",
    },
    tables: {
      products: {
        name: "Product",
        price: "Price",
      },
    },
    objects: {
      columns: {
        notes: "Notes",
        reference: "Reference",
      },
    },
    invoice_period: {
      flags: {
        status: {
          resolved: "Resolved",
          ignored: "Ignored",
          false_positive: "False positive",
          reason_placeholder: "Optional reason",
        },
      },
    },
  },
});

describe("OrderContentTable invoice period flags", () => {
  beforeEach(() => {
    SessionUser.request.mockReset();
    SessionUser.request.mockResolvedValue({
      data: {
        data: [
          {
            id: 7701,
            order_id: 9001,
            product_id: 101,
            reference: "",
            notes: "",
            price: 99,
            quantity: 1,
            related_item_id: 0,
            include_in_invoice: true,
            product: {
              id: 101,
              name: "Spot Free",
              price: 100,
            },
          },
          {
            id: 7702,
            order_id: 9001,
            product_id: 102,
            reference: "",
            notes: "",
            price: 199,
            quantity: 1,
            related_item_id: 0,
            include_in_invoice: true,
            product: {
              id: 102,
              name: "Wash",
              price: 199,
            },
          },
        ],
      },
    });
  });

  it("renders order-item flags on the matching order item line", async () => {
    const wrapper = mount(OrderContentTable, {
      props: {
        orderId: 9001,
        invoicePeriodFlags: [
          {
            id: "auto-price-1",
            source: "automatic",
            target_type: "order_item_field",
            target_id: 7701,
            field: "price",
            order_id: 9001,
            order_item_id: 7701,
            message: "Spot Free product price differs from expected.",
          },
        ],
      },
      global: {
        plugins: [i18n],
      },
    });

    await flushPromises();

    expect(SessionUser.request).toHaveBeenCalledWith("/order/items", "GET", { order_id: 9001 });
    expect(wrapper.get('[data-testid="order-content-item-flags-7701"]').text()).toContain(
      "Spot Free product price differs from expected."
    );
    expect(wrapper.find('[data-testid="order-content-item-flags-7702"]').exists()).toBe(false);
  });
});