From a0c3228021e74f97b7849a42b6a9d1d4c6f07e4b Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Wed, 3 May 2023 17:00:38 -0400 Subject: [PATCH] started tests --- .../provider-preference.spec.js | 258 +++++------------- .../provider-preference.vue | 7 +- 2 files changed, 72 insertions(+), 193 deletions(-) diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js index a0623ae0..5dc4dd7c 100644 --- a/src/layouts/provider-preference/provider-preference.spec.js +++ b/src/layouts/provider-preference/provider-preference.spec.js @@ -1,204 +1,80 @@ -import { mount } from '@vue/test-utils'; -import { navigationScenarios } from '@/router/router-constants/navigation-scenarios'; -import { issPageValues } from '@/router/router-constants/issPage-values'; -import { queryStrings } from '@/constants/query-strings'; -import { GaActions } from "@/constants/analytics"; import ProviderPreference from "@/layouts/provider-preference/provider-preference.vue" -import { useMainStore } from '@/store'; -import { createTestingPinia } from '@pinia/testing'; -import { mapStores } from "pinia"; -const pinia = createTestingPinia(); -useMainStore(pinia); +import { shallowMount } from '@vue/test-utils'; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; +import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; +import { nextTick } from "vue"; -const ProviderPreferenceMockData = { - QuestionText: 'Which auto glass shop would you like to work with?', - Answers: [ - { - Name: 'Schedule with Safelite', - Text: 'Schedule with Safelite', - SubText: '', - ImageId: '', - SubWidgetName: '', - }, - { - Name: 'Find another shop', - Text: 'Find another shop', - SubText: '', - ImageId: '', - SubWidgetName: '', - }, - ], - }; - - const siteFooterWidgetMockData = { - ForwardButtonText: 'Continue', - }; - - function setupMocks() { - const mockRoute = { - query: { - issPage: 'provider-preference', - }, - }; - - const mockRouter = { - navigate: jest.fn(), - }; - - const wrapper = mount(ProviderPreference, { - data() { - return { - SelectedshopLocation: null, - }; - }, - global: { - mixins: [ - { - computed: { - ...mapStores(useMainStore), - GaActions() { - return GaActions; - }, - queryStrings() { - return queryStrings; - }, - navigationScenarios() { - return navigationScenarios; - }, - }, - methods: { - getCmsContent: jest.fn((cmsWidgetName, fieldName) => { - if (cmsWidgetName === 'SiteFooterWidget') { - if (fieldName === 'ForwardButtonText') { - return siteFooterWidgetMockData.ForwardButtonText; - } - } +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); - if (cmsWidgetName === 'StateSteeringModal') { - if (fieldName === 'BodyText') { - return "{if:custom:OH}ohioText{end}{if:custom:CA}cali's Text{end}"; - } - } +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), + setupModalLinks: jest.fn(), +})); - if (cmsWidgetName === 'ProviderPreference') { - if (fieldName === 'QuestionText') { - return ProviderPreferenceMockData.QuestionText; - } - if (fieldName === 'Answers') { - return ProviderPreferenceMockData.Answers; - } - } - - return ''; - }), - getFooterInfoBoxHeight: jest.fn(() => 80), - getPageNameByQueryString: jest.fn(() => "provider-preference"), - pushEventToGA: jest.fn(), - }, - }, - ], - mocks: { - $route: mockRoute, - $router: mockRouter, - }, - stubs: { - SiteHeader: true, - SiteSubHeader: true, - }, - }, - }); - - return { mockRoute, mockRouter, wrapper }; - } describe('provider-preference.vue', () => { - - test("getStateSpecificText returns true when values match", () => { - const { wrapper } = setupMocks(); - - useMainStore().order.customer.address.state = "ohio"; - const actual = wrapper.vm.getStateSpecificText("Ohio") - - expect(actual).toBeTruthy(); - }); - - test("getStateSpecificText returns false when values do not match", () => { - const { wrapper } = setupMocks(); - - useMainStore().order.customer.address.state = "delaware"; - const actual = wrapper.vm.getStateSpecificText("Ohio") - - expect(actual).toBeFalsy(); - }); - - test("getStateSpecificText should return correct value for state", () => { - const { wrapper } = setupMocks(); - useMainStore().order.customer.address.state = "ca"; - - let actual = wrapper.vm.steeringModalBody; - - expect(actual).toBe("cali's Text"); - - useMainStore().order.customer.address.state = "oH"; - - actual = wrapper.vm.steeringModalBody; - - expect(actual).toBe("ohioText"); - }); - - test.skip('"Continue" button is disabled when no Shop Location is selected.', () => { - const { wrapper } = setupMocks(); + test("Should display steering modal if steering modal data is present", async () => { + // Arrange + const { wrapper } = setupMocks(); - const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); - expect(continueButton.attributes()['aria-disabled']).toBe('true'); - }); - - test.skip('"Continue" button is enabled after a Shop Location is selected.', async () => { - const { wrapper } = setupMocks(); + // Act + wrapper.vm.getSteeringModalBody = jest.fn().mockReturnValue("something"); + wrapper.vm.setShowSteeringLink(); + console.log(wrapper.vm.showSteeringLink); - const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' }); - // Not using initializeComponent() because it doesn't trigger reactivity in test. - await ProviderPreferenceWrapper.setData({ - questionTextFromCms: ProviderPreferenceMockData.QuestionText, - answersFromCms: ProviderPreferenceMockData.Answers, - SelectedshopLocation:"Schedule with Safelite" - }); + // Test + expect(wrapper.vm.showSteeringLink).toBeTruthy(); - - const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); - expect(continueButton.attributes()['aria-disabled']).toBe('false'); - }); - + }); - test.skip('Select "Schedule with Safelite" then click "Continue". Navigates to "service-location" page.', async () => { - const { mockRoute, mockRouter, wrapper } = setupMocks(); + test("Should not display steering modal if steering modal data is not present", async () => { + // Arrange + const { wrapper } = setupMocks(); - const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' }); - // Not using initializeComponent() because it doesn't trigger reactivity in test. - await ProviderPreferenceWrapper.setData({ - questionTextFromCms: ProviderPreferenceMockData.QuestionText, - answersFromCms: ProviderPreferenceMockData.Answers, - SelectedshopLocation:"Schedule with Safelite" - }); + // Act + wrapper.vm.getSteeringModalBody = jest.fn().mockReturnValue(""); + wrapper.vm.setShowSteeringLink(); + console.log(wrapper.vm.showSteeringLink); + + // Test + expect(wrapper.vm.showSteeringLink).toBeFalsy(); - const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); - await continueButton.trigger('click'); - - expect(mockRouter.navigate).toHaveBeenCalledTimes(1); - expect(mockRouter.navigate) - .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, mockRoute); - /** - * To Do: find a way to confirm that Vue Router really routes to the expected page. - * Currently just trust that our custom navigate() method does its job properly. - */ - }); - - test.skip('Click the back button, trigger navigate function from Vue Router with CLICKED_BACK parameter.', async () => { - const { mockRoute, mockRouter, wrapper } = setupMocks(); - - await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click'); - expect(mockRouter.navigate).toHaveBeenCalledTimes(1); - expect(mockRouter.navigate) - .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute); - }); + }); +}); + +function setupMocks(mockApiResponses){ + + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn(), + }, }); + + const wrapper = shallowMount( + ProviderPreference, + mountOptions + ); + + useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => { + return Promise.resolve({ + data: { + policies:policies, + }, + }) + }) + + const apiResponses = mockApiResponses; + + settleAllPromises.mockImplementation(() => apiResponses); + fetchCmsContentForPage.mockImplementation (() => {}); + + + return { wrapper }; +} diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index b115851e..fd817ae9 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -128,7 +128,7 @@ export default { methods: { getHeaderTextFromCms(cmsWidgetName) { const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText'); - return headerText.replace("{custom:SafeliteLogo}", ""); + return headerText?.replace("{custom:SafeliteLogo}", ""); }, getSubheaderTextFromCms(cmsWidgetName) { return this.getCmsContent(cmsWidgetName, 'SubheaderText'); @@ -171,9 +171,12 @@ export default { this.$refs["StateSteeringModal"].openModal(); }, setShowSteeringLink() { - const bodyText = this.$refs["StateSteeringModal"]?.ModalBodyText; + const bodyText = this.getSteeringModalBody(); this.showSteeringLink = !!bodyText; }, + getSteeringModalBody() { + return this.$refs["StateSteeringModal"]?.ModalBodyText; + } }, mounted() { setupModalLinks(this);