592 lines
19 KiB
JavaScript
592 lines
19 KiB
JavaScript
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 === mockGetProvidersStoreAction) {
|
|
return new Promise((resolve) => {
|
|
resolve(mockNewShopList);
|
|
});
|
|
}
|
|
},
|
|
scrollToPageBottom() {},
|
|
},
|
|
}));
|
|
|
|
const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS;
|
|
const mockNewShopList = {
|
|
shopProviders: [
|
|
{
|
|
address: {
|
|
city: "COLUMBUS",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "1670 HARMON AVE",
|
|
zipCode: "43223",
|
|
},
|
|
distanceInMiles: 15.9727889297435,
|
|
providerNumber: "006747",
|
|
},
|
|
{
|
|
address: {
|
|
city: "POWELL",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "3938 POWELL RD",
|
|
zipCode: "43065",
|
|
},
|
|
distanceInMiles: 16.2690495685233,
|
|
providerNumber: "003341",
|
|
},
|
|
{
|
|
address: {
|
|
city: "Columbus",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "4580 W Broad St",
|
|
zipCode: "43228",
|
|
},
|
|
distanceInMiles: 19.4618116611001,
|
|
providerNumber: "003342",
|
|
},
|
|
],
|
|
};
|
|
|
|
const mockCmsContent = {
|
|
QuestionText: "Select a shop:",
|
|
};
|
|
|
|
const cmsWidgetName = "ShopQuestionWidget";
|
|
const shopQuestionInitialData = {
|
|
shopProviders: [
|
|
{
|
|
address: {
|
|
city: "WESTERVILLE",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "4403 EXECUTIVE PKWY",
|
|
zipCode: "43081",
|
|
},
|
|
distanceInMiles: 5.16769294095201,
|
|
providerNumber: "003335",
|
|
},
|
|
{
|
|
address: {
|
|
city: "WORTHINGTON",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "760 DEARBORN PARK LN",
|
|
zipCode: "43085",
|
|
},
|
|
distanceInMiles: 10.5865432478478,
|
|
providerNumber: "001820",
|
|
},
|
|
{
|
|
address: {
|
|
city: "COLUMBUS",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "5015 N HIGH ST",
|
|
zipCode: "43214",
|
|
},
|
|
distanceInMiles: 11.738869544543,
|
|
providerNumber: "003343",
|
|
},
|
|
{
|
|
address: {
|
|
city: "COLUMBUS",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "1670 HARMON AVE",
|
|
zipCode: "43223",
|
|
},
|
|
distanceInMiles: 15.9727889297435,
|
|
providerNumber: "006747",
|
|
},
|
|
{
|
|
address: {
|
|
city: "POWELL",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "3938 POWELL RD",
|
|
zipCode: "43065",
|
|
},
|
|
distanceInMiles: 16.2690495685233,
|
|
providerNumber: "003341",
|
|
},
|
|
{
|
|
address: {
|
|
city: "Columbus",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "4580 W Broad St",
|
|
zipCode: "43228",
|
|
},
|
|
distanceInMiles: 19.4618116611001,
|
|
providerNumber: "003342",
|
|
},
|
|
],
|
|
};
|
|
|
|
const mockMixin = {
|
|
methods: {
|
|
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
|
|
if (widgetName === cmsWidgetName) {
|
|
return mockCmsContent[cmsFieldName];
|
|
}
|
|
|
|
return null;
|
|
}),
|
|
},
|
|
};
|
|
|
|
describe("shop-question.vue", () => {
|
|
beforeEach(() => {
|
|
const container = document.createElement("div");
|
|
container.scrollTo = jest.fn();
|
|
|
|
container.classList.add("page-container-grouped-styles");
|
|
document.body.appendChild(container);
|
|
});
|
|
|
|
it("Should display first three shops when an appointment type has already been selected", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mixins: [mockMixin],
|
|
props: {
|
|
modelValue: null,
|
|
serviceZipCode: "43081",
|
|
selectedAppointmentType: "Dropoff",
|
|
cmsWidgetName: cmsWidgetName,
|
|
isDisplayed: true,
|
|
},
|
|
mountOptions: {
|
|
attachTo: document.body,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
|
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.answers.length).toEqual(3);
|
|
expect(wrapper.vm.answers).toEqual([
|
|
{
|
|
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
|
|
buttonLabel: "4403 Executive Pkwy",
|
|
buttonLabelSubCopy: "5 mi",
|
|
value: "003335",
|
|
},
|
|
{
|
|
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
|
|
buttonLabel: "760 Dearborn Park Ln",
|
|
buttonLabelSubCopy: "10.5 mi",
|
|
value: "001820",
|
|
},
|
|
{
|
|
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
|
|
buttonLabel: "5015 N High St",
|
|
buttonLabelSubCopy: "11.5 mi",
|
|
value: "003343",
|
|
},
|
|
]);
|
|
});
|
|
|
|
it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
|
|
// Arrange
|
|
const { wrapper } = setupMocks({
|
|
mixins: [mockMixin],
|
|
props: {
|
|
modelValue: {
|
|
address: {
|
|
city: "POWELL",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "3938 POWELL RD",
|
|
zipCode: "43065",
|
|
},
|
|
distanceInMiles: 16.2690495685233,
|
|
providerNumber: "003341",
|
|
},
|
|
serviceZipCode: "43081",
|
|
selectedAppointmentType: "Dropoff",
|
|
cmsWidgetName: cmsWidgetName,
|
|
isDisplayed: true,
|
|
},
|
|
mountOptions: {
|
|
attachTo: document.body,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
|
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
|
|
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
|
|
|
|
// Assert
|
|
expect(showMoreShopsLink.exists()).toBe(true);
|
|
expect(showMoreShopsLink.isVisible()).toBe(true);
|
|
});
|
|
|
|
it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
|
|
// Arrange
|
|
const alsoShopQuestionInitialData = {
|
|
shopProviders: [
|
|
{
|
|
address: {
|
|
city: "WESTERVILLE",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "4403 EXECUTIVE PKWY",
|
|
zipCode: "43081",
|
|
},
|
|
distanceInMiles: 5.16769294095201,
|
|
providerNumber: "003335",
|
|
},
|
|
{
|
|
address: {
|
|
city: "WORTHINGTON",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "760 DEARBORN PARK LN",
|
|
zipCode: "43085",
|
|
},
|
|
distanceInMiles: 10.5865432478478,
|
|
providerNumber: "001820",
|
|
},
|
|
{
|
|
address: {
|
|
city: "COLUMBUS",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "5015 N HIGH ST",
|
|
zipCode: "43214",
|
|
},
|
|
distanceInMiles: 11.738869544543,
|
|
providerNumber: "003343",
|
|
},
|
|
],
|
|
};
|
|
|
|
const { wrapper } = setupMocks({
|
|
mixins: [mockMixin],
|
|
props: {
|
|
modelValue: {
|
|
address: {
|
|
city: "POWELL",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "3938 POWELL RD",
|
|
zipCode: "43065",
|
|
},
|
|
distanceInMiles: 16.2690495685233,
|
|
providerNumber: "003341",
|
|
},
|
|
serviceZipCode: "43081",
|
|
selectedAppointmentType: "Dropoff",
|
|
cmsWidgetName: cmsWidgetName,
|
|
isDisplayed: true,
|
|
},
|
|
mountOptions: {
|
|
attachTo: document.body,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
|
|
|
|
// Assert
|
|
expect(showMoreShopsLink.exists()).toBe(true);
|
|
expect(showMoreShopsLink.isVisible()).toBe(false);
|
|
});
|
|
|
|
it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
|
|
// Arrange
|
|
const displayedAnswers = [
|
|
{
|
|
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
|
|
buttonLabel: "4403 Executive Pkwy",
|
|
buttonLabelSubCopy: "5 mi",
|
|
value: "003335",
|
|
},
|
|
{
|
|
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
|
|
buttonLabel: "760 Dearborn Park Ln",
|
|
buttonLabelSubCopy: "10.5 mi",
|
|
value: "001820",
|
|
},
|
|
{
|
|
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
|
|
buttonLabel: "5015 N High St",
|
|
buttonLabelSubCopy: "11.5 mi",
|
|
value: "003343",
|
|
},
|
|
];
|
|
|
|
const { wrapper } = setupMocks({
|
|
mixins: [mockMixin],
|
|
props: {
|
|
modelValue: {
|
|
address: {
|
|
city: "POWELL",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "3938 POWELL RD",
|
|
zipCode: "43065",
|
|
},
|
|
distanceInMiles: 16.2690495685233,
|
|
providerNumber: "003341",
|
|
},
|
|
serviceZipCode: "43081",
|
|
selectedAppointmentType: "Dropoff",
|
|
cmsWidgetName: cmsWidgetName,
|
|
isDisplayed: true,
|
|
},
|
|
mountOptions: {
|
|
attachTo: document.body,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
wrapper.vm.answers = displayedAnswers;
|
|
wrapper.vm.shopIndex = 3;
|
|
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
await wrapper.vm.$nextTick();
|
|
|
|
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
showMoreShopsLink.trigger("click");
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// Assert
|
|
expect(wrapper.vm.answers.length).toBe(6);
|
|
expect(wrapper.vm.answers).toEqual([
|
|
{
|
|
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
|
|
buttonLabel: "4403 Executive Pkwy",
|
|
buttonLabelSubCopy: "5 mi",
|
|
value: "003335",
|
|
},
|
|
{
|
|
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
|
|
buttonLabel: "760 Dearborn Park Ln",
|
|
buttonLabelSubCopy: "10.5 mi",
|
|
value: "001820",
|
|
},
|
|
{
|
|
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
|
|
buttonLabel: "5015 N High St",
|
|
buttonLabelSubCopy: "11.5 mi",
|
|
value: "003343",
|
|
},
|
|
{
|
|
buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
|
|
buttonLabel: "1670 Harmon Ave",
|
|
buttonLabelSubCopy: "16 mi",
|
|
value: "006747",
|
|
},
|
|
{
|
|
buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
|
|
buttonLabel: "3938 Powell Rd",
|
|
buttonLabelSubCopy: "16.5 mi",
|
|
value: "003341",
|
|
},
|
|
{
|
|
buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
|
|
buttonLabel: "4580 W Broad St",
|
|
buttonLabelSubCopy: "19.5 mi",
|
|
value: "003342",
|
|
},
|
|
]);
|
|
});
|
|
|
|
it("Should display the number of shops necessary to show a previously selected shop", async () => {
|
|
// Arrange
|
|
const selectedProvider = {
|
|
providerNumber: "003341",
|
|
};
|
|
|
|
const { wrapper } = setupMocks({
|
|
mixins: [mockMixin],
|
|
props: {
|
|
modelValue: selectedProvider.providerNumber,
|
|
serviceZipCode: "43081",
|
|
selectedAppointmentType: "Dropoff",
|
|
cmsWidgetName: cmsWidgetName,
|
|
},
|
|
mountOptions: {
|
|
attachTo: document.body,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
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
|
|
const { wrapper } = setupMocks({
|
|
mixins: [mockMixin],
|
|
props: {
|
|
modelValue: {
|
|
address: {
|
|
city: "POWELL",
|
|
country: "US",
|
|
state: "OH",
|
|
streetAddress: "3938 POWELL RD",
|
|
zipCode: "43065",
|
|
},
|
|
distanceInMiles: 16.2690495685233,
|
|
providerNumber: "003341",
|
|
},
|
|
serviceZipCode: "43081",
|
|
selectedAppointmentType: "Dropoff",
|
|
cmsWidgetName: cmsWidgetName,
|
|
},
|
|
mountOptions: {
|
|
attachTo: document.body,
|
|
},
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.initializeComponent(shopQuestionInitialData);
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
await 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
|
|
// const { wrapper } = setupMocks({
|
|
// mixins: [mockMixin],
|
|
// props: {
|
|
// modelValue: {
|
|
// address: {
|
|
// city: "POWELL",
|
|
// country: "US",
|
|
// state: "OH",
|
|
// streetAddress: "3938 POWELL RD",
|
|
// zipCode: "43065",
|
|
// },
|
|
// distanceInMiles: 16.2690495685233,
|
|
// providerNumber: "003341",
|
|
// },
|
|
// serviceZipCode: "43081",
|
|
// selectedAppointmentType: "Dropoff",
|
|
// cmsWidgetName: cmsWidgetName,
|
|
// isDisplayed: true
|
|
// },
|
|
// mountOptions: {
|
|
// attachTo: document.body,
|
|
// },
|
|
// });
|
|
|
|
// wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
|
|
// return new Promise((resolve) => {
|
|
// resolve(mockNewShopList);
|
|
// });
|
|
// });
|
|
|
|
// // Act
|
|
// wrapper.vm.initializeComponent(shopQuestionInitialData);
|
|
|
|
// await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
|
|
|
|
// // Assert
|
|
// expect(wrapper.vm.shopProviders.length).toEqual(3);
|
|
// expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders);
|
|
// });
|
|
|
|
// it("Should clear the existing answers when the service zip code changes", async () => {
|
|
// // Arrange
|
|
// const { wrapper } = setupMocks({
|
|
// mixins: [mockMixin],
|
|
// props: {
|
|
// modelValue: {
|
|
// address: {
|
|
// city: "POWELL",
|
|
// country: "US",
|
|
// state: "OH",
|
|
// streetAddress: "3938 POWELL RD",
|
|
// zipCode: "43065",
|
|
// },
|
|
// distanceInMiles: 16.2690495685233,
|
|
// providerNumber: "003341",
|
|
// },
|
|
// serviceZipCode: "43081",
|
|
// selectedAppointmentType: "Dropoff",
|
|
// cmsWidgetName: cmsWidgetName,
|
|
// },
|
|
// mountOptions: {
|
|
// attachTo: document.body,
|
|
// },
|
|
// });
|
|
|
|
// //Act
|
|
// 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 };
|
|
}
|