moved all unit tests to license-plate-lookup.spec.js

src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js

@@ -1,63 +0,0 @@
-/* eslint-env jest */
-import { getDamageString } from '@/helpers/damage-helper';
-import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import { RouterLinkStub } from '@vue/test-utils';
-import { render } from '@testing-library/vue';
-import '@testing-library/jest-dom';
-import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts.vue';
-
-jest.mock('@/helpers/damage-helper');
-
-const mountOptions = {
-    global: {
-        stubs: {
-            RouterLink: RouterLinkStub,
-        },
-        mixins: [
-            {
-                methods: {
-                    getCmsContent: jest.fn(() => ''),
-                    getFooterInfoBoxHeight: jest.fn(() => 80),
-                    cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
-                },
-            },
-        ],
-    },
-};
-
-describe('license-plate-lookup-alerts.vue', () => {
-    test('VehicleNotFoundAlert is displayed on the screen', () => {
-        // Arrange
-        mountOptions.props = {
-            activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
-        };
-
-        // Act
-        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
-
-        // Assert
-        expect(VehicleNotFoundAlert).toBeVisible();
-        expect(VehicleNotMatchedAlert).toEqual(null);
-    });
-
-    test('VehicleNotMatchedAlert is displayed on the screen', () => {
-        // Arrange
-        getDamageString.mockImplementation(() => 'Mock Damage String');
-        mountOptions.props = {
-            activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
-        };
-
-        // Act
-        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
-
-        // Assert
-        expect(VehicleNotMatchedAlert).toBeVisible();
-        expect(VehicleNotFoundAlert).toEqual(null);
-    });
-
-
-})

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -1,6 +1,5 @@
 // Components
 import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
-import licensePlateQuestion from "@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue";
 
 // Supporting files
 import { shallowMount } from '@vue/test-utils';
@@ -22,16 +21,6 @@ jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
 }));
 
-// Mock damage helper
-jest.mock("@/helpers/damage-helper", () => ({
-    isGlassAvailableForCarId: () => {
-        return false;
-    },
-    getDamageString: () => {
-        return "damage string";
-    },
-}));
-
 describe("license-plate-lookup.vue", () => {
     test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
         //Arrange
@@ -97,8 +86,6 @@ describe("navigation", () => {
   });
 
 function setupMocks({
-    licensePlateQuestionCmsContent = {},
-    licensePlateQuestionInitialData = {},
     pageHeaderWidgetHeaderText = {},
     pageFooterWidgetCmsContent = {},
     mountOptionsMockData = {},
@@ -111,7 +98,6 @@ function setupMocks({
     const apiResponses = {
       cmsContent: {
         SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
-        LicensePlateQuestion: licensePlateQuestionCmsContent,
         VehicleBannerWidget: {
           GenericVehicleImage:
             `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
@@ -123,15 +109,12 @@ function setupMocks({
         SiteFooterWidget: pageFooterWidgetCmsContent,
         
       },
-      licensePlateQuestionInitialData: licensePlateQuestionInitialData,
     };
   
     mountOptionsMockData = {
         ...mountOptionsMockData,
         router: {
             navigate: jest.fn(),
-            navigateWithoutSaving: jest.fn(),
-            navigateWithSaving: jest.fn(),
         },
         store: {
             getters: {
@@ -146,27 +129,16 @@ function setupMocks({
         },
     };
 
-    
     const apiPromise = Promise.resolve(apiResponses);
   
     settleAllPromises.mockImplementation(() => apiPromise);
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-  
-    //Mock make question methods
-    licensePlateQuestion.methods = {
-      loadInitialData: jest.fn(),
-      initializeComponent: jest.fn(),
-    };
-  
+    
     const mountOptions = getMountOptions(mountOptionsMockData);
-    
+
     const wrapper = shallowMount(licensePlateLookup, mountOptions);
-  
-    const licensePlateQuestionWrapper = wrapper.findComponent({ name: "licensePlateQuestion" });
-    licensePlateQuestionWrapper.vm.initializeComponent =
-      licensePlateQuestion.methods.initializeComponent;
-    
+
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     
     return { wrapper, apiPromise };
-  }  
+}

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -10,8 +10,22 @@
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <licensePlateLookupAlerts
+        <alert
+          v-if="isVehicleNotFoundVisible"
+          cmsWidgetName="AlertVinNotFoundWidget"
           :activeAlertType="activeVehicleLookupAlertType"
+          alertClass="alert-danger"
+          class="mb-5"
+          ref="vehicleNotFoundAlert"
+        />
+        <alert
+          v-if="isVehicleNotMatchedVisible"
+          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+          :activeAlertType="activeVehicleLookupAlertType"
+          :manualHeadline="header"
+          :manualCopy="body"
+          alertClass="alert-warning"
+          class="mb-5"
         />
         <textboxQuestion
           cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -50,6 +64,7 @@ import { useMainStore } from '@/store';
 import { defineRule } from 'vee-validate';
 import { regex, required } from '@/helpers/validation-rules';
 import { errorMessages } from '@/constants/error-messages';
+import { getDamageString } from "@/helpers/damage-helper";
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -59,7 +74,7 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
 import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
-import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 // Define Validation Rules
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
@@ -77,7 +92,7 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    licensePlateLookupAlerts
+    alert,
   },
   setup() {
     const mainStore = useMainStore();
@@ -90,6 +105,8 @@ export default {
       vehicleFromLookup: null,
       licensePlate: null, 
       registrationZipCode: null,
+      isVehicleNotFoundVisible: false,
+      isVehicleNotMatchedVisible: false,
    };
   },
   provide() {
@@ -134,6 +151,7 @@ export default {
       const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
 
       if (vehicleLookupResponse.error) {
+        this.isVehicleNotFoundVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
         this.resetVehicleFromLookup();
         this.$refs.siteFooter.removeLoader();
@@ -142,8 +160,9 @@ export default {
 
       this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
       if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
+        this.isVehicleNotMatchedVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-
+        
         const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
 
         this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
@@ -161,5 +180,32 @@ export default {
     },
     resetDependentState() {},
   },
+  computed: {
+      header() {
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
+            .replaceAll('{custom:damage}', getDamageString())
+        );
+      },
+      body() {
+        let year = '';
+        let make = '';
+        let model = '';
+  
+        if (this.vehicleFromLookup) {
+          year = this.vehicleFromLookup.year;
+          make = this.vehicleFromLookup.make;
+          model = this.vehicleFromLookup.model;
+        }
+  
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
+            .replaceAll('{custom:damage}', getDamageString())
+            .replaceAll('{custom:vinlookupYear}', year)
+            .replaceAll('{custom:vinlookupMake}', make)
+            .replaceAll('{custom:vinlookupModel}', model)
+        );
+      },
+    },
 };
 </script>