diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js index 8f0ee825..0af1a4de 100644 --- a/src/constants/payment-method-constants.js +++ b/src/constants/payment-method-constants.js @@ -1,7 +1,9 @@ -export const paymentMethods = { +const paymentMethods = Object.freeze({ NONE: null, - LATER: 'Later', + PAY_AT_TIME_OF_SERVICE: 'PayAtTimeOfService', CREDIT_CARD: 'CreditCard', PAYPAL: 'Paypal', AFTERPAY: 'Afterpay' -}; +}); + +export default paymentMethods; 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 4e869c3e..87630d13 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 @@ -3,37 +3,34 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js'; import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue'; -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; +const mockCmsContent = { + QuestionText: 'Choose a payment option', + Answers: [ + { + Name: 'NameA', + Text: 'TextA', + SubText: 'SubTextA', + ImageId: 'idA', + AnswerImageUrl: 'imageA', + SubWidgetName: 'subWidgetA' + }, + { + Name: 'NameB', + Text: 'TextB', + SubText: 'SubTextB', + ImageId: 'idB', + AnswerImageUrl: 'imageB', + SubWidgetName: 'subWidgetB' + } + ] +}; + function generateDefaultProps() { return { - modelValue: 'modelValue' + modelValue: 'modelValue', + cmsWidgetName: 'PaymentMethodWidget' }; } @@ -42,7 +39,7 @@ function setupMocks(customMountOptions) { const mockMixin = { methods: { - getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '') + getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent[cmsFieldName]) } }; @@ -55,31 +52,8 @@ function setupMocks(customMountOptions) { 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 - } - ] - } - }; + cmsContent = mockCmsContent; }); - it('Should map cms content correctly', () => { // Arrange const props = generateDefaultProps(); @@ -94,18 +68,18 @@ describe('Payment Method Question', () => { // Assert expect(mappedContent).toEqual([ { - buttonLabel: testConstants.cms.answers.optionA.text, - altText: testConstants.cms.answers.optionA.text, + buttonLabel: cmsContent.Answers[0].Text, + altText: cmsContent.Answers[0].Text, groupName: 'payment-method', - value: testConstants.cms.answers.optionA.name, - buttonImage: testConstants.cms.answers.optionA.image + value: cmsContent.Answers[0].Name, + buttonImage: cmsContent.Answers[0].AnswerImageUrl }, { - buttonLabel: testConstants.cms.answers.optionB.text, - altText: testConstants.cms.answers.optionB.text, + buttonLabel: cmsContent.Answers[1].Text, + altText: cmsContent.Answers[1].Text, groupName: 'payment-method', - value: testConstants.cms.answers.optionB.name, - buttonImage: testConstants.cms.answers.optionB.image + value: cmsContent.Answers[1].Name, + buttonImage: cmsContent.Answers[1].AnswerImageUrl } ]); }); 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 78767538..f793e3ea 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 @@ -15,7 +15,9 @@ - diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js new file mode 100644 index 00000000..dc31f064 --- /dev/null +++ b/src/layouts/payment-method/payment-method.spec.js @@ -0,0 +1,43 @@ +// Components +import paymentMethod from '@/layouts/payment-method/payment-method.vue'; + +// Supporting Files +import { shallowMount } from '@vue/test-utils'; +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { useMainStore } from '@/store'; +import paymentMethods from '@/constants/payment-method-constants'; + +function setupMocks() { + const mountOptions = getMountOptions(); + + const wrapper = shallowMount(paymentMethod, mountOptions); + + return { wrapper }; +} + +describe('payment-method.vue', () => { + test('getting payment method when method is pay later', async () => { + // Arrange + const { wrapper } = setupMocks(); + const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE; + useMainStore().savePaymentMethodChoice(payLaterPaymentMethod); + + // Act + const paymethod = wrapper.vm.getPaymentMethodFromStore(); + + // Assert + expect(paymethod).toBe(payLaterPaymentMethod); + }); + test('getting payment method when method is pay in advance', async () => { + // Arrange + const { wrapper } = setupMocks(); + const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD; + useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod); + + // Act + const paymethod = wrapper.vm.getPaymentMethodFromStore(); + + // Assert + expect(paymethod).not.toBe(payInAdvancePaymentMethod); + }); +}); diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 1aa1d20b..57e425f3 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -22,9 +22,9 @@