From f0d7926b1007287bd5ba9ca659a35b720156c93d Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 16 Oct 2023 08:31:16 -0400 Subject: [PATCH 1/4] Additional refactoring per tech review --- .../service-location-helper.js | 12 +++ .../mobile-location-modal-questions.vue | 8 +- .../service-location/service-location.vue | 90 +++++++++---------- .../service-zip-modal-question.vue | 9 +- .../shop-question/shop-question.vue | 68 +++++++------- 5 files changed, 86 insertions(+), 101 deletions(-) diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js index cb4c06100..26f2e6962 100644 --- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js +++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js @@ -46,6 +46,18 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems, pageNa return Promise.resolve(serviceabilityDetails); } +export async function getShopProviderData(serviceZipCode) { + const shopProviderData = await baseMixin.methods.dispatchStoreActionWithLogging( + storeActions.GET_PROVIDERS, + { + serviceZipCode: serviceZipCode, + }, + "service-location" + ); + + return Promise.resolve(shopProviderData); +} + export async function getAvailabilityRating( startDate, endDate, diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 58420ce3a..8bac8dbb4 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -145,9 +145,6 @@ export default { alertInvalidZipWidgetName: String, customComponentId: String, validationRules: String, - onZipUpdateCallback: { - type: Function, - }, }, computed: { mobileLocationLinkPromptText() { @@ -256,10 +253,7 @@ export default { this.$emit("updated-serviceability", serviceabilityDetails.data); this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); - if (this.onZipUpdateCallback) { - await this.onZipUpdateCallback(serviceZipCode); - } - // Update the page level model + // update the page level model this.$emit("update:modelValue", this.internalModel); this.closeModal(); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 674c47409..b1f296a60 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -20,7 +20,7 @@ @updated-contains-military-base="setContainsMilitaryBase" linkWidgetName="ServiceZipLinkWidget" modalWidgetName="ServiceZipModalWidget" - :onZipUpdateCallback="reloadShopData" /> + /> + /> @@ -135,6 +135,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { getPricedMobileFeePart, getServiceabilityDetails, + getShopProviderData, } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; import { Provider } from "@/layouts/service-location/classes/provider"; @@ -180,7 +181,7 @@ export default { mobileFeePart: null, zipContainsMilitaryBase: false, zipCodeCtu: null, - providerData: null, + shopProviderData: null, }; }, async beforeRouteEnter(to, from, next) { @@ -188,7 +189,7 @@ export default { const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const serviceZipCode = store.getters.order.serviceLocation.zipCode; - const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location"); + const zipCodeDataPromise = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location"); const serviceabilityDetailsPromise = getServiceabilityDetails( serviceZipCode, @@ -198,7 +199,7 @@ export default { const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location"); - const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode); + const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode); // Settle promises and get results const promiseResultMap = [ @@ -206,6 +207,10 @@ export default { resultKey: "cmsContent", promise: cmsContentPromise, }, + { + resultKey: "zipCodeData", + promise: zipCodeDataPromise, + }, { resultKey: "mobileFeePart", promise: mobileFeePartPromise, @@ -215,12 +220,8 @@ export default { promise: serviceabilityDetailsPromise, }, { - resultKey: "zipCodeData", - promise: getZipCodeData, - }, - { - resultKey: "shopQuestionInitialData", - promise: shopQuestionInitialDataPromise, + resultKey: "shopProviderData", + promise: shopProviderDataPromise, }, ]; @@ -232,14 +233,9 @@ export default { vm.setData( resultMap.zipCodeData, resultMap.serviceabilityDetails, - resultMap.mobileFeePart + resultMap.mobileFeePart, + resultMap.shopProviderData ); - - // Initialize the Shop Question component - vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData); - - // Initialize the page level shop data - vm.providerData = resultMap.shopQuestionInitialData; }); }, computed: { @@ -254,7 +250,7 @@ export default { if (newValue.zipCode !== this.zipCode) { this.resetMobileLocation(); this.selectedAppointmentType = null; - this.selectedProvider = null; + this.selectedProvider = new Provider(); } this.state = newValue.state; @@ -277,20 +273,14 @@ export default { }; }, set: function (newValue) { - this.streetAddress = newValue.addressQuestions.streetAddress; - this.apartmentNumberOrBusinessName = - newValue.addressQuestions.apartmentNumberOrBusinessName; - this.city = newValue.addressQuestions.city; - this.state = newValue.addressQuestions.state; - this.zipCode = newValue.addressQuestions.zipCode; - this.isVehicleProtected = newValue.isVehicleProtected; - - if (newValue.zipCode !== this.zipCode) { - if (!this.selectedAppointmentType == "Mobile") { - this.selectedAppointmentType = null; - } - this.selectedProvider = null; + if (newValue.addressQuestions.zipCode !== this.zipCode) { + getShopProviderData(newValue.addressQuestions.zipCode).then((result) => { + this.shopProviderData = result.data; + this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); + }); } + + this.setMobileLocation(newValue); }, }, isServiceableMobile() { @@ -355,7 +345,7 @@ export default { store.getters.payment.isInsurance !== null ); }, - setData(zipCodeData, serviceabilityDetails, mobileFeePart) { + setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) { if (zipCodeData) { this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; this.zipCodeCtu = zipCodeData.zipCodeCtu; @@ -368,6 +358,10 @@ export default { if (mobileFeePart) { this.mobileFeePart = mobileFeePart; } + + if (shopProviderData) { + this.shopProviderData = shopProviderData; + } }, setContainsMilitaryBase(val) { if (this.zipContainsMilitaryBase !== val) { @@ -416,12 +410,18 @@ export default { this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile; }, + setMobileLocation(mobileLocation) { + this.streetAddress = mobileLocation.addressQuestions.streetAddress; + this.apartmentNumberOrBusinessName = + mobileLocation.addressQuestions.apartmentNumberOrBusinessName; + this.city = mobileLocation.addressQuestions.city; + this.state = mobileLocation.addressQuestions.state; + this.zipCode = mobileLocation.addressQuestions.zipCode; + this.isVehicleProtected = mobileLocation.isVehicleProtected; + }, async reloadShopData(zipCode) { await this.$refs.shopQuestion.reloadShopData(zipCode); }, - setUpdatedShopList(providerData) { - this.providerData = providerData; - }, openRecalibrationInformationModal() { this.recalibrationInformationModal.openModal(); }, @@ -497,18 +497,12 @@ export default { }, watch: { selectedAppointmentType: { - handler(newValue) { + async handler(newValue) { if (newValue === "Mobile") { - this.selectedProvider = new Provider(this.providerData.mobileProviderNumber); - } else { - this.selectedProvider = new Provider(); - } - }, - }, - providerData: { - handler(newValue) { - if (newValue === "Mobile") { - this.selectedProvider = new Provider(this.providerData.mobileProviderNumber); + getShopProviderData(this.zipCode).then(async (result) => { + this.shopProviderData = result.data; + this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); + }); } else { this.selectedProvider = new Provider(); } diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 34a3d23c1..35276228d 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -68,9 +68,6 @@ export default { }, linkWidgetName: String, modalWidgetName: String, - onZipUpdateCallback: { - type: Function, - }, }, computed: { serviceZipLinkText() { @@ -164,13 +161,9 @@ export default { this.$emit("updated-serviceability", serviceabilityDetails.data); this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); - // Update the page level model + // update the page level model this.$emit("update:modelValue", this.internalModel); - if (this.onZipUpdateCallback) { - await this.onZipUpdateCallback(serviceZipCode); - } - this.closeModal(); } } else { diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index c3f31c68d..30b39f1b0 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -63,7 +63,6 @@ export default { mixins: [baseMixin], data() { return { - shopProviders: [], shopListButton: shopListButton, answers: [], shopIndex: 0, @@ -76,6 +75,7 @@ export default { default: () => null, }, selectedAppointmentType: String, + shopProviderData: Array, cmsWidgetName: String, validationRules: String, isDisplayed: Boolean, @@ -84,6 +84,9 @@ export default { questionText() { return this.getCmsContent(this.cmsWidgetName, "QuestionText"); }, + shopProviders() { + return this.shopProviderData?.shopProviders ?? []; + }, selectedValue: { get: function () { return this.modelValue; @@ -124,22 +127,23 @@ export default { }, }, methods: { - loadInitialData(serviceZipCode) { - return this.loadData(serviceZipCode); - }, - loadData(serviceZipCode) { - return baseMixin.methods.dispatchStoreActionWithLogging( - storeActions.GET_PROVIDERS, - { - serviceZipCode: serviceZipCode, - }, - "service-location" - ); - }, - initializeComponent(shopQuestionInitialData) { - this.shopProviders = shopQuestionInitialData.shopProviders; - this.$emit("updated-shop-list", shopQuestionInitialData); - }, + // loadInitialData(serviceZipCode) { + // return this.loadData(serviceZipCode); + // }, + // loadData(serviceZipCode) { + // return getShopProviders(serviceZipCode); + // // return baseMixin.methods.dispatchStoreActionWithLogging( + // // storeActions.GET_PROVIDERS, + // // { + // // serviceZipCode: serviceZipCode, + // // }, + // // "service-location" + // // ); + // }, + // initializeComponent(shopQuestionInitialData) { + // this.shopProviders = shopQuestionInitialData.shopProviders; + // this.$emit("updated-shop-list", shopQuestionInitialData); + // }, async getNextShopsFromList(numberToGet = 3) { const shopIterator = (array, n) => { const l = array.length; @@ -199,15 +203,6 @@ export default { this.answers = []; this.shopIndex = 0; }, - async reloadShopData(serviceZipCode) { - const result = await this.loadData(serviceZipCode); - this.initializeComponent(result.data); - - this.resetAnswers(); - - await nextTick(); - await this.getNextShopsFromList(); - }, getSelectedProviderObject(providerNumber) { const provider = this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? @@ -239,19 +234,16 @@ export default { shopProviders: { async handler(newValue) { await nextTick(); + const selectedShopIndex = this.getSelectedProviderIndex( + newValue, + this.selectedProviderNumber + ); - if (this.selectedAppointmentType) { - const selectedShopIndex = this.getSelectedProviderIndex( - newValue, - this.selectedProviderNumber - ); - - if (selectedShopIndex >= 3) { - await this.getNextShopsFromList(selectedShopIndex + 1); - } else { - await this.getNextShopsFromList(); - await nextTick(); - } + if (selectedShopIndex >= 3) { + await this.getNextShopsFromList(selectedShopIndex + 1); + } else { + await this.getNextShopsFromList(); + await nextTick(); } }, }, From 29b7a4fb4549fe8a22e3c94f2b48149eda06e8aa Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 17 Oct 2023 08:30:56 -0400 Subject: [PATCH 2/4] Minor treak and unit tests --- jest.config.js | 2 +- .../service-location/service-location.spec.js | 98 ++++++----- .../service-location/service-location.vue | 23 ++- .../shop-question/shop-question.spec.js | 159 ++++++++++++------ .../shop-question/shop-question.vue | 23 +-- 5 files changed, 173 insertions(+), 132 deletions(-) diff --git a/jest.config.js b/jest.config.js index ac8208423..efec3da84 100644 --- a/jest.config.js +++ b/jest.config.js @@ -31,5 +31,5 @@ module.exports = { }, }, // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit - silent: true, + //silent: true, }; diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 6cd3bc2f1..f8e9062b3 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -7,10 +7,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper"; import store from "@/store"; import baseMixin from "@/mixins/base-mixin"; -import { - getServiceabilityDetails, - Provider, -} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; // Define Mocks jest.mock("@/helpers/cms-content-helper", () => ({ @@ -21,7 +18,7 @@ jest.mock("@/helpers/cms-content-helper", () => ({ jest.mock("./classes/provider"); -const mockGetPricedMobileFeePart = (mockServiceZipCode) => { +let mockGetPricedMobileFeePart = (mockServiceZipCode) => { let mobileFeePart = {}; if (mockServiceZipCode === "43235") { @@ -38,7 +35,7 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => { return Promise.resolve(mobileFeePart); }; -const mockGetServiceabilityDetails = (mockServiceZipCode) => { +let mockGetServiceabilityDetails = (mockServiceZipCode) => { const serviceabilityDetails = { isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, @@ -49,6 +46,17 @@ const mockGetServiceabilityDetails = (mockServiceZipCode) => { return Promise.resolve(serviceabilityDetails); }; +let mockGetShopProviderData = (mockServiceZipCode) => { + const result = { + data: { + mobileProviderNumber: "001820", + shopProviders: [{}], + }, + }; + + return Promise.resolve(result); +}; + jest.mock( "@/layouts/service-location/helpers/service-location-helper/service-location-helper", () => ({ @@ -58,6 +66,9 @@ jest.mock( getServiceabilityDetails: jest.fn((mockServiceZipCode) => { return mockGetServiceabilityDetails(mockServiceZipCode); }), + getShopProviderData: jest.fn((mockServiceZipCode) => { + return mockGetShopProviderData(mockServiceZipCode); + }), }) ); @@ -554,14 +565,13 @@ describe("service-location.vue", () => { describe("should be logical AND when recalibration is defined.", () => { test("T & T => T", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -582,14 +592,13 @@ describe("service-location.vue", () => { test("T & F => F", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -610,14 +619,13 @@ describe("service-location.vue", () => { test("F & T => F", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -638,14 +646,13 @@ describe("service-location.vue", () => { test("F & F => F", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -666,14 +673,13 @@ describe("service-location.vue", () => { test("displayServiceableMobileOnly should be true if mobile is true and inshop is false.", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -695,14 +701,13 @@ describe("service-location.vue", () => { test("displayServiceableMobileOnly should be false if mobile is false.", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -724,14 +729,13 @@ describe("service-location.vue", () => { test("displayServiceableMobileOnly should be false if inShop is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -753,14 +757,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be true if inShop is false and mobile is false", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -782,14 +785,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be false if inShop is true and mobile is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -811,14 +813,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be false if inShop is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -840,14 +841,13 @@ describe("service-location.vue", () => { test("displayNoShopsAlert should be false if mobile is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -869,14 +869,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be true if inshop is true and mobile is false", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -898,14 +897,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be false if inshop is false", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: false, isRecalibrationServiceableInshop: false, isGlassServiceableMobile: false, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -927,14 +925,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be false if mobile is true", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: true, - }) - ); + }); const { wrapper } = setupMocks({}); @@ -956,14 +953,13 @@ describe("service-location.vue", () => { test("displayServiceableInshopOnly should be false in the dual/static recalibration scenario", async () => { // Arrange - getServiceabilityDetails.mockImplementation(() => + mockGetServiceabilityDetails = () => Promise.resolve({ isGlassServiceableInshop: true, isRecalibrationServiceableInshop: true, isGlassServiceableMobile: true, isRecalibrationServiceableMobile: false, - }) - ); + }); const { wrapper } = setupMocks({}); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index ac7bfcb68..88bc55bda 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -19,8 +19,7 @@ @updated-serviceability="setServiceabilityDetails" @updated-contains-military-base="setContainsMilitaryBase" linkWidgetName="ServiceZipLinkWidget" - modalWidgetName="ServiceZipModalWidget" - /> + modalWidgetName="ServiceZipModalWidget" /> + modalWidgetName="MobileLocationModalWidget" /> { this.shopProviderData = result.data; - this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); - }); + this.selectedProvider = new Provider( + this.shopProviderData.mobileProviderNumber + ); + }); } this.setMobileLocation(newValue); @@ -504,8 +507,10 @@ export default { if (newValue === "Mobile") { getShopProviderData(this.zipCode).then(async (result) => { this.shopProviderData = result.data; - this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); - }); + this.selectedProvider = new Provider( + this.shopProviderData.mobileProviderNumber + ); + }); } else { this.selectedProvider = new Provider(); } diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js index 2904af1a9..1a02efff3 100644 --- a/src/layouts/service-location/shop-question/shop-question.spec.js +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -61,6 +61,7 @@ const mockCmsContent = { const cmsWidgetName = "ShopQuestionWidget"; const shopQuestionInitialData = { + mobileProviderNumber: "001820", shopProviders: [ { address: { @@ -162,15 +163,18 @@ describe("shop-question.vue", () => { selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, isDisplayed: true, + shopProviderData: null, }, mountOptions: { attachTo: document.body, }, }); - // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); + // Act await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); @@ -199,47 +203,6 @@ describe("shop-question.vue", () => { }); 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: [ @@ -276,6 +239,17 @@ describe("shop-question.vue", () => { distanceInMiles: 11.738869544543, providerNumber: "003343", }, + { + address: { + city: "COLUMBUS", + country: "US", + state: "OH", + streetAddress: "1670 HARMON AVE", + zipCode: "43223", + }, + distanceInMiles: 15.9727889297435, + providerNumber: "006747", + }, ], }; @@ -297,6 +271,7 @@ describe("shop-question.vue", () => { selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, isDisplayed: true, + shopProviderData: null, }, mountOptions: { attachTo: document.body, @@ -304,14 +279,89 @@ describe("shop-question.vue", () => { }); // Act - wrapper.vm.initializeComponent(alsoShopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: 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(false); + expect(showMoreShopsLink.exists()).toBeTruthy(); + expect(showMoreShopsLink.isVisible()).toBeTruthy(); + }); + + 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", + }, + ], + }; + + 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, + shopProviderData: null, + }, + mountOptions: { + attachTo: document.body, + }, + }); + + // Act + await wrapper.setProps({ + shopProviderData: alsoShopQuestionInitialData, + }); + + await wrapper.vm.$nextTick(); + + const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); + + await wrapper.vm.$nextTick(); + + // Assert + expect(showMoreShopsLink.exists()).toBeFalsy(); }); it("Should display the next three shops when the 'Show more location' link is clicked", async () => { @@ -355,6 +405,7 @@ describe("shop-question.vue", () => { selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, isDisplayed: true, + shopProviderData: null, }, mountOptions: { attachTo: document.body, @@ -362,7 +413,9 @@ describe("shop-question.vue", () => { }); // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); await wrapper.vm.$nextTick(); @@ -384,7 +437,7 @@ describe("shop-question.vue", () => { await wrapper.vm.$nextTick(); - showMoreShopsLink.trigger("click"); + showMoreShopsLink.trigger("click-event"); await wrapper.vm.$nextTick(); @@ -443,6 +496,7 @@ describe("shop-question.vue", () => { serviceZipCode: "43081", selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + shopProviderData: null, }, mountOptions: { attachTo: document.body, @@ -450,7 +504,9 @@ describe("shop-question.vue", () => { }); // Act - wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); @@ -468,15 +524,18 @@ describe("shop-question.vue", () => { modelValue: null, selectedAppointmentType: "Dropoff", cmsWidgetName: cmsWidgetName, + shopProviderData: null, }, mountOptions: { attachTo: document.body, }, }); - // Act - await wrapper.vm.initializeComponent(shopQuestionInitialData); + await wrapper.setProps({ + shopProviderData: shopQuestionInitialData, + }); + // Act await wrapper.vm.$nextTick(); expect(wrapper.vm.answers.length).toEqual(3); diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 30b39f1b0..fa00ab1dc 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -30,7 +30,7 @@ linkType="text" :text="showMoreShopsLinkText" href="#!" - @click-event="getNextShopsFromList" + @click-event="getNextShopsFromList(3)" :aria-label="showMoreShopsLinkText" /> @@ -43,8 +43,6 @@ import buttonQuestion from "@/digital-components/button-question/button-question import shopListButton from "./shop-list-button/shop-list-button"; import textLink from "@/ux-components/text-link/text-link"; -import { storeActions } from "@/constants/store-actions.js"; - // Supporting files import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; @@ -75,7 +73,7 @@ export default { default: () => null, }, selectedAppointmentType: String, - shopProviderData: Array, + shopProviderData: Object, cmsWidgetName: String, validationRules: String, isDisplayed: Boolean, @@ -127,23 +125,6 @@ export default { }, }, methods: { - // loadInitialData(serviceZipCode) { - // return this.loadData(serviceZipCode); - // }, - // loadData(serviceZipCode) { - // return getShopProviders(serviceZipCode); - // // return baseMixin.methods.dispatchStoreActionWithLogging( - // // storeActions.GET_PROVIDERS, - // // { - // // serviceZipCode: serviceZipCode, - // // }, - // // "service-location" - // // ); - // }, - // initializeComponent(shopQuestionInitialData) { - // this.shopProviders = shopQuestionInitialData.shopProviders; - // this.$emit("updated-shop-list", shopQuestionInitialData); - // }, async getNextShopsFromList(numberToGet = 3) { const shopIterator = (array, n) => { const l = array.length; From 4d2fe040a085d2842c26d60415b0e5d7a92f02e4 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 17 Oct 2023 08:39:47 -0400 Subject: [PATCH 3/4] Added TODO for one more important test and Prettified --- .../service-location/shop-question/shop-question.spec.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js index 1a02efff3..758aa759f 100644 --- a/src/layouts/service-location/shop-question/shop-question.spec.js +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -280,7 +280,7 @@ describe("shop-question.vue", () => { // Act await wrapper.setProps({ - shopProviderData: shopQuestionInitialData, + shopProviderData: alsoShopQuestionInitialData, }); await wrapper.vm.$nextTick(); @@ -348,7 +348,7 @@ describe("shop-question.vue", () => { attachTo: document.body, }, }); - + // Act await wrapper.setProps({ shopProviderData: alsoShopQuestionInitialData, @@ -364,7 +364,9 @@ describe("shop-question.vue", () => { expect(showMoreShopsLink.exists()).toBeFalsy(); }); - it("Should display the next three shops when the 'Show more location' link is clicked", async () => { + //TODO: Add test to ensure the "Show more locations" link is not visible when all the existing shops are displayed. + + it("Should display the next three shops when the 'Show more locations' link is clicked", async () => { // Arrange const displayedAnswers = [ { @@ -550,6 +552,7 @@ describe("shop-question.vue", () => { // Assert expect(wrapper.vm.answers.length).toEqual(3); }); + }); function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) { From b387c15058ad773f2b9cb4f8745af5fb8c12972c Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 17 Oct 2023 08:41:33 -0400 Subject: [PATCH 4/4] Prettified *again* --- src/layouts/service-location/shop-question/shop-question.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js index 758aa759f..82e48d470 100644 --- a/src/layouts/service-location/shop-question/shop-question.spec.js +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -552,7 +552,6 @@ describe("shop-question.vue", () => { // Assert expect(wrapper.vm.answers.length).toEqual(3); }); - }); function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {