diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js index 296f62e11..316c9225d 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.spec.js +++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js @@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils'; import vehicleBanner from './vehicle-banner'; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { storeActions } from "@/constants/store-actions"; +import { nextTick } from 'vue'; describe('vehicleBanner', () => { const $store = { @@ -44,7 +45,7 @@ describe('vehicleBanner', () => { ] }; - test('renders the blurrycar image when vehicleImageSrc is not present', async () => { + test('renders the blurrycar image when vehicleImageSrc is not present', () => { // Arrange const mountOptions = getMountOptions(actionList); mountOptions.global.mocks = { @@ -60,7 +61,7 @@ describe('vehicleBanner', () => { wrapper.unmount(); }); - test('does not render the blurrycar image when vehicleImageSrc exists', async () => { + test('does not render the blurrycar image when vehicleImageSrc exists', () => { // Arrange const mountOptions = getMountOptions(actionList); mountOptions.global.mocks = { @@ -77,9 +78,7 @@ describe('vehicleBanner', () => { } }); // Assert - setTimeout(() => { - expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); - }, 500); + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); wrapper.unmount(); }); @@ -98,13 +97,12 @@ describe('vehicleBanner', () => { } }); // Assert - setTimeout(() => { - expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); - }, 500); + await nextTick(); + expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); wrapper.unmount(); }); - test('does not render the blurrycar image when a YMMS object is found', async () => { + test('receives a carId when a YMMS object is found', async () => { // Arrange $store.state.order.vehicle.year = "2019" $store.state.order.vehicle.make = "acura" @@ -120,14 +118,12 @@ describe('vehicleBanner', () => { ...mountOptions }); // Assert - setTimeout(() => { - expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); - }, 500); + await nextTick(); + expect(wrapper.vm.$data.carId.length).toBeGreaterThan(0); wrapper.unmount(); - }); - test('does not render the blurrycar image when a VIN is found', async () => { + test('receives a carId when a VIN is found', async () => { // Arrange $store.state.order.vehicle.vin = "1J4GW58S4XC541166"; const mountOptions = getMountOptions(actionList); @@ -140,9 +136,9 @@ describe('vehicleBanner', () => { ...mountOptions }); // Assert - setTimeout(() => { - expect(wrapper.find('img').attributes('class')).not.toContain('blurrycar'); - }, 500); + await nextTick(); + expect(wrapper.vm.$data.carId.length).toBeGreaterThan(0); wrapper.unmount(); }); + }); diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue index 05c6df60d..fbf049819 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.vue +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -53,14 +53,14 @@ export default { methods: { getCarIdWithYmms(ymms) { // retrieve carId with YMMS object this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_YMMS, ymms).then((response) => { - const carId = response.data[0].CarId; - this.getVehicleImage(carId) + this.carId = response.data[0].CarId; + this.getVehicleImage(this.carId) }); }, getCarIdWithVin(vin) { // retrieve carId with VIN string this.dispatchNonBlockingStoreAction(this.storeActions.LOOKUP_VEHICLE_BY_VIN, vin).then((response) => { - const carId = response.data[0].CarId; - this.getVehicleImage(carId) + this.carId = response.data[0].CarId; + this.getVehicleImage(this.carId) }); }, getVehicleImage(carId) { // look up evox with carId