// Components import orderConfirmation from '@/layouts/order-confirmation/order-confirmation.vue'; // Supporting Files import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store/index.js'; import settleAllPromises from '@/helpers/layout-helper.js'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { mount } from '@vue/test-utils'; import { createTestingPinia } from '@pinia/testing'; import { nextTick } from 'vue'; import coverageStatuses from "@/constants/coverage-statuses"; import coverageType from "@/constants/coverage-type"; jest.mock('@/helpers/layout-helper.js', () => jest.fn()); jest.mock('@/helpers/cms-content-helper', () => ({ fetchCmsContentForPage: jest.fn(), processIfStatements: jest.fn(), splitCopyOnCMSPlaceHolder: jest.fn() })); const wordingText = 'wording text {custom:address}'; const mockMixin = { methods: { getCmsContent: jest.fn().mockImplementation(() => wordingText), setCmsContent: jest.fn() } }; const footerStub = { render: () => {}, methods: { updateButtonText: jest.fn() } }; const headerStub = { render: () => {} }; const vehicleBannerStub = { render: () => {} }; const addToCalendarStub = { render: () => {} }; const initialStore = { order: { schedule: { date: '2024-03-01', startTime: '09:00', endTime: '10:00', jobMinMinutes: 60, jobMaxMinutes: 90 }, serviceLocation: { address: '123 Test Way', address2: '#1', city: 'Mesa', state: 'AZ', zipCode: '12345', appointmentType: 'Inshop', provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } } }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isInsurance: true, isPayInAdvance: false }, contactInfo: { firstName: 'Test', lastName: 'Test', servicePhone: '111-111-1111', emailAddress: 'test@email.com' } } }; const sessionStorage = { schedule: { date: '2024-03-01', startTime: '09:00', endTime: '10:00', jobMinMinutes: 60, jobMaxMinutes: 90 }, serviceLocation: { address: '123 Test Way', address2: '#1', city: 'Mesa', state: 'AZ', zipCode: '12345', appointmentType: 'Inshop', provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } } }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; const sessionStorageMock = (() => { let sessionStore = {}; return { getItem(key) { return sessionStore[key] || null; }, setItem(key, value) { sessionStore[key] = value.toString(); }, removeItem(key) { delete sessionStore[key]; }, clear() { sessionStore = {}; } }; })(); Object.defineProperty(window, 'sessionStorage', { value: sessionStorageMock }); function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) { const mountOptions = getMountOptions({ router: { navigate: jest.fn(), navigateToExternalUrl: jest.fn() } }); mountOptions.global.stubs = { siteFooter: footerStub, siteHeader: headerStub, vehicleBanner: vehicleBannerStub, addToCalendar: addToCalendarStub }; const testingPinia = createTestingPinia({ initialState: { main: mainInitialState } }); useMainStore(testingPinia); methodToRun(); mountOptions.global.plugins = [testingPinia]; mountOptions.mixins = [mockMixin]; mountOptions.data = () => ( initialData ); const apiResponses = { supportingItems: [] }; const apiPromise = Promise.resolve(apiResponses); settleAllPromises.mockImplementation(() => apiPromise); fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); const wrapper = mount(orderConfirmation, mountOptions); return { wrapper }; } describe('OrderConfirmation.vue', () => { beforeEach(() => { window.sessionStorage.clear(); }); afterEach(() => { window.sessionStorage.removeItem('submittedOrder'); }); describe('Page pre-requisites', () => { test('If submitted order saved to store, page pre-reqs return true', async () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const { wrapper } = getMountedComponent(initialStore); // Act const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); await nextTick(); // Assert expect(arePagePrerequisitesValid).toBe(true); }); }); describe('Rendering', () => { test('Should render Site Header', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const { wrapper } = getMountedComponent(initialStore); // Act const siteHeader = wrapper.findComponent(headerStub); // Assert expect(siteHeader.exists()).toBe(true); }); test('Should render Vehicle Banner', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const { wrapper } = getMountedComponent(initialStore); // Act const vehicleBanner = wrapper.findComponent(vehicleBannerStub); // Assert expect(vehicleBanner.exists()).toBe(true); }); test('If Advanced flow, should display Site Footer', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const testStore = { order: { schedule: { date: '2019-01-01', startTime: '09:00' }, serviceLocation: { appointmentType: 'Inshop' } }, issConfig: { successReturnURL: 'testURL' } }; const { wrapper } = getMountedComponent(testStore); // Act const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); // Assert expect(siteFooter.exists()).toBe(true); }); test('If Essential flow, should not display Site Footer', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const { wrapper } = getMountedComponent(initialStore); // Act const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); // Assert expect(siteFooter.isVisible()).toBe(false); }); }); describe('Navigation', () => { test('If Advanced flow, forward button action navigates to carrier URL', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const carrierReturnUrl = 'testURL'; const testStore = { order: { schedule: { date: '2019-01-01', startTime: '09:00' }, serviceLocation: { appointmentType: 'Inshop' } }, issConfig: { successReturnURL: carrierReturnUrl } }; const { wrapper } = getMountedComponent(testStore); // Act wrapper.vm.forwardButtonAction(); // Assert expect(wrapper.vm.$router.navigateToExternalUrl).toHaveBeenCalledWith(carrierReturnUrl); }); }); describe('Computed properties', () => { test('appointmentDateFormatted should return date in expected format', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const { wrapper } = getMountedComponent(initialStore); // Act const testValue = wrapper.vm.appointmentDateFormatted; // Assert expect(testValue).toEqual('Friday, March 1'); }); test('appointmentTimeFormatted should return Mobile time in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { appointmentType: 'Mobile' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentTimeFormatted; // Assert expect(testValue).toEqual('Between 9 AM - 10 AM'); }); test('appointmentTimeFormatted should return Drop Off time in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { appointmentType: 'Dropoff', provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } } }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentTimeFormatted; // Assert expect(testValue).toEqual('Drop off before 9:30 AM'); }); test('appointmentTimeFormatted should return In Shop time in expected format', () => { // Arrange window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage)); const { wrapper } = getMountedComponent(initialStore); // Act const testValue = wrapper.vm.appointmentTimeFormatted; // Assert expect(testValue).toEqual('at 9:00 AM'); }); test('appointmentWordingText should return Mobile text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { address: '123 Test Way', address2: '#1', city: 'Mesa', state: 'AZ', zipCode: '12345', appointmentType: 'Mobile' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentWordingText; // Assert expect(testValue).toEqual('wording text 123 Test Way, #1,
Mesa, AZ 12345'); }); test('appointmentWordingText should return Drop Off text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } }, appointmentType: 'Dropoff' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentWordingText; // Assert expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); }); test('appointmentWordingText should return In Shop text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } }, appointmentType: 'Inshop' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentWordingText; // Assert expect(testValue).toEqual('wording text 123 Safelite Street,
Mesa, AZ 12345'); }); test('serviceLocationFullAddress should return text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { address: '123 Test Way', address2: '#1', city: 'Mesa', state: 'AZ', zipCode: '12345', appointmentType: 'Mobile' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.serviceLocationFullAddress; // Assert expect(testValue).toEqual('123 Test Way, #1,
Mesa, AZ 12345'); }); test('providerFullAddress should return text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } }, appointmentType: 'Inshop' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.providerFullAddress; // Assert expect(testValue).toEqual('123 Safelite Street,
Mesa, AZ 12345'); }); test('appointmentWordingText2 should return Mobile text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { address: '123 Test Way', address2: '#1', city: 'Mesa', state: 'AZ', zipCode: '12345', appointmentType: 'Mobile' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentWordingText2; // Assert expect(testValue).toEqual(wordingText); }); test('appointmentWordingText2 should return Drop Off and text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } }, appointmentType: 'Dropoff' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentWordingText2; const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); // Assert expect(testValue).toEqual(expected); }); test('appointmentWordingText2 should return In Shop text in expected format', () => { // Arrange const testSessionStorage = { schedule: { date: '2019-01-01', startTime: '09:00', endTime: '10:00' }, serviceLocation: { provider: { address: { streetAddress: '123 Safelite Street', city: 'Mesa', state: 'AZ', zipCode: '12345' } }, appointmentType: 'Inshop' }, insuranceCoverage: { coverageStatus: coverageStatuses.VERIFIED, coverageType: coverageType.Deductible }, payment: { isPayInAdvance: false }, lineItems: { vaps: [] }, policy: {}, damage: {} }; window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage)); const { wrapper } = getMountedComponent(); // Act const testValue = wrapper.vm.appointmentWordingText2; const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); // Assert expect(testValue).toEqual(expected); }); }); });