diff --git a/src/iss-components/google-map/google-map.spec.js b/src/iss-components/google-map/google-map.spec.js index 331c78e1..4bd2ceaf 100644 --- a/src/iss-components/google-map/google-map.spec.js +++ b/src/iss-components/google-map/google-map.spec.js @@ -314,7 +314,6 @@ describe('Google Map', () => { // Arrange const wrapper = shallowMount(googleMap, {}); await awaitingSetupTicks(wrapper); - const numberOfExtendCallsDuringMount = 2; mockGeocode.mockImplementation(() => { const result = { @@ -329,7 +328,7 @@ describe('Google Map', () => { const result = wrapper.vm.getBounds(locations); // Assert - expect(mockExtend).toHaveBeenCalledTimes(numberOfExtendCallsDuringMount + numberOfExtendCallsPostMount); + expect(mockExtend).toHaveBeenCalledTimes(numberOfExtendCallsPostMount); expect(result).toBe(mockLatLngBound); } ); diff --git a/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap b/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap index 209c7610..75cb24ad 100644 --- a/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap +++ b/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap @@ -2,13 +2,13 @@ exports[`Shop list button should render correctly with all relevant props 1`] = ` - + `; exports[`Shop list button should render correctly with required props 1`] = ` - + `; diff --git a/src/iss-components/shop-list-button/shop-list-button.spec.js b/src/iss-components/shop-list-button/shop-list-button.spec.js index bece89c1..2cbc4aaa 100644 --- a/src/iss-components/shop-list-button/shop-list-button.spec.js +++ b/src/iss-components/shop-list-button/shop-list-button.spec.js @@ -149,10 +149,9 @@ describe('Shop list button', () => { // Assert expect(buttonLabelSubCopy.exists()).toBeTruthy(); - expect(buttonLabelSubCopy.classes().length).toBe(4); + expect(buttonLabelSubCopy.classes().length).toBe(3); expect(buttonLabelSubCopy.classes()).toContain('m-0'); - expect(buttonLabelSubCopy.classes()).toContain('caption'); - expect(buttonLabelSubCopy.classes()).toContain('ms-2'); + expect(buttonLabelSubCopy.classes()).toContain('button-label-sub-copy'); expect(buttonLabelSubCopy.classes()).toContain(textPosition); }); test('when "textPosition" prop not provided', async () => { @@ -173,10 +172,9 @@ describe('Shop list button', () => { // Assert expect(buttonLabelSubCopy.exists()).toBeTruthy(); - expect(buttonLabelSubCopy.classes().length).toBe(3); + expect(buttonLabelSubCopy.classes().length).toBe(2); expect(buttonLabelSubCopy.classes()).toContain('m-0'); - expect(buttonLabelSubCopy.classes()).toContain('caption'); - expect(buttonLabelSubCopy.classes()).toContain('ms-2'); + expect(buttonLabelSubCopy.classes()).toContain('button-label-sub-copy'); }); }); describe('availability indicator block with expected when displayAvailabilityIndicators true', () => { @@ -378,8 +376,7 @@ describe('Shop list button', () => { // Assert expect(buttonBodyCopy.exists()).toBeTruthy(); expect(buttonBodyCopy.classes()).toContain('m-0'); - expect(buttonBodyCopy.classes()).toContain('button-label-sub-copy'); - expect(buttonBodyCopy.classes()).toContain('small'); + expect(buttonBodyCopy.classes()).toContain('button-body-copy'); }); test('screen reader only text when screenReaderOnlyText provided', async () => { // Arrange diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 187337a6..a09c0542 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -1,29 +1,13 @@ +/* eslint-env jest */ import baseMixin from '@/mixins/base-mixin'; -import { shallowMount } from '@vue/test-utils'; -import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { mount, flushPromises } from '@vue/test-utils'; +import { createTestingPinia } from '@pinia/testing'; +import { AppointmentTypeStrings } from '@/constants/schedule-constants'; +import navigationScenarios from '@/router/router-constants/navigation-scenarios'; +import routerParams from '@/router/router-constants/router-params'; +import { useMainStore } from '@/store'; import serviceLocation from '@/layouts/service-location/service-location.vue'; - -// Define Mocks -jest.mock('@/helpers/cms-content-helper', () => ({ - fetchCmsContentForPage: jest.fn(() => Promise.resolve('content')) -})); - -/** @ignore */ -function setupMocks() { - const wrapper = shallowMount( - serviceLocation, - getMountOptions({ - router: { - navigate: jest.fn() - } - }) - ); - - wrapper.vm.$router.navigateWithSpinner = jest.fn(); - wrapper.vm.navigateBack = baseMixin.methods.navigateBack; - - return { wrapper }; -} +import { getZipCodeData } from '@/helpers/service-location-helper'; const mockGetServiceabilityDetails = () => { const serviceabilityDetails = { @@ -35,123 +19,199 @@ const mockGetServiceabilityDetails = () => { return Promise.resolve(serviceabilityDetails); }; +const mockZipcodeData = (zip) => { + if (zip === '43235' || zip === '55555') { + return Promise.resolve({ + containsMilitaryBase: false, + isValid: true, + isServiceable: true, + city: 'Columbus', + state: 'OH', + zipCodeCtu: '01820' + }); + } + if (zip === '45433') { + return Promise.resolve({ + containsMilitaryBase: true, + isValid: true, + isServiceable: true, + city: 'Columbus', + state: 'OH', + zipCodeCtu: '01820' + }); + } + + return Promise.resolve({ + containsMilitaryBase: false, + isValid: false, + isServiceable: false, + city: null, + state: null, + zipCodeCtu: null + }); +} +const mockProviders = () => { + return Promise.resolve([ + { + "address": { + "city": "COLUMBUS", + "country": "US", + "state": "OH", + "streetAddress": "6826 Sawmill Rd", + "streetAddress2": "", + "zipCode": "43235", + "zipCodeCtu": "03357" + }, + "distanceInMiles": 4.136335989015438, + "providerNumber": "003357", + "companyName": "SAFELITE AUTOGLASS - COLUMBUS, OH", + "phoneNumber": "6142336400", + "isSafeliteShop": true + }, + { + "address": { + "city": "Lewis Center", + "country": "US", + "state": "OH", + "streetAddress": "1343 Cameron Ave", + "streetAddress2": "", + "zipCode": "43035", + "zipCodeCtu": "03357" + }, + "distanceInMiles": 8.193072412262042, + "providerNumber": "003417", + "companyName": "SAFELITE AUTOGLASS - LEWIS CENTER, OH", + "phoneNumber": "6147815433", + "isSafeliteShop": true + } + ]) +} jest.mock( '@/helpers/service-location-helper', () => ({ - getServiceabilityDetails: jest.fn((mockServiceZipCode) => mockGetServiceabilityDetails(mockServiceZipCode)) + getServiceabilityDetails: jest.fn((mockServiceZipCode) => mockGetServiceabilityDetails(mockServiceZipCode)), + getZipCodeData: jest.fn((mockServiceZipCode) => mockZipcodeData(mockServiceZipCode)), + getMobileZipCodeData: jest.fn((mockServiceZipCode) => mockZipcodeData(mockServiceZipCode)) }) ); -const mockMixin = { - methods: { - getCmsContent: jest.fn((widgetName, cmsFieldName) => { - // linkWidgetName is not defined. This whole spec file needs review. - if (widgetName === linkWidgetName) { - return mockLinkCmsContent[cmsFieldName]; +const mockRoute = { + params: {} +}; +const mockRouter = { + navigate: jest.fn() +}; +const mountOptions = { + global: { + mixins: [ + { + computed: { + navigationScenarios() { + return navigationScenarios; + }, + routerParams() { + return routerParams; + } + }, + methods: { + getCmsContent: jest.fn(), + getFooterInfoBoxHeight: jest.fn(() => 80), + getPageNameByQueryString: jest.fn(() => '') + } } - - if (widgetName === modalWidgetName) { - return mockModalCmsContent[cmsFieldName]; - } - - return null; - }), - - getZipCodeData: jest.fn((zip) => { - if (zip === '43235' || zip === '55555') { - return Promise.resolve({ - containsMilitaryBase: false, - isValid: true, - state: 'OH', - zipCodeCtu: '01820' - }); - } - - if (zip === '45433') { - return Promise.resolve({ - containsMilitaryBase: true, - isValid: true, - state: 'OH' - }); - } - - return Promise.resolve({ - containsMilitaryBase: false, - isValid: false, - state: null, - zipCodeCtu: null - }); - }), - - onSubmit: jest.fn(), - onInvalidSubmit: jest.fn() + ], + mocks: { + $route: mockRoute, + $router: mockRouter + }, + stubs: { + alert: true, + textBlock: true, + appointmentTypeQuestion: true, + contentGroupModal: true, + siteFooter: true, + siteHeader: true, + siteSubHeader: true, + shopAddress: true, + serviceZipQuestion: true + } } }; +function setupMocks({ appointmentType = AppointmentTypeStrings.IN_SHOP }) { + mountOptions.global.plugins = [createTestingPinia({ + initialState: { + main: { + order: { + serviceLocation: { + appointmentType: appointmentType + } + } + } + } + })]; + useMainStore().getProviders = jest.fn().mockImplementation(() => mockProviders()); + const wrapper = mount(serviceLocation, mountOptions); -describe('navigation', () => { - test('if the back button is clicked, navigate back', async () => { - // Arrange - const { wrapper } = setupMocks({ + wrapper.vm.$router.navigateWithSpinner = jest.fn(); + wrapper.vm.navigateBack = baseMixin.methods.navigateBack; + + return { wrapper }; +} + +beforeEach(() => { + jest.clearAllMocks(); +}); +describe('service-location.vue', () => { + describe('navigation', () => { + test('if the back button is clicked, navigate back', async () => { + // Arrange + const { wrapper } = setupMocks({ + }); + + // Act + await wrapper.vm.navigateBack(); + + // Assert + expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled(); + }); + }); + describe('updating service zip', () => { + test('updates the page model after changing the service zip code', () => { + // Arrange + const { wrapper } = setupMocks({ appointmentType: AppointmentTypeStrings.IN_SHOP }); + + const newServiceZipCode = '61606'; + + const shopAddressComponent = wrapper.findComponent({ + ref: 'shopAddress' + }); + + // Act + shopAddressComponent.vm.$emit('zip-updated', newServiceZipCode); + + // Assert + expect(wrapper.vm.zipCode).toStrictEqual(newServiceZipCode); }); - // Act - await wrapper.vm.navigateBack(); + test('displays military zip message when zip is updated', async () => { + // Arrange + const { wrapper } = setupMocks({ appointmentType: AppointmentTypeStrings.MOBILE }); - // Assert - expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled(); - }); -}); - -describe('updating service zip', () => { - test('updates the page model after changing the service zip code', () => { - // Arrange - const { wrapper } = setupMocks({ - mixins: [mockMixin] - }); - - const newServiceZipCodeQuestion = { - zipCode: '61606', - state: 'IL' - }; - - const serviceZipCodeComponent = wrapper.findComponent({ - ref: 'serviceZipCodeQuestion' - }); - - // Act - serviceZipCodeComponent.vm.$emit('update:modelValue', newServiceZipCodeQuestion); - - // Assert - expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion); - }); - - test('displays military zip message when zip is updated', () => { - // Arrange - const { wrapper } = setupMocks({}); - - const mobileLocationQuestionsComponent = wrapper.findComponent({ - ref: 'mobileLocationQuestions' - }); - mobileLocationQuestionsComponent.resetComponent = jest.fn(); - - const serviceZipCodeComponent = wrapper.findComponent({ - ref: 'serviceZipCodeQuestion' - }); - serviceZipCodeComponent.resetMobileFeePart = jest.fn(); - - expect(wrapper.vm.zipContainsMilitaryBase).toBe(false); - - // TODO: Use or remove - const newServiceZipCodeQuestion = { - zipCode: '45433', - state: 'OH' - }; - - // Act - serviceZipCodeComponent.vm.$emit('updated-contains-military-base', true); - - // Assert - expect(wrapper.vm.zipContainsMilitaryBase).toBe(true); + const mobileServiceZipCodeQuestion = wrapper.findComponent({ + ref: 'mobileServiceZipCodeQuestion' + }); + + expect(wrapper.vm.zipContainsMilitaryBase).toBe(false); + + const newMobileServiceZipCode = '45433' + + // Act + mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode); + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.zipContainsMilitaryBase).toBe(true); + }); }); }); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 42fe3d5c..2084a282 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -62,6 +62,7 @@ :isCollapsible="true" alertClass="alert-warning" />