pleno-vue/tests/unit/collected-order-invoices-table.spec.js

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

import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";
import CollectedOrderInvoicesDefaultTable from "@/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue";

vi.mock("@/components/pagination/paginatedList.vue", () => ({
  usePaginatedListInstance: () => ({
    loadList: vi.fn(),
  }),
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    objects: {
      collectedOrderInvoices: {
        columns: {
          id: { label: "ID" },
          customer_number: { label: "Customer number" },
          processor: { label: "Processor" },
          created_at: { label: "Created" },
          name: { label: "Name" },
          notes: { label: "Notes" },
          external_id: { label: "External ID" },
          po_number: { label: "PO" },
          closed_at: { label: "Closed" },
          updated_at: { label: "Updated" },
        },
        meta: {
          labels: {
            multiple: "invoice collections",
          },
        },
      },
      global: {
        language: {
          customer_name: "Customer",
        },
      },
      orders: {
        meta: {
          title: "Orders",
        },
      },
    },
    functions: {
      currency: {
        toLocal: (value) => String(value ?? ""),
      },
    },
  },
}));

vi.mock("vue-i18n", () => ({
  useI18n: () => ({
    t: (key) => key,
  }),
  createI18n: () => ({
    global: {
      t: (key) => key,
      locale: {
        value: "en",
      },
    },
  }),
}));

const EditableTableColumnStub = {
  props: ["object", "column", "parseFunction"],
  template: "<td>{{ parseFunction ? parseFunction(object[column]) : object[column] }}</td>",
};

const ActionSettingsWheelButtonStub = {
  template: '<div data-testid="action-settings-wheel-stub"><slot name="actions" /></div>',
};

const ActionSettingsWheelItemStub = {
  template: '<button type="button" data-testid="action-settings-wheel-item-stub"></button>',
};

const BCheckboxStub = {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  template: `
    <label :data-testid="$attrs['data-testid']">
      <input
        type="checkbox"
        :aria-label="$attrs['aria-label']"
        :checked="modelValue"
        @change="$emit('update:modelValue', $event.target.checked)"
      />
    </label>
  `,
};

const mountSelectorTable = (props = {}) =>
  mount(CollectedOrderInvoicesTable, {
    props: {
      objects: [
        {
          id: 42,
          objects: 1,
          customer_name: "Acme",
          customer_number: 1001,
          processor: 1,
          orders: 2,
          closed_at: null,
          created_at: "2026-07-01",
          total_net_amount: 123,
        },
      ],
      showEmpty: true,
      ...props,
    },
    global: {
      mocks: {
        $t: (key) => key,
      },
      stubs: {
        EditableTableColumn: EditableTableColumnStub,
        ActionSettingsWheelButton: ActionSettingsWheelButtonStub,
        ActionSettingsWheelItem: ActionSettingsWheelItemStub,
        BCheckbox: BCheckboxStub,
      },
    },
  });

describe("CollectedOrderInvoicesTable", () => {
  it("uses a Buefy checkbox for selector mode", async () => {
    const onSelected = vi.fn();
    const wrapper = mountSelectorTable({
      isSelector: true,
      onSelected,
    });

    expect(wrapper.find("button.button.is-small.is-dark").exists()).toBe(false);

    await wrapper.get('[data-testid="collected-invoice-selector-42"] input').setValue(true);

    expect(onSelected).toHaveBeenCalledWith(42);
    expect(wrapper.emitted("update:selected")?.[0]).toEqual([42]);
  });

  it("keeps a hidden attachment-width buffer before collected invoice row actions", () => {
    const wrapper = mountSelectorTable();

    expect(wrapper.get('[data-testid="superuser-invoice-action-buffer"]').exists()).toBe(true);
    expect(wrapper.get('[data-testid="action-settings-wheel-stub"]').exists()).toBe(true);
  });
});

describe("CollectedOrderInvoicesDefaultTable", () => {
  it("keeps a hidden attachment-width buffer before default invoice row actions", () => {
    const wrapper = mount(CollectedOrderInvoicesDefaultTable, {
      props: {
        objects: [
          {
            id: 43,
            customer_number: 1002,
            name: "Acme July",
            notes: null,
            processor: 1,
            external_id: null,
            po_number: null,
            closed_at: null,
            created_at: "2026-07-01",
            updated_at: "2026-07-02",
          },
        ],
      },
      global: {
        mocks: {
          $t: (key) => key,
        },
        stubs: {
          ActionSettingsWheelButton: ActionSettingsWheelButtonStub,
          ActionSettingsWheelItem: ActionSettingsWheelItemStub,
        },
      },
    });

    expect(wrapper.get('[data-testid="superuser-invoice-action-buffer"]').exists()).toBe(true);
    expect(wrapper.get('[data-testid="action-settings-wheel-stub"]').exists()).toBe(true);
  });
});