jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/release/2022.06.23' into feature/vin-lookup-tests

Browse source
This commit is contained in:
Scott Kiener 2022-06-09 15:07:00 -04:00
commit a292ca810e
6 changed files with 610 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
jest.config.js
View file

@ -18,8 +18,7 @@ module.exports = {
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/part-questions/**/*.vue",
"!src/layouts/reveal/**/*.vue",
"!src/layouts/estimate/**/*.vue",
"!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", // there are limitations of async script loading and third party scripts that prevent full coverage from being met for this component.
"!src/layouts/estimate/**/*.vue",
// TODO REMOVE THESE AFTER WRITING UNIT TESTS
"!src/layouts/address-vehicles/address-vehicles.vue",
"!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",

2
src/common-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -80,7 +80,7 @@ export default {
.bar3 {
width: 14px;
height: 2px;
background-color: $blue-400;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}

2
src/common-components/loading-modal/loading-modal.vue
View file

@ -77,7 +77,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
z-index: 1055;
z-index: 1057;
width: 100%;
height: 100%;
overflow-x: hidden;

1
src/helpers/unit-test-helper.js
View file

@ -55,6 +55,7 @@ export function getMountOptions(mockData) {
mocks.$store = mockData.store;
mocks.$router = mockData.router;
mocks.$route = mockData.route;
mocks.$loadScript = mockData.loadScript;
const global = {
mocks: mocks,

694
src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js
View file

@ -1,130 +1,630 @@
import { shallowMount } from "@vue/test-utils";
// Components
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
import alert from "@/ux-components/alert/alert";
const addressModel = {
streetAddress: "",
city: "",
state: "",
zipCode: "",
}
// Supporting Files
import { mount, shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
describe("addressQuestions.vue", () => {
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);
})
it("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
// Arrange
const wrapper = shallowMount(addressQuestions);
describe("initial state", () => {
test("only street address field is shown", () => {
// 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
const streetAddressField = wrapper.findComponent({ ref: "autocomplete" });
const cityField = wrapper.findComponent({ ref: "city" });
const stateField = wrapper.findComponent({ ref: "state" });
const zipCodeField = 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);
expect(streetAddressField.exists()).toBe(true);
expect(streetAddressField.isVisible()).toBe(true);
expect(cityField.exists()).toBe(true);
expect(cityField.isVisible()).toBe(false);
expect(stateField.exists()).toBe(true);
expect(stateField.isVisible()).toBe(false);
expect(zipCodeField.exists()).toBe(true);
expect(zipCodeField.isVisible()).toBe(false);
const alerts = wrapper.findAllComponents(alert);
expect(alerts.length).toEqual(0);
})
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);
});
it("Should call the watch handler for the address model when the addressModel is changed", async () => {
// Arrange
const wrapper = shallowMount(addressQuestions, {
propsData: {
modelValue: addressModel,
test("Should set this.displayNoMatchWarning to false when it is set to true, if the model if prepopulated", async () => {
// Arrange
const newAddressModel = {
streetAddress: "foo",
city: "foo",
state: "foo",
zipCode: "55555",
};
const wrapper = shallowMount(addressQuestions, {
propsData: {
modelValue: newAddressModel,
},
});
await wrapper.setData({
displayNoMatchWarning: true
})
expect(wrapper.vm.displayNoMatchWarning).toBeTruthy();
// Act
wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, wrapper.vm.addressModel);
// Assert
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
});
test("Should it 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,
},
});
// Act
wrapper.vm.setupAddressLookup();
// Assert
expect(wrapper.vm.showAddressFields).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("full street address is passed in => don't load Google Autocomplete script", async () => {
// Arrange/Act
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "12345 Test Road",
city: "Tests",
state: "OH",
zipCode: "12312"
}
}
});
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.$loadScript).not.toHaveBeenCalled();
});
test("address field is focused => disable autocomplete", async () => {
// Arrange
let focusEventCallbackFunction;
autocompleteElement.addEventListener = jest.fn().mockImplementation((eventName, callbackFunction) => {
if (eventName == "focus") {
focusEventCallbackFunction = callbackFunction;
}
});
const { wrapper } = setupMocks({});
await wrapper.vm.$nextTick();
// Act
focusEventCallbackFunction();
await wrapper.vm.$nextTick();
// Assert
expect(autocompleteElement.getAttribute("autocomplete")).toEqual("do-not-autofill");
});
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
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, user chooses good result from autocomplete results => alerts are cleared", async () => {
// Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
addressModel: {
streetAddress: "123 Test Street"
},
displayVerificationWarning: true,
displayNoMatchWarning: true
})
let alerts = wrapper.findAllComponents(alert);
alerts.forEach(alert => expect(alert.isVisible()).toBeTruthy());
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 }));
await wrapper.vm.$nextTick();
// Assert
alerts = wrapper.findAllComponents(alert);
alerts.forEach(alert => expect(alert.exists()).toBeFalsy());
});
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"
},
displayVerificationWarning: true,
displayNoMatchWarning: true
})
let alerts = wrapper.findAllComponents(alert);
alerts.forEach(alert => expect(alert.isVisible()).toBeTruthy());
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 enters city => noMatch warning is removed", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.setData({
displayNoMatchWarning: true
});
wrapper.vm.displayNoMatchWarning = true;
await wrapper.vm.$nextTick();
let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(noMatchAlert.exists()).toBeTruthy();
expect(noMatchAlert.isVisible()).toBeTruthy();
// Act
const newAddressModel = {
streetAddress: "foo",
city: "foo",
state: "foo",
zipCode: "55555",
};
wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, newAddressModel);
wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
city: "Somewhere"
})
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.addressModel.handler).toHaveBeenCalled;
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({});
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.setData({
displayNoMatchWarning: true
});
wrapper.vm.displayNoMatchWarning = true;
// Act
const newAddressModel = {
streetAddress: "foo",
city: "",
state: "",
zipCode: "",
};
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, newAddressModel);
wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
state: "KO"
})
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.displayNoMatchWarning === false);
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(noMatchAlert.exists()).toBeFalsy();
});
});
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,
},
test("user sees noMatch warning and enters zip code => noMatch warning is removed", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.setData({
displayNoMatchWarning: true
});
wrapper.vm.displayNoMatchWarning = true;
// Act
const newAddressModel = {
streetAddress: "foo",
city: "foo",
state: "foo",
zipCode: "55555",
};
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, newAddressModel);
wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
zipCode: "12345"
})
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.displayNoMatchWarning === true);
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"] }) {
store.commit(storeMutations.RESET_STATE);
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",
};
const resultingMountOptions = getMountOptions({
...mountOptions,
router: {
navigate: jest.fn(),
navigateAfterSave: jest.fn()
},
loadScript: jest.fn().mockResolvedValue()
});
// Act
wrapper.vm.setupAddressLookup();
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();
// Assert
expect(wrapper.vm.showAddressFields).toBe(true);
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 };
}

27
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -185,11 +185,10 @@ export default ({
},
methods: {
setupAddressLookup() {
if (this.addressModel.streetAddress !== null &
this.addressModel.city !== null &
this.addressModel.state !== null &
this.addressModel.zipCode !== null) {
if (this.addressModel.streetAddress &&
this.addressModel.city &&
this.addressModel.state &&
this.addressModel.zipCode) {
this.showAddressFields = true;
return;
@ -228,10 +227,9 @@ export default ({
if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer);
}
})
addressField1.onchange = function() {
addressField1.addEventListener("change", () => {
const hover = document.querySelector(".pac-container .pac-item:hover");
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
if (hover === null) {
@ -258,7 +256,7 @@ export default ({
self.displayNoMatchWarning = true;
}
}
};
});
function fillInAddress(place) {
if (!place) {
@ -310,7 +308,6 @@ export default ({
addressField1.onchange = null;
const pacContainer = document.querySelector(".pac-container");
pacContainer.remove();
}
})
.catch(() => {
@ -325,16 +322,10 @@ export default ({
watch: {
addressModel: {
handler(newValue) {
// The first time the address model changes is when the page first loads
if (!newValue.city &&
!newValue.state &&
!newValue.zipCode) {
return;
}
if (this.displayNoMatchWarning === true) {
// Clear no match warning on address change
if (newValue.city || newValue.state || newValue.zipCode) {
this.displayNoMatchWarning = false;
}
}
},
deep: true
}