pleno-vue/tests/unit/superuser-add-vehicle-modal.spec.js

// @vitest-environment jsdom
import { nextTick } from "vue";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { mountWithApp } from "./helpers/mountWithApp.js";

const sessionMocks = vi.hoisted(() => ({
  addVehicle: vi.fn(),
  parseErrorMessage: vi.fn(),
  vehicleTypeOptions: vi.fn(),
}));

vi.mock("@/components/session/token/SessionUser.vue", () => {
  const sessionUser = {
    functions: {
      parseErrorMessage: sessionMocks.parseErrorMessage,
    },
    objects: {
      vehicles: {
        add: sessionMocks.addVehicle,
        columns: {
          type: {
            options: sessionMocks.vehicleTypeOptions,
          },
        },
      },
    },
  };

  return {
    SessionUser: sessionUser,
    default: sessionUser,
  };
});

import SuperuserAddVehicleModal from "@/components/forms/superUser/SuperuserAddVehicleModal.vue";

const CustomerSearchSelectStub = {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  template: `
    <button
      type="button"
      data-testid="customer-select-stub"
      @click="$emit('update:modelValue', { customerNumber: 12345679, name: 'Acme Transport' })"
    >
      Select customer
    </button>
  `,
};

const messages = {
  en: {
    vehicles: {
      add_modal: {
        customer_label: "Customer",
        customer_placeholder: "Search customers",
        error: "Unable to add vehicle.",
        reference_placeholder: "Optional reference",
        registration_placeholder: "Registration number",
        selected_customer: "Selected customer",
        submit: "Add vehicle",
        title: "Add vehicle",
        type_load_error: "Unable to load vehicle types.",
        type_placeholder: "Select vehicle type",
        validation_error: "Select required fields.",
      },
      form: {
        license_plate: "Registration",
        type: "Type",
      },
    },
    objects: {
      vehicles: {
        columns: {
          wash_subscription: "Wash subscription",
        },
      },
    },
    common: {
      cancel: "Cancel",
      close: "Close",
      reference: "Reference",
    },
  },
};

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

const mountComponent = () =>
  mountWithApp(SuperuserAddVehicleModal, {
    messages,
    global: {
      stubs: {
        CustomerSearchSelect: CustomerSearchSelectStub,
      },
    },
  });

describe("SuperuserAddVehicleModal", () => {
  beforeEach(() => {
    vi.clearAllMocks();
    sessionMocks.vehicleTypeOptions.mockResolvedValue([
      {
        id: 53,
        name: "Forvogn",
      },
    ]);
    sessionMocks.addVehicle.mockResolvedValue({
      data: {
        data: {
          id: 7002,
        },
      },
    });
    sessionMocks.parseErrorMessage.mockReturnValue(null);
  });

  it("submits the selected customer and vehicle fields through the vehicle API", async () => {
    const wrapper = mountComponent();
    await flushAll();

    await wrapper.get('[data-testid="customer-select-stub"]').trigger("click");
    await wrapper.get('[data-testid="superuser-add-vehicle-registration"]').setValue("ab12345");
    await wrapper.get('[data-testid="superuser-add-vehicle-type"]').setValue("53");
    await wrapper.get('[data-testid="superuser-add-vehicle-wash-subscription"]').setValue(true);
    await wrapper.get('[data-testid="superuser-add-vehicle-reference"]').setValue("Fleet ref");
    await wrapper.get('[data-testid="superuser-add-vehicle-submit"]').trigger("click");
    await flushAll();

    expect(sessionMocks.addVehicle).toHaveBeenCalledWith(53, "AB12345", true, 12345679, "Fleet ref");
    expect(wrapper.emitted("created")).toHaveLength(1);
  });

  it("keeps submit disabled until required fields are present", async () => {
    const wrapper = mountComponent();
    await flushAll();

    expect(wrapper.get('[data-testid="superuser-add-vehicle-submit"]').attributes("disabled")).toBeDefined();

    await wrapper.get('[data-testid="customer-select-stub"]').trigger("click");
    await wrapper.get('[data-testid="superuser-add-vehicle-registration"]').setValue("AB12345");
    await wrapper.get('[data-testid="superuser-add-vehicle-type"]').setValue("53");
    await nextTick();

    expect(wrapper.get('[data-testid="superuser-add-vehicle-submit"]').attributes("disabled")).toBeUndefined();
  });
});