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);