113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
// @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("shows Danish guidance before a vehicle type is selected", async () => {
|
|
const wrapper = mountWithApp(SelfServeVehicleTypeSelector);
|
|
|
|
await flushPromises();
|
|
|
|
expect(wrapper.get('[data-testid="self-serve-vehicle-selector-description"]').text()).toContain(
|
|
"Vælg en køretøjstype ved at trykke på et af ikonerne ovenfor."
|
|
);
|
|
});
|
|
|
|
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",
|
|
});
|
|
});
|
|
|
|
it("left-aligns the selected vehicle description", async () => {
|
|
const wrapper = mountWithApp(SelfServeVehicleTypeSelector, {
|
|
props: {
|
|
selectedVehicleTypeId: 1,
|
|
},
|
|
});
|
|
|
|
await flushPromises();
|
|
|
|
const description = wrapper.get('[data-testid="self-serve-vehicle-selector-description"]');
|
|
expect(description.get("p").classes()).toContain("has-text-left");
|
|
expect(description.find(".has-text-centered").exists()).toBe(false);
|
|
});
|
|
});
|