jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-869 Reset alerts when continue is clicked, add test

Browse source
This commit is contained in:
Katie 2022-10-27 15:23:48 -04:00
parent 61ecd7cf9f
commit b63f77a7fc
3 changed files with 83 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/helpers/unit-test-helper.js
View file

@ -84,6 +84,7 @@ export const cookies = {
"skey": "12345" "skey": "12345"
}; };
// Removes test cookies for testing cookie-helper and order-helper
export function removeAllTestCookies() { export function removeAllTestCookies() {
Object.keys(cookies).forEach(key => { Object.keys(cookies).forEach(key => {
document.cookie = `${key}=;Max-Age=0;`; document.cookie = `${key}=;Max-Age=0;`;

121
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -12,24 +12,24 @@ jest.mock("@/store", () => ({
getters: { getters: {
vehicle: { vehicle: {
year: 2019, year: 2019,
carId: 'C00000' carId: "C00000",
}, },
order: { order: {
serviceLocation: { serviceLocation: {
zipCode: "45253" zipCode: "45253",
}, },
customer: { customer: {
emailAddress: "builddigitaltest@safelite.com" emailAddress: "builddigitaltest@safelite.com",
} },
}, },
payment: { payment: {
insuranceCoverage: { insuranceCoverage: {
isVerified: true isVerified: true,
} },
}, },
damage: { damage: {
glassToReplace: "windshield" glassToReplace: "windshield",
} },
}, },
})); }));
@ -38,7 +38,6 @@ jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(), settleAllPromises: jest.fn(),
})); }));
jest.mock("@/helpers/damage-helper", () => ({ jest.mock("@/helpers/damage-helper", () => ({
isGlassAvailableForCarId: jest.fn(() => { isGlassAvailableForCarId: jest.fn(() => {
return Promise.resolve(); return Promise.resolve();
@ -47,7 +46,6 @@ jest.mock("@/helpers/damage-helper", () => ({
getDamageString: jest.fn(), getDamageString: jest.fn(),
})); }));
describe("vin-lookup.vue", () => { describe("vin-lookup.vue", () => {
it("Should update the funnel-footer forward button when VIN is changed", (done) => { it("Should update the funnel-footer forward button when VIN is changed", (done) => {
//Arrange //Arrange
@ -59,7 +57,6 @@ describe("vin-lookup.vue", () => {
expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toBeCalled(); expect(wrapper.vm.$refs.funnelFooter.updateButtonText).toBeCalled();
done(); done();
}); });
}); });
it("Should call navigateForward() if the store carId matches the vin response carId and forward button is clicked", async () => { it("Should call navigateForward() if the store carId matches the vin response carId and forward button is clicked", async () => {
@ -68,7 +65,7 @@ describe("vin-lookup.vue", () => {
mockOutPromises({ carId: "C00000" }); mockOutPromises({ carId: "C00000" });
wrapper.vm.navigateForward = jest.fn(); wrapper.vm.navigateForward = jest.fn();
// Act // Act
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
//Assert //Assert
@ -78,14 +75,14 @@ describe("vin-lookup.vue", () => {
it("Should not call navigateForward() if the store carId does not match the vin response carId and forward button is clicked", async () => { it("Should not call navigateForward() if the store carId does not match the vin response carId and forward button is clicked", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
mockOutPromises({ carId: 'C11111' }); mockOutPromises({ carId: "C11111" });
wrapper.vm.vinTouched = true; wrapper.vm.vinTouched = true;
wrapper.vm.vin = ""; wrapper.vm.vin = "";
wrapper.vm.initialVin = "foo"; wrapper.vm.initialVin = "foo";
wrapper.vm.navigateForward = jest.fn(); wrapper.vm.navigateForward = jest.fn();
// Act // Act
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
//Assert //Assert
@ -95,13 +92,13 @@ describe("vin-lookup.vue", () => {
it("Should call navigateForward() if the store carId does not match the vin response carId but does match previously enterted carId and forward button is clicked", async () => { it("Should call navigateForward() if the store carId does not match the vin response carId but does match previously enterted carId and forward button is clicked", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
mockOutPromises({ carId: 'C11111' }); mockOutPromises({ carId: "C11111" });
wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise);
wrapper.vm.navigateForward = jest.fn(); wrapper.vm.navigateForward = jest.fn();
wrapper.vm.previouslyEnteredCarId = 'C11111'; wrapper.vm.previouslyEnteredCarId = "C11111";
// Act // Act
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
//Assert //Assert
@ -113,8 +110,8 @@ describe("vin-lookup.vue", () => {
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
const zipValidationApiResponse = { const zipValidationApiResponse = {
data: { data: {
isServiceable: false isServiceable: false,
} },
}; };
const zipPromise = Promise.resolve(zipValidationApiResponse); const zipPromise = Promise.resolve(zipValidationApiResponse);
@ -123,9 +120,9 @@ describe("vin-lookup.vue", () => {
wrapper.vm.setupUiForNonServiceableZip = jest.fn(); wrapper.vm.setupUiForNonServiceableZip = jest.fn();
wrapper.vm.navigateForward = jest.fn(); wrapper.vm.navigateForward = jest.fn();
wrapper.vm.previouslyEnteredCarId = 'new carId'; wrapper.vm.previouslyEnteredCarId = "new carId";
// Act // Act
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
//Assert //Assert
@ -140,9 +137,9 @@ describe("vin-lookup.vue", () => {
wrapper.vm.initialVin = "!foo"; wrapper.vm.initialVin = "!foo";
wrapper.vm.navigateForward = jest.fn(); wrapper.vm.navigateForward = jest.fn();
wrapper.vm.previouslyEnteredCarId = 'new carId'; wrapper.vm.previouslyEnteredCarId = "new carId";
// Act // Act
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
//Assert //Assert
@ -155,14 +152,14 @@ describe("vin-lookup.vue", () => {
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
customMountOptions: { customMountOptions: {
router: { router: {
navigateWithSaving: jest.fn() navigateWithSaving: jest.fn(),
} },
} },
}); });
wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
wrapper.setData({ wrapper.setData({
isCarIdDifferent: true, isCarIdDifferent: true,
isSelectedGlassAvailableForVehicle: false isSelectedGlassAvailableForVehicle: false,
}); });
// Act // Act
@ -170,8 +167,13 @@ describe("vin-lookup.vue", () => {
//Assert //Assert
expect(wrapper.vm.$router.navigateWithSaving).toBeCalledTimes(1); expect(wrapper.vm.$router.navigateWithSaving).toBeCalledTimes(1);
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, wrapper.vm.$route, expect.anything(), expect.anything()); expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalledWith(
}) navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
wrapper.vm.$route,
expect.anything(),
expect.anything()
);
});
test("carId matches => navigateForwardWithSingleCarMatch", async () => { test("carId matches => navigateForwardWithSingleCarMatch", async () => {
// Arrange // Arrange
@ -186,7 +188,7 @@ describe("vin-lookup.vue", () => {
//Assert //Assert
expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1); expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1);
}) });
test("selected glass is available for returned vehicle => navigateForwardWithSingleCarMatch", async () => { test("selected glass is available for returned vehicle => navigateForwardWithSingleCarMatch", async () => {
// Arrange // Arrange
@ -201,50 +203,73 @@ describe("vin-lookup.vue", () => {
//Assert //Assert
expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1); expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalledTimes(1);
}) });
}) });
describe("alerts", () => { describe("alerts", () => {
test("Zip is invalid => show AlertInvalidZipWidget", async () => { test("Zip is invalid => show AlertInvalidZipWidget", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
mockOutPromises({ isZipValid: false }); mockOutPromises({ isZipValid: false });
await wrapper.setData({serviceZipCode: "11111"}) await wrapper.setData({ serviceZipCode: "11111" });
// Act // Act
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
// Assert // Assert
expect(wrapper.vm.displayInvalidZipAlert).toEqual(true); expect(wrapper.vm.displayInvalidZipAlert).toEqual(true);
expect(wrapper.findComponent({ref: "alertInvalidZip"}).exists()).toBe(true); expect(wrapper.findComponent({ ref: "alertInvalidZip" }).exists()).toBe(true);
}) });
})
});
test("alerts are displayed and continue button is clicked with issues fixed => alerts are reset", async () => {
// Arrange
const { wrapper } = setupMocks({});
mockOutPromises({ isZipValid: true, isZipServiceable: true, carId: "CARID" });
await wrapper.setData({
displayInvalidZipAlert: true,
displayMatchedDifferentVehicleAlert: true,
displayNonServiceableZipAlert: true,
displayVinNotFoundAlert: true
});
// sanity check that there are alerts
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(4);
// Act
wrapper.vm.forwardButtonAction();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(0);
});
});
});
function setupMocks({ customMountOptions }) { function setupMocks({ customMountOptions }) {
const mountOptions = getMountOptions({ const mountOptions = getMountOptions({
...customMountOptions ...customMountOptions,
}); });
// Modify/augment default mount options // Modify/augment default mount options
mountOptions.global.mocks["$store"] = store; mountOptions.global.mocks["$store"] = store;
mountOptions.global.mixins = [mockMixin]; mountOptions.global.mixins = [mockMixin];
mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods mountOptions["attachTo"] = document.body; // append wrapper to document.body to test DOM methods
const wrapper = shallowMount(vinLookup, mountOptions); const wrapper = shallowMount(vinLookup, mountOptions);
mockOutStubFunctions(wrapper); mockOutStubFunctions(wrapper);
return { wrapper }; return { wrapper };
} }
function mockOutPromises({carId, isZipValid = true, isZipServiceable = true}) { function mockOutPromises({ carId, isZipValid = true, isZipServiceable = true }) {
const apiResponses = { const apiResponses = {
vehicleLookupResponse: { vehicleLookupResponse: {
carId: carId carId: carId,
}, },
zipCodeData: { zipCodeData: {
isValid: true, isServiceable: true, state: "OH" isValid: isZipValid,
} isServiceable: isZipServiceable,
state: "OH",
},
}; };
settleAllPromises.mockImplementation(() => apiResponses); settleAllPromises.mockImplementation(() => apiResponses);
@ -253,11 +278,13 @@ function mockOutPromises({carId, isZipValid = true, isZipServiceable = true}) {
function mockOutStubFunctions(wrapper) { function mockOutStubFunctions(wrapper) {
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn(); wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.getZipCodeData = jest.fn().mockReturnValue({ isValid: true, isServiceable: true, state: "OH" }); wrapper.vm.getZipCodeData = jest
.fn()
.mockReturnValue({ isValid: true, isServiceable: true, state: "OH" });
} }
const mockMixin = { const mockMixin = {
methods: { methods: {
getCmsContent: jest.fn(() => "placeholder CMS content"), getCmsContent: jest.fn(() => "placeholder CMS content"),
} },
} };

8
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -228,6 +228,8 @@ export default {
}, },
async forwardButtonAction() { async forwardButtonAction() {
this.resetAlerts();
// If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation // If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
if (!this.vinPopulatedOnPageLoad) { if (!this.vinPopulatedOnPageLoad) {
const vehicleLookupResponse = this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, { vin: this.vin }); const vehicleLookupResponse = this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, { vin: this.vin });
@ -337,6 +339,12 @@ export default {
return this.$refs.funnelFooter.removeLoader(); return this.$refs.funnelFooter.removeLoader();
}, },
resetAlerts() {
this.displayMatchedDifferentVehicleAlert = false;
this.displayNonServiceableZipAlert = false;
this.displayInvalidZipAlert = false;
this.displayVinNotFoundAlert = false;
},
async navigateForward(){ async navigateForward(){
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
this.$router.navigateWithSaving(this.navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, this.$route, {}, { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }); this.$router.navigateWithSaving(this.navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, this.$route, {}, { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true });