diff --git a/jest.config.js b/jest.config.js index f2c8b5f28..e93300967 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,7 +6,7 @@ module.exports = { transform: { "^.+\\.vue$": "vue-jest" }, moduleFileExtensions: ["js", "vue"], collectCoverageFrom: [ - "src/**/*.{js,vue}", + //"src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", @@ -22,7 +22,7 @@ module.exports = { // TODO REMOVE THESE AFTER WRITING UNIT TESTS "!src/layouts/address-lookup/address-lookup.vue", "!src/layouts/address-lookup/customer-questions/customer-questions.vue", - "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", + "src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", "!src/layouts/address-vehicles/address-vehicles.vue", "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue", "!src/ux-components/alert\alert.vue", 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 new file mode 100644 index 000000000..11a0aa4ed --- /dev/null +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js @@ -0,0 +1,130 @@ +import { shallowMount } from "@vue/test-utils"; +import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions"; + +const addressModel = { + streetAddress: "", + city: "", + state: "", + zipCode: "", +} + +describe("addressQuestions.vue", () => { + + it("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => { + // Arrange + const wrapper = shallowMount(addressQuestions); + + // Act + const streetAddress = wrapper.findComponent({ ref: 'autocomplete' }); + const city = wrapper.findComponent({ ref: 'city' }); + const state = wrapper.findComponent({ ref: 'state' }); + const zipCode = wrapper.findComponent({ ref: 'zipCode' }); + + // Assert + expect(streetAddress.exists()).toBe(true); + expect(city.exists()).toBe(true); + expect(state.exists()).toBe(true); + expect(zipCode.exists()).toBe(true); + + }); + + it("Should call the watch handler for the address model when the addressModel is changed", async () => { + // Arrange + const wrapper = shallowMount(addressQuestions, { + propsData: { + modelValue: addressModel, + }, + }); + wrapper.vm.displayNoMatchWarning = true; + + // Act + const newAddressModel = { + streetAddress: "foo", + city: "foo", + state: "foo", + zipCode: "55555", + }; + + wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel); + + // Assert + expect(wrapper.vm.addressModel.handler).toHaveBeenCalled; + + }); + + it("Should set this.displayNoMatchWarning to false, if the model changes when it is set to true", async () => { + // Arrange + const wrapper = shallowMount(addressQuestions, { + propsData: { + modelValue: addressModel, + }, + }); + wrapper.vm.displayNoMatchWarning = true; + + // Act + const newAddressModel = { + streetAddress: "foo", + city: "", + state: "", + zipCode: "", + }; + + // Act + wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel); + + // Assert + expect(wrapper.vm.displayNoMatchWarning === false); + + }); + + it("Should it not should set this.displayNoMatchWarning to false when it is set to true, if the model if prepopulated", async () => { + // Arrange + const wrapper = shallowMount(addressQuestions, { + propsData: { + modelValue: addressModel, + }, + }); + wrapper.vm.displayNoMatchWarning = true; + + // Act + const newAddressModel = { + streetAddress: "foo", + city: "foo", + state: "foo", + zipCode: "55555", + }; + + // Act + wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel); + + // Assert + expect(wrapper.vm.displayNoMatchWarning === true); + + }); + + it("Should it set this.showAddressFields to true when the model is prepopulated", async () => { + // Arrange + const wrapper = shallowMount(addressQuestions, { + propsData: { + modelValue: addressModel, + }, + }); + wrapper.vm.displayNoMatchWarning = true; + + // Act + const newAddressModel = { + streetAddress: "foo", + city: "foo", + state: "foo", + zipCode: "55555", + }; + + // Act + wrapper.vm.setupAddressLookup(); + + // Assert + expect(wrapper.vm.showAddressFields).toBe(true); + + }); + +}) \ No newline at end of file diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js1 b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js1 deleted file mode 100644 index e69de29bb..000000000 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 f188cf214..61062ba47 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 @@ -215,12 +215,12 @@ export default ({ // Standard place_changed event handling const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress); - // Wrapping the addressField1 element in the Google Address Autocomplete object - // will cause "autocomplete='off'" which Chrome completely ignores. This event - // handler will set the value to something arbitrary so autofill doesn't work. - // https://stackoverflow.com/a/30976223 - addressField1.addEventListener("focus", () => { - addressField1.setAttribute("autocomplete", "do-not-autofill"); + // Wrapping the addressField1 element in the Google Address Autocomplete object + // will cause "autocomplete='off'" which Chrome completely ignores. This event + // handler will set the value to something arbitrary so autofill doesn't work. + // https://stackoverflow.com/a/30976223 + addressField1.addEventListener("focus", () => { + addressField1.setAttribute("autocomplete", "do-not-autofill"); // Make place results box stick to the input on scroll const streetAddressField = document.getElementById("streetAddressField"); @@ -228,7 +228,7 @@ export default ({ if (autocompleteResultsContainer) { streetAddressField.appendChild(autocompleteResultsContainer); } - + }) addressField1.onchange = function() { @@ -325,7 +325,7 @@ export default ({ watch: { addressModel: { handler(newValue) { - // The first time the address model changes is w + // The first time the address model changes is when the page first loads if (!newValue.city && !newValue.state && !newValue.zipCode) {