Checkpoint - Unit tests fixed
This commit is contained in:
parent
c49476711e
commit
7a6de6e23d
2 changed files with 104 additions and 86 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue