DigitalConsumer.ISS/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.spec.js
2024-02-02 14:18:43 -05:00

103 lines
2.8 KiB
JavaScript

import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
// eslint-disable-next-line max-len
import paymentMethodListButton from '@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue';
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;
function generateDefaultProps() {
return {
buttonLabel: testConstants.content.noInline,
altText: testConstants.content.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) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '')
}
};
mountOptions.global.mixins = [mockMixin];
const wrapper = shallowMount(paymentMethodListButton, mountOptions);
wrapper.vm.setCmsContent = jest.fn();
return { wrapper };
}
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
const 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
const 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);
});
});
});