DigitalConsumer.ISS/src/layouts/order-confirmation/order-confirmation.spec.js

// 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';

jest.mock('@/helpers/layout-helper.js', () => jest.fn());

jest.mock('@/helpers/cms-content-helper', () => ({
    fetchCmsContentForPage: jest.fn(),
    processIfStatements: 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'
                }
            }
        },
        payment: {
            isInsurance: true,
            isPayInAdvance: false
        },
        contactInfo: {
            firstName: 'Test',
            lastName: 'Test',
            phoneNumber: '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'
            }
        }
    }
};

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'
                }
            };
            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'
                        }
                    }
                }
            };
            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'
                }
            };
            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,<br/> 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'
                }
            };
            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,<br/> 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'
                }
            };
            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,<br/> 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'
                }
            };
            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
            const { wrapper } = getMountedComponent();

            // Act
            const testValue = wrapper.vm.serviceLocationFullAddress;

            // Assert
            expect(testValue).toEqual('123 Test Way, #1,<br/> 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'
                }
            };
            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
            const { wrapper } = getMountedComponent();

            // Act
            const testValue = wrapper.vm.providerFullAddress;

            // Assert
            expect(testValue).toEqual('123 Safelite Street,<br/> 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'
                }
            };
            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'
                }
            };
            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'
                }
            };
            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);
        });
    });
});