Merge pull request #563 from Safelite/feature/SSR-1115

order-confirmation footer

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

@@ -0,0 +1,125 @@
+// 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';
+
+jest.mock('@/helpers/layout-helper.js', () => jest.fn());
+
+jest.mock('@/helpers/cms-content-helper', () => ({
+    fetchCmsContentForPage: jest.fn()
+}));
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => ''),
+        setCmsContent: jest.fn()
+    }
+};
+
+const footerStub = {
+    render: () => {},
+    methods: {
+        updateButtonText: jest.fn()
+    }
+};
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn(),
+            navigateToExternalUrl: jest.fn()
+        }
+    });
+
+    mountOptions.global.stubs = {
+        siteFooter: footerStub
+    };
+    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', () => {
+    describe('Rendering', () => {
+        test('Should render Site Header', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        });
+        test('If Advanced flow, should display Site Footer', () => {
+            // Arrange
+            const carrierReturnUrl = 'testURL';
+            const initialStore = {
+                issConfig: {
+                    successReturnURL: carrierReturnUrl
+                }
+            };
+            const { wrapper } = getMountedComponent(initialStore);
+
+            // Act
+            const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(siteFooter.exists()).toBe(true);
+        });
+        test('If Essential flow, should not display Site Footer', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+
+            // 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
+            const carrierReturnUrl = 'testURL';
+            const initialStore = {
+                issConfig: {
+                    successReturnURL: carrierReturnUrl
+                }
+            };
+            const { wrapper } = getMountedComponent(initialStore);
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigateToExternalUrl).toHaveBeenCalledWith(carrierReturnUrl);
+        });
+    })
+});

src/layouts/order-confirmation/order-confirmation.vue

@@ -6,15 +6,18 @@
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid pb-2">
                     <p>Placeholder for order confirmation page</p>
                     <siteFooter
-                    ref="siteFooter"
+                        v-if="carrierUrl"
-                    cmsWidgetName="SiteFooterWidget"
+                        ref="siteFooter"
-                    :isForwardActionDisabled="!meta.valid"
+                        cmsWidgetName="SiteFooterWidget"
-                    @ForwardClicked="forwardButtonAction"
+                        :isForwardActionDisabled="!meta.valid"
-                    @backClicked="navigateBack" />
+                        @ForwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -29,6 +32,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
 
 export default {
     name: 'order-confirmation',
@@ -54,17 +58,27 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
-    methods:
+    setup() {
-        {
+        const mainStore = useMainStore();
-            forwardButtonAction() {
+        return { mainStore };
-                return this.navigateForward();
+    },
-            },
+    computed: {
-            navigateForward() {
+        carrierName() {
-                this.$router.navigate(
+            return this.mainStore.issConfig.clientName;
-                    this.navigationScenarios.CLICKED_FORWARD,
+        },
-                    this.$route
+        carrierUrl() {
-                );
+            return this.mainStore.issConfig.successReturnURL;
-            }
         }
+    },
+    mounted() {
+        if (this.carrierUrl) {
+            this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
+        }
+    },
+    methods: {
+        forwardButtonAction() {
+            this.$router.navigateToExternalUrl(this.carrierUrl);
+        }
+    }
 };
 </script>