import welcomePage from "@/layouts/welcome-page/welcome-page.vue";

// Supporting files
// Supporting files
import { shallowMount } from '@vue/test-utils';
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { applicationConfig } from "@/constants/application-config";

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


describe("welcome-page.vue", () => {
    test("Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)", async () => {
        // Arrange
        const { wrapper } = setupMocks({});
        // Act
        const policyNumber = wrapper.findComponent({ ref: "policyNumber" });
        const dateOfLoss = wrapper.findComponent({ ref: "dateOfLoss" });
        const damageCause = wrapper.findComponent({ ref: "damageCause" });
        const damageCity = wrapper.findComponent({ ref: "damageCity" });
        const state = wrapper.findComponent({ ref: "state" });
        const glassOnlyDamage = wrapper.findComponent({ ref: "glassOnlyDamage" });
        const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
        const email = wrapper.findComponent({ ref: "email" });


        // Assert
        expect(policyNumber.exists()).toBe(true);
        expect(dateOfLoss.exists()).toBe(true);
        expect(damageCause.exists()).toBe(true);
        expect(damageCity.exists()).toBe(true);
        expect(state.exists()).toBe(true);
        expect(glassOnlyDamage.exists()).toBe(true);
        expect(phoneNumber.exists()).toBe(true);
        expect(email.exists()).toBe(true);
    });
});

function setupMocks({
    pageHeaderWidgetHeaderText = {},
    pageFooterWidgetCmsContent = {},
    mountOptionsMockData = {},
}) {
    //Mock api responses
    const apiResponses = {
      cmsContent: {
        SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
        VehicleBannerWidget: {
          GenericVehicleImage:
            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
        },
        SiteHeaderWidget: {
          LogoImage:
            `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
        },
        SiteFooterWidget: pageFooterWidgetCmsContent,
        
      },
    };
  
    mountOptionsMockData = {
        ...mountOptionsMockData,
        router: {
            navigate: jest.fn(),
        },
    };

    const apiPromise = Promise.resolve(apiResponses);
  
    settleAllPromises.mockImplementation(() => apiPromise);
    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
    
    const mountOptions = getMountOptions(mountOptionsMockData);

    const wrapper = shallowMount(welcomePage, mountOptions);

    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
    
    return { wrapper, apiPromise };
}