start of unit tests

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -1,16 +1,109 @@
-describe ('test', () => {
+// Components
-    test ('dummy test', () => {
+import coverageStatement from '@/layouts/coverage-statement/coverage-statement';
-        // Arrange
-        let test = "test";
 
-        // Act
+// Supporting Files
-        test = "test2"
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { createTestingPinia } from '@pinia/testing';
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios.js';
+import { useMainStore } from '@/store/index.js';
+import { settleAllPromises } from '@/helpers/layout-helper';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { render } from '@testing-library/vue';
 
-        // Assert
+// Mock fetchCmsContentForPage
-        expect(test.length).toBe(5);
+// jest.mock('@/helpers/cms-content-helper', () => ({
+//     fetchCmsContentForPage: jest.fn(),
+//     processIfStatements: jest.fn(),
+//     getBodyTextFromCms: jest.fn(),
+// }));
+
+// // Mock our module for promises.
+// jest.mock('@/helpers/layout-helper.js', () => ({
+//     settleAllPromises: jest.fn(),
+// }));
+
+describe('coverageStatement.vue', () => {
+    describe('Rendering', () => {
+        test('Should render site header', () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        }),
+        test('Should render site footer', () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const footer = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(footer.exists()).toBe(true);
+        });
+        test('Should render ITAC alert if ITAC', async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            await wrapper.setData({
+                isVerified: true,
+                verifiedITAC: true,
+            })
+
+            // Assert
+            expect(wrapper.findComponent({ ref: 'verifiedITACAlert' }).exists()).toBe(true);
+        });
     })
 })
 
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => ''),
+        setCmsContent: jest.fn(),
+    },
+};
+
+function setupMocks()
+{
+    const mountOptions = getMountOptions({
+        // router: {
+        //     navigate: jest.fn()
+        // },
+        
+        // global: {
+        //     plugins: [createTestingPinia()]
+        // }
+    });
+
+    mountOptions.mixins = [mockMixin];
+
+    // settleAllPromises.mockImplementation(() => apiResponses);
+    // fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+    
+    const wrapper = shallowMount(coverageStatement, mountOptions);
+    wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+    return { wrapper };
+}
+
+
+// describe ('test', () => {
+//     test ('dummy test', () => {
+//         // Arrange
+//         let test = "test";
+
+//         // Act
+//         test = "test2"
+
+//         // Assert
+//         expect(test.length).toBe(5);
+//     })
+// })
+
 // *Testing to be completed on SSR-603
 
 // // Components

src/layouts/coverage-statement/coverage-statement.vue

@@ -6,7 +6,7 @@ v-slot="{ meta }"
 @invalid-submit="onInvalidSubmit">
       <div class="page-container-grouped-styles">
           <div class="fade-on-route-transition position-relative">
-              <siteHeader cmsWidgetName="SiteHeaderWidget" />
+              <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader"/>
               <div class="select-car">
                   <div class="container-fluid pb-2">
                       <div class="row px-3">
@@ -14,7 +14,8 @@ v-slot="{ meta }"
                               <div class="pb-1 mt-4">
                                   <h5
                                     v-html="coverageStatementSubHeader"
-                                    class="text-center text-black">
+                                    class="text-center text-black"
+                                    ref="siteSubHeader">
                                   </h5>
                                   <div
                                     v-html="explanatoryText"