pleno-vue/tests/unit/self-serve-vehicle-selector.spec.js

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

const mocks = vi.hoisted(() => ({
  vehicleTypeOptions: vi.fn(),
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    objects: {
      vehicles: {
        columns: {
          type: {
            options: mocks.vehicleTypeOptions,
          },
        },
      },
    },
  },
}));

vi.mock("@/components/displays/department/pos/displays/Piktogrammer.vue", () => ({
  getPicture: (pictogram) => `/images/${pictogram || "placeholder"}.png`,
}));

import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
import { mountWithApp } from "./helpers/mountWithApp.js";

describe("SelfServeVehicleTypeSelector", () => {
  beforeEach(() => {
    mocks.vehicleTypeOptions.mockReset();
    mocks.vehicleTypeOptions.mockResolvedValue([
      {
        id: 1,
        name: "Truck",
        price: 100,
        product: { id: 1, description: "Large truck", piktogram: "truck" },
      },
      {
        id: 2,
        name: "Van",
        price: 80,
        product: { id: 2, description: "Medium van", piktogram: "van" },
      },
      {
        id: 3,
        name: "Car",
        price: 60,
        product: { id: 3, description: "Small car", piktogram: "car" },
      },
    ]);
  });

  it("filters the rendered options by available product ids", async () => {
    const wrapper = mountWithApp(SelfServeVehicleTypeSelector, {
      props: {
        restrictToProductIds: [2, 3],
      },
    });

    await flushPromises();

    expect(wrapper.find('[data-testid="self-serve-vehicle-type-1"]').exists()).toBe(false);
    expect(wrapper.find('[data-testid="self-serve-vehicle-type-2"]').exists()).toBe(true);
    expect(wrapper.find('[data-testid="self-serve-vehicle-type-3"]').exists()).toBe(true);
  });

  it("marks the selected option and emits the chosen vehicle type", async () => {
    const wrapper = mountWithApp(SelfServeVehicleTypeSelector, {
      props: {
        selectedVehicleTypeId: 3,
      },
    });

    await flushPromises();

    expect(wrapper.get('[data-testid="self-serve-vehicle-selector-description"]').text()).toContain("Car");

    await wrapper.get('[data-testid="self-serve-vehicle-type-2"]').trigger("click");

    expect(wrapper.emitted("selected")).toHaveLength(1);
    expect(wrapper.emitted("selected")?.[0]?.[0]).toMatchObject({
      id: 2,
      name: "Van",
    });
  });
});