503 lines
19 KiB
JavaScript
503 lines
19 KiB
JavaScript
// Components
|
|
import addressQuestions from "@/common-components/address-questions/address-questions";
|
|
|
|
// Supporting Files
|
|
import { mount, shallowMount } from "@vue/test-utils";
|
|
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
|
|
|
let autocompleteElement;
|
|
describe("address-questions.vue", () => {
|
|
beforeEach(() => {
|
|
// Create the `addressField1` element (autocomplete's input)
|
|
autocompleteElement = document.createElement("input");
|
|
autocompleteElement.getPlace = jest.fn();
|
|
document.getElementById = jest.fn().mockReturnValue(autocompleteElement);
|
|
});
|
|
|
|
describe("initial state", () => {
|
|
test("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({});
|
|
|
|
// 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);
|
|
});
|
|
|
|
});
|
|
|
|
describe("happy paths", () => {
|
|
test("full street address is passed in => address fields are displayed", async () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
props: {
|
|
modelValue: {
|
|
streetAddress: "12345 Test Road",
|
|
city: "Tests",
|
|
state: "OH",
|
|
zipCode: "12312",
|
|
},
|
|
},
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
const cityField = wrapper.findComponent({ ref: "city" });
|
|
const stateField = wrapper.findComponent({ ref: "state" });
|
|
const zipField = wrapper.findComponent({ ref: "zipCode" });
|
|
expect(cityField.exists()).toBeTruthy();
|
|
expect(cityField.isVisible()).toBeTruthy();
|
|
expect(stateField.exists()).toBeTruthy();
|
|
expect(cityField.isVisible()).toBeTruthy();
|
|
expect(zipField.exists()).toBeTruthy();
|
|
expect(cityField.isVisible()).toBeTruthy();
|
|
});
|
|
|
|
test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({});
|
|
await wrapper.setData({
|
|
addressModel: {
|
|
streetAddress: "123 Test Street",
|
|
},
|
|
});
|
|
|
|
const selectedPlace = {
|
|
address_components: [
|
|
{
|
|
long_name: "1234",
|
|
short_name: "1234",
|
|
types: ["street_number"],
|
|
},
|
|
{
|
|
long_name: "Test Road",
|
|
short_name: "Test Road",
|
|
types: ["route"],
|
|
},
|
|
{
|
|
long_name: "East Columbus",
|
|
short_name: "Columbus",
|
|
types: ["neighborhood", "political"],
|
|
},
|
|
{
|
|
long_name: "Columbus",
|
|
short_name: "Columbus",
|
|
types: ["locality", "political"],
|
|
},
|
|
{
|
|
long_name: "Franklin County",
|
|
short_name: "Franklin County",
|
|
types: ["administrative_area_level_2", "political"],
|
|
},
|
|
{
|
|
long_name: "Ohio",
|
|
short_name: "OH",
|
|
types: ["administrative_area_level_1", "political"],
|
|
},
|
|
{
|
|
long_name: "United States",
|
|
short_name: "US",
|
|
types: ["country", "political"],
|
|
},
|
|
{
|
|
long_name: "43215",
|
|
short_name: "43215",
|
|
types: ["postal_code"],
|
|
},
|
|
],
|
|
};
|
|
|
|
// Act
|
|
autocompleteElement.dispatchEvent(
|
|
new CustomEvent("place_changed", { detail: selectedPlace })
|
|
);
|
|
|
|
// Assert
|
|
wrapper.vm.$nextTick(function () {
|
|
const addressModel = wrapper.vm.addressModel;
|
|
expect(addressModel.streetAddress).toEqual("1234 Test Road");
|
|
expect(addressModel.city).toEqual("Columbus");
|
|
expect(addressModel.state).toEqual("OH");
|
|
expect(addressModel.zipCode).toEqual("43215");
|
|
});
|
|
});
|
|
|
|
test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => {
|
|
// Arrange
|
|
let changeEventCallbackFunction;
|
|
autocompleteElement.addEventListener = jest
|
|
.fn()
|
|
.mockImplementation((eventName, callbackFunction) => {
|
|
if (eventName == "change") {
|
|
changeEventCallbackFunction = callbackFunction;
|
|
}
|
|
});
|
|
|
|
const { wrapper } = setupMocks({
|
|
querySelectorFunction: function (query) {
|
|
if (query == ".pac-container .pac-item") {
|
|
let element = document.createElement("div");
|
|
element.textContent = "123 Test Street";
|
|
return element;
|
|
}
|
|
},
|
|
geocoderResult: {
|
|
address_components: [
|
|
{
|
|
long_name: "1234",
|
|
short_name: "1234",
|
|
types: ["street_number"],
|
|
},
|
|
{
|
|
long_name: "Test Road",
|
|
short_name: "Test Road",
|
|
types: ["route"],
|
|
},
|
|
{
|
|
long_name: "East Columbus",
|
|
short_name: "Columbus",
|
|
types: ["neighborhood", "political"],
|
|
},
|
|
{
|
|
long_name: "Columbus",
|
|
short_name: "Columbus",
|
|
types: ["locality", "political"],
|
|
},
|
|
{
|
|
long_name: "Franklin County",
|
|
short_name: "Franklin County",
|
|
types: ["administrative_area_level_2", "political"],
|
|
},
|
|
{
|
|
long_name: "Ohio",
|
|
short_name: "OH",
|
|
types: ["administrative_area_level_1", "political"],
|
|
},
|
|
{
|
|
long_name: "United States",
|
|
short_name: "US",
|
|
types: ["country", "political"],
|
|
},
|
|
{
|
|
long_name: "43215",
|
|
short_name: "43215",
|
|
types: ["postal_code"],
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
|
|
let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
|
|
expect(noMatchAlert.exists()).toBeFalsy();
|
|
expect(verificationAlert.exists()).toBeFalsy();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Act
|
|
changeEventCallbackFunction();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
const addressModel = wrapper.vm.addressModel;
|
|
expect(addressModel.streetAddress).toEqual("1234 Test Road");
|
|
expect(addressModel.city).toEqual("Columbus");
|
|
expect(addressModel.state).toEqual("OH");
|
|
expect(addressModel.zipCode).toEqual("43215");
|
|
});
|
|
});
|
|
|
|
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;
|
|
autocompleteElement.addEventListener = jest
|
|
.fn()
|
|
.mockImplementation((eventName, callbackFunction) => {
|
|
if (eventName == "change") {
|
|
changeEventCallbackFunction = callbackFunction;
|
|
}
|
|
});
|
|
|
|
const { wrapper } = setupMocks({});
|
|
|
|
let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
|
|
expect(noMatchAlert.exists()).toBeFalsy();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Act
|
|
changeEventCallbackFunction();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.displayNoMatchWarning).toBeTruthy();
|
|
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
|
|
expect(noMatchAlert.exists()).toBeTruthy();
|
|
expect(noMatchAlert.isVisible()).toBeTruthy();
|
|
});
|
|
|
|
test("user enters address that yields autocomplete results, but doesn't select => show verification alert", async () => {
|
|
// Arrange
|
|
let changeEventCallbackFunction;
|
|
autocompleteElement.addEventListener = jest
|
|
.fn()
|
|
.mockImplementation((eventName, callbackFunction) => {
|
|
if (eventName == "change") {
|
|
changeEventCallbackFunction = callbackFunction;
|
|
}
|
|
});
|
|
|
|
const { wrapper } = setupMocks({
|
|
querySelectorFunction: function (query) {
|
|
if (query == ".pac-container .pac-item") {
|
|
let element = document.createElement("div");
|
|
element.textContent = "123 Test Street";
|
|
return element;
|
|
}
|
|
},
|
|
});
|
|
|
|
let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
|
|
let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
|
|
expect(noMatchAlert.exists()).toBeFalsy();
|
|
expect(verificationAlert.exists()).toBeFalsy();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Act
|
|
changeEventCallbackFunction();
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
|
|
expect(wrapper.vm.displayVerificationWarning).toBeTruthy();
|
|
expect(verificationAlert.exists()).toBeTruthy();
|
|
expect(verificationAlert.isVisible()).toBeTruthy();
|
|
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
|
|
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
|
|
expect(noMatchAlert.exists()).toBeFalsy();
|
|
});
|
|
|
|
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({});
|
|
|
|
await wrapper.setData({
|
|
matchFound: false,
|
|
});
|
|
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();
|
|
|
|
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({});
|
|
|
|
await wrapper.setData({
|
|
matchFound: false,
|
|
});
|
|
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();
|
|
|
|
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({});
|
|
|
|
await wrapper.setData({
|
|
matchFound: false,
|
|
});
|
|
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();
|
|
});
|
|
});
|
|
|
|
test("user sees noMatch warning and enters zip code => noMatch warning is removed", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({});
|
|
|
|
await wrapper.setData({
|
|
matchFound: false,
|
|
});
|
|
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();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
function setupMocks({
|
|
mountOptions,
|
|
props,
|
|
isShallowMount = true,
|
|
querySelectorFunction,
|
|
geocoderResult = ["1234 Test Street"],
|
|
}) {
|
|
|
|
const resultingMountOptions = getMountOptions({
|
|
...mountOptions,
|
|
router: {
|
|
navigate: jest.fn(),
|
|
navigate: jest.fn(),
|
|
},
|
|
loadScript: jest.fn().mockResolvedValue(),
|
|
});
|
|
|
|
window.google = {
|
|
maps: {
|
|
event: {
|
|
addListener: jest
|
|
.fn()
|
|
.mockImplementation((element, eventName, callbackFunction) => {
|
|
function interceptedCallbackFunction(e) {
|
|
callbackFunction(e.detail);
|
|
}
|
|
// selectedPlace = "Woogly";
|
|
element.addEventListener(eventName, interceptedCallbackFunction);
|
|
}),
|
|
removeListener: jest.fn(),
|
|
clearInstanceListeners: jest.fn(),
|
|
},
|
|
places: {
|
|
Autocomplete: jest.fn().mockImplementation((el) => el),
|
|
},
|
|
Geocoder: class Geocoder {
|
|
// constructor();
|
|
|
|
geocode(request, callback) {
|
|
callback([geocoderResult], true);
|
|
}
|
|
},
|
|
GeocoderStatus: {
|
|
OK: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
if (props) resultingMountOptions.propsData = props;
|
|
|
|
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");
|
|
else if (querySelectorFunction) {
|
|
result = querySelectorFunction(query);
|
|
}
|
|
|
|
return result ?? null;
|
|
});
|
|
|
|
return { wrapper };
|
|
}
|