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, cmsContent } = setupMocks({ displayGenericVehicleImageProp: true, imageUrlValue: "NULL" });
    
    //Act
    wrapper.vm.initializeComponent(cmsContent);

    // Assert
    expect(wrapper.vm.vehicleImageToDisplay).toEqual( "image_url");
    expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
    wrapper.unmount();
  });
});

describe("vehicleBanner", () => {
  test("renders expected vehicle image", async () => {
    // Arrange
    const { wrapper, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: "url_to_vehicle_image" });
    
    //Act
    wrapper.vm.initializeComponent(cmsContent);

    // 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, cmsContent } = setupMocks({ displayGenericVehicleImageProp: false, imageUrlValue: "NULL" });
    
    //Act
    wrapper.vm.initializeComponent(cmsContent);
    var iconUrl = wrapper.vm.vehicleImageToDisplay;

    // Assert
    expect(iconUrl).toEqual( "car_icon_url");
    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
    wrapper.vm.initializeComponent(cmsContent);
    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"
}) {
  //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 };

  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 };
}