Completed some unit tests
This commit is contained in:
parent
1bc9050113
commit
404c50d3a9
7 changed files with 687 additions and 74 deletions
|
|
@ -256,8 +256,10 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
modelValue() {
|
modelValue(newValue) {
|
||||||
this.resetField();
|
this.resetField({
|
||||||
|
value: newValue,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
answers() {
|
answers() {
|
||||||
//once we get the answers to display from parent, see if we need a GA event to log what we showed
|
//once we get the answers to display from parent, see if we need a GA event to log what we showed
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<div class="appointment-type-question" aria-live="polite">
|
<div class="appointment-type-question" aria-live="polite">
|
||||||
<buttonQuestion
|
<buttonQuestion
|
||||||
|
ref="buttonQuestion"
|
||||||
customButtonQuestionId="appointmentTypeQuestion"
|
customButtonQuestionId="appointmentTypeQuestion"
|
||||||
:questionText="questionText"
|
:questionText="questionText"
|
||||||
:answers="answersToDisplay"
|
:answers="answersToDisplay"
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,6 @@
|
||||||
selectedAppointmentType === 'Dropoff'
|
selectedAppointmentType === 'Dropoff'
|
||||||
"
|
"
|
||||||
v-model="providerNumber"
|
v-model="providerNumber"
|
||||||
:isDropoff="isDropoff"
|
|
||||||
:serviceZipCode="zipCode"
|
:serviceZipCode="zipCode"
|
||||||
:selectedAppointmentType="selectedAppointmentType"
|
:selectedAppointmentType="selectedAppointmentType"
|
||||||
:shopQuestionData="shopQuestionInitialData"
|
:shopQuestionData="shopQuestionInitialData"
|
||||||
|
|
@ -149,11 +148,10 @@ export default {
|
||||||
isRecalibrationServiceableInshop: null,
|
isRecalibrationServiceableInshop: null,
|
||||||
isGlassServiceableMobile: null,
|
isGlassServiceableMobile: null,
|
||||||
isRecalibrationServiceableMobile: null,
|
isRecalibrationServiceableMobile: null,
|
||||||
selectedAppointmentType: "Dropoff",
|
selectedAppointmentType: null,
|
||||||
providerNumber: "126",
|
providerNumber: null,
|
||||||
mobileFeePart: null,
|
mobileFeePart: null,
|
||||||
zipContainsMilitaryBase: false,
|
zipContainsMilitaryBase: false,
|
||||||
shopQuestionInitialData: null,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async beforeRouteEnter(to, from, next) {
|
async beforeRouteEnter(to, from, next) {
|
||||||
|
|
@ -374,15 +372,6 @@ export default {
|
||||||
this.$refs[modalName].openModal();
|
this.$refs[modalName].openModal();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// watch: {
|
|
||||||
// zipCode: {
|
|
||||||
// async handler() {
|
|
||||||
// console.log(this.$refs)
|
|
||||||
// const initialData = await this.$refs.shopQuestion.loadInitialData();
|
|
||||||
// this.$refs.shopQuestion.initializeComponent(initialData);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
components: {
|
components: {
|
||||||
alert,
|
alert,
|
||||||
serviceZipModalQuestion,
|
serviceZipModalQuestion,
|
||||||
|
|
|
||||||
|
|
@ -1 +1,70 @@
|
||||||
test.todo("some test to be written in the future");
|
import { mount } from "@vue/test-utils";
|
||||||
|
import shopListButton from "./shop-list-button";
|
||||||
|
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||||
|
|
||||||
|
describe("service-package-radio.vue", () => {
|
||||||
|
it("Should include buttonLabel in html", async () => {
|
||||||
|
// Arrange
|
||||||
|
let { wrapper } = setupMocks({
|
||||||
|
mountOptionsMockData: {
|
||||||
|
propsData: mockProps,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const outputHtml = wrapper.html();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"]));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should include buttonLabelSubCopy in html", async () => {
|
||||||
|
// Arrange
|
||||||
|
let { wrapper } = setupMocks({
|
||||||
|
mountOptionsMockData: {
|
||||||
|
propsData: mockProps,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const outputHtml = wrapper.html();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"]));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should include buttonLabelAuxillaryCopy in html", async () => {
|
||||||
|
// Arrange
|
||||||
|
let { wrapper } = setupMocks({
|
||||||
|
mountOptionsMockData: {
|
||||||
|
propsData: mockProps,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const outputHtml = wrapper.html();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"]));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const mockProps = {
|
||||||
|
buttonLabel: "buttonLabel test copy",
|
||||||
|
buttonLabelSubCopy: "buttonLabelSubCopy test copy",
|
||||||
|
buttonBodyCopy:
|
||||||
|
"<ul><li>buttonBodyCopy test copy</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>",
|
||||||
|
buttonLabelAuxillaryCopy: "buttonLabelAuxillaryCopy test copy",
|
||||||
|
value: 0,
|
||||||
|
modelValue: 0,
|
||||||
|
groupName: "mockGroup",
|
||||||
|
};
|
||||||
|
|
||||||
|
function setupMocks({ mountOptionsMockData = {} }) {
|
||||||
|
const wrapper = mount(shopListButton, {
|
||||||
|
...mountOptionsMockData,
|
||||||
|
mixins: [inputButtonWrapperMixin],
|
||||||
|
});
|
||||||
|
|
||||||
|
return { wrapper };
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,554 @@
|
||||||
test.todo("some test to be written in the future");
|
import { shallowMount } from "@vue/test-utils";
|
||||||
|
import { storeActions } from "@/constants/store-actions";
|
||||||
|
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||||
|
import shopQuestion from "./shop-question";
|
||||||
|
|
||||||
|
jest.mock("@/mixins/base-mixin", () => ({
|
||||||
|
methods: {
|
||||||
|
dispatchStoreAction(action, items, encode) {
|
||||||
|
if (action === mockGetProviderLocationsStoreAction) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve(mockNewShopList);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockGetProviderLocationsStoreAction = storeActions.GET_PROVIDER_LOCATIONS;
|
||||||
|
const mockNewShopList = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
city: "Far",
|
||||||
|
country: "United States",
|
||||||
|
distance: 100,
|
||||||
|
providerNumber: "129",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "555 First Capital Ln",
|
||||||
|
zipCode: "45601",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Farther",
|
||||||
|
country: "United States",
|
||||||
|
distance: 200,
|
||||||
|
providerNumber: "130",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "5486 N Grove Rd",
|
||||||
|
zipCode: "43215",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Farthest (Ever)",
|
||||||
|
country: "United States",
|
||||||
|
distance: 380.5,
|
||||||
|
providerNumber: "131",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "1670 Bongo Ave D",
|
||||||
|
zipCode: "43223",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockCmsContent = {
|
||||||
|
QuestionText: "Select a shop:",
|
||||||
|
};
|
||||||
|
|
||||||
|
const cmsWidgetName = "AppointmentTypeQuestionWidget";
|
||||||
|
const shopQuestionInitialData = [
|
||||||
|
{
|
||||||
|
city: "Worthington",
|
||||||
|
country: "United States",
|
||||||
|
distance: 1.5,
|
||||||
|
providerNumber: "123",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "760 Dearborn Park Ln",
|
||||||
|
zipCode: "43085",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Columbus",
|
||||||
|
country: "United States",
|
||||||
|
distance: 4.5,
|
||||||
|
providerNumber: "124",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "5486 N Hamilton Rd",
|
||||||
|
zipCode: "43230",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Powell",
|
||||||
|
country: "United States",
|
||||||
|
distance: 7,
|
||||||
|
providerNumber: "125",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "1670 Harmon Ave C",
|
||||||
|
zipCode: "43223",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Chillicothe",
|
||||||
|
country: "United States",
|
||||||
|
distance: 41.5,
|
||||||
|
providerNumber: "126",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "555 First Capital Ln",
|
||||||
|
zipCode: "45601",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Grove City",
|
||||||
|
country: "United States",
|
||||||
|
distance: 4.5,
|
||||||
|
providerNumber: "127",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "5486 N Grove Rd",
|
||||||
|
zipCode: "43215",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Dayton",
|
||||||
|
country: "United States",
|
||||||
|
distance: 80.5,
|
||||||
|
providerNumber: "128",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "1670 Bongo Ave D",
|
||||||
|
zipCode: "43223",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Far",
|
||||||
|
country: "United States",
|
||||||
|
distance: 100,
|
||||||
|
providerNumber: "129",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "555 First Capital Ln",
|
||||||
|
zipCode: "45601",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Farther",
|
||||||
|
country: "United States",
|
||||||
|
distance: 200,
|
||||||
|
providerNumber: "130",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "5486 N Grove Rd",
|
||||||
|
zipCode: "43215",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Farthest (Ever)",
|
||||||
|
country: "United States",
|
||||||
|
distance: 380.5,
|
||||||
|
providerNumber: "131",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "1670 Bongo Ave D",
|
||||||
|
zipCode: "43223",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const mockMixin = {
|
||||||
|
methods: {
|
||||||
|
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
|
||||||
|
if (widgetName === cmsWidgetName) {
|
||||||
|
return mockCmsContent[cmsFieldName];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("shop-question.vue", () => {
|
||||||
|
it("Should display first three shops when an appointment type has already been selected", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: null,
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.answers).toEqual([
|
||||||
|
{
|
||||||
|
Name: "123",
|
||||||
|
buttonLabel: "Worthington",
|
||||||
|
buttonLabelSubCopy: "1.5 mi",
|
||||||
|
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "124",
|
||||||
|
buttonLabel: "Columbus",
|
||||||
|
buttonLabelSubCopy: "4.5 mi",
|
||||||
|
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "125",
|
||||||
|
buttonLabel: "Powell",
|
||||||
|
buttonLabelSubCopy: "7 mi",
|
||||||
|
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: null,
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(showMoreShopsLink.exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const alsoShopQuestionInitialData = [
|
||||||
|
{
|
||||||
|
city: "Worthington",
|
||||||
|
country: "United States",
|
||||||
|
distance: 1.5,
|
||||||
|
providerNumber: "123",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "760 Dearborn Park Ln",
|
||||||
|
zipCode: "43085",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Columbus",
|
||||||
|
country: "United States",
|
||||||
|
distance: 4.5,
|
||||||
|
providerNumber: "124",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "5486 N Hamilton Rd",
|
||||||
|
zipCode: "43230",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
city: "Powell",
|
||||||
|
country: "United States",
|
||||||
|
distance: 7,
|
||||||
|
providerNumber: "125",
|
||||||
|
state: "OH",
|
||||||
|
streetAddress: "1670 Harmon Ave C",
|
||||||
|
zipCode: "43223",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: null,
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(showMoreShopsLink.exists()).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const displayedAnswers = [
|
||||||
|
{
|
||||||
|
Name: "123",
|
||||||
|
buttonLabel: "Worthington",
|
||||||
|
buttonLabelSubCopy: "1.5 mi",
|
||||||
|
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "124",
|
||||||
|
buttonLabel: "Columbus",
|
||||||
|
buttonLabelSubCopy: "4.5 mi",
|
||||||
|
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "125",
|
||||||
|
buttonLabel: "Powell",
|
||||||
|
buttonLabelSubCopy: "7 mi",
|
||||||
|
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Arrange/Act
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: null,
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
|
||||||
|
wrapper.vm.shops = shopQuestionInitialData;
|
||||||
|
wrapper.vm.answers = displayedAnswers;
|
||||||
|
wrapper.vm.shopIndex = 3;
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
|
||||||
|
|
||||||
|
showMoreShopsLink.trigger("click");
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.answers.length).toBe(6);
|
||||||
|
expect(wrapper.vm.answers).toEqual([
|
||||||
|
{
|
||||||
|
Name: "123",
|
||||||
|
buttonLabel: "Worthington",
|
||||||
|
buttonLabelSubCopy: "1.5 mi",
|
||||||
|
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "124",
|
||||||
|
buttonLabel: "Columbus",
|
||||||
|
buttonLabelSubCopy: "4.5 mi",
|
||||||
|
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "125",
|
||||||
|
buttonLabel: "Powell",
|
||||||
|
buttonLabelSubCopy: "7 mi",
|
||||||
|
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "126",
|
||||||
|
buttonLabel: "Chillicothe",
|
||||||
|
buttonLabelSubCopy: "41.5 mi",
|
||||||
|
buttonBodyCopy: "555 First Capital Ln, Chillicothe, OH 45601",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "127",
|
||||||
|
buttonLabel: "Grove City",
|
||||||
|
buttonLabelSubCopy: "4.5 mi",
|
||||||
|
buttonBodyCopy: "5486 N Grove Rd, Grove City, OH 43215",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Name: "128",
|
||||||
|
buttonLabel: "Dayton",
|
||||||
|
buttonLabelSubCopy: "80.5 mi",
|
||||||
|
buttonBodyCopy: "1670 Bongo Ave D, Dayton, OH 43223",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should display the number of shops necessary to show a previously selected shop", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: "127",
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.answers.length).toEqual(5);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should reset the answers when the selected appointment type changes", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: "127",
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
||||||
|
|
||||||
|
wrapper.setProps({
|
||||||
|
selectedAppointmentType: "Inshop",
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.answers.length).toEqual(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should reload the shops when the service zip code changes", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: "127",
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.shops = shopQuestionInitialData;
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve(newShopList);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.shops.length).toEqual(3);
|
||||||
|
expect(wrapper.vm.shops).toEqual(mockNewShopList.data);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Should clear the existing answers when the service zip code changes", async () => {
|
||||||
|
// Arrange/Act
|
||||||
|
const container = document.createElement("div");
|
||||||
|
container.scrollTo = jest.fn();
|
||||||
|
|
||||||
|
container.classList.add("page-container-grouped-styles");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const { wrapper } = setupMocks({
|
||||||
|
mixins: [mockMixin],
|
||||||
|
props: {
|
||||||
|
modelValue: "127",
|
||||||
|
serviceZipCode: "43081",
|
||||||
|
selectedAppointmentType: "Dropoff",
|
||||||
|
cmsWidgetName: cmsWidgetName,
|
||||||
|
},
|
||||||
|
mountOptions: {
|
||||||
|
attachTo: document.body,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
|
||||||
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
||||||
|
|
||||||
|
wrapper.setProps({
|
||||||
|
selectedAppointmentType: "Inshop",
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.vm.$nextTick();
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(wrapper.vm.answers.length).toEqual(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
|
||||||
|
const resultingMountOptions = getMountOptions({
|
||||||
|
...mountOptions,
|
||||||
|
mixins,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (props) resultingMountOptions.propsData = props;
|
||||||
|
|
||||||
|
const wrapper = isShallowMount
|
||||||
|
? shallowMount(shopQuestion, resultingMountOptions)
|
||||||
|
: mount(shopQuestion, resultingMountOptions);
|
||||||
|
|
||||||
|
return { wrapper };
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -67,14 +67,9 @@ export default {
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
isDropoff: Boolean,
|
|
||||||
serviceZipCode: String,
|
serviceZipCode: String,
|
||||||
selectedAppointmentType: String,
|
selectedAppointmentType: String,
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
shopQuestionInitialData: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
validationRules: String,
|
validationRules: String,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -90,7 +85,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
displayDropoffInformation() {
|
displayDropoffInformation() {
|
||||||
return this.isDropoff;
|
return this.selectedAppointmentType == "Dropoff";
|
||||||
},
|
},
|
||||||
showMoreShopsLinkText() {
|
showMoreShopsLinkText() {
|
||||||
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
|
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
|
||||||
|
|
@ -105,7 +100,7 @@ export default {
|
||||||
initializeComponent(shopQuestionInitialData) {
|
initializeComponent(shopQuestionInitialData) {
|
||||||
this.shops = shopQuestionInitialData;
|
this.shops = shopQuestionInitialData;
|
||||||
},
|
},
|
||||||
getNextShopsFromList(numberToGet = 3) {
|
async getNextShopsFromList(numberToGet = 3) {
|
||||||
const shopIterator = (array, n) => {
|
const shopIterator = (array, n) => {
|
||||||
let l = array.length;
|
let l = array.length;
|
||||||
return () => {
|
return () => {
|
||||||
|
|
@ -125,7 +120,7 @@ export default {
|
||||||
buttonLabel: shop.city,
|
buttonLabel: shop.city,
|
||||||
buttonLabelSubCopy: `${shop.distance} mi`,
|
buttonLabelSubCopy: `${shop.distance} mi`,
|
||||||
buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
|
buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
|
||||||
buttonAuxillaryCopy: `foo`,
|
//buttonAuxillaryCopy: `foo`,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -137,17 +132,17 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$nextTick().then(() => {
|
await this.$nextTick();
|
||||||
if (this.shopIndex == this.shops.length) {
|
|
||||||
this.displaySeeMoreLocationsLink = false;
|
|
||||||
} else {
|
|
||||||
this.displaySeeMoreLocationsLink = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$nextTick().then(() => {
|
if (this.shopIndex == this.shops.length) {
|
||||||
this.scrollToBottom();
|
this.displaySeeMoreLocationsLink = false;
|
||||||
});
|
} else {
|
||||||
});
|
this.displaySeeMoreLocationsLink = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.$nextTick();
|
||||||
|
|
||||||
|
this.scrollToBottom();
|
||||||
},
|
},
|
||||||
resetShopList() {
|
resetShopList() {
|
||||||
this.answers = [];
|
this.answers = [];
|
||||||
|
|
@ -159,29 +154,29 @@ export default {
|
||||||
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
|
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
|
||||||
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
|
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
|
||||||
},
|
},
|
||||||
|
async reloadShopData(serviceZipCode) {
|
||||||
|
const result = await this.loadInitialData(serviceZipCode);
|
||||||
|
this.initializeComponent(result.data);
|
||||||
|
this.resetShopList();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
serviceZipCode: {
|
serviceZipCode: {
|
||||||
handler(newValue) {
|
async handler(newValue) {
|
||||||
this.loadInitialData(newValue).then((result) => {
|
await this.reloadShopData(newValue);
|
||||||
this.initializeComponent(result.data);
|
|
||||||
this.resetShopList();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
selectedAppointmentType: {
|
selectedAppointmentType: {
|
||||||
handler(newValue) {
|
async handler(newValue) {
|
||||||
// If the validation has been previously triggered, clear it before displaying the component
|
// If the validation has been previously triggered, clear it before displaying the component
|
||||||
this.$refs.buttonQuestion.resetField();
|
this.$refs.buttonQuestion.resetField();
|
||||||
|
|
||||||
if (newValue != null) {
|
this.resetShopList();
|
||||||
this.resetShopList();
|
await this.getNextShopsFromList();
|
||||||
this.getNextShopsFromList();
|
|
||||||
|
|
||||||
this.$nextTick().then(() => {
|
await this.$nextTick();
|
||||||
this.scrollToBottom();
|
|
||||||
});
|
this.scrollToBottom();
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
shops: {
|
shops: {
|
||||||
|
|
@ -190,6 +185,7 @@ export default {
|
||||||
const selectedShopIndex = newValue.findIndex(
|
const selectedShopIndex = newValue.findIndex(
|
||||||
(provider) => provider.providerNumber == this.modelValue
|
(provider) => provider.providerNumber == this.modelValue
|
||||||
);
|
);
|
||||||
|
|
||||||
if (selectedShopIndex >= 3) {
|
if (selectedShopIndex >= 3) {
|
||||||
this.getNextShopsFromList(selectedShopIndex + 1);
|
this.getNextShopsFromList(selectedShopIndex + 1);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -24,35 +24,38 @@ import { applicationConfig } from "../constants/application-config";
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
logPageView(pageEvent) {
|
logPageView(pageEvent) {
|
||||||
// const currentPageName = getPageNameByQueryString();
|
const currentPageName = getPageNameByQueryString();
|
||||||
// var payload = {
|
var payload = {
|
||||||
// userId: getDeviceIdValue(),
|
userId: getDeviceIdValue(),
|
||||||
// sessionKey: getSessionKeyValue(),
|
sessionKey: getSessionKeyValue(),
|
||||||
// pageName: currentPageName,
|
pageName: currentPageName,
|
||||||
// sessionId: getSessionIdValue(),
|
sessionId: getSessionIdValue(),
|
||||||
// action: "",
|
action: "",
|
||||||
// event: pageEvent,
|
event: pageEvent,
|
||||||
// shouldUseSessionId: false,
|
shouldUseSessionId: false,
|
||||||
// experimentsForUser: store.getters.applicationUser.experiments,
|
experimentsForUser: store.getters.applicationUser.experiments,
|
||||||
// };
|
};
|
||||||
// baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
|
|
||||||
|
baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
|
||||||
},
|
},
|
||||||
|
|
||||||
logCustomEvent(category, action, label, value) {
|
logCustomEvent(category, action, label, value) {
|
||||||
// const currentPageName = getPageNameByQueryString();
|
const currentPageName = getPageNameByQueryString();
|
||||||
// var payload = {
|
|
||||||
// userId: getDeviceIdValue(),
|
var payload = {
|
||||||
// sessionKey: getSessionKeyValue(),
|
userId: getDeviceIdValue(),
|
||||||
// pageName: currentPageName,
|
sessionKey: getSessionKeyValue(),
|
||||||
// sessionId: getSessionIdValue(),
|
pageName: currentPageName,
|
||||||
// category: category,
|
sessionId: getSessionIdValue(),
|
||||||
// action: action,
|
category: category,
|
||||||
// label: label,
|
action: action,
|
||||||
// value: value,
|
label: label,
|
||||||
// shouldUseSessionId: false,
|
value: value,
|
||||||
// experimentsForUser: store.getters.applicationUser.experiments,
|
shouldUseSessionId: false,
|
||||||
// };
|
experimentsForUser: store.getters.applicationUser.experiments,
|
||||||
// baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
|
};
|
||||||
|
|
||||||
|
baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
|
||||||
},
|
},
|
||||||
|
|
||||||
pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
|
pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue