import { shallowMount, flushPromises } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue";

// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
  settleAllPromises: jest.fn(),
}));

describe("vehicle-model.vue", () => {
  test("Model question component is initized with api data", async (done) => {

    //Arange
    const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" };
    const modelQuestionInitialData = ["accord", "civic", "insight"];
    const { wrapper, apiPromise } = setupMocks( { 
      radioQuestionCmsContent: radioQuestionCmsContent, 
      modelQuestionInitialData: modelQuestionInitialData,
    } );

    //Act
    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));

    //Assert
    apiPromise.finally(() => {
      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData);
      done();
    });
  });
});

describe("vehicle-model.vue", () => {
  test("Page header is passed data from CMS", async (done) => {

    //Arange
    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started" });

    //Act
    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));

    //Assert
    const header = await wrapper.find(".Header");
    apiPromise.finally(() => {
      expect(header.attributes("text")).toEqual("Select a model to get started");
      done();
    });
  });
});

function setupMocks({
  radioQuestionCmsContent = {},
  modelQuestionInitialData = {},
  pageHeaderWidgetHeaderText = {},
}) {
  
  //Mock api responses
  const apiResponses = {
    cmsContent: {
      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
      RadioQuestionWidget: [radioQuestionCmsContent],
      VehicleBannerWidget: [
        {
          GenericVehicleImage:
            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
        },
      ],
      SiteHeaderWidget: [
        {
          LogoImage:
            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
        },
      ],
    },
    modelQuestionInitialData: modelQuestionInitialData,
  };
  const apiPromise = Promise.resolve(apiResponses);
  settleAllPromises.mockImplementation(() => apiPromise);

  //Mock model question methods
  modelQuestion.methods = {
    loadInitialData: jest.fn(),
    initializeComponent: jest.fn(),
  };
  const mountOptions = getMountOptions({ });
  const wrapper = shallowMount(vehicleModel, mountOptions);
  const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
  modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;

  return { wrapper, apiPromise };
}