diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 590b5c1b..1984ef04 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -12,10 +12,18 @@ import { createTestingPinia } from '@pinia/testing'; jest.mock('@/helpers/layout-helper.js', () => jest.fn()); jest.mock('@/helpers/cms-content-helper', () => ({ - fetchCmsContentForPage: jest.fn() + fetchCmsContentForPage: jest.fn(), + processIfStatements: jest.fn() })); const wordingText = 'wording Text {custom:address}'; +const inShopDuration = '60-90 minutes'; +jest.mock('@/helpers/date-helper', () => ({ + getDisplayTextForDurationLength: jest.fn().mockImplementation(() => inShopDuration), + convertDateStringToDate: jest.fn(), + get12HourTimeFormat: jest.fn() +})); + const mockMixin = { methods: { getCmsContent: jest.fn().mockImplementation(() => wordingText), @@ -34,12 +42,18 @@ const headerStub = { render: () => {} }; +const vehicleBannerStub = { + render: () => {} +}; + const initialStore = { order: { schedule: { date: '2024-03-01', startTime: '09:00', - endTime: '10:00' + endTime: '10:00', + jobMinMinutes: 60, + jobMaxMinutes: 90 }, serviceLocation: { address: '123 Test Way', @@ -70,7 +84,8 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu mountOptions.global.stubs = { siteFooter: footerStub, - siteHeader: headerStub + siteHeader: headerStub, + vehicleBanner: vehicleBannerStub }; const testingPinia = createTestingPinia({ @@ -110,6 +125,16 @@ describe('OrderConfirmation.vue', () => { // Assert expect(siteHeader.exists()).toBe(true); }); + test('Should render Vehicle Banner', () => { + // Arrange + 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 const testStore = { @@ -324,5 +349,84 @@ describe('OrderConfirmation.vue', () => { // Assert expect(testValue).toEqual('
123 Safelite Street,
Mesa, AZ 12345
'); }); + test('appointmentWordingText2 should return Mobile text in expected format', () => { + // Arrange + const testStore = { + order: { + 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' + } + } + }; + const { wrapper } = getMountedComponent(testStore); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + + // Assert + expect(testValue).toEqual(wordingText); + }); + test('appointmentWordingText2 should return Drop Off and text in expected format', () => { + // Arrange + const testStore = { + order: { + 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: 'Drop Off' + } + } + }; + const { wrapper } = getMountedComponent(testStore); + + // 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 { wrapper } = getMountedComponent(initialStore); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); + + // Assert + expect(testValue).toEqual(expected); + }); + test('inShopAppointmentDuration should return appointment length', () => { + // Arrange + const { wrapper } = getMountedComponent(initialStore); + + // Act + const testValue = wrapper.vm.inShopAppointmentDuration; + + // Assert + expect(testValue).toEqual(inShopDuration); + }); }); }); diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 4b299b07..25911e24 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -120,7 +120,7 @@ export default { // This conversion ensures we don't get get GMT induced date changes const dateObject = convertDateStringToDate(this.appointmentDate); // Ex: Tuesday, April 22 - return dateObject.toLocaleDateString('en-us', { + return dateObject?.toLocaleDateString('en-us', { weekday: 'long', month: 'long', day: 'numeric'