diff --git a/jest.config.js b/jest.config.js index b8beb88cc..4a2601c8f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -16,6 +16,7 @@ module.exports = { "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/address-poc/address-poc.vue", + "!src/layouts/nested-radio-poc/nested-radio.vue", ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index e8cf4a967..4ca468502 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -122,7 +122,7 @@ export default { }, methods: { handleCheckedChanged(val) { - if(this.isMultiSelect) { + if(this.isMultiSelect && this.selectedValues) { // Add or remove item to array of data to emit const newSelectedValues = this.selectedValues; val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1); diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue new file mode 100644 index 000000000..3bdeba866 --- /dev/null +++ b/src/layouts/nested-radio-poc/nested-radio.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index 419b15f7f..cfbc7bd77 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -53,7 +53,7 @@ export default ({ }, updateSelectedValues() { // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER - if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { + if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { const newSelectedValues = this.selectedValues; newSelectedValues.push(this.answersToDisplay[0].Name); console.log('YES, ONLY ONE, newSelectedValues: ', newSelectedValues) diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 0103aa866..74bc68336 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -6,6 +6,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question"; import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question"; +import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options"; // Supporting Files import { settleAllPromises } from "@/helpers/layout-helper.js"; @@ -219,7 +220,6 @@ function setupMocks({ }) { //Mock api responses baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); - const apiResponses = { cmsContent: { FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, @@ -237,7 +237,7 @@ function setupMocks({ availableReplacementOptions: ["Front", "Back", "Side"], }, windshieldOptions: { - availableReplacementOptions: ["Front", "Back", "Side"], + availableReplacementOptions: ["Single", "Driver", "Passenger"], }, backGlassOptions: { availableReplacementOptions: ["Front", "Back", "Side"], @@ -268,12 +268,11 @@ function setupMocks({ initializeComponent: jest.fn(), }; - const windshieldOptions = replaceOptionsQuestion - windshieldOptions.methods = { + damageLocationQuestion.methods = { initializeComponent: jest.fn(), }; - damageLocationQuestion.methods = { + windshieldOptions.methods = { initializeComponent: jest.fn(), }; @@ -304,11 +303,13 @@ function setupMocks({ driverSideOptionsWrapper.vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent; - const windshieldOptionsWrapper = wrapper.findAllComponents({ - name: "replaceOptionsQuestion", - }).at(1); + const windshieldOptionsWrapper = wrapper.findComponent({ + name: "windshieldOptions", + }); + windshieldOptionsWrapper.vm.initializeComponent = - replaceOptionsQuestion.methods.initializeComponent; + windshieldOptions.methods.initializeComponent; + const backGlassOptionsWrapper = wrapper.findAllComponents({ name: "replaceOptionsQuestion", diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 810df1417..80fc35da9 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -8,12 +8,6 @@ v-model="selectedDamageLocations" groupName="DamageLocationQuestion" /> - + + diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue deleted file mode 100644 index 686f10de9..000000000 --- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue +++ /dev/null @@ -1,99 +0,0 @@ - - - \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js new file mode 100644 index 000000000..123051d35 --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js @@ -0,0 +1,71 @@ +import { shallowMount } from "@vue/test-utils"; +import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import store from "@/store"; + +jest.mock("@/store", () => { return {}; }, {virtual: true}); + +describe("windshield-chip-count-question.vue", () => { + test("Selected chip count is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({modelValueProp: ["One"]}); + + //Act + wrapper.setValue({ modelValue: ["Two"] }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]); + }); + }); + + describe("Windshield-chip-count-question.vue", () => { + test("Should display question and answers from api.", async () => { + + //Arrange + const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]}); + + //Act + windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent); + + //Assert + expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?"); + expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]); + }); + }); + + function setupMocks({ + modelValueProp = ["Two"], + groupName = "WindshieldChipCountQuestion", + cmsQuestionText = "How many chips are we repairing?", + cmsAnswers = [{Name: "One"}, {Name: "Two"}, {Name: "Three"}], + dataFromStoreApi = [], + }) { + + //Mock store + store.dispatch = jest.fn(() => dataFromStoreApi); + store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} }; + const mountOptions = getMountOptions({ + store: { + dispatch: store.dispatch, + getters: store.getters, + }, + }); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp + }; + + const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; + } \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue new file mode 100644 index 000000000..41a3b872b --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js new file mode 100644 index 000000000..3bb64d695 --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js @@ -0,0 +1,71 @@ +import { shallowMount } from "@vue/test-utils"; +import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import store from "@/store"; + +jest.mock("@/store", () => { return {}; }, {virtual: true}); + +describe("windshield-damage-type-question.vue", () => { + test("Selected chip count is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({modelValueProp: ["Repair"]}); + + //Act + wrapper.setValue({ modelValue: ["Replace"] }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.selectedValues).toEqual(["Repair"]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]); + }); + }); + + describe("windshield-damage-type-question.vue", () => { + test("Should display question and answers from api.", async () => { + + //Arrange + const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]}); + + //Act + windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent); + + //Assert + expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?"); + expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]); + }); + }); + + function setupMocks({ + modelValueProp = ["Two"], + groupName = "WindshieldDamageTypeQuestion", + cmsQuestionText = "What's your windshield damage?", + cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}], + dataFromStoreApi = [], + }) { + + //Mock store + store.dispatch = jest.fn(() => dataFromStoreApi); + store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} }; + const mountOptions = getMountOptions({ + store: { + dispatch: store.dispatch, + getters: store.getters, + }, + }); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp + }; + + const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; + } \ No newline at end of file diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue new file mode 100644 index 000000000..80656e0a4 --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue @@ -0,0 +1,71 @@ + + + diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index 68cce08eb..db6569709 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -1,26 +1,112 @@ \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 133a4106e..b564b7e94 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -11,6 +11,7 @@ import store from "@/store"; import ComponentTest from "@/layouts/component-test/component-test.vue"; import AddressPOC from "@/layouts/address-poc/address-poc.vue"; import FormTest from "@/layouts/form-test/form-test.vue"; +import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue"; const routes = [ { @@ -33,6 +34,11 @@ const routes = [ name: "FormTest", component: FormTest, }, + { + path: "/nested-radio", // This is a temporary route for testing. + name: "NestedRadio", + component: NestedRadio, + }, { path: "/", name: "root", diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index d7d1c019d..4b9a18114 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -22,6 +22,8 @@ } &.ui-radio, &.ui-checkbox { + input[type=checkbox], + input[type=radio], input[type=radio]+label:before, input[type=checkbox]+label:before { border: 1px solid $red; diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue index 24c9e830e..73eb562bf 100644 --- a/src/ux-components/checkbox/checkbox.vue +++ b/src/ux-components/checkbox/checkbox.vue @@ -1,15 +1,15 @@