DigitalConsumer.ISS/src/layouts/provider-preference/provider-preference.spec.js

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

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

                if (cmsWidgetName === 'StateSteeringModal') {
                  if (fieldName === 'BodyText') {
                    return "{if:custom:OH}ohioText{end}{if:custom:CA}cali's Text{end}";
                  }
                }
  
                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();
    
        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();
    
        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"
        });

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

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