From 57b61ac0bf9ce7062db52383f04910dbf4c11d3e Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Thu, 8 Feb 2024 14:37:56 -0500 Subject: [PATCH] SSR-1064 moved getInputQuestionWidgetAnswersNullSafe into base-mixin --- .../payment-method-question.spec.js | 6 +- .../payment-method-question.vue | 13 +--- .../damage-review/damage-review.vue | 12 +--- src/layouts/tpa-submit/tpa-submit.vue | 10 +--- src/mixins/base-mixin.js | 5 ++ src/mixins/base-mixin.spec.js | 60 +++++++++++++++++++ 6 files changed, 75 insertions(+), 31 deletions(-) diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js index 87630d13..97194f10 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js @@ -1,13 +1,13 @@ import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; - +import widgetFields from '@/constants/cms-widget-fields.js'; import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue'; let cmsContent; const mockCmsContent = { - QuestionText: 'Choose a payment option', - Answers: [ + [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose a payment option', + [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [ { Name: 'NameA', Text: 'TextA', diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index f793e3ea..d8376879 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -49,7 +49,7 @@ export default { return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT); }, paymentMethodAnswerData() { - const cmsData = this.getAnswersNullSafe(this.cmsWidgetName); + const cmsData = this.getInputQuestionWidgetAnswersNullSafe(this.cmsWidgetName); return cmsData.map((answer) => ({ buttonLabel: answer.Text, @@ -59,17 +59,6 @@ export default { buttonImage: answer.AnswerImageUrl })); } - }, - methods: { - getAnswersNullSafe(widgetName) { - const rawData = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS); - - if (!rawData) { - return []; - } - - return rawData; - } } }; diff --git a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue index ac93b4bf..532035b5 100644 --- a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue +++ b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue @@ -33,20 +33,14 @@ export default { }, driverSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, passengerSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, locationAnswers() { - return this.getAnswersNullSafe(this.damageLocationsWidgetName); - } - }, - methods: { - getAnswersNullSafe(widgetName) { - const rawAnswers = this.getCmsContent(widgetName, 'Answers'); - return rawAnswers || []; + return this.getInputQuestionWidgetAnswersNullSafe(this.damageLocationsWidgetName); } } }; diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue index 2d061854..590a4645 100644 --- a/src/layouts/tpa-submit/tpa-submit.vue +++ b/src/layouts/tpa-submit/tpa-submit.vue @@ -208,15 +208,15 @@ export default { return [line]; }, locationAnswers() { - return this.getAnswersNullSafe(this.widget.damageLocations); + return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations); }, driverSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, passengerSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, getDamageLines() { const { glassToReplace, isRepair } = useMainStore().order.damage; @@ -285,10 +285,6 @@ export default { return null; } }, - getAnswersNullSafe(widgetName) { - const rawAnswers = this.getCmsContent(widgetName, 'Answers'); - return rawAnswers || []; - }, openContactDetailsModal() { this.$refs.contactDetailsDrawer.openModal(); } diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 49e1e936..957cc6a1 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -5,6 +5,7 @@ import vehicleCategories from '@/constants/vehicle-categories.js'; import queryStrings from '@/constants/query-strings'; import dynamicStrings from '@/constants/dynamic-strings'; import routerParams from '@/router/router-constants/router-params'; +import widgetFields from '@/constants/cms-widget-fields.js'; export default { data() { @@ -19,6 +20,10 @@ export default { getCmsContent(widgetName, fieldName) { return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : ''; }, + getInputQuestionWidgetAnswersNullSafe(widgetName) { + const rawAnswers = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS); + return rawAnswers || []; + }, getFooterInfoBoxHeight() { const footerInfoBox = document.querySelector('.footer#infoBox'); return footerInfoBox ? footerInfoBox.offsetHeight : 0; diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js index 30f2ff0c..53f7f880 100644 --- a/src/mixins/base-mixin.spec.js +++ b/src/mixins/base-mixin.spec.js @@ -1,5 +1,6 @@ import baseMixin from '@/mixins/base-mixin'; import { shallowMount } from '@vue/test-utils'; +import widgetFields from '@/constants/cms-widget-fields.js'; describe('base-mixin', () => { it('should set and get cms content', () => { @@ -20,4 +21,63 @@ describe('base-mixin', () => { const localThis = { cmsWidgetName: 'testWidget' }; expect(baseMixin.computed.cssClassNameForCmsWidget.call(localThis)).toBe('widget-name-testWidget'); }); + + it('getInputQuestionWidgetAnswersNullSafe returns an empty array when the input question widget has no answers', () => { + // Arrange + const widgetName = 'inputQuestionWidget'; + const wrapper = shallowMount(baseMixin, { + propsData: { + cmsContentByWidget: {} + } + }); + const cmsContent = { + [widgetName]: { + [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose an option', + [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [] + } + }; + wrapper.componentVM.setCmsContent(cmsContent); + + // Act + const answers = wrapper.componentVM.getInputQuestionWidgetAnswersNullSafe(widgetName); + + // Assert + expect(answers).not.toBeNull(); // Check that answers is not null + expect(Array.isArray(answers)).toBeTruthy(); // Check that answers is an array + expect(answers).toHaveLength(0); // Check that answers is empty + }); + + it('getInputQuestionWidgetAnswersNullSafe returns a non-empty array when the input question widget has answers', () => { + // Arrange + const widgetName = 'inputQuestionWidget'; + const wrapper = shallowMount(baseMixin, { + propsData: { + cmsContentByWidget: {} + } + }); + const cmsContent = { + [widgetName]: { + [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose an option', + [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [ + { + Name: 'NameA', + Text: 'TextA' + }, + { + Name: 'NameB', + Text: 'TextB' + } + ] + } + }; + wrapper.componentVM.setCmsContent(cmsContent); + + // Act + const answers = wrapper.componentVM.getInputQuestionWidgetAnswersNullSafe(widgetName); + + // Assert + expect(answers).not.toBeNull(); // Check that answers is not null + expect(Array.isArray(answers)).toBeTruthy(); // Check that answers is an array + expect(answers).not.toHaveLength(0); // Check that answers is not empty + }); });