Merge pull request #3046 from Safelite/feature/CASH-611

CASH-611 - C&C 2.0 | front-end | policy-info page | create page

src/constants/progress-bar-mapper.js

@@ -48,6 +48,10 @@ export const pageProgressMapper = {
         percent: 30,
         step: 1,
     },
+    "policy-info": {
+        percent: 55,
+        step: 2,
+    },
     quote: {
         percent: 60,
         step: 2,

src/layouts/policy-info/policy-info.spec.js

@@ -0,0 +1,70 @@
+import policyInfo from "@/layouts/policy-info/policy-info.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("policy-info.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-info", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(policyInfo, mountOptions);
+
+    return { wrapper };
+}

src/layouts/policy-info/policy-info.vue

@@ -0,0 +1,76 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="container-fluid">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+            ... Page code goes here.
+          -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "policy-info",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+    },
+    // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
+    async beforeRouteEnter(to, from, next) {
+        const pageName = to.name;
+        const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        async backButtonAction() {
+            // Stub, for navigating back via nav-bar.
+        },
+        async forwardButtonAction() {
+            // Stub, for navigating forward via nav-bar
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/router/constants/routes.js

@@ -51,6 +51,10 @@ export const routeData = {
         name: "quote",
         path: "/quote",
     },
+    POLICY_INFO: {
+        name: "policy-info",
+        path: "/policy-info",
+    },
     INSURANCE_COMPANY: {
         name: "insurance-company",
         path: "/insurance-company",

src/router/constants/routing-table.js

@@ -429,6 +429,10 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.POLICY_INFO.name,
+            maps: [],
+        },
         {
             pageName: routeData.INSURANCE_COMPANY.name,
             maps: [

src/router/methods/routes.js

@@ -41,6 +41,7 @@ export const routes = [
     createRoute(routeData.CONFIRMATION),
     createRoute(routeData.RETURN_USER),
     createRoute(routeData.MOBILE_DETAILS),
+    createRoute(routeData.POLICY_INFO),
 
     // Virtual pages (resolve to a non-virtual page.)
     createVirtualRoute(routeData.LANDING, landingBeforeEnter),