Checkpoint - Unit tests fixed

This commit is contained in:
Leah Schumann 2024-05-15 07:20:20 -04:00
parent c49476711e
commit 7a6de6e23d
2 changed files with 104 additions and 86 deletions

View file

@ -292,90 +292,94 @@ describe("address-questions.vue", () => {
}); });
}); });
// test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => { test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => {
// // Arrange // Arrange
// let changeEventCallbackFunction; let changeEventCallbackFunction;
// autocompleteElement.addEventListener = jest autocompleteElement.addEventListener = jest
// .fn() .fn()
// .mockImplementation((eventName, callbackFunction) => { .mockImplementation((eventName, callbackFunction) => {
// if (eventName == "change") { if (eventName == "change") {
// changeEventCallbackFunction = callbackFunction; changeEventCallbackFunction = callbackFunction;
// } }
// }); });
// const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
// querySelectorFunction: function (query) { querySelectorFunction: function (query) {
// if (query == ".pac-container .pac-item") { if (query == ".pac-container .pac-item > .pac-item-query") {
// let element = document.createElement("div"); let element = document.createElement("div");
// element.textContent = "123 Test Street"; element.textContent = "123 Test Street";
// return element; return element;
// } } else if (query == ".pac-container .pac-item > span:nth-child(3)") {
// }, let element = document.createElement("div");
// geocoderResult: { element.textContent = "Columbus, OH 43230";
// address_components: [ return element;
// { }
// long_name: "1234", },
// short_name: "1234", geocoderResult: {
// types: ["street_number"], address_components: [
// }, {
// { long_name: "1234",
// long_name: "Test Road", short_name: "1234",
// short_name: "Test Road", types: ["street_number"],
// types: ["route"], },
// }, {
// { long_name: "Test Road",
// long_name: "East Columbus", short_name: "Test Road",
// short_name: "Columbus", types: ["route"],
// types: ["neighborhood", "political"], },
// }, {
// { long_name: "East Columbus",
// long_name: "Columbus", short_name: "Columbus",
// short_name: "Columbus", types: ["neighborhood", "political"],
// types: ["locality", "political"], },
// }, {
// { long_name: "Columbus",
// long_name: "Franklin County", short_name: "Columbus",
// short_name: "Franklin County", types: ["locality", "political"],
// types: ["administrative_area_level_2", "political"], },
// }, {
// { long_name: "Franklin County",
// long_name: "Ohio", short_name: "Franklin County",
// short_name: "OH", types: ["administrative_area_level_2", "political"],
// types: ["administrative_area_level_1", "political"], },
// }, {
// { long_name: "Ohio",
// long_name: "United States", short_name: "OH",
// short_name: "US", types: ["administrative_area_level_1", "political"],
// types: ["country", "political"], },
// }, {
// { long_name: "United States",
// long_name: "43215", short_name: "US",
// short_name: "43215", types: ["country", "political"],
// types: ["postal_code"], },
// }, {
// ], long_name: "43215",
// }, short_name: "43215",
// }); types: ["postal_code"],
},
],
},
});
// let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
// let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
// expect(noMatchAlert.exists()).toBeFalsy(); expect(noMatchAlert.exists()).toBeFalsy();
// expect(verificationAlert.exists()).toBeFalsy(); expect(verificationAlert.exists()).toBeFalsy();
// await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
// // Act // Act
// changeEventCallbackFunction(); changeEventCallbackFunction();
// await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
// // Assert // Assert
// const addressModel = wrapper.vm.addressModel; const addressModel = wrapper.vm.addressModel;
// expect(addressModel.streetAddress).toEqual("1234 Test Road"); expect(addressModel.streetAddress).toEqual("1234 Test Road");
// expect(addressModel.city).toEqual("Columbus"); expect(addressModel.city).toEqual("Columbus");
// expect(addressModel.state).toEqual("OH"); expect(addressModel.state).toEqual("OH");
// expect(addressModel.zipCode).toEqual("43215"); expect(addressModel.zipCode).toEqual("43215");
// }); });
}); });
describe("alerts", () => { describe("alerts", () => {
@ -422,10 +426,14 @@ describe("address-questions.vue", () => {
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
querySelectorFunction: function (query) { querySelectorFunction: function (query) {
if (query == ".pac-container .pac-item") { if (query == ".pac-container .pac-item > .pac-item-query") {
let element = document.createElement("div"); let element = document.createElement("div");
element.textContent = "123 Test Street"; element.textContent = "123 Test Street";
return element; return element;
} else if (query == ".pac-container .pac-item > span:nth-child(3)") {
let element = document.createElement("div");
element.textContent = "Columbus, OH 43230";
return element;
} }
}, },
}); });

View file

@ -266,20 +266,33 @@ export default {
// When either of the two enter keys or the tab key are pressed // When either of the two enter keys or the tab key are pressed
if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
const firstNameField = document.getElementById("firstName");
// Grab the selected item // Grab the selected item
const selectedItem = document.querySelector(".pac-item-selected"); const selectedItem = document.querySelector(".pac-item-selected");
if (selectedItem == null) { if (selectedItem == null) {
// If there is no selected item, fill-in the address using first item from the list. // If there is no selected item, fill-in the address using first item from the list.
this.fillInAddressUsingFirstItem(); this.fillInAddressUsingFirstItem();
firstNameField.focus();
} }
} else { } else {
return; return;
} }
}); });
this.addressField1.addEventListener("change", () => {
// If a match has been previously attempted then do nothing
if (this.matchFound !== null) {
return;
}
// Get the address that the user clicked on (if any)
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) {
// Fill-in the address using first item in the list.
this.fillInAddressUsingFirstItem();
}
});
}, },
findAddressComponentByType(place, componentName, componentLength) { findAddressComponentByType(place, componentName, componentLength) {
const component = place.address_components.find((component) => const component = place.address_components.find((component) =>
@ -388,7 +401,6 @@ export default {
// Fill-in the address using first item in the list. // Fill-in the address using first item in the list.
const item = document.querySelector(".pac-container .pac-item > .pac-item-query"); const item = document.querySelector(".pac-container .pac-item > .pac-item-query");
const item2 = document.querySelector(".pac-container .pac-item > span:nth-child(3)"); const item2 = document.querySelector(".pac-container .pac-item > span:nth-child(3)");
//#streetAddressField > div.pac-container.pac-logo > div:nth-child(1) > span:nth-child(3)
if (item != null) { if (item != null) {
let firstResult = `${item.textContent}, ${item2.textContent}`; let firstResult = `${item.textContent}, ${item2.textContent}`;
@ -401,10 +413,8 @@ export default {
}, },
function (results, status) { function (results, status) {
if (status === window.google.maps.GeocoderStatus.OK) { if (status === window.google.maps.GeocoderStatus.OK) {
console.log(results[0]);
self.fillInAddress(results[0]);
self.displayVerificationWarning = true; self.displayVerificationWarning = true;
self.fillInAddress(results[0]);
} }
} }
); );