134 lines
4 KiB
JavaScript
134 lines
4 KiB
JavaScript
import { shallowMount } from "@vue/test-utils";
|
|
import vehicleBanner from "./vehicle-banner";
|
|
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
|
import store from "@/store";
|
|
import { vehicleCategories } from "@/constants/vehicle-categories.js";
|
|
|
|
jest.mock(
|
|
"@/store",
|
|
() => {
|
|
return {};
|
|
},
|
|
{ virtual: true }
|
|
);
|
|
|
|
describe("vehicleBanner", () => {
|
|
test("renders the blurrycar image", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
displayGenericVehicleImageProp: true,
|
|
imageUrlValue: "NULL",
|
|
displayUnmatchedVehicleIconProp: true,
|
|
});
|
|
|
|
// Assert
|
|
expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
|
|
expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
|
|
wrapper.unmount();
|
|
});
|
|
});
|
|
|
|
describe("vehicleBanner", () => {
|
|
test("renders expected vehicle image", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
displayGenericVehicleImageProp: false,
|
|
imageUrlValue: "url_to_vehicle_image",
|
|
});
|
|
|
|
// Assert
|
|
expect(wrapper.vm.vehicleImageToDisplay).toEqual("url_to_vehicle_image");
|
|
expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
|
|
wrapper.unmount();
|
|
});
|
|
});
|
|
|
|
describe("vehicleBanner", () => {
|
|
test("should render car icon when imageUrl is null and category is default", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
displayGenericVehicleImageProp: false,
|
|
imageUrlValue: "NULL",
|
|
});
|
|
|
|
var iconUrl = wrapper.vm.vehicleImageToDisplay;
|
|
|
|
// Assert
|
|
expect(iconUrl).toEqual(undefined);
|
|
wrapper.unmount();
|
|
});
|
|
});
|
|
|
|
const params = [
|
|
["CAR", "car_icon_url"],
|
|
["TRUCK", "truck_icon_url"],
|
|
["VAN", "van_icon_url"],
|
|
["COMMERCIAL VAN", "commercial_van_icon_url"],
|
|
["SUV", "suv_icon_url"],
|
|
["OTHER", "car_icon_url"],
|
|
];
|
|
|
|
describe("vehicleBanner", () => {
|
|
test.each(params)(
|
|
"renders an icon instead of an image for %s and %s",
|
|
async (category, expectedIcon) => {
|
|
// Arrange
|
|
const { wrapper, cmsContent } = setupMocks({
|
|
displayGenericVehicleImageProp: false,
|
|
imageUrlValue: expectedIcon,
|
|
categoryValue: category,
|
|
});
|
|
//Act
|
|
var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
|
|
// Assert
|
|
expect(store.getters.vehicle.category).toEqual(category);
|
|
expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
|
|
wrapper.unmount();
|
|
}
|
|
);
|
|
});
|
|
|
|
function setupMocks({
|
|
displayGenericVehicleImageProp,
|
|
displayUnmatchedVehicleIconProp,
|
|
imageUrlValue,
|
|
categoryValue = "CAR",
|
|
}) {
|
|
const mockGetCmsContent = jest.fn();
|
|
mockGetCmsContent((cmsWidget, field) => {
|
|
return field;
|
|
});
|
|
const mockMixin = {
|
|
methods: {
|
|
getCmsContent: mockGetCmsContent,
|
|
},
|
|
};
|
|
//Mock store
|
|
store.dispatch = jest.fn(() => {});
|
|
store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } };
|
|
const mountOptions = getMountOptions({
|
|
store: {
|
|
dispatch: store.dispatch,
|
|
getters: store.getters,
|
|
},
|
|
});
|
|
|
|
//Mock props
|
|
mountOptions.propsData = {
|
|
displayGenericVehicleImage: displayGenericVehicleImageProp,
|
|
displayUnmatchedVehicleIconProp: displayUnmatchedVehicleIconProp,
|
|
};
|
|
mountOptions.mixins = [mockMixin];
|
|
const wrapper = shallowMount(vehicleBanner, mountOptions);
|
|
|
|
//Mock CMS content
|
|
const cmsContent = {
|
|
GenericVehicleImage: "image_url",
|
|
CarUnmatchedVehicleIcon: "car_icon_url",
|
|
TruckUnmatchedVehicleIcon: "truck_icon_url",
|
|
VanUnmatchedVehicleIcon: "van_icon_url",
|
|
CommercialVanUnmatchedVehicleIcon: "commercial_van_icon_url",
|
|
SuvUnmatchedVehicleIcon: "suv_icon_url",
|
|
};
|
|
return { wrapper, cmsContent };
|
|
}
|