CSR-269
This commit is contained in:
CarlNation
parent
04a3405fd1
commit
e00cb8d71a
8 changed files with 118 additions and 13 deletions
|
|
@ -127,7 +127,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);
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default ({
|
|||
},
|
||||
},
|
||||
mounted(){
|
||||
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);
|
||||
this.selectedValues = newSelectedValues;
|
||||
|
|
|
|||
|
|
@ -122,6 +122,37 @@ describe("vehicle-damage.vue", () => {
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("vehicle-damage.vue", () => {
|
||||
test("Windshield Options ares initailized with api data", async (done) => {
|
||||
//Arrange
|
||||
const pageHeaderWidgetHeaderText = "Select Damage";
|
||||
const { wrapper, apiPromise } = setupMocks({
|
||||
pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
|
||||
});
|
||||
|
||||
//Act
|
||||
vehicleDamage.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-damage" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
//Assert
|
||||
apiPromise.finally(() => {
|
||||
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
|
||||
pageHeaderWidgetHeaderText
|
||||
);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
describe("vehicle-damage.vue", () => {
|
||||
test("CarId set, arePagePrerequisitesValid should be true ", async () => {
|
||||
//Arrange
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
|
||||
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
|
||||
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" v-model="windshieldOptionsData" />
|
||||
<windshieldOptions ref="windshieldOptions"
|
||||
v-model="selectedWindshieldOptions"
|
||||
:selectedDamageLocations="selectedDamageLocations"
|
||||
/>
|
||||
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
|
||||
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" v-model="windshieldOptionsData" />
|
||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,6 +34,9 @@ import baseMixin from "@/mixins/base-mixin";
|
|||
|
||||
export default {
|
||||
name: "vehicle-damage",
|
||||
updated() {
|
||||
console.log(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ 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: "Two" });
|
||||
const chipCountToSelect = "Two";
|
||||
const { wrapper } = setupMocks({modelValueProp: ["One"]});
|
||||
|
||||
//Act
|
||||
wrapper.setValue({ modelValue: chipCountToSelect });
|
||||
wrapper.setValue({ modelValue: ["Two"] });
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
|
||||
//Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]);
|
||||
expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]);
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ describe("windshield-chip-count-question.vue", () => {
|
|||
test("Should display question and answers from api.", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"});
|
||||
const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]});
|
||||
|
||||
//Act
|
||||
windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
//DEFINE VALIDATION RULES
|
||||
defineRule("windshield-damage-required", (value) => {
|
||||
if (!value || value.length < 1) {
|
||||
return "Please select windshield damage";
|
||||
|
|
|
|||
|
|
@ -106,12 +106,12 @@ export default ({
|
|||
});
|
||||
},
|
||||
isRepairOptionSelected(){
|
||||
if (this.selectedWindshieldDamageTypeValues === undefined) return false;
|
||||
if (!this.selectedWindshieldDamageTypeValues) return false;
|
||||
|
||||
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
|
||||
},
|
||||
isReplaceOptionSelected(){
|
||||
if (this.selectedWindshieldDamageTypeValues === undefined) return false;
|
||||
if (!this.selectedWindshieldDamageTypeValues) return false;
|
||||
|
||||
return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue