DigitalConsumer.ISS/src/layouts/vin-lookup/vin-lookup.spec.js

/* eslint-env jest */
import '@testing-library/jest-dom';
import { flushPromises } from '@vue/test-utils';
import { render, waitFor } from '@testing-library/vue';
import { createTestingPinia } from '@pinia/testing';
import userEvent from '@testing-library/user-event';
import { errorMessages } from '@/constants/error-messages';
import { issPageValues } from '@/router/router-constants/issPage-values';
import { queryStrings } from '@/constants/query-strings';
import { GaActions } from "@/constants/analytics";
import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
import { routerParams } from '@/router/router-params';
import { useMainStore } from '@/store';
import VinLookupComponent from './vin-lookup.vue';

const continueButtonQuerySelector = '[data-test-id="site-footer-main-button"]';
const errorMessageWrapperElSelector = '#vin-question-wrapper .form-test-error';
const vinInputSelector = '#vin-question';
const mockValidVin = '12345678901234567';
const mockCarId = 'Mock Car Id';
const lookupVehicleByVin = {
  methodName: 'lookupVehicleByVin',
  mockResponse: {
    data: {
      carId: mockCarId,
    },
  },
};
const lookupVehicleByVinError = {
  methodName: 'lookupVehicleByVin',
  mockResponse: {
    data: {
      error: true,
    },
  },
};
const getPartsOrQuestions = {
  methodName: 'getPartsOrQuestions',
  mockResponse: null,
};

const vehicleWithPartQuestionsMockResponse = {
  data: {
    partsOrQuestions: [
      {
        partQuestions: [
          {
            id: 1,
          },
        ],
      },
    ],
  },
};

const vehicleWithMultiplePartsMockResponse = {
  data: {
    partsOrQuestions: [
      {
        parts: [
          {
            id: 1,
          },
          {
            id: 2,
          },
        ],
      },
    ],
  },
};

const vehicleWithMoldingQuestionsMockResponse = {
  data: {
    partsOrQuestions: [
      {
        parts: [
          {
            childPartQuestions: [
              {
                id: 1,
              },
            ],
          },
        ],
      },
    ],
  },
};

const vehicleWithCapabilityQuestionsMockResponse = {
  data: {
    partsOrQuestions: [
      {
        parts: [
          {
            requiresCapabilityQuestions: true,
            partNumber: 1,
          },
        ],
      },
    ],
  },
};

const vehicleWithNoAdditionalPartsOrQuestionsMockResponse = {
  data: {
    partsOrQuestions: [
      {
        parts: [
          {
            childPartQuestions: [],
            requiresCapabilityQuestions: false,
          },
        ],
      },
    ],
    partQuestions: null,
  },
};

jest.mock("bootstrap", () => ({
  getInstance: jest.fn(),
  getOrCreateInstance: jest.fn(),
}));

const mockRoute = {
  query: {
    // Needed inside vehicle-questions-mixin
    issPage: issPageValues.VIN_LOOKUP,
  },
};
const mockRouter = {
  navigate: jest.fn(),
};
const maska = jest.fn();
jest.mock('@/helpers/damage-helper', () => ({
  isGlassAvailableForCarId: jest.fn().mockResolvedValue(false),
}));
const mountOptions = {
  global: {
    directives: {
      maska,
    },
    mixins: [
      {
        methods: {
          getCmsContent: jest.fn(() => ''),
          getFooterInfoBoxHeight: jest.fn(() => 80),
          cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
          getPageNameByQueryString: jest.fn(() => ''),
          pushEventToGA: jest.fn(),
        },
        computed: {
          GaActions() {
            return GaActions;
          },
          navigationScenarios() {
            return navigationScenarios;
          },
          queryStrings() {
            return queryStrings;
          },
        },
      },
    ],
    mocks: {
      $route: mockRoute,
      $router: mockRouter,
    },
    plugins: [createTestingPinia({
      initialState: {
        main: {
          order: {
            vehicle: {
              carId: mockCarId,
            },
          },
        },
      },
      stubActions: false,
    })],
    stubs: {
      siteHeader: true,
      siteSubHeader: true,
      vehicleBanner: true,
      vinLocationInformation: true,
      vinLookupAlerts: true,
      vinQuestion: true,
    },
  },
};

beforeEach(() => {
  jest.clearAllMocks();
});

describe('vin-lookup.vue', () => {
  describe('Client-side validation', () => {
    test.each([
      { vin: null },
      { vin: '' },
    ])('VIN Required error messsage is displayed.', async ({ vin }) => {
      const user = userEvent.setup();
      mountOptions.data = () => ({
        vin,
      });
      mountOptions.global.stubs.vinQuestion = false;
      const { container } = render(VinLookupComponent, mountOptions);
      const continueButton = container.querySelector(continueButtonQuerySelector);

      user.click(continueButton);
      await flushPromises();
      await waitFor(() => {
        const errorMessageWrapperEl = container.querySelector(errorMessageWrapperElSelector);
        expect(errorMessageWrapperEl).toBeVisible();

        const errorMessageEl = errorMessageWrapperEl.querySelector('span');
        expect(errorMessageEl.textContent).toBe(errorMessages.VIN_REQUIRED);
      });
    });

    test.each([
      { vin: '11' },
      { vin: 'I1234567890123456' },
      { vin: 'O1234567890123456' },
      { vin: 'Q1234567890123456' },
    ])('VIN Invalid Format error messsage is displayed.', async ({ vin }) => {
      const user = userEvent.setup();
      mountOptions.data = () => ({
        vin,
      });
      mountOptions.global.stubs.vinQuestion = false;
      const { container } = render(VinLookupComponent, mountOptions);
      const continueButton = container.querySelector(continueButtonQuerySelector);

      user.click(continueButton);
      await flushPromises();
      await waitFor(() => {
        const errorMessageWrapperEl = container.querySelector(errorMessageWrapperElSelector);
        expect(errorMessageWrapperEl).toBeVisible();

        const errorMessageEl = errorMessageWrapperEl.querySelector('span');
        expect(errorMessageEl.textContent).toBe(errorMessages.VIN_FORMAT);
      });
    });

    test('No error message is displayed when the vin is in the accepted format.', async () => {
      const user = userEvent.setup();
      mountOptions.data = () => ({
        vin: '12345678901234567',
      });
      mountOptions.global.stubs.vinQuestion = false;
      const { container } = render(VinLookupComponent, mountOptions);
      const continueButton = container.querySelector(continueButtonQuerySelector);

      user.click(continueButton);
      await flushPromises();
      await waitFor(() => {
        const errorMessageWrapperEl = container.querySelector(errorMessageWrapperElSelector);
        expect(errorMessageWrapperEl).not.toBeVisible();

        const errorMessageEl = errorMessageWrapperEl.querySelector('span');
        expect(errorMessageEl.textContent).toBeFalsy();
      });
    });
  });

  describe('Navigation', () => {
    test('Click "Back", execute navigate with navigationScenario.CLICKED_BACK.', async () => {
      const user = userEvent.setup();
      const { container } = render(VinLookupComponent, mountOptions);
      const backButton = container.querySelector('[data-test-id="site-footer-back-button"]');

      await user.click(backButton);

      expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
      expect(mockRouter.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
    });

    test('Different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page.', async () => {
      const user = userEvent.setup();
      mountOptions.global.stubs.vinQuestion = false;
      getPartsOrQuestions.mockResponse = vehicleWithPartQuestionsMockResponse;
      lookupVehicleByVin.mockResponse.data.carId = 'Different Car Id';

      jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
        .mockResolvedValue(lookupVehicleByVin.mockResponse);
      jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
        .mockResolvedValue(getPartsOrQuestions.mockResponse);

      mountOptions.data = () => ({
        activeVehicleLookupAlertType: null,
        needToLookupVehicle: false,
        vehicleFromLookup: {
          carId: 'Different Car Id',
        },
        vin: mockValidVin,
      });
      const { container } = render(VinLookupComponent, mountOptions);

      const continueButton = container.querySelector(continueButtonQuerySelector);
      await user.click(continueButton);

      await flushPromises();
      await waitFor(() => {
        expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
        expect(mockRouter.navigate).toHaveBeenCalledWith(
          navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
          mockRoute,
          {},
          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true },
        );
      });
    });

    describe('Succesful navigateForward', () => {
      test('Vehicle with Part Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_PART_QUESTIONS', async () => {
        const user = userEvent.setup();
        mountOptions.global.stubs.vinQuestion = false;
        getPartsOrQuestions.mockResponse = vehicleWithPartQuestionsMockResponse;
        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
          .mockResolvedValue(lookupVehicleByVin.mockResponse);
        jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
          .mockResolvedValue(getPartsOrQuestions.mockResponse);

        const { container } = render(VinLookupComponent, mountOptions);

        const vinInput = container.querySelector(vinInputSelector);
        await user.type(vinInput, mockValidVin);

        const continueButton = container.querySelector(continueButtonQuerySelector);
        await user.click(continueButton);

        await flushPromises();
        await waitFor(() => {
          expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
          expect(mockRouter.navigate)
            .toHaveBeenCalledWith(
              navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
              mockRoute,
              {},
              {},
              { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
            );
        });
      });

      test('Vehicle with Multiple Parts. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE', async () => {
        const user = userEvent.setup();
        mountOptions.global.stubs.vinQuestion = false;
        getPartsOrQuestions.mockResponse = vehicleWithMultiplePartsMockResponse;
        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
          .mockResolvedValue(lookupVehicleByVin.mockResponse);
        jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
          .mockResolvedValue(getPartsOrQuestions.mockResponse);

        const { container } = render(VinLookupComponent, mountOptions);

        const vinInput = container.querySelector(vinInputSelector);
        await user.type(vinInput, mockValidVin);

        const continueButton = container.querySelector(continueButtonQuerySelector);
        await user.click(continueButton);

        await flushPromises();
        await waitFor(() => {
          expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
          expect(mockRouter.navigate)
            .toHaveBeenCalledWith(
              navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
              mockRoute,
              {},
              {},
              { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
            );
        });
      });

      test('Vehicle with Molding Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS', async () => {
        const user = userEvent.setup();
        mountOptions.global.stubs.vinQuestion = false;
        getPartsOrQuestions.mockResponse = vehicleWithMoldingQuestionsMockResponse;
        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
          .mockResolvedValue(lookupVehicleByVin.mockResponse);
        jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
          .mockResolvedValue(getPartsOrQuestions.mockResponse);

        const { container } = render(VinLookupComponent, mountOptions);

        const vinInput = container.querySelector(vinInputSelector);
        await user.type(vinInput, mockValidVin);

        const continueButton = container.querySelector(continueButtonQuerySelector);
        await user.click(continueButton);

        await flushPromises();
        await waitFor(() => {
          expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
          expect(mockRouter.navigate)
            .toHaveBeenCalledWith(
              navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
              mockRoute,
              {},
              {},
              { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
            );
        });
      });

      test('Vehicle with Capability Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS', async () => {
        const user = userEvent.setup();
        const store = useMainStore();
        mountOptions.global.stubs.vinQuestion = false;
        getPartsOrQuestions.mockResponse = vehicleWithCapabilityQuestionsMockResponse;

        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
          .mockResolvedValue(lookupVehicleByVin.mockResponse);
        jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
          .mockResolvedValue(getPartsOrQuestions.mockResponse);
        store.getCapabilityQuestions.mockResolvedValueOnce({ data: [] });

        const { container } = render(VinLookupComponent, mountOptions);

        const vinInput = container.querySelector(vinInputSelector);
        await user.type(vinInput, mockValidVin);

        const continueButton = container.querySelector(continueButtonQuerySelector);
        await user.click(continueButton);

        await flushPromises();
        await waitFor(() => {
          expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
          expect(mockRouter.navigate)
            .toHaveBeenCalledWith(
              navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
              mockRoute,
              {},
              {},
              { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
            );
        });
      });

      test('Vehicle no additional Parts or Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS', async () => {
        const user = userEvent.setup();
        mountOptions.global.stubs.vinQuestion = false;
        getPartsOrQuestions.mockResponse = vehicleWithNoAdditionalPartsOrQuestionsMockResponse;

        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
          .mockResolvedValue(lookupVehicleByVin.mockResponse);
        jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
          .mockResolvedValue(getPartsOrQuestions.mockResponse);

        const { container } = render(VinLookupComponent, mountOptions);

        const vinInput = container.querySelector(vinInputSelector);
        await user.type(vinInput, mockValidVin);

        const continueButton = container.querySelector(continueButtonQuerySelector);
        await user.click(continueButton);

        await flushPromises();
        await waitFor(() => {
          expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
          expect(mockRouter.navigate)
            .toHaveBeenCalledWith(
              navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
              mockRoute,
            );
        });
      });

      test("Selected vehicle VIN do not match vehicles (CarIDs) in our system then navigate forward to bailout page.", async () => {
        //Arrange
        const user = userEvent.setup();
        lookupVehicleByVin.mockResponse.data.error = true;

        jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
        .mockResolvedValue(lookupVehicleByVinError.mockResponse);

        mountOptions.data = () => ({
          needToLookupVehicle: true,
          bailout: true,
          vin: mockValidVin,
        });

        const { container } = render(VinLookupComponent, mountOptions);
        const continueButton = container.querySelector(continueButtonQuerySelector);
      await user.click(continueButton);

      await flushPromises();
      await waitFor(() => {
        expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
        expect(mockRouter.navigate).toHaveBeenCalledWith(
          navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
          mockRoute
        );
      });
    });
    });
  });
});