diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index 9cf75368e..9cd9307db 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -10,6 +10,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { isOverflowScrollable: true, + groupName: "group-name" } }); @@ -25,6 +26,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { buttonType: "listCard", + groupName: "group-name" } }); // Assert @@ -39,6 +41,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { buttonType: "listButtonHorizontal", + groupName: "group-name" } }); // Assert @@ -53,6 +56,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { buttonType: "radio", + groupName: "group-name" } }); // Assert @@ -77,7 +81,8 @@ describe("buttonQuestion.vue", () => { // Act const localThis = { isWide: false, - answers: ['a', 'b'] + answers: ['a', 'b'], + groupName: "group-name" } expect(buttonQuestion.computed.getColLength.call(localThis)).toBe(""); @@ -109,7 +114,7 @@ describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => { it("Should trigger event modelValue change to new value on when radio button selected", async () => { // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({})); + const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}})); await wrapper.setProps({ answers: ["2022", "2021", "2020"], isMultiSelect: false, @@ -129,6 +134,7 @@ describe("buttonQuestion.vue", () => { propsData: { modelValue: ["2022", "2021", "2020"], isMultiSelect: true, + groupName: "group-name" } })); const val = { checkValue: true, value: "2019", } @@ -144,7 +150,8 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, setupMocks({ propsData: { isMultiSelect: true, - modelValue: ['a', 'b'] + modelValue: ['a', 'b'], + groupName: "group-name" } })); const val = { checkValue: true, value: "2021", } @@ -161,7 +168,8 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, setupMocks({ propsData: { isMultiSelect: true, - modelValue: ['a', 'b'] + modelValue: ['a', 'b'], + groupName: "group-name" } })); @@ -173,24 +181,6 @@ describe("buttonQuestion.vue", () => { }); }); - -describe("buttonQuestion.vue", () => { - it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => { - // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({ - propsData: { - isMultiSelect: true, - modelValue: 'a', - } - })); - const val = { checkValue: true, value: "c", } - wrapper.vm.handleCheckedChanged(val); - - // Assert - expect(wrapper.vm.selectedValues).toEqual("a"); - }); -}); - function setupMocks(mountOptionsMockData = {}) { const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } }; const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index f1c2ad98a..0cc7d5e03 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -1,27 +1,26 @@ @@ -81,22 +87,31 @@ export default { isRequired: Boolean, isOverflowScrollable: Boolean, isWide: Boolean, - modelValue: Array, + modelValue: [Array, String], validationRules: String, suppressError: Boolean, useTextForValue: Boolean, clearOnUnmount: { type: Boolean, default: true - } + }, }, computed: { - getFieldSetClasses() { - return this.isOverflowScrollable - ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0" - : ""; + formattedGroupName() { + return this.groupName.replace(" ", "-"); }, - getComponentWrapperClasses() { + getFieldSetClasses() { + if (this.isOverflowScrollable) { + return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"; + } + else if (this.buttonType == "listCard") { + return "w-100"; + } + else { + return ""; + } + }, + getComponentLoopWrapperClasses() { let classes; switch (this.buttonType) { case "listButton": @@ -106,7 +121,7 @@ export default { classes = "d-flex flex-row p-0"; break; case 'listCard': - classes = 'row justify-content-center g-2' + classes = "row g-2 justify-content-center"; break; case 'radio': classes = 'ui-radio d-flex' @@ -114,11 +129,22 @@ export default { } return classes; }, + getComponentWrapperClasses() { + let classes = ""; + + classes += this.isWide ? "col-12" : "col"; + + if (this.buttonType == "radio") { + classes += " radio-button-container"; + } + + return classes; + }, getColLength(){ if(this.isWide) { return "12" } else { - return this.answers.length < 3 ? '' : '-4'; + return ""; } }, selectedValues: { @@ -135,6 +161,7 @@ export default { if (this.useTextForValue){ return answer.Text } + return answer.Name ? answer.Name : answer; }, handleCheckedChanged(val) { @@ -146,7 +173,12 @@ export default { val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); this.selectedValues = newSelectedValues; } + else { + this.selectedValues = val.value; + } } + + this.$emit("isCheckedChanged", val); }, }, components: { @@ -172,6 +204,12 @@ export default { } .button-question { color: $black; + + .radio-button-container { + &:not(:last-child) { + padding-bottom: map-get($spacers, 2); + } + } } .question-text { margin-top: 1.5rem; diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 8ab4ea4f1..d080ef3aa 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -36,7 +36,6 @@ export default { computed: { questions() { - console.log("answeredQuestions: ", this.answeredQuestions) const questions = this.questionData.partQuestions.map((q, i) => { return { questionText: q.questionText, diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 26a17955c..5319d96f2 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -7,7 +7,7 @@ :answers="makes" groupName="ChooseVehicleMake" textPosition="text-start" - v-model="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -34,14 +34,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } }, diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index d8cb21894..5d2b1ebd2 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -7,7 +7,7 @@ :answers="models" groupName="ChooseVehicleModel" textPosition="text-start" - v-model="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -34,14 +34,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } }, diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js index a6ef4e586..26a16e78d 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -69,24 +69,25 @@ describe("glass-part-question.vue", () => { }); test("Should emit updateModelValue, and have correct attributes", async () => { - //Arrange - const { wrapper } = setupMocks(featureListData); + store.getters.pageData.mockReset(); + store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] }); //Act await wrapper.vm.$nextTick(); const listCard = await wrapper.findComponent({ - name: "listCard", + name: "buttonQuestion", }); - wrapper.setValue({ selectedTint: 'Green Tint' }); + await wrapper.setData({ selectedTint: 'Green Tint' }); + // to trigger the computed setter + wrapper.vm.selectedPartNumber = "DB12209GTYN"; //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedTint: 'Green Tint' }]); - expect(listCard.attributes("buttonid")).toBe("Rear-Stationary-Green Tint"); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ partNumber: "DB12209GTYN", color: "Green Tint"}]); expect(listCard.attributes("groupname")).toBe("Rear-Stationary"); - expect(listCard.attributes("isradio")).toBe("true"); + expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required"); }); test("ResetTintAndPartSelections, should reset data elements ", async () => { @@ -96,21 +97,23 @@ describe("glass-part-question.vue", () => { //Act await wrapper.vm.$nextTick(); - wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } }); - - expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' }); + await wrapper.setData({ selectedTint: 'Green Tint', selectedPartNumber: "test" }); + + expect(wrapper.vm.selectedTint).toEqual('Green Tint'); + expect(wrapper.vm.selectedPartNumber).toEqual('test'); await wrapper.vm.ResetTintAndPartSelections(); - expect(wrapper.vm.selectedTint).toStrictEqual({}); + + expect(wrapper.vm.selectedTint).toEqual("Green Tint"); + expect(wrapper.vm.selectedPartNumber).toEqual(null); }); }); function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) { - //Mock store - store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}}); + store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] }); store.getters.lineItems = { glassParts: {} } const mountOptions = getMountOptions({ diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index d0def364d..1c5dd1ae7 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -1,245 +1,229 @@ diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js index a663c5396..c43136079 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.spec.js +++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js @@ -65,7 +65,7 @@ describe("vehicle-parts.vue", () => { test("Set cms content called on load", async (done) => { //Arrange store.getters.pageData.mockReturnValue(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } const { wrapper, apiPromise } = setupMocks( { @@ -104,7 +104,7 @@ describe("vehicle-parts.vue", () => { //Arrange store.getters.pageData.mockReturnValue(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } const { wrapper } = setupMocks({ mountOptionsMockData: { @@ -141,7 +141,7 @@ describe("vehicle-parts.vue", () => { //Arrange store.getters.pageData.mockReturnValueOnce(basePartResponse); - store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } } + store.getters.lineItems = { glassParts: [{ partNumber: 'DB12209YPYNOEM'} ] } const { wrapper } = setupMocks({ mountOptionsMockData: { @@ -170,14 +170,21 @@ describe("vehicle-parts.vue", () => { await nextTick(); //Assert - expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } }); + expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { + partNumber: "DB12209YPYNOEM", + description: "heated glass, solar, 1 hole", + color: "Gray Tint Privacy", + requiresRecalibration: false, + requiresCapabilityQuestions: false, + childParts: null + }}); }); test("BackButtonAction triggers a router.navigate change", async () => { //Arrange store.getters.pageData.mockReturnValueOnce(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } const { wrapper } = setupMocks({ mountOptionsMockData: { @@ -215,7 +222,7 @@ describe("vehicle-parts.vue", () => { //Arrange store.getters.pageData.mockReturnValueOnce(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } store.commit = jest.fn(); @@ -238,7 +245,7 @@ describe("vehicle-parts.vue", () => { } }); - wrapper.setData({ glassParts: { "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } } }); + wrapper.setData({ glassParts: {"Rear-Stationary": { partNumber: 'DB12209GTYN'}}}); //Act vehicleParts.beforeRouteEnter.call( @@ -285,13 +292,14 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} settleAllPromises.mockImplementation(() => apiPromise); fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); - const mountOptions = getMountOptions(mountOptionsMockData,); + const mountOptions = getMountOptions(mountOptionsMockData); const wrapper = shallowMount(vehicleParts, mountOptions); const partQuestionRearWrapper = wrapper.findComponent({ name: "glassPartQuestion", }); partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent; wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); return { wrapper, apiPromise }; } diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 9ab861f0f..e21df516b 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -3,14 +3,13 @@ @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" - v-slot="{ meta }" >
-
+
- -
+
-
-
-
- +
+ :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" + v-model="glassParts[item.glassLocation + '-' + item.glassName]" + :glassLocation="item.glassLocation" + :glassName="item.glassName" + :colorAnswers="item.colorAnswers" + :alreadyPopulatedPartsData="alreadyPopulatedPartsData" + />
@@ -64,12 +59,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { storeMutations } from "@/constants/store-mutations"; import store from "@/store"; -import { Form, defineRule } from "vee-validate"; -import { required } from "@/helpers/validation-rules"; -import { errorMessages } from "@/constants/error-messages"; - -// DEFINE VALIDATION RULES -defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED)); +import { Form } from "vee-validate"; export default { name: "vehicle-parts", @@ -88,12 +78,12 @@ export default { // Glass Part Question dynamic component Object.keys(vm.$refs) - .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) - .forEach((c) => - vm.$refs[c][0].initializeComponent({ - ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, - FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, - }) + .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) + .forEach((c) => + vm.$refs[c][0].initializeComponent({ + ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, + FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, + }) ); }); }, @@ -101,6 +91,7 @@ data() { return { glassParts: {}, alertWidgetData: Object, + alreadyPopulatedPartsData: {} }; }, components: { @@ -113,7 +104,24 @@ components: { alert, }, computed: { - PartsForQuestions() { + isForwardActionDisabled() { + return Object.keys(this.matchedParts).length !== this.PartsFromApi.partsOrQuestions.length; + }, + matchedParts() { + const matchedParts = []; + + // Match them to the parts from the API. + this.PartsFromApi.partsOrQuestions.forEach(part => { + const selectedPartForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`]; + const selectedPartData = part.parts.filter(part => selectedPartForGlassLocationAndName && part.partNumber == selectedPartForGlassLocationAndName?.partNumber)[0]; + + if (selectedPartData) + matchedParts.push(selectedPartData); + }) + + return matchedParts; + }, + PartsOrQuestions() { const partsData = this.PartsFromApi; // Map API result data, to vehicle-parts data structure @@ -165,40 +173,14 @@ methods: { this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }, forwardButtonAction() { - const selectedGlassPartNumbers = []; - const matchedParts = []; - - // Compile all selected parts from the page. - for (let [key, value] of Object.entries(this.glassParts)) { - for (let [glassKey, glassValue] of Object.entries(value)) { - selectedGlassPartNumbers.push(glassValue[0]); - } - } - - // Match them to the parts from the API. - for (let [key, value] of Object.entries( - this.PartsFromApi.partsOrQuestions - )) { - for (let [partKey, partValue] of Object.entries(value.parts)) { - const currentPart = - this.PartsFromApi.partsOrQuestions[key].parts[partKey]; - const isMatched = selectedGlassPartNumbers.some( - (p) => p === currentPart.partNumber - ); - - if (isMatched) { - matchedParts.push(currentPart); - } - } - } - // If no parts could be matched, throw an error. - if (matchedParts.length === 0) { + if (this.isForwardActionDisabled) { + this.$refs.funnelFooter.removeLoader(); throw new Error("Could not match any parts to the selected parts"); } // Save parts to the store. - store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts); + store.commit(storeMutations.UPDATE_GLASS_PARTS, this.matchedParts); // Navigate to the next page. this.$router.navigateAfterSave( @@ -212,25 +194,14 @@ methods: { }, LoadInitialPartsData() { - const partsData = this.PartsFromApi; - const alreadyPopulatedPartsData = - this.$store.getters.lineItems.glassParts === null - ? {} - : this.$store.getters.lineItems.glassParts; - - partsData.partsOrQuestions.map((g) => { - // If the part is already populated, use the value from the store and populate the v-model. - Object.keys(alreadyPopulatedPartsData).forEach((key) => { - const partNumber = alreadyPopulatedPartsData[key].partNumber; - g.parts.forEach((p) => { - if (p.partNumber === partNumber) { - this.glassParts[g.glassLocation + "-" + g.glassName] = { - [g.glassLocation]: [partNumber], - }; - } - }); - }); - }); + this.alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts ?? []; + const savedPartNumbers = this.alreadyPopulatedPartsData.map(part => part.partNumber) + this.PartsFromApi.partsOrQuestions.forEach(glass => { + const savedPart = glass.parts.filter(part => savedPartNumbers.includes(part.partNumber))[0]; + if (savedPart) { + this.glassParts[`${glass.glassLocation}-${glass.glassName}`.replace(" ", "-")] = savedPart; + } + }); }, }, mounted() { diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 45c0f7dea..e578bc192 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -7,7 +7,7 @@ :answers="styles" groupName="ChooseVehicleStyle" textPosition="text-start" - v-model="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -34,14 +34,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } }, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index a5b263fe8..ff2e2902a 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -7,7 +7,7 @@ :answers="years" groupName="ChooseVehicleYear" textPosition="text-start" - v-model="selectedValueAsArray" + v-model="selectedValue" isRequired=true /> @@ -35,14 +35,13 @@ export default { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, - selectedValueAsArray: { + selectedValue: { get: function() { const modelValueAsArray = this.modelValue ? [this.modelValue] : []; return modelValueAsArray; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } } }, diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js index 9abb45cd2..d067895ee 100644 --- a/src/router/router-constants/fmgPage-values.js +++ b/src/router/router-constants/fmgPage-values.js @@ -12,6 +12,7 @@ const fmgPageValues = { REVEAL: "reveal", ESTIMATE: "estimate", ADDRESS_VEHICLES: "address-vehicles", + QUOTE: "quote" }; export { fmgPageValues }; diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 95985f7c4..25a651d52 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -46,6 +46,7 @@ html { input[type=radio]+label:before, input[type=checkbox]+label:before { border: 1px solid $red; + background-color: initial; } input[type=checkbox]:checked + label:before { border: 1px solid $blue; diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 2fbdaade4..7db735ced 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -205,7 +205,7 @@ describe("list-card.vue", () => { }); wrapper.vm.handleCheckChange(); // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: [Boolean, String], buttonId: 'list-card-id'}]); + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]); }); it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 88aad0b6a..84762fc91 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,8 +1,9 @@