From 549a8b359319b32217ab348ce226e04f39f1596f Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 7 Jan 2022 16:00:34 -0500 Subject: [PATCH 01/29] CSR-254: create form-test page and begin testing validation --- package.json | 1 + src/layouts/form-test/form-test.vue | 162 ++++++++++++++++++ src/router/index.js | 6 + .../list-button-horizontal.vue | 60 ++++++- src/ux-components/list-card/list-card.vue | 104 +++++++++-- 5 files changed, 317 insertions(+), 16 deletions(-) create mode 100644 src/layouts/form-test/form-test.vue diff --git a/package.json b/package.json index 58b8837dd..50a9b5760 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "core-js": "^3.6.5", "http-status-codes": "^2.1.4", "jest-junit": "^13.0.0", + "vee-validate": "^4.5.7", "vue": "^3.0.0", "vue-router": "^4.0.11", "vuex": "^4.0.2", diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue new file mode 100644 index 000000000..96bc9bd33 --- /dev/null +++ b/src/layouts/form-test/form-test.vue @@ -0,0 +1,162 @@ + + + diff --git a/src/router/index.js b/src/router/index.js index c135d60c1..2f4f0daad 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -3,6 +3,7 @@ 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 ComponentTest from "@/layouts/component-test/component-test.vue"; +import FormTest from "@/layouts/form-test/form-test.vue"; import NotFound from "@/layouts/not-found/not-found.vue"; import store from "@/store"; @@ -17,6 +18,11 @@ const routes = [ name: "ComponentTest", component: ComponentTest, }, + { + path: "/form-test", // This is a temporary route for testing. + name: "FormTest", + component: FormTest, + }, { path: "/", beforeEnter(to, from, next) { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 97642d2c1..ef5632b5a 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -2,16 +2,46 @@ diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 68b1c80b0..6d06651f4 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,24 +1,61 @@ From 42d2d6334bccf0ef18158aaf6e8ff547b1fbaa4b Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Mon, 10 Jan 2022 17:38:32 -0500 Subject: [PATCH 02/29] CSR-254: add generic textInput component and add validation on form-test --- .../text-input/text-input.spec.js | 38 ++++++++++ .../text-input/text-input.vue | 70 +++++++++++++++++++ src/layouts/form-test/form-test.vue | 46 +++++++++--- .../list-button-horizontal.vue | 2 +- 4 files changed, 147 insertions(+), 9 deletions(-) create mode 100644 src/common-components/text-input/text-input.spec.js create mode 100644 src/common-components/text-input/text-input.vue diff --git a/src/common-components/text-input/text-input.spec.js b/src/common-components/text-input/text-input.spec.js new file mode 100644 index 000000000..fcb08d57a --- /dev/null +++ b/src/common-components/text-input/text-input.spec.js @@ -0,0 +1,38 @@ +import { shallowMount } from "@vue/test-utils"; +import textInput from "./text-input"; + +describe("text-input.vue", () => { + + it("Should render a text input", async () => { + // Act + const wrapper = shallowMount(textInput, { + propsData: { + name: "test", + label: "unit test label", + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.exists()).toBe(true); + }); + + it("Should return aria-required state", async () => { + // Act + const wrapper = shallowMount(textInput, { + propsData: { + name: "test", + label: "unit test label", + isRequired: true + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.attributes()["aria-required"]).toEqual("true"); + + }); + +}); \ No newline at end of file diff --git a/src/common-components/text-input/text-input.vue b/src/common-components/text-input/text-input.vue new file mode 100644 index 000000000..50096a52f --- /dev/null +++ b/src/common-components/text-input/text-input.vue @@ -0,0 +1,70 @@ + + + + diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue index 96bc9bd33..4d0ef09bd 100644 --- a/src/layouts/form-test/form-test.vue +++ b/src/layouts/form-test/form-test.vue @@ -1,8 +1,8 @@ @@ -19,7 +19,6 @@ export default { data() { return { questionText: null, - selectedStyle: null, styles: Array, } }, @@ -39,7 +38,7 @@ export default { } }, watch: { - selectedStyle(val) { + modelValue(val) { this.$emit("update:modelValue", val); } }, 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 3c00dcd9d..4d1a32a34 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/src/layouts/vehicle-year/year-question/year-question.spec.js @@ -12,11 +12,11 @@ describe("year-question.vue", () => { const yearToSelect = "2021"; //Act - wrapper.setData({ selectedYear: yearToSelect }); + wrapper.setValue({ modelValue: yearToSelect }); await wrapper.vm.$nextTick(); //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: "2021"}]); }); }); diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 1a4a80279..6399abb0c 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -3,7 +3,7 @@ :questionText="questionText" :answers="years" groupName="Choose Vehicle Year" - v-model="selectedYear" + v-model="modelValue" /> @@ -18,7 +18,6 @@ export default { data() { return { questionText: null, - selectedYear: null, years: Array, } }, @@ -38,7 +37,7 @@ export default { } }, watch: { - selectedYear(val) { + modelValue(val) { this.$emit("update:modelValue", val); } }, From 80a4de2cc796aaf8b4c5220cf505e880f0244bb6 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 13 Jan 2022 11:56:04 -0500 Subject: [PATCH 07/29] Updating method and action name and awaiting data before page change on vehicle style page --- src/constants/store-actions.js | 2 +- src/layouts/vehicle-style/vehicle-style.spec.js | 4 ++-- src/layouts/vehicle-style/vehicle-style.vue | 9 +++++---- src/store/index.js | 2 +- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index c6f1a23a9..d052bed32 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -5,7 +5,7 @@ const storeActions = { GET_VEHICLE_MAKES: "getVehicleMakes", GET_VEHICLE_MODELS: "getVehicleModels", GET_VEHICLE_STYLES: "getVehicleStyles", - GET_VEHICLE: "getVehicle", + SET_VEHICLE: "setVehicle", GET_DAMAGE_OPTIONS: "getDamageOptions", GET_EVOX_IMAGE: "getEvoxImage", LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js index 7d3bcaca7..31c1b2487 100644 --- a/src/layouts/vehicle-style/vehicle-style.spec.js +++ b/src/layouts/vehicle-style/vehicle-style.spec.js @@ -142,7 +142,7 @@ describe("vehicle-style.vue", () => { }, actionList: [ { - actionName: storeActions.GET_VEHICLE, + actionName: storeActions.SET_VEHICLE, data: 'mockData' } ] @@ -151,7 +151,7 @@ describe("vehicle-style.vue", () => { //Act vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm)); - wrapper.vm.selectVehicle(); + wrapper.vm.setVehicle(); await nextTick(); //Assert diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index ff9fb86d3..ea3300036 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -68,16 +68,17 @@ export default { // route to move backwards this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }, - selectVehicle() { - this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE, {year: this.$store.getters.vehicle.year, make: this.$store.getters.vehicle.make, model: this.$store.getters.vehicle.model, style: this.$store.getters.vehicle.style}); + setVehicle() { + return this.dispatchNonBlockingStoreAction(this.storeActions.SET_VEHICLE, {year: this.$store.getters.vehicle.year, make: this.$store.getters.vehicle.make, model: this.$store.getters.vehicle.model, style: this.$store.getters.vehicle.style}); } }, watch: { selectedStyle(style) { this.$store.commit(this.storeMutations.UPDATE_STYLE, style); - this.selectVehicle(); - this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route); + this.setVehicle().then(() => { + this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route); + }); } }, diff --git a/src/store/index.js b/src/store/index.js index 742e4be25..f27a362b5 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -129,7 +129,7 @@ export default createStore({ payload: {}, }); }, - getVehicle(context, {year, make, model, style}) { + setVehicle(context, {year, make, model, style}) { return globalMethods.callHttpClient({ methods: endpoints.GetVehicle.method, endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`, From 03dcf3362d5658c14a310894fa15ab684362a80d Mon Sep 17 00:00:00 2001 From: CarlNation Date: Thu, 13 Jan 2022 13:18:11 -0500 Subject: [PATCH 08/29] CSR-258 --- .../funnel-sub-header/funnel-sub-header.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue index c057eda85..521f2ed85 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.vue +++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue @@ -12,6 +12,18 @@ /> +
+

+ + {{ subText }} + + +

+
@@ -23,6 +35,7 @@ export default { data() { return { text: '', + subText: '' } }, props: { @@ -38,6 +51,7 @@ export default { }, initializeComponent(cmsContent) { this.text = cmsContent.HeaderText; + this.subText = cmsContent.HeaderSubText; } }, }; From 30e78bf4030219fb8f780b15f260c9057ac28721 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 13 Jan 2022 14:18:39 -0500 Subject: [PATCH 09/29] Removing duplicate back button --- .../funnel-sub-header/funnel-sub-header.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue index 521f2ed85..a764c7fb5 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.vue +++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue @@ -17,11 +17,6 @@ {{ subText }} -

From 349c59b7dddf130602c0eb06e1f6d70479544267 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Thu, 13 Jan 2022 15:58:19 -0500 Subject: [PATCH 10/29] CSR-254: Implement final stages of form test --- package.json | 3 +- .../text-input/text-input.vue | 3 +- src/layouts/form-test/form-test.vue | 279 +++++++++++++----- .../list-button-horizontal.vue | 19 +- src/ux-components/list-card/list-card.vue | 10 +- 5 files changed, 229 insertions(+), 85 deletions(-) diff --git a/package.json b/package.json index 50a9b5760..0b37dcc0f 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "vue": "^3.0.0", "vue-router": "^4.0.11", "vuex": "^4.0.2", - "vuex-persistedstate": "^4.1.0" + "vuex-persistedstate": "^4.1.0", + "yup": "^0.32.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", diff --git a/src/common-components/text-input/text-input.vue b/src/common-components/text-input/text-input.vue index 50096a52f..e8d63f9e4 100644 --- a/src/common-components/text-input/text-input.vue +++ b/src/common-components/text-input/text-input.vue @@ -1,6 +1,6 @@