From f19870cdaab345384d2f2d185ec862c449a3788f Mon Sep 17 00:00:00 2001 From: Frank Date: Tue, 7 Dec 2021 20:18:44 -0500 Subject: [PATCH 1/6] routing table init --- src/router/index.js | 11 +++++++++++ src/router/router-constants/fmgPage-values.js | 6 ++++++ src/router/router-constants/navigation-scenarios.js | 5 +++++ src/router/router-constants/routing-table.js | 13 +++++++++++++ 4 files changed, 35 insertions(+) create mode 100644 src/router/router-constants/fmgPage-values.js create mode 100644 src/router/router-constants/navigation-scenarios.js create mode 100644 src/router/router-constants/routing-table.js diff --git a/src/router/index.js b/src/router/index.js index 2b3d566a1..d2c335ca7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -70,6 +70,17 @@ const router = createRouter({ routes, }); +router.navigate = (scenario, optionalQuery, optionalParams) => +{ + +} + +router.getNavigationMap = (scenario, currentRoute) => +{ + const fmgPageValue = currentRoute.query.fmgPage; + +} + // Get route information by page name. // This will reach out to the Cms and there is a 1:1 relationship between page names and route names. function GetRouteInfoFromPageName(pageName) { diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js new file mode 100644 index 000000000..ee3031bff --- /dev/null +++ b/src/router/router-constants/fmgPage-values.js @@ -0,0 +1,6 @@ +const fmgPageValues = { + VEHICLE_YEAR: 'vehicle-year', + VEHICLE_MAKE: 'vehicle-make', +}; + +export { fmgPageValues }; \ No newline at end of file diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js new file mode 100644 index 000000000..5db881eef --- /dev/null +++ b/src/router/router-constants/navigation-scenarios.js @@ -0,0 +1,5 @@ +const navigationScenarios = { + SELECTED_YEAR: 'SELECTED_YEAR', +}; + +export { navigationScenarios } ; \ No newline at end of file diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js new file mode 100644 index 000000000..410665630 --- /dev/null +++ b/src/router/router-constants/routing-table.js @@ -0,0 +1,13 @@ +import { fmgPageValues } from '@/router/router-constants/fmg-page-values'; +import { navigationScenarios } from '@/router/router-constants/navigation-scenarios'; + +const routingTable = [ + { + fmgPageValue: fmgPageValues.VEHICLE_YEAR, + maps: [ + { scenario: navigationScenarios.SELECTED_YEAR, destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE } + ] + } +] + +export { routingTable }; \ No newline at end of file From d82c21c7448257229cce4b8451a0c5da9081992e Mon Sep 17 00:00:00 2001 From: Frank Date: Wed, 8 Dec 2021 16:28:17 -0500 Subject: [PATCH 2/6] created routing table logic --- src/router/index.js | 27 ++++++++++++++++---- src/router/router-constants/routing-table.js | 5 ++-- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index d2c335ca7..924ac5965 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,8 @@ import { createWebHistory, createRouter } from "vue-router"; import { storeActions } from "@/constants/store-actions.js"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; +import { routingTable } from "@/router/router-constants/routing-table.js"; +import { fmgPageValues } from '@/router/router-constants/fmgPage-values.js'; import ComponentTest from "@/layouts/component-test/component-test.vue"; import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue"; import NotFound from "@/layouts/not-found/not-found.vue"; @@ -65,22 +67,37 @@ const routes = [ }, ]; + const router = createRouter({ history: createWebHistory("/fmg/"), routes, }); -router.navigate = (scenario, optionalQuery, optionalParams) => -{ +router.navigate = (scenario, currentRoute, optionalQuery, optionalParams) => { + if (!scenario) { + console.error("No scenario provided, navigating to 404 page."); + } + + // Match our maps up and navigate if we have a destination. + const matchingScenarioMap = router.getNavigationMap(scenario, currentRoute); + + if (matchingScenarioMap.destinationFmgPageValue !== undefined) { + router.push({ + path: '/', query: Object.assign(currentRoute.query, { fmgPage: matchingScenarioMap.destinationFmgPageValue }) + }); + } } -router.getNavigationMap = (scenario, currentRoute) => -{ +router.getNavigationMap = (scenario, currentRoute) => { const fmgPageValue = currentRoute.query.fmgPage; - + const matchedQueryValue = routingTable.filter(item => (item.fmgPageValue === fmgPageValue) && item.maps.filter(map => map.scenario === scenario).length > 0).map(m => m.maps.filter(map => map.scenario === scenario)); + return matchedQueryValue[0][0]; } + + + // Get route information by page name. // This will reach out to the Cms and there is a 1:1 relationship between page names and route names. function GetRouteInfoFromPageName(pageName) { diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 410665630..584161f43 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -1,4 +1,4 @@ -import { fmgPageValues } from '@/router/router-constants/fmg-page-values'; +import { fmgPageValues } from '@/router/router-constants/fmgPage-values'; import { navigationScenarios } from '@/router/router-constants/navigation-scenarios'; const routingTable = [ @@ -7,7 +7,8 @@ const routingTable = [ maps: [ { scenario: navigationScenarios.SELECTED_YEAR, destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE } ] - } + }, + ] export { routingTable }; \ No newline at end of file From 43c6aed0a28a7861ce21217aa94a32c1ae6d9612 Mon Sep 17 00:00:00 2001 From: Frank Date: Wed, 8 Dec 2021 20:56:57 -0500 Subject: [PATCH 3/6] improvements --- src/helpers/cms-content-helper.js | 7 +----- src/layouts/vehicle-year/vehicle-year.vue | 2 +- src/router/index.js | 28 +++++++++++++++++------ 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index e5826c81d..d6f4547c5 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -4,9 +4,7 @@ import store from "@/store"; export function fetchCmsContentForPage(fmgPage) { return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => { - const pageDataFromCms = { - isCmsContentReady: false - }; + const pageDataFromCms = {}; response.data.Result.forEach((widget) => { if (Object.values(widgetNames).includes(widget.Type)) { @@ -20,9 +18,6 @@ export function fetchCmsContentForPage(fmgPage) { } }); - // Our 'Page' is ready because we have data now - pageDataFromCms.isCmsContentReady = true; - return pageDataFromCms; }); } diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 4da235fcc..6681ea3d6 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -1,4 +1,4 @@ - @@ -29,16 +35,18 @@ export default { vehicleYears: [], siteHeaderWidget: {}, vehicleBannerWidget: {}, - selectedYear: null + selectedYear: null, }; }, computed: {}, beforeRouteEnter(to, from, next) { - // Call APIs const contentPromise = fetchCmsContentForPage(to.query.fmgPage); - const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {}); + const getVehicleYearPromise = store.dispatch( + storeActions.GET_VEHICLE_YEARS, + {} + ); // Settle promises and get results const promiseResultMap = [ @@ -52,13 +60,14 @@ export default { }, ]; settleAllPromises(promiseResultMap).then((resultMap) => { - // Call the "next" function to complete the transition to this page. next((vm) => { vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0]; vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0]; - vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0]; - vm.vehicleBannerWidget = resultMap.getPageContent.VehicleBannerWidget[0]; + vm.radioQuestionWidgets = + resultMap.getPageContent.RadioQuestionWidget[0]; + vm.vehicleBannerWidget = + resultMap.getPageContent.VehicleBannerWidget[0]; vm.vehicleYears = resultMap.getVehicleYear; }); }); @@ -66,9 +75,9 @@ export default { watch: { selectedYear(year) { - this.$store.commit(this.storeMutations.UPDATE_YEAR, year); - this.$router.push('?fmgPage=vehicle-make'); - } + this.$store.commit(this.storeMutations.UPDATE_YEAR, year); + this.$router.push("?fmgPage=vehicle-make"); + }, }, components: { @@ -81,15 +90,15 @@ export default { diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js index 5e2ffeca7..a51d25810 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/src/layouts/vehicle-year/year-question/year-question.spec.js @@ -1,21 +1,25 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; import { shallowMount } from "@vue/test-utils"; -describe('year-question.vue', () => { - test('year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.', async () => { - // Act - const wrapper = shallowMount(yearQuestion); - await wrapper.setProps({ - questionText: 'What year is your vehicle?', - years: ['2023', '2022', '2021'], - modelValue: '2020' - }); - wrapper.vm.$options.watch.selectedYear.call(wrapper.vm); - - // Assert - const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'}); - expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?"); - expect(radioQuestion.attributes('answers')).toBe("2023,2022,2021"); - expect(wrapper.componentVM.modelValue).toBe("2020"); +describe("year-question.vue", () => { + test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => { + // Act + const wrapper = shallowMount(yearQuestion); + await wrapper.setProps({ + questionText: "What year is your vehicle?", + years: ["2023", "2022", "2021"], + modelValue: "2020", }); -}); \ No newline at end of file + wrapper.vm.$options.watch.selectedYear.call(wrapper.vm); + + // Assert + const radioQuestion = await wrapper.findComponent({ + name: "radioQuestion", + }); + expect(radioQuestion.attributes("questiontext")).toBe( + "What year is your vehicle?" + ); + expect(radioQuestion.attributes("answers")).toBe("2023,2022,2021"); + expect(wrapper.componentVM.modelValue).toBe("2020"); + }); +}); diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 4c5bb8d30..b3d2f8279 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,33 +1,34 @@ diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index eb6142910..afe618125 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -3,10 +3,9 @@ import { storeMutations } from "@/constants/store-mutations.js"; import { widgetNames } from "@/constants/widget-names.js"; export default { - data(){ + data() { return { - isCmsContentReady: false - } + }; }, methods: { // dispatchBlockingStoreAction(type, payload) { diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js index e3acbcbb7..b10a9bbb3 100644 --- a/src/mixins/base-mixin.spec.js +++ b/src/mixins/base-mixin.spec.js @@ -1,54 +1,53 @@ -import baseMixin from "@/mixins/base-mixin" +import baseMixin from "@/mixins/base-mixin"; import { storeActions } from "@/constants/store-actions.js"; import { widgetNames } from "@/constants/widget-names.js"; describe("baseMixin.js", () => { - test('dispatchNonblockingStoreAction: calls dispatch with type and payload', () => { - const mixIn = getMixInInstance({}); - const type = {}; - const payload = {}; + test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => { + const mixIn = getMixInInstance({}); + const type = {}; + const payload = {}; - mixIn.methods.dispatchNonBlockingStoreAction(type, payload); + mixIn.methods.dispatchNonBlockingStoreAction(type, payload); - expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload); - }); + expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload); + }); - test('dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode', () => { - const mixIn = getMixInInstance({}); - const type = {}; - const payload = { make: 'Alfa Romeo/Chrysler' }; + test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => { + const mixIn = getMixInInstance({}); + const type = {}; + const payload = { make: "Alfa Romeo/Chrysler" }; - mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true); + mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true); - expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload); - }); -}) + expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload); + }); +}); function getMixInInstance({ isDispatchSuccess = true }) { + // Mock Store + const store = { + dispatch: jest.fn(), + }; - // Mock Store - const store = { - dispatch: jest.fn() - } + if (isDispatchSuccess) { + store.dispatch.mockReturnValue(Promise.resolve()); + } else { + store.dispatch.mockReturnValue(Promise.reject()); + } - if (isDispatchSuccess) { - store.dispatch.mockReturnValue(Promise.resolve()) - } else { - store.dispatch.mockReturnValue(Promise.reject()) - } + // Mock Route + const route = { + query: { + fmgPage: "test-page", + }, + }; - // Mock Route - const route = { - query: { - fmgPage: 'test-page' - } - }; + // Attach mocks to mixin + const baseMixIn = baseMixin; + baseMixIn.methods.$route = route; + baseMixIn.methods.$store = store; + baseMixIn.methods.storeActions = storeActions; + baseMixIn.methods.widgetNames = widgetNames; - // Attach mocks to mixin - const baseMixIn = baseMixin; - baseMixIn.methods.$route = route; - baseMixIn.methods.$store = store; - baseMixIn.methods.storeActions = storeActions; - baseMixIn.methods.widgetNames = widgetNames; - - return baseMixIn; -} \ No newline at end of file + return baseMixIn; +} diff --git a/src/router/index.js b/src/router/index.js index 24854555b..a93fe6e54 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -66,18 +66,20 @@ const routes = [ }, ]; - const router = createRouter({ history: createWebHistory("/fmg/"), routes, }); - //---------------------------------------------------------- Router Functions ---------------------------------------------------------- // Navigate to the next route, depending on the scenario. -router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => { - +router.navigate = ( + scenario, + currentRoute, + optionalQuery = {}, + optionalParams = {} +) => { if (!scenario) { console.error("No scenario provided. Please review the routing table."); return; @@ -88,21 +90,31 @@ router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = if (matchingScenarioMap.destinationFmgPageValue !== undefined) { // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one. - router.push({ path: '/', query: Object.assign(optionalQuery, { fmgPage: matchingScenarioMap.destinationFmgPageValue }), params: optionalParams }); + router.push({ + path: "/", + query: Object.assign(optionalQuery, { + fmgPage: matchingScenarioMap.destinationFmgPageValue, + }), + params: optionalParams, + }); } else if (matchingScenarioMap.destinationUrl !== undefined) { navigateToUrl(matchingScenarioMap.destinationUrl); } - -} +}; // Get navigation map depeding on the scenario and the current 'page' you're on. router.getNavigationMap = (scenario, currentRoute) => { - const fmgPageValue = currentRoute.query.fmgPage; - const matchedQueryValue = routingTable.filter(item => (item.fmgPageValue === fmgPageValue) && item.maps.filter(map => map.scenario === scenario).length > 0).map(m => m.maps.filter(map => map.scenario === scenario)); + const matchedQueryValue = routingTable + .filter( + (item) => + item.fmgPageValue === fmgPageValue && + item.maps.filter((map) => map.scenario === scenario).length > 0 + ) + .map((m) => m.maps.filter((map) => map.scenario === scenario)); return matchedQueryValue[0][0]; -} +}; //---------------------------------------------------------- Private Functions ---------------------------------------------------------- diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js index ee3031bff..e84d9e9ea 100644 --- a/src/router/router-constants/fmgPage-values.js +++ b/src/router/router-constants/fmgPage-values.js @@ -1,6 +1,6 @@ const fmgPageValues = { - VEHICLE_YEAR: 'vehicle-year', - VEHICLE_MAKE: 'vehicle-make', + VEHICLE_YEAR: "vehicle-year", + VEHICLE_MAKE: "vehicle-make", }; -export { fmgPageValues }; \ No newline at end of file +export { fmgPageValues }; diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 5db881eef..3fc642d65 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -1,5 +1,5 @@ -const navigationScenarios = { - SELECTED_YEAR: 'SELECTED_YEAR', +const navigationScenarios = { + SELECTED_YEAR: "SELECTED_YEAR", }; -export { navigationScenarios } ; \ No newline at end of file +export { navigationScenarios }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 584161f43..7f3f3d0d1 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -1,14 +1,16 @@ -import { fmgPageValues } from '@/router/router-constants/fmgPage-values'; -import { navigationScenarios } from '@/router/router-constants/navigation-scenarios'; +import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; +import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; const routingTable = [ - { - fmgPageValue: fmgPageValues.VEHICLE_YEAR, - maps: [ - { scenario: navigationScenarios.SELECTED_YEAR, destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE } - ] - }, - -] + { + fmgPageValue: fmgPageValues.VEHICLE_YEAR, + maps: [ + { + scenario: navigationScenarios.SELECTED_YEAR, + destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE, + }, + ], + }, +]; -export { routingTable }; \ No newline at end of file +export { routingTable }; diff --git a/src/store/index.js b/src/store/index.js index ec8dfa4e3..036694868 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -32,7 +32,7 @@ export default createStore({ zipCode: null, firstName: null, lastName: null, - licensePlate: null + licensePlate: null, }, damage: { isRepair: null, @@ -52,16 +52,16 @@ export default createStore({ isCash: null, }, referralSeqNum: null, - } + }, }, applicationUser: { experiments: null, - } + }, }, // See IMPORTANT note at top of "state" declaration. mutations: { - updateYear(state, year){ + updateYear(state, year) { state.order.vehicle.year = year; }, }, @@ -86,7 +86,7 @@ export default createStore({ method: endpoints.LookupVehicleByVin.method, endpoint: endpoints.LookupVehicleByVin.url, payload: { - "vin": vin // EX "1J4GW58S4XC541166" + vin: vin, // EX "1J4GW58S4XC541166" }, }); }, @@ -135,6 +135,6 @@ export default createStore({ endpoint: relativeUrl, payload: {}, }); - } + }, }, }); diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 6f69b1a92..76acc0dbf 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -1,121 +1,131 @@ -import store from './index' -import globalMethods from '@/global-methods' +import store from "./index"; +import globalMethods from "@/global-methods"; describe("Actions", () => { - it("Should return list of years retrieved", async () => { - // Arrange - let years = []; + it("Should return list of years retrieved", async () => { + // Arrange + let years = []; - // Act - globalMethods.callHttpClient = jest.fn(); - globalMethods.callHttpClient.mockImplementation(() => { - return Promise.resolve({ data: [2023,2022,2021]}); - }); - await store.dispatch('getVehicleYears') - .then( (response) => { - years = response.data; - }); - - // Assert - expect(years[0]).toBe(2023); + // Act + globalMethods.callHttpClient = jest.fn(); + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ data: [2023, 2022, 2021] }); + }); + await store.dispatch("getVehicleYears").then((response) => { + years = response.data; }); - it("Should return list of makes retrieved", async () => { - // Arrange - let makes = []; + // Assert + expect(years[0]).toBe(2023); + }); - // Act - globalMethods.callHttpClient.mockImplementation(() => { - return Promise.resolve({ data: ['Baic','Honda','Ford']}); - }); - await store.dispatch('getVehicleMakes', {year: 2023}) - .then( (response) => { - makes = response.data; - }); + it("Should return list of makes retrieved", async () => { + // Arrange + let makes = []; - // Assert - expect(makes[0]).toBe('Baic'); + // Act + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ data: ["Baic", "Honda", "Ford"] }); + }); + await store.dispatch("getVehicleMakes", { year: 2023 }).then((response) => { + makes = response.data; }); - it("Should return list of models retrieved", async () => { - // Arrange - let models = []; + // Assert + expect(makes[0]).toBe("Baic"); + }); - // Act - globalMethods.callHttpClient.mockImplementation(() => { - return Promise.resolve({ data: ['BJ40 (MEX)','Civic','Accord']}); - }); - await store.dispatch('getVehicleModels', {year: 2023, make: 'Baic'}) - .then( (response) => { - models = response.data; - }); + it("Should return list of models retrieved", async () => { + // Arrange + let models = []; - // Assert - expect(models[0]).toBe('BJ40 (MEX)'); + // Act + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ data: ["BJ40 (MEX)", "Civic", "Accord"] }); }); + await store + .dispatch("getVehicleModels", { year: 2023, make: "Baic" }) + .then((response) => { + models = response.data; + }); - it("Should return list of styles retrieved", async () => { - // Arrange - let styles = []; + // Assert + expect(models[0]).toBe("BJ40 (MEX)"); + }); - // Act - globalMethods.callHttpClient.mockImplementation(() => { - return Promise.resolve({ data: ['4 DOOR UTILITY','2 DOOR']}); - }); - await store.dispatch('getVehicleStyles', {year: 2023, make: 'Baic', model: 'BJ40 (MEX)'}) - .then( (response) => { - styles = response.data; - }); + it("Should return list of styles retrieved", async () => { + // Arrange + let styles = []; - // Assert - expect(styles[0]).toBe('4 DOOR UTILITY'); + // Act + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ data: ["4 DOOR UTILITY", "2 DOOR"] }); }); + await store + .dispatch("getVehicleStyles", { + year: 2023, + make: "Baic", + model: "BJ40 (MEX)", + }) + .then((response) => { + styles = response.data; + }); - it("Should return data from url retrieved", async () => { - // Arrange - let routeInfo = []; + // Assert + expect(styles[0]).toBe("4 DOOR UTILITY"); + }); - // Act - globalMethods.callHttpClient.mockImplementation(() => { - return Promise.resolve({ data: { - Result: 'Route Info Data' - }}); - }); - await store.dispatch('getRouteInfo', { pageName: 'vehicle-year' }) - .then( (response) => { - routeInfo = response.data.Result; - }); + it("Should return data from url retrieved", async () => { + // Arrange + let routeInfo = []; - // Assert - expect(routeInfo).toBe('Route Info Data'); + // Act + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ + data: { + Result: "Route Info Data", + }, + }); }); + await store + .dispatch("getRouteInfo", { pageName: "vehicle-year" }) + .then((response) => { + routeInfo = response.data.Result; + }); - it("Should return page data from url retrieved", async () => { - // Arrange - let pageData = []; + // Assert + expect(routeInfo).toBe("Route Info Data"); + }); - // Act - globalMethods.callHttpClient.mockImplementation(() => { - return Promise.resolve({ data: { - Result: 'Page Info Data' - }}); - }); - await store.dispatch('getPageData', { pageName: 'vehicle-year' }) - .then( (response) => { - pageData = response.data.Result; - }); + it("Should return page data from url retrieved", async () => { + // Arrange + let pageData = []; - // Assert - expect(pageData).toBe('Page Info Data'); + // Act + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ + data: { + Result: "Page Info Data", + }, + }); }); -}) + await store + .dispatch("getPageData", { pageName: "vehicle-year" }) + .then((response) => { + pageData = response.data.Result; + }); + + // Assert + expect(pageData).toBe("Page Info Data"); + }); +}); describe("Mutations", () => { - it("Should update the year property in the store", () => { - // Act - store.commit('updateYear', 2020); + it("Should update the year property in the store", () => { + // Act + store.commit("updateYear", 2020); - // Assert - expect(store.state.order.vehicle.year).toBe(2020); - }); -}); \ No newline at end of file + // Assert + expect(store.state.order.vehicle.year).toBe(2020); + }); +}); diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js index 882a68129..3d0843e10 100644 --- a/src/ux-components/alert/alert.spec.js +++ b/src/ux-components/alert/alert.spec.js @@ -1 +1 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +test.todo("some test to be written in the future"); diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 7358073df..89bd366a3 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -1,12 +1,25 @@ @@ -24,7 +24,7 @@ export default { isDisabled: Boolean, loaderColor: String, loaderPosition: String, - sizeInRem: [Number,String] + sizeInRem: [Number, String], }, data() { return { diff --git a/src/ux-components/button-secondary/button-secondary.vue b/src/ux-components/button-secondary/button-secondary.vue index f6dd62631..ec4d7ec0c 100644 --- a/src/ux-components/button-secondary/button-secondary.vue +++ b/src/ux-components/button-secondary/button-secondary.vue @@ -3,14 +3,14 @@ :disabled="isDisabled" :aria-disabled="isDisabled" class="btn btn-secondary d-flex align-items-center py-3 px-4" - @click='displayComponent' - > + @click="displayComponent" + > {{ this.buttonText }} @@ -24,7 +24,7 @@ export default { isDisabled: Boolean, loaderColor: String, loaderPosition: String, - sizeInRem: [Number,String] + sizeInRem: [Number, String], }, data() { return { diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue index 0749c0462..95e1e89a6 100644 --- a/src/ux-components/header/header.vue +++ b/src/ux-components/header/header.vue @@ -1,7 +1,9 @@ diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 303ccdf2a..52997d5d6 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -1,21 +1,27 @@