From ad4ec7209c1df2d26d0cd1429a560d44500df711 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Thu, 7 Mar 2024 19:21:37 -0500
Subject: [PATCH] Updates for computed unit tests

---
 .../order-confirmation.spec.js                | 330 ++++++++++++------
 .../order-confirmation/order-confirmation.vue |   2 +-
 2 files changed, 232 insertions(+), 100 deletions(-)

diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js
index 5883b9d1..d5f245e1 100644
--- a/src/layouts/order-confirmation/order-confirmation.spec.js
+++ b/src/layouts/order-confirmation/order-confirmation.spec.js
@@ -15,7 +15,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({
     fetchCmsContentForPage: jest.fn(),
     processIfStatements: jest.fn()
 }));
-const wordingText = 'wording Text {custom:address}';
+const wordingText = 'wording text {custom:address}';
 
 const mockMixin = {
     methods: {
@@ -67,6 +67,55 @@ const initialStore = {
     }
 };
 
+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: {
@@ -191,8 +240,15 @@ describe('OrderConfirmation.vue', () => {
         });
     });
     describe('Computed properties', () => {
+        beforeEach(() => {
+            window.sessionStorage.clear();
+        });
+        afterEach(() => {
+            window.sessionStorage.removeItem('submittedOrder');
+        });
         test('appointmentDateFormatted should return date in expected format', () => {
             // Arrange
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage));
             const { wrapper } = getMountedComponent(initialStore);
 
             // Act
@@ -203,19 +259,18 @@ describe('OrderConfirmation.vue', () => {
         });
         test('appointmentTimeFormatted should return Mobile time in expected format', () => {
             // Arrange
-            const testStore = {
-                order: {
-                    schedule: {
-                        date: '2019-01-01',
-                        startTime: '09:00',
-                        endTime: '10:00'
-                    },
-                    serviceLocation: {
-                        appointmentType: 'Mobile'
-                    }
+            const testSessionStorage = {
+                schedule: {
+                    date: '2019-01-01',
+                    startTime: '09:00',
+                    endTime: '10:00'
+                },
+                serviceLocation: {
+                    appointmentType: 'Mobile'
                 }
             };
-            const { wrapper } = getMountedComponent(testStore);
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
+            const { wrapper } = getMountedComponent();
 
             // Act
             const testValue = wrapper.vm.appointmentTimeFormatted;
@@ -225,19 +280,26 @@ describe('OrderConfirmation.vue', () => {
         });
         test('appointmentTimeFormatted should return Drop Off time in expected format', () => {
             // Arrange
-            const testStore = {
-                order: {
-                    schedule: {
-                        date: '2019-01-01',
-                        startTime: '09:00',
-                        endTime: '10:00'
-                    },
-                    serviceLocation: {
-                        appointmentType: 'Dropoff'
+            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'
+                        }
                     }
                 }
             };
-            const { wrapper } = getMountedComponent(testStore);
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
+            const { wrapper } = getMountedComponent();
 
             // Act
             const testValue = wrapper.vm.appointmentTimeFormatted;
@@ -247,6 +309,7 @@ describe('OrderConfirmation.vue', () => {
         });
         test('appointmentTimeFormatted should return In Shop time in expected format', () => {
             // Arrange
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(sessionStorage));
             const { wrapper } = getMountedComponent(initialStore);
 
             // Act
@@ -257,111 +320,162 @@ describe('OrderConfirmation.vue', () => {
         });
         test('appointmentWordingText 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 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'
                 }
             };
-            const { wrapper } = getMountedComponent(testStore);
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
+            const { wrapper } = getMountedComponent();
 
             // Act
             const testValue = wrapper.vm.appointmentWordingText;
 
             // Assert
-            expect(testValue).toEqual('wording Text <br/>123 Test Way, #1,<br/> Mesa, AZ 12345<br/>');
+            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 testStore = {
-                order: {
-                    schedule: {
-                        date: '2019-01-01',
-                        startTime: '09:00',
-                        endTime: '10:00'
+            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'
+                        }
                     },
-                    serviceLocation: {
-                        provider: {
-                            address: {
-                                streetAddress: '123 Safelite Street',
-                                city: 'Mesa',
-                                state: 'AZ',
-                                zipCode: '12345'
-                            }
-                        },
-                        appointmentType: 'Dropoff'
-                    }
+                    appointmentType: 'Dropoff'
                 }
             };
-            const { wrapper } = getMountedComponent(testStore);
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
+            const { wrapper } = getMountedComponent();
 
             // Act
             const testValue = wrapper.vm.appointmentWordingText;
 
             // Assert
-            expect(testValue).toEqual('wording Text <br/>123 Safelite Street,<br/> Mesa, AZ 12345<br/>');
+            expect(testValue).toEqual('wording text 123 Safelite Street,<br/> Mesa, AZ 12345');
         });
         test('appointmentWordingText should return In Shop text in expected format', () => {
             // Arrange
-            const { wrapper } = getMountedComponent(initialStore);
+            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 <br/>123 Safelite Street,<br/> Mesa, AZ 12345<br/>');
+            expect(testValue).toEqual('wording text 123 Safelite Street,<br/> Mesa, AZ 12345');
         });
         test('serviceLocationFullAddress should return text in expected format', () => {
             // Arrange
-            const { wrapper } = getMountedComponent(initialStore);
+            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('<br/>123 Test Way, #1,<br/> Mesa, AZ 12345<br/>');
+            expect(testValue).toEqual('123 Test Way, #1,<br/> Mesa, AZ 12345');
         });
         test('providerFullAddress should return text in expected format', () => {
             // Arrange
-            const { wrapper } = getMountedComponent(initialStore);
+            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('<br/>123 Safelite Street,<br/> Mesa, AZ 12345<br/>');
+            expect(testValue).toEqual('123 Safelite Street,<br/> 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 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'
                 }
             };
-            const { wrapper } = getMountedComponent(testStore);
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
+            const { wrapper } = getMountedComponent();
 
             // Act
             const testValue = wrapper.vm.appointmentWordingText2;
@@ -371,27 +485,26 @@ describe('OrderConfirmation.vue', () => {
         });
         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'
+            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'
+                        }
                     },
-                    serviceLocation: {
-                        provider: {
-                            address: {
-                                streetAddress: '123 Safelite Street',
-                                city: 'Mesa',
-                                state: 'AZ',
-                                zipCode: '12345'
-                            }
-                        },
-                        appointmentType: 'Dropoff'
-                    }
+                    appointmentType: 'Dropoff'
                 }
             };
-            const { wrapper } = getMountedComponent(testStore);
+            window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
+            const { wrapper } = getMountedComponent();
 
             // Act
             const testValue = wrapper.vm.appointmentWordingText2;
@@ -402,7 +515,26 @@ describe('OrderConfirmation.vue', () => {
         });
         test('appointmentWordingText2 should return In Shop text in expected format', () => {
             // Arrange
-            const { wrapper } = getMountedComponent(initialStore);
+            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;
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index 6d94001d..fa7a4c14 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -180,7 +180,7 @@ export default {
         },
         providerFullAddress() {
             // eslint-disable-next-line max-len
-            return `<br/>${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}<br/>`;
+            return `${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}`;
         },
         appointmentWordingText() {
             switch (this.appointmentType) {