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

WIP

Browse source
This commit is contained in:
Leah Schumann 2023-05-04 15:35:25 -04:00
parent 964f95c97f
commit 1dd661e7df
5 changed files with 189 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/digital-components/button-question/button-question.vue
View file

@ -121,7 +121,7 @@ export default {
isOverflowScrollable: Boolean,
isWide: Boolean,
isCashOrInsurance: Boolean,
modelValue: [Array, Number, String],
modelValue: [Array, Number, String, Object],
value: [Number, String],
validationRules: String,
suppressError: Boolean,

10
src/layouts/service-location/service-location.vue
View file

@ -72,7 +72,7 @@
selectedAppointmentType === 'Inshop' ||
selectedAppointmentType === 'Dropoff'
"
v-model="providerNumber"
v-model="selectedProvider"
:serviceZipCode="zipCode"
:selectedAppointmentType="selectedAppointmentType"
cmsWidgetName="ShopQuestionWidget" />
@ -147,8 +147,8 @@ export default {
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: "Dropoff",
providerNumber: null,
selectedAppointmentType: null,
selectedProvider: null,
mobileFeePart: null,
zipContainsMilitaryBase: false,
};
@ -215,7 +215,7 @@ export default {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation();
this.selectedAppointmentType = null;
this.providerNumber = null;
this.selectedProvider = null;
}
this.state = newValue.state;
@ -250,7 +250,7 @@ export default {
if (!this.selectedAppointmentType == "Mobile") {
this.selectedAppointmentType = null;
}
this.providerNumber = null;
this.selectedProvider = null;
}
},
},

280
src/layouts/service-location/shop-question/shop-question.spec.js
View file

@ -18,33 +18,39 @@ jest.mock("@/mixins/base-mixin", () => ({
const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS;
const mockNewShopList = {
data: [
shopProviders: [
{
city: "Far",
country: "United States",
distance: 100,
providerNumber: "129",
state: "OH",
streetAddress: "555 First Capital Ln",
zipCode: "45601",
address: {
city: "COLUMBUS",
country: "US",
state: "OH",
streetAddress: "1670 HARMON AVE",
zipCode: "43223",
},
distanceInMiles: 15.9727889297435,
providerNumber: "006747",
},
{
city: "Farther",
country: "United States",
distance: 200,
providerNumber: "130",
state: "OH",
streetAddress: "5486 N Grove Rd",
zipCode: "43215",
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
{
city: "Farthest (Ever)",
country: "United States",
distance: 380.5,
providerNumber: "131",
state: "OH",
streetAddress: "1670 Bongo Ave D",
zipCode: "43223",
address: {
city: "Columbus",
country: "US",
state: "OH",
streetAddress: "4580 W Broad St",
zipCode: "43228",
},
distanceInMiles: 19.4618116611001,
providerNumber: "003342",
},
],
};
@ -64,7 +70,7 @@ const shopQuestionInitialData = {
streetAddress: "4403 EXECUTIVE PKWY",
zipCode: "43081",
},
distance: 5.16769294095201,
distanceInMiles: 5.16769294095201,
providerNumber: "003335",
},
{
@ -75,7 +81,7 @@ const shopQuestionInitialData = {
streetAddress: "760 DEARBORN PARK LN",
zipCode: "43085",
},
distance: 10.5865432478478,
distanceInMiles: 10.5865432478478,
providerNumber: "001820",
},
{
@ -86,7 +92,7 @@ const shopQuestionInitialData = {
streetAddress: "5015 N HIGH ST",
zipCode: "43214",
},
distance: 11.738869544543,
distanceInMiles: 11.738869544543,
providerNumber: "003343",
},
{
@ -97,7 +103,7 @@ const shopQuestionInitialData = {
streetAddress: "1670 HARMON AVE",
zipCode: "43223",
},
distance: 15.9727889297435,
distanceInMiles: 15.9727889297435,
providerNumber: "006747",
},
{
@ -108,7 +114,7 @@ const shopQuestionInitialData = {
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distance: 16.2690495685233,
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
{
@ -119,7 +125,7 @@ const shopQuestionInitialData = {
streetAddress: "4580 W Broad St",
zipCode: "43228",
},
distance: 19.4618116611001,
distanceInMiles: 19.4618116611001,
providerNumber: "003342",
},
],
@ -138,18 +144,30 @@ const mockMixin = {
};
describe("shop-question.vue", () => {
it("Should display first three shops when an appointment type has already been selected", async () => {
// Arrange/Act
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,
modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
serviceZipCode: "43081",
selectedAppointmentType: null,
cmsWidgetName: cmsWidgetName,
@ -158,8 +176,9 @@ describe("shop-question.vue", () => {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.setProps({
@ -193,17 +212,21 @@ describe("shop-question.vue", () => {
});
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);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
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,
@ -212,8 +235,9 @@ describe("shop-question.vue", () => {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
@ -224,16 +248,11 @@ describe("shop-question.vue", () => {
// Assert
expect(showMoreShopsLink.exists()).toBe(true);
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);
// Arrange
const alsoShopQuestionInitialData = {
shopProviders: [
{
@ -244,7 +263,7 @@ describe("shop-question.vue", () => {
streetAddress: "4403 EXECUTIVE PKWY",
zipCode: "43081",
},
distance: 5.16769294095201,
distanceInMiles: 5.16769294095201,
providerNumber: "003335",
},
{
@ -255,7 +274,7 @@ describe("shop-question.vue", () => {
streetAddress: "760 DEARBORN PARK LN",
zipCode: "43085",
},
distance: 10.5865432478478,
distanceInMiles: 10.5865432478478,
providerNumber: "001820",
},
{
@ -266,7 +285,7 @@ describe("shop-question.vue", () => {
streetAddress: "5015 N HIGH ST",
zipCode: "43214",
},
distance: 11.738869544543,
distanceInMiles: 11.738869544543,
providerNumber: "003343",
},
],
@ -275,7 +294,17 @@ describe("shop-question.vue", () => {
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
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,
@ -284,27 +313,22 @@ describe("shop-question.vue", () => {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
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);
expect(showMoreShopsLink.exists()).toBe(true);
expect(showMoreShopsLink.isVisible()).toBe(false);
});
it.only("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);
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",
@ -326,11 +350,20 @@ describe("shop-question.vue", () => {
},
];
// Arrange/Act
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
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,
@ -339,8 +372,9 @@ describe("shop-question.vue", () => {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.vm.answers = displayedAnswers;
@ -377,12 +411,6 @@ describe("shop-question.vue", () => {
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
{
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",
@ -395,21 +423,31 @@ describe("shop-question.vue", () => {
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/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
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,
@ -418,8 +456,9 @@ describe("shop-question.vue", () => {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
@ -431,17 +470,21 @@ describe("shop-question.vue", () => {
});
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);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
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,
@ -450,8 +493,9 @@ describe("shop-question.vue", () => {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.setProps({
@ -465,17 +509,21 @@ describe("shop-question.vue", () => {
});
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);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
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,
@ -486,36 +534,38 @@ describe("shop-question.vue", () => {
});
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(mockNewShopList);
});
});
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
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);
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/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
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,
@ -526,6 +576,8 @@ describe("shop-question.vue", () => {
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
//Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.setProps({

23
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -21,7 +21,7 @@
isRequired
validationRules="option-required" />
<textLink
v-if="displaySeeMoreLocationsLink"
v-show="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId"
@ -65,7 +65,10 @@ export default {
};
},
props: {
modelValue: String,
modelValue: {
type: Object,
required: true,
},
serviceZipCode: String,
selectedAppointmentType: String,
cmsWidgetName: String,
@ -80,7 +83,10 @@ export default {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
const provider = this.shopProviders.find(
(provider) => provider.providerNumber == newValue
);
this.$emit("update:modelValue", provider);
},
},
displayDropoffInformation() {
@ -94,7 +100,6 @@ export default {
loadInitialData(serviceZipCode) {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
serviceZipCode: serviceZipCode,
radius: 100,
});
},
initializeComponent(shopQuestionInitialData) {
@ -125,11 +130,11 @@ export default {
const city = toTitleCase(shopProvider.address.city);
const state = shopProvider.address.state;
const zipCode = shopProvider.address.zipCode;
const distance = Math.round(shopProvider.distance * 2) / 2;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
return {
buttonLabel: streetAddress,
buttonLabelSubCopy: `${distance} mi`,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
value: shopProvider.providerNumber,
};
@ -163,7 +168,7 @@ export default {
},
async reloadShopData(serviceZipCode) {
const result = await this.loadInitialData(serviceZipCode);
this.initializeComponent(result.data);
this.initializeComponent(result);
this.resetShopList();
},
},
@ -174,7 +179,7 @@ export default {
},
},
selectedAppointmentType: {
async handler(newValue) {
async handler() {
// If the validation has been previously triggered, clear it before displaying the component
this.$refs.buttonQuestion.resetField();
@ -190,7 +195,7 @@ export default {
async handler(newValue) {
this.$refs.buttonQuestion.resetField();
const selectedShopIndex = newValue.findIndex(
(provider) => provider.providerNumber == this.modelValue
(provider) => provider.providerNumber == this.modelValue?.providerNumber
);
if (selectedShopIndex >= 3) {

5
src/store/index.js
View file

@ -980,12 +980,13 @@ export const actions = {
});
},
getProviders(context, { serviceZipCode, radius }) {
getProviders(context, { serviceZipCode }) {
const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
const shopRadiusInMiles = 100;
return globalMethods.callHttpClient({
method: endpoints.GetProviders.method,
endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${radius}`,
endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}`,
});
},