Tests

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js

@@ -0,0 +1,106 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import paymentMethodListButton from "@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button";
+
+const testConstants = {
+    images: {
+        A: "imageA",
+        B: "imageB",
+        NONE: null,
+    },
+    names: {
+        A: "nameA",
+        B: "nameB",
+    },
+    content: {
+        withInline: "Button text with {custom:inlineImage} inline.",
+        noInline: "Button text with no inline",
+    },
+};
+
+let cmsContent;
+
+describe("Payment Method Question", () => {
+    beforeEach(() => {
+        cmsContent = {
+            
+        };
+    });
+
+    describe("Side image", () => {
+        it("Renders side image if image is present and not inline", () => {
+            // Arrange
+            const props = generateDefaultProps();
+            const { wrapper } = setupMocks({
+                propsData: props
+            });
+    
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+    
+            expect(showSideImage).toBe(true);
+        });
+    
+        it("Does not render side image if no image is present", () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            props.buttonImage = testConstants.images.NONE;
+            
+            const { wrapper } = setupMocks({
+                propsData: props
+            });
+    
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+    
+            expect(showSideImage).toBe(false);
+        });
+    
+        it("Does not render side image if inline", () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            props.buttonLabel = testConstants.content.withInline;
+            props.altText = testConstants.content.withInline;
+            
+            const { wrapper } = setupMocks({
+                propsData: props
+            });
+    
+            // Act
+            const showSideImage = wrapper.vm.shouldDisplaySideImage;
+    
+            expect(showSideImage).toBe(false);
+        });
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        buttonLabel: testConstants.noInline,
+        altText: testConstants.noInline,
+        groupName: "payment-method",
+        value: testConstants.names.A,
+        buttonImage: testConstants.images.A,
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(paymentMethodListButton, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue

@@ -35,7 +35,6 @@
 import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
-import { getIn } from "yup/lib/util/reach";
 
 const INLINE_IMAGE_TOKEN = "custom:inlineImage";
 
@@ -61,7 +60,7 @@ export default {
     },
     computed: {
         tokens() {
-            return splitCopyOnCMSPlaceHolder(this.buttonLabel);
+            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
         },
         hasImage() {
             return !!this.buttonImage;

src/layouts/payment-method/payment-method-question/payment-method-question.spec.js

@@ -0,0 +1,130 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
+
+const testConstants = {
+    cms: {
+        question: {
+            text: "Choose a payment option",
+        },
+        answers: {
+            optionA: {
+                name: "NameA",
+                text: "TextA",
+                subText: "SubTextA",
+                imageId: "idA",
+                image: "imageA",
+                subWidget: "subWidgetA",
+            },
+            optionB: {
+                name: "NameB",
+                text: "TextB",
+                subText: "SubTextB",
+                imageId: "idB",
+                image: "imageB",
+                subWidget: "subWidgetB",
+            },
+        }
+    },
+};
+
+let cmsContent;
+
+describe("Payment Method Question", () => {
+    beforeEach(() => {
+        cmsContent = {
+            PaymentMethodWidget: {
+                QuestionText: testConstants.cms.question,
+                Answers: [
+                    {
+                        Name: testConstants.cms.answers.optionA.name,
+                        Text: testConstants.cms.answers.optionA.text,
+                        SubText: testConstants.cms.answers.optionA.subText,
+                        ImageId: testConstants.cms.answers.optionA.imageId,
+                        AnswerImageUrl: testConstants.cms.answers.optionA.image,
+                        SubWidgetName: testConstants.cms.answers.optionA.subWidget,
+                    },
+                    {
+                        Name: testConstants.cms.answers.optionB.name,
+                        Text: testConstants.cms.answers.optionB.text,
+                        SubText: testConstants.cms.answers.optionB.subText,
+                        ImageId: testConstants.cms.answers.optionB.imageId,
+                        AnswerImageUrl: testConstants.cms.answers.optionB.image,
+                        SubWidgetName: testConstants.cms.answers.optionB.subWidget,
+                    },
+                ],
+            },
+        };
+    });
+
+    it("Should map cms content correctly", () => {
+        // Arrange
+        const props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        const mappedContent = wrapper.vm.paymentMethodAnswerData;
+
+        // Assert
+        expect(mappedContent).toEqual([
+            {
+                buttonLabel: testConstants.cms.answers.optionA.text,
+                altText: testConstants.cms.answers.optionA.text,
+                groupName: "payment-method",
+                value: testConstants.cms.answers.optionA.name,
+                buttonImage: testConstants.cms.answers.optionA.image,
+            },
+            {
+                buttonLabel: testConstants.cms.answers.optionB.text,
+                altText: testConstants.cms.answers.optionB.text,
+                groupName: "payment-method",
+                value: testConstants.cms.answers.optionB.name,
+                buttonImage: testConstants.cms.answers.optionB.image
+            }
+        ]);
+    });
+
+    it("Handles null cms content gracefully", () => {
+        // Arrange
+        cmsContent = {};
+        const props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        const mappedContent = wrapper.vm.paymentMethodAnswerData;
+
+        // Assert
+        expect(mappedContent).toEqual([]);
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        modelValue: "modelValue"
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(paymentMethodQuestion, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}