Working on newly discovered defects related to address-questions show all field logic

This commit is contained in:
Leah Schumann 2023-06-22 09:17:52 -04:00
parent dc309e1dae
commit 902d2a10b4
6 changed files with 66 additions and 43 deletions

View file

@ -7,7 +7,6 @@ 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", () => {
@ -134,22 +133,19 @@ describe("address-questions.vue", () => {
});
test("Should set this.showAddressFields to true when the model is prepopulated", async () => {
// Arrange
// Act
const newAddressModel = {
streetAddress: "foo",
city: "foo",
state: "foo",
zipCode: "55555",
};
const wrapper = shallowMount(addressQuestions, {
propsData: {
modelValue: newAddressModel,
// Arrange / Act
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "foo",
city: "foo",
state: "foo",
zipCode: "55555",
},
},
});
// Act
wrapper.vm.setupAddressLookup();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.showAddressFields).toBe(true);

View file

@ -237,9 +237,9 @@ export default {
this.fillInAddress
);
// When the Street Address textbox receives focus,
// append the search results list container to the bottom of the textbox
// and disable browser autofill
// When the Street Address textbox receives focus,
// append the search results list container to the bottom of the textbox
// and disable browser autofill
this.addressField1.addEventListener("focus", (e) => {
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
@ -284,9 +284,7 @@ export default {
}
// Get the address that the user clicked on (if any)
const clickedAddress = document.querySelector(
".pac-container .pac-item:hover"
);
const clickedAddress = document.querySelector(".pac-container .pac-item:hover");
// If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
if (clickedAddress === null) {
@ -365,24 +363,39 @@ export default {
this.displayVerificationWarning = false;
},
unloadAutocomplete() {
window.google.maps.event.removeListener(this.autocompleteListener);
window.google.maps.event.clearInstanceListeners(this.autocomplete);
this.addressField1.onchange = null;
if (this.autocompleteListener && this.autocomplete) {
window.google.maps.event.removeListener(this.autocompleteListener);
this.autocompleteListener = null;
const pacContainer = document.querySelector(".pac-container");
if (pacContainer) {
pacContainer.remove();
window.google.maps.event.clearInstanceListeners(this.autocomplete);
this.autocomplete = null;
this.addressField1.onchange = null;
const pacContainer = document.querySelector(".pac-container");
if (pacContainer) {
pacContainer.remove();
}
}
}
},
},
mounted() {
// If we already have a full address, show it
this.showAddressFields = this.addressModel.streetAddress &&
this.addressModel.city &&
this.addressModel.state &&
this.addressModel.zipCode;
this.loadGooglePlacesAutocompleteScript();
console.log(this.showAddressFields);
debugger; // eslint-disable-line no-debugger
console.log(`this.addressModel.streetAddress ${this.addressModel.streetAddress}`);
console.log(`this.addressModel.city ${this.addressModel.city}`);
console.log(`this.addressModel.state ${this.addressModel.state}`);
console.log(`this.addressModel.zipCode ${this.addressModel.zipCode}`);
this.showAddressFields =
this.addressModel.streetAddress !== "" &&
this.addressModel.city !== "" &&
this.addressModel.state !== "" &&
this.addressModel.zipCode !== "";
console.log(this.showAddressFields);
if (!this.showAddressFields) {
this.loadGooglePlacesAutocompleteScript();
}
},
unmounted() {
this.unloadAutocomplete();
@ -405,7 +418,7 @@ export default {
this.addressModel.state = "";
this.addressModel.zipCode = "";
}
this.displayVerificationWarning = false;
// Only deep watch the Address Model after a failed match
@ -428,7 +441,6 @@ export default {
alert,
},
};
</script>
<style lang="scss">

View file

@ -301,11 +301,12 @@ export default {
);
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.email, false);
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_LOCATION,
{
zipCode: this.serviceZipCode,
state: resultMap.serviceZipValidationResponse.state,
zipCode: this.serviceZipCode,
zipCodeCtu: resultMap.serviceZipValidationResponse.zipCodeCtu,
},
false

View file

@ -96,7 +96,6 @@ export default {
<style lang="scss">
.appointment-type-question {
.list-card img {
height: auto;
width: 3.417rem;

View file

@ -325,8 +325,8 @@ export default {
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: resultMap.zipCodeData.state,
zipCode: this.serviceZipCode,
zipCodeCtu: resultMap.zipCodeData.zipCodeCtu,
},
false
@ -352,8 +352,8 @@ export default {
{
address: vehicleRegistrationInfo.address,
city: vehicleRegistrationInfo.city,
zipCode: vehicleRegistrationInfo.zipCode,
state: vehicleRegistrationInfo.state,
zipCode: vehicleRegistrationInfo.zipCode,
zipCodeCtu: zipCodeData.zipCodeCtu,
},
false
@ -362,8 +362,8 @@ export default {
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,
zipCode: this.serviceZipCode,
zipCodeCtu: zipCodeData.zipCodeCtu,
},
false

View file

@ -253,9 +253,16 @@ export const mutations = {
state.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType;
state.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
if (serviceLocationInfo.provider) {
state.order.serviceLocation.provider = serviceLocationInfo.provider;
state.order.serviceLocation.provider = {
providerNumber: serviceLocationInfo.provider?.providerNumber,
address: {
streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
city: serviceLocationInfo.provider?.address?.city,
state: serviceLocationInfo.provider?.address?.state,
zip: serviceLocationInfo.provider?.address?.zip
}
}
},
updateSchedule(state, scheduleInfo) {
if (scheduleInfo) {
@ -362,7 +369,15 @@ export const mutations = {
state.order.serviceLocation.appointmentType = null;
},
resetServiceLocationProvider(state) {
state.order.serviceLocation.provider = null;
state.order.serviceLocation.provider = {
providerNumber: null,
address: {
streetAddress: null,
city: null,
state: null,
zip: null
}
};
},
resetServiceLocationMobileAddress(state) {
state.order.serviceLocation.address = null;