119 lines
4 KiB
JavaScript
119 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" });
|
|
|
|
// 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(wrapper.vm.carUnmatchedVehicleIcon).toEqual(cmsContent.CarUnmatchedVehicleIcon);
|
|
// expect(wrapper.vm.truckUnmatchedVehicleIcon).toEqual(cmsContent.TruckUnmatchedVehicleIcon);
|
|
// expect(wrapper.vm.vanUnmatchedVehicleIcon).toEqual(cmsContent.VanUnmatchedVehicleIcon);
|
|
// expect(wrapper.vm.commercialUnmatchedVehicleIcon).toEqual(cmsContent.CommercialVanUnmatchedVehicleIcon);
|
|
// expect(wrapper.vm.suvUnmatchedVehicleIcon).toEqual(cmsContent.SuvUnmatchedVehicleIcon);
|
|
|
|
// expect(store.getters.vehicle.category).toEqual(category);
|
|
// expect(wrapper.vm.vehicleImageToDisplay).toEqual(vehicleIcon);
|
|
// expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
|
|
wrapper.unmount();
|
|
});
|
|
});
|
|
|
|
function setupMocks({
|
|
displayGenericVehicleImageProp,
|
|
imageUrlValue,
|
|
categoryValue = "CAR"
|
|
}) {
|
|
const mockGetCmsContent = jest.fn();
|
|
mockGetCmsContent((cmsWidget, field) => {
|
|
return field
|
|
});
|
|
const mockMixin = {
|
|
methods: {
|
|
getCmsContent: mockGetCmsContent
|
|
}
|
|
}
|
|
//Mock store
|
|
store.dispatch = jest.fn(() => dataFromStoreApi);
|
|
store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } };
|
|
const mountOptions = getMountOptions({
|
|
store: {
|
|
dispatch: store.dispatch,
|
|
getters: store.getters,
|
|
},
|
|
});
|
|
|
|
//Mock props
|
|
mountOptions.propsData = { displayGenericVehicleImage: displayGenericVehicleImageProp };
|
|
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 };
|
|
}
|