133 lines
4.2 KiB
JavaScript
133 lines
4.2 KiB
JavaScript
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",
|
|
hasRecal: false,
|
|
isApplePay: true,
|
|
isInsurance: false,
|
|
};
|
|
}
|
|
|
|
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 };
|
|
}
|