From f708551c883d99d70679ded51f4b466798e198e1 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 20 Jan 2023 09:21:34 -0500 Subject: [PATCH] Updated unit tests for most recent changes --- .../address-questions.spec.js | 164 ++++++++---------- .../address-questions/address-questions.vue | 3 +- 2 files changed, 70 insertions(+), 97 deletions(-) diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js index 0ab14d352..0c149413e 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js @@ -7,6 +7,7 @@ import { mount, shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { storeMutations } from "@/constants/store-mutations"; import store from "@/store"; +import { createImportSpecifier } from "typescript"; let autocompleteElement; describe("address-questions.vue", () => { @@ -18,7 +19,7 @@ describe("address-questions.vue", () => { }); describe("initial state", () => { - test("only street address field is shown", () => { + test("Should only show the street address field", () => { // Arrange const { wrapper } = setupMocks({}); @@ -58,7 +59,7 @@ describe("address-questions.vue", () => { expect(zipCode.exists()).toBe(true); }); - test("Should it set this.showAddressFields to true when the model is prepopulated", async () => { + test("Should set this.showAddressFields to true when the model is prepopulated", async () => { // Arrange // Act const newAddressModel = { @@ -305,38 +306,6 @@ describe("address-questions.vue", () => { }); describe("alerts", () => { - const places = [null, { address_components: null }, undefined, {}]; - test.each(places)( - "selected place/place properties is null => display verification alert", - async (place) => { - // Arrange - const { wrapper } = setupMocks({}); - await wrapper.setData({ - addressModel: { - streetAddress: "123 Test Street", - }, - }); - - const selectedPlace = place; - - // Act - autocompleteElement.dispatchEvent( - new CustomEvent("place_changed", { detail: selectedPlace }) - ); - await wrapper.vm.$nextTick(); - - // Assert - const verificationAlert = wrapper.findComponent({ - ref: "alertVerificationWarning", - }); - expect(verificationAlert.exists()).toBe(true); - expect(verificationAlert.isVisible()).toBe(true); - - const noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBe(false); - } - ); - test("user enters address that yields no autocomplete results => show noMatch alert", async () => { // Arrange let changeEventCallbackFunction; @@ -413,110 +382,112 @@ describe("address-questions.vue", () => { describe("noMatch alert is cleared on address change", () => { test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => { // Arrange - const { wrapper } = setupMocks({}); + const { wrapper } = setupMocks({ + props: { + modelValue: { + streetAddress: "LS", + city: "", + state: "", + zipCode: "", + }, + } + }); + // Initial condition to display noMatch warning await wrapper.setData({ matchFound: false, }); + + // Act + wrapper.vm.addressModel.streetAddress = "LJS"; await wrapper.vm.$nextTick(); - let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - streetAddress: "LS", - }); - // Assert - wrapper.vm.$nextTick(function () { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); + let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); + expect(noMatchAlert.exists()).toBeFalsy(); - noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); }); test("user sees noMatch warning and enters city => noMatch warning is removed", async () => { // Arrange - const { wrapper } = setupMocks({}); + const { wrapper } = setupMocks({ + props: { + modelValue: { + streetAddress: "", + city: "LS", + state: "", + zipCode: "", + }, + } + }); + // Initial condition to display noMatch warning await wrapper.setData({ matchFound: false, }); + + // Act + wrapper.vm.addressModel.city = "LJS"; await wrapper.vm.$nextTick(); - let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - city: "LS", - }); - // Assert - wrapper.vm.$nextTick(function () { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); + let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); + expect(noMatchAlert.exists()).toBeFalsy(); - noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); }); test("user sees noMatch warning and enters state => noMatch warning is removed", async () => { // Arrange - const { wrapper } = setupMocks({}); + const { wrapper } = setupMocks({ + props: { + modelValue: { + streetAddress: "", + city: "", + state: "LS", + zipCode: "", + }, + } + }); + // Initial condition to display noMatch warning await wrapper.setData({ matchFound: false, }); + + // Act + wrapper.vm.addressModel.state = "LJS"; await wrapper.vm.$nextTick(); - let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - state: "KO", - }); - // Assert - wrapper.vm.$nextTick(function () { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - - noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); + let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); + expect(noMatchAlert.exists()).toBeFalsy(); }); test("user sees noMatch warning and enters zip code => noMatch warning is removed", async () => { // Arrange - const { wrapper } = setupMocks({}); + const { wrapper } = setupMocks({ + props: { + modelValue: { + streetAddress: "", + city: "", + state: "", + zipCode: "LS", + }, + } + }); + // Initial condition to display noMatch warning await wrapper.setData({ matchFound: false, }); + + // Act + wrapper.vm.addressModel.zipCode = "LJS"; await wrapper.vm.$nextTick(); - let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeTruthy(); - expect(noMatchAlert.isVisible()).toBeTruthy(); - - // // Act - wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, { - zipCode: "12345", - }); - // Assert - wrapper.vm.$nextTick(function () { - expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); - - noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); - expect(noMatchAlert.exists()).toBeFalsy(); - }); + let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); + expect(noMatchAlert.exists()).toBeFalsy(); }); }); }); @@ -576,6 +547,7 @@ function setupMocks({ const wrapper = isShallowMount ? shallowMount(addressQuestions, resultingMountOptions) : mount(addressQuestions, resultingMountOptions); + document.querySelector = jest.fn().mockImplementation((query) => { let result = null; if (query == ".pac-container") result = document.createElement("div"); diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index f93112eed..1f2227cc3 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -375,8 +375,9 @@ export default { () => { // When the address model changes reset to "no attempted match" this.matchFound = null; + this.$nextTick(); }, - { deep: true } + { deep: true, flush: "post" } ); } },