Fix failing tests

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

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`] = `
 <transition-stub name="fade" mode="out-in" appear="false" persisted="false" css="true" selectedvalue="selected value">
-  <base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" buttonlabel="Label of button" buttonlabelsubcopy="Sub copy of button" buttonbodycopy="button body copy" screenreaderonlytext="screen reader only text" additionalbuttondata="[object Object]" alttext="" iswide="false" value="1234"></base-input-button-stub>
+  <base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover mb-2" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" buttonlabel="Label of button" buttonlabelsubcopy="Sub copy of button" buttonbodycopy="button body copy" screenreaderonlytext="screen reader only text" additionalbuttondata="[object Object]" alttext="" iswide="false" value="1234"></base-input-button-stub>
 </transition-stub>
 `;
 
 exports[`Shop list button should render correctly with required props 1`] = `
 <transition-stub name="fade" mode="out-in" appear="false" persisted="false" css="true">
-  <base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" alttext="" iswide="false" value="1234"></base-input-button-stub>
+  <base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover mb-2" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" alttext="" iswide="false" value="1234"></base-input-button-stub>
 </transition-stub>
 `;
 

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('button-label-sub-copy');
-                expect(buttonLabelSubCopy.classes()).toContain('ms-2');
                 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('button-label-sub-copy');
-                expect(buttonLabelSubCopy.classes()).toContain('ms-2');
             });
         });
         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('button-body-copy');
-            expect(buttonBodyCopy.classes()).toContain('small');
         });
         test('screen reader only text when screenReaderOnlyText provided', async () => {
             // Arrange

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 { mount, flushPromises } from '@vue/test-utils';
-import { getMountOptions } from '@/helpers/unit-test-helper.js';
+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';
-
+import { getZipCodeData } from '@/helpers/service-location-helper';
-// 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 };
-}
 
 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 = {
+const mockRoute = {
-    methods: {
+    params: {}
-        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+};
-            // linkWidgetName is not defined.  This whole spec file needs review.
+const mockRouter = {
-            if (widgetName === linkWidgetName) {
+    navigate: jest.fn()
-                return mockLinkCmsContent[cmsFieldName];
+};
+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) {
+        mocks: {
-                return mockModalCmsContent[cmsFieldName];
+            $route: mockRoute,
-            }
+            $router: mockRouter
-
+        },
-            return null;
+        stubs: {
-        }),
+            alert: true,
-
+            textBlock: true,
-        getZipCodeData: jest.fn((zip) => {
+            appointmentTypeQuestion: true,
-            if (zip === '43235' || zip === '55555') {
+            contentGroupModal: true,
-                return Promise.resolve({
+            siteFooter: true,
-                    containsMilitaryBase: false,
+            siteHeader: true,
-                    isValid: true,
+            siteSubHeader: true,
-                    state: 'OH',
+            shopAddress: true,
-                    zipCodeCtu: '01820'
+            serviceZipQuestion: true
-                });
+        }
-            }
-
-            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()
     }
 };
+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', () => {
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
-    test('if the back button is clicked, navigate back', async () => {
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
-        // Arrange
+
-        const { wrapper } = setupMocks({
+    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
+        test('displays military zip message when zip is updated', async () => {
-        await wrapper.vm.navigateBack();
+            // Arrange
+            const { wrapper } = setupMocks({ appointmentType: AppointmentTypeStrings.MOBILE });
 
-        // Assert
+            const mobileServiceZipCodeQuestion = wrapper.findComponent({
-        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
+                ref: 'mobileServiceZipCodeQuestion'
-    });
+            });
-});
+
-
+            expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
-describe('updating service zip', () => {
+
-    test('updates the page model after changing the service zip code', () => {
+            const newMobileServiceZipCode = '45433'
-        // Arrange
+
-        const { wrapper } = setupMocks({
+            // Act
-            mixins: [mockMixin]
+            mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode);
-        });
+            await wrapper.vm.$nextTick();
-
+
-        const newServiceZipCodeQuestion = {
+            // Assert
-            zipCode: '61606',
+            expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
-            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);
     });
 });

src/layouts/service-location/service-location.vue

@@ -62,6 +62,7 @@
                             :isCollapsible="true"
                             alertClass="alert-warning" />
                         <shopAddress
+                            ref="shopAddress"
                             v-model="selectedProvider"
                             :serviceZipcode="zipCode"
                             :selectedAppointmentType="selectedAppointmentType"
@@ -79,7 +80,7 @@
                     <div
                         v-if="isMobile">
                         <div class="expandable-link-container">
-                        <a
+                            <a
                                 v-if="displayMilitaryZipAlert && !militaryBaseWarningExpanded"
                                 href="#"
                                 class="expandable-link"

src/layouts/service-location/service-zip-question/service-zip-question.spec.js

@@ -4,7 +4,7 @@ import serviceZipQuestion from '@/layouts/service-location/service-zip-question/
 describe('service-zip-question.vue', () => {
     it('Should get the modelValue', async () => {
         // Arrange
-        const text = 'test';
+        const text = '12345';
         const wrapper = shallowMount(serviceZipQuestion, {
             props: {
                 modelValue: text
@@ -14,15 +14,15 @@ describe('service-zip-question.vue', () => {
 
         // Act
         const modelValueText = wrapper.vm.internalZipcode;
-        wrapper.vm.internalZipcode = 'test also';
+        wrapper.vm.internalZipcode = '55555';
 
         // Assert
-        expect(modelValueText).toEqual('test');
+        expect(modelValueText).toEqual('12345');
     });
 
     it('Should emit to set value', async () => {
         // Arrange
-        const text = 'test';
+        const text = '12345';
         const wrapper = shallowMount(serviceZipQuestion, {
             props: {
                 modelValue: text
@@ -31,10 +31,10 @@ describe('service-zip-question.vue', () => {
         });
 
         // Act
-        wrapper.vm.internalZipcode = 'test also';
+        wrapper.vm.internalZipcode = '55555';
         wrapper.vm.updateModelValue();
 
         // Assert
-        expect(wrapper.emitted('update:modelValue')).toEqual([['test also']]);
+        expect(wrapper.emitted('update:modelValue')).toEqual([['55555']]);
     });
 });