diff --git a/src/global-methods.js b/src/global-methods.js index f2821343d..c5e6102dc 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -61,7 +61,7 @@ export default { ); } - //router.navigateError(); + router.navigateError(); return reject(error.response); } ); diff --git a/src/global-methods.spec.js b/src/global-methods.spec.js index b74b97a8a..ab80bcd7b 100644 --- a/src/global-methods.spec.js +++ b/src/global-methods.spec.js @@ -1,6 +1,7 @@ import globalMethods from "@/global-methods"; import axios from "axios"; import analyticsMixIn from "@/mixins/analytics-mixin"; +import router from "@/router"; //Mock external dependencies jest.mock("axios"); @@ -29,6 +30,7 @@ it("Global Methods - Call Http Client - Should Reject Promise", () => { isError: true, }); analyticsMixIn.methods.pushEventToGA = jest.fn(); + router.navigateError = jest.fn(); //Act globalMethods.callHttpClient(httpArgs).catch((err) => { diff --git a/src/layouts/bailout/bailout.spec.js b/src/layouts/bailout/bailout.spec.js new file mode 100644 index 000000000..ebed2697a --- /dev/null +++ b/src/layouts/bailout/bailout.spec.js @@ -0,0 +1,48 @@ +// Components +import bailout from "@/layouts/bailout/bailout.vue"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +// 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("bailout.vue", () => { + test("arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks(); + + //Act + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + +function setupMocks() { + const mountOptions = getMountOptions({}); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + + mountOptions.mixins = [mockMixin]; + const wrapper = shallowMount(bailout, mountOptions); + + wrapper.vm.setCmsContent = jest.fn(); + wrapper.vm.backButtonAction = jest.fn(); + + return { wrapper }; +} diff --git a/src/layouts/bailout/bailout.vue b/src/layouts/bailout/bailout.vue new file mode 100644 index 000000000..a7cf017b4 --- /dev/null +++ b/src/layouts/bailout/bailout.vue @@ -0,0 +1,79 @@ + + + diff --git a/src/layouts/payment/payment.spec.js b/src/layouts/payment/payment.spec.js index 717910607..34b282e8b 100644 --- a/src/layouts/payment/payment.spec.js +++ b/src/layouts/payment/payment.spec.js @@ -512,7 +512,7 @@ describe("payment.vue", () => { }); }); - describe("handleIFrameContentWindwMessage", () => { + describe("handleIFrameContentWindowMessage", () => { test("Navigates back if afterpay is closed", () => { // Arrange const event = { @@ -524,7 +524,7 @@ describe("payment.vue", () => { wrapper.vm.backButtonAction = jest.fn(); // Act - wrapper.vm.handleIFrameContentWindwMessage(event); + wrapper.vm.handleIFrameContentWindowMessage(event); // Assert expect(wrapper.vm.backButtonAction).toBeCalled(); @@ -539,7 +539,7 @@ describe("payment.vue", () => { const wrapper = setupMocks({}); // Act - wrapper.vm.handleIFrameContentWindwMessage(event); + wrapper.vm.handleIFrameContentWindowMessage(event); // Assert expect(wrapper.vm.shouldBlockInteraction).toBe(true); diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index e61e54753..bc3e365ad 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -643,17 +643,19 @@ export default { this.submitHopForm(); }, - handleIFrameContentWindwMessage(event) { - if (event.data.indexOf("afterpayClosed") > -1) { - this.backButtonAction(); - } - if (event.data.indexOf("creditCardSubmit") > -1) { - this.setUIBlock(true); + handleIFrameContentWindowMessage(event) { + if (typeof event.data === "string") { + if (event.data.indexOf("afterpayClosed") > -1) { + this.backButtonAction(); + } + if (event.data.indexOf("creditCardSubmit") > -1) { + this.setUIBlock(true); + } } }, setIFrameListener() { window.addEventListener("message", (event) => - this.handleIFrameContentWindwMessage(event) + this.handleIFrameContentWindowMessage(event) ); }, setUIBlock(val) { diff --git a/src/router/index.js b/src/router/index.js index 2373b6e48..e489cbfca 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -32,8 +32,14 @@ import analyticsMixin from "@/mixins/analytics-mixin"; import { experimentTriggers } from "../constants/experiments"; import { applicationConfig } from "../constants/application-config"; import { shouldStripPromoQueryString } from "@/helpers/promotions-helper"; +import bailout from "@/layouts/bailout/bailout"; const routes = [ + { + path: "/bailout", + name: "bailout", + component: bailout, + }, { path: "/", name: "root", @@ -436,7 +442,10 @@ async function DisplayPageError() { ); baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE); - location.reload(); + router.push({ + path: "/", + query: { fmgPage: "bailout" }, + }); } function isExistingFmgPageName(pageName) {