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/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 e205921d..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"; @@ -21,6 +22,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 +45,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,15 +70,13 @@ 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({}); + useMainStore().order.vehicle.year = 2001; //Act vehicleMake.beforeRouteEnter.call( @@ -93,8 +91,8 @@ describe("vehicle-make.vue", () => { //Assert expect(arePagePrerequisitesValid).toBe(true); }); + }); -*/ function setupMocks({ vehicleMakeQuestionCmsContent = {}, 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) } } }, diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 1f5a87d5..67c7c284 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -48,7 +48,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' },