116 lines
3.5 KiB
JavaScript
116 lines
3.5 KiB
JavaScript
// @vitest-environment jsdom
|
|
import { nextTick } from "vue";
|
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { mountWithApp } from "./helpers/mountWithApp.js";
|
|
|
|
const searchMocks = vi.hoisted(() => ({
|
|
isSearchingRef: null,
|
|
resultsRef: null,
|
|
searchCustomer: vi.fn(),
|
|
}));
|
|
|
|
vi.mock("@/components/search/economic/customerSearch.vue", async () => {
|
|
const { ref } = await vi.importActual("vue");
|
|
|
|
searchMocks.isSearchingRef = ref(false);
|
|
searchMocks.resultsRef = ref([]);
|
|
|
|
return {
|
|
isSearching: searchMocks.isSearchingRef,
|
|
searchCustomerResults: searchMocks.resultsRef,
|
|
searchCustomer: searchMocks.searchCustomer,
|
|
};
|
|
});
|
|
|
|
import CustomerSearchSelect from "@/components/search/economic/CustomerSearchSelect.vue";
|
|
|
|
const customers = [
|
|
{
|
|
customerNumber: 12345679,
|
|
name: "Acme Transport",
|
|
city: "Taastrup",
|
|
},
|
|
{
|
|
customerNumber: 87654321,
|
|
name: "Nordic Wash",
|
|
city: "Copenhagen",
|
|
},
|
|
];
|
|
|
|
const messages = {
|
|
en: {
|
|
vehicles: {
|
|
add_modal: {
|
|
customer_label: "Customer",
|
|
customer_placeholder: "Search customers",
|
|
selected_customer: "Selected customer",
|
|
},
|
|
},
|
|
common: {
|
|
clear: "Clear",
|
|
},
|
|
},
|
|
};
|
|
|
|
const mountComponent = (props = {}) =>
|
|
mountWithApp(CustomerSearchSelect, {
|
|
props: {
|
|
inputId: "test-customer-search",
|
|
testIdPrefix: "test-customer",
|
|
...props,
|
|
},
|
|
messages,
|
|
});
|
|
|
|
describe("CustomerSearchSelect", () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
searchMocks.isSearchingRef.value = false;
|
|
searchMocks.resultsRef.value = [];
|
|
searchMocks.searchCustomer.mockImplementation((query) => {
|
|
searchMocks.resultsRef.value = query ? customers : [];
|
|
return Promise.resolve(searchMocks.resultsRef.value);
|
|
});
|
|
});
|
|
|
|
it("searches customers and emits the selected customer", async () => {
|
|
const wrapper = mountComponent();
|
|
|
|
await wrapper.get('[data-testid="test-customer-input"]').setValue("acme");
|
|
await nextTick();
|
|
|
|
expect(searchMocks.searchCustomer).toHaveBeenLastCalledWith("acme");
|
|
expect(wrapper.get('[data-testid="test-customer-option-0"]').text()).toContain("Acme Transport");
|
|
|
|
await wrapper.get('[data-testid="test-customer-option-0"]').trigger("mousedown");
|
|
await nextTick();
|
|
|
|
expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([customers[0]]);
|
|
expect(wrapper.emitted("selected").at(-1)).toEqual([customers[0]]);
|
|
await wrapper.setProps({ modelValue: customers[0] });
|
|
await nextTick();
|
|
|
|
expect(wrapper.get('[data-testid="test-customer-selected"]').text()).toContain("Acme Transport");
|
|
});
|
|
|
|
it("supports keyboard selection and clearing", async () => {
|
|
const wrapper = mountComponent();
|
|
|
|
await wrapper.get('[data-testid="test-customer-input"]').setValue("nordic");
|
|
await wrapper.get('[data-testid="test-customer-input"]').trigger("keydown", { key: "ArrowDown" });
|
|
await wrapper.get('[data-testid="test-customer-input"]').trigger("keydown", { key: "ArrowDown" });
|
|
await wrapper.get('[data-testid="test-customer-input"]').trigger("keydown", { key: "Enter" });
|
|
await nextTick();
|
|
|
|
expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([customers[1]]);
|
|
await wrapper.setProps({ modelValue: customers[1] });
|
|
await nextTick();
|
|
|
|
await wrapper.get('[data-testid="test-customer-clear"]').trigger("click");
|
|
await nextTick();
|
|
|
|
expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([null]);
|
|
expect(wrapper.emitted("cleared")).toHaveLength(1);
|
|
});
|
|
});
|