endorsements page unit tests so far

src/layouts/endorsements-page/endorsements-page.spec.js

@@ -0,0 +1,111 @@
+// Components
+import endorsementsPage from '@/layouts/endorsements-page/endorsements-page.vue';
+
+// Supporting Files
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios';
+import { createTestingPinia } from '@pinia/testing';
+import { getRandomString, getRandomInt } from '@/helpers/data-generation.js';
+import { useMainStore } from '@/store';
+
+// import { useMainStore } from '@/store/index.js';
+
+describe('endorsementsPage.vue', () => {
+    describe('Rendering', () => {
+        test('Should render site header', () => {
+            // Arrange
+            const wrapper = shallowMount(endorsementsPage, getMountOptions());
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        });
+        test('Should render site subheader', () => {
+            // Arrange
+            const wrapper = shallowMount(endorsementsPage, getMountOptions());
+
+            // Act
+            const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
+
+            // Assert
+            expect(siteSubHeader.exists()).toBe(true);
+        });
+        test('Should render buttonQuestion component', () => {
+            // Arrange
+            const wrapper = shallowMount(endorsementsPage, getMountOptions());
+
+            // Act
+            const buttonQuestion = wrapper.findComponent({ ref: 'endorsementQuestion' });
+
+            // Assert
+            expect(buttonQuestion.exists()).toBe(true);
+        });
+        test('Should render site footer', () => {
+            // Arrange
+            const wrapper = shallowMount(endorsementsPage, getMountOptions());
+
+            // Act
+            const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(siteFooter.exists()).toBe(true);
+        });
+    });
+    describe('Navigation', () => {
+        test('Back button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(endorsementsPage, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
+        });
+        test('Forward button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(endorsementsPage, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+            wrapper.vm.navigateForward();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
+        });
+        // *TO DO: once service is ready, revise this test to ensure data is saved to the store
+        test('Forward button clicked saves endorsement question answers', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                },
+                global: {
+                    plugins: [createTestingPinia()]
+                }
+            });
+            const wrapper = shallowMount(endorsementsPage, mountOptions);
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(useMainStore().saveEndorsementQuestionAnswers).toHaveBeenCalled();
+        });
+    });
+});

src/layouts/endorsements-page/endorsements-page.vue

@@ -6,12 +6,16 @@
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
                 <siteSubHeader
+                    ref="siteSubHeader"
                     cmsWidgetName="SiteSubHeaderWidget"
                     class="mt-5" />
                 <div class="container-fluid px-5 mt-0">
                 <buttonQuestion
+                    ref="endorsementQuestion"
                     v-model="schoolPropertyAnswer"
                     class="radioQuestion windshield-chip-count-question mb-4"
                     cmsWidgetName="SchoolPropertyQuestion"
@@ -40,7 +44,7 @@
                     class="pt-5"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
+                    @forwardClicked="forwardButtonAction"
                     @backClicked="backButtonAction" />
                 </div>
             </div>
@@ -135,7 +139,7 @@ export default {
                 );
 
                 // save answers to store as order.policy.endorsementQuestionAnswers
-                await useMainStore().saveEndorsementQuestionAnswers(questionAnswersArray);
+                useMainStore().saveEndorsementQuestionAnswers(questionAnswersArray);
 
                 return this.navigateForward();
             },