From 5606f41432707b9d85b13f07ee0baebf2af14ac8 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Tue, 1 Nov 2022 14:44:57 -0400 Subject: [PATCH 1/2] brought over custom mixins for button gradient, added links to google fonts to fix font-weight issue, finished tests vehicle make. --- public/index.html | 8 +++-- .../button-question/button-question.vue | 2 +- src/helpers/unit-test-helper.js | 2 +- src/layouts/vehicle-make/vehicle-make.spec.js | 30 +++---------------- src/router/router-constants/routing-table.js | 2 +- src/styles/mixins/customMixins.scss | 6 ++++ vue.config.js | 1 + vue.release.config.js | 3 +- 8 files changed, 22 insertions(+), 32 deletions(-) create mode 100644 src/styles/mixins/customMixins.scss diff --git a/public/index.html b/public/index.html index 5f556395..97071c00 100644 --- a/public/index.html +++ b/public/index.html @@ -3,12 +3,16 @@ - + + + + + + <%= htmlWebpackPlugin.options.title %> diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 10337778..4734ed12 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -225,7 +225,7 @@ margin-top: 1.5rem; margin-bottom: 1rem; font-size: 1rem; - line-height: 1.625rem; + line-height: 1.5rem; & > span { text-align: center; diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 87ed9f4c..c52adf5d 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -33,7 +33,7 @@ export function getMountOptions(mockData) { mocks.vehicleCategories = vehicleCategories; mocks.issPageValues = issPageValues; mocks.queryStrings = queryStrings; - + mocks.$router = mockData?.router; const global = { mocks: mocks, diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index e205921d..7856dfeb 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -21,6 +21,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({ })); describe("vehicle-make.vue", () => { + test("Make question component is initized with api data", async () => { //Arrange const makeQuestionInitialData = ["honda", "ford", "dodge"]; @@ -43,10 +44,8 @@ describe("vehicle-make.vue", () => { ); }); }); -}); -/* -describe("vehicle-make.vue", () => { - test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => { + + test("BackButtonAction triggers a router.navigate change", async () => { //Arrange const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: "Select a make to get started", @@ -70,32 +69,11 @@ describe("vehicle-make.vue", () => { //Assert apiPromise.finally(() => { expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); - done(); }); }); + }); -describe("vehicle-make.vue", () => { - test("Year set, arePagePrerequisitesValid should be true ", async () => { - //Arrange - const { wrapper } = setupMocks({}); - - //Act - vehicleMake.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: "vehicle-make" } }, - undefined, - (c) => c(wrapper.vm) - ); - - let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); - - //Assert - expect(arePagePrerequisitesValid).toBe(true); - }); -}); -*/ - function setupMocks({ vehicleMakeQuestionCmsContent = {}, makeQuestionInitialData = {}, diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 5b56837d..b97dfb13 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -35,7 +35,7 @@ const routingTable = function(store) { maps: [ { scenario: navigationScenarios.CLICKED_FORWARD, - destinationIssPageValue: issPageValues.VEHICLE_MAKE, + destinationIssPageValue: issPageValues.VEHICLE_YEAR, }, { scenario: navigationScenarios.CLICKED_TEST, diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss new file mode 100644 index 00000000..3576a8ac --- /dev/null +++ b/src/styles/mixins/customMixins.scss @@ -0,0 +1,6 @@ +//Custom Mixins + +//Blue gradient background mixin +@mixin blue-gradient { + background: linear-gradient(270deg, $blue 0%, $blue-800 100%); +} diff --git a/vue.config.js b/vue.config.js index 3c474a35..1f356d22 100644 --- a/vue.config.js +++ b/vue.config.js @@ -19,6 +19,7 @@ module.exports = { @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; + @import "@/styles/mixins/customMixins"; `, }, }, diff --git a/vue.release.config.js b/vue.release.config.js index 93af085c..442e244b 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -17,10 +17,11 @@ module.exports = { @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; + @import "@/styles/mixins/customMixins"; `, }, }, - }, + }, configureWebpack: { devtool: 'source-map' }, From ced1b59fed044e08f1092bb476cd68df1525996e Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Tue, 1 Nov 2022 16:12:58 -0400 Subject: [PATCH 2/2] Moved setting selected value in store from question components to parent components. Pulled over arePagePrerequisitesValids methods. --- .../make-question/make-question.vue | 2 -- src/layouts/vehicle-make/vehicle-make.spec.js | 20 +++++++++++++++++++ src/layouts/vehicle-make/vehicle-make.vue | 18 ++++++++++++++++- src/layouts/vehicle-year/vehicle-year.vue | 16 +++++++++++++++ .../year-question/year-question.vue | 2 -- 5 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 0062f422..9ed4f4ea 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -40,8 +40,6 @@ }, set: function(newValue) { this.$emit("update:modelValue", newValue); - this.mainStore.updateVehicleMake(newValue); - this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route) } } }, diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 7856dfeb..72d3a604 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -5,6 +5,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import baseMixin from "@/mixins/base-mixin.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; +import { useMainStore } from "@/store"; // Components import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; @@ -72,6 +73,25 @@ describe("vehicle-make.vue", () => { }); }); + test("Year set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.year = 2001; + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); + }); function setupMocks({ diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index cc10d326..3fc8185d 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -42,7 +42,7 @@ }; }, - async beforeRouteEnter(to, from, next) { + async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData(); @@ -76,6 +76,13 @@ this.$route ); }, + arePagePrerequisitesValid() { + console.log(this.mainStore.order) + if (this.mainStore.order.vehicle.year){ + return true; + } + return false; + }, }, components: { makeQuestion, @@ -83,5 +90,14 @@ siteSubHeader, vehicleBanner, }, + watch: { + selectedMake(make) { + this.mainStore.updateVehicleMake(make); + this.$router.navigate( + this.navigationScenarios.SELECTED_MAKE, + this.$route + ); + }, + }, }; \ No newline at end of file diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 86f06484..96fa0804 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -65,6 +65,22 @@ ); }); }, + + watch: { + selectedYear(year) { + const parsedYear = parseInt(year); + this.mainStore.updateVehicleYear(parsedYear); + this.$router.navigate( + this.navigationScenarios.SELECTED_YEAR, + this.$route + ); + }, + }, + methods: { + arePagePrerequisitesValid() { + return true; + }, + }, components: { yearQuestion, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 28b3c255..0cd35425 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -40,8 +40,6 @@ }, set: function(newValue) { this.$emit("update:modelValue", newValue); - this.mainStore.updateVehicleYear(newValue); - this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route) } } },