140 lines
4.5 KiB
JavaScript
140 lines
4.5 KiB
JavaScript
import { mount } from '@vue/test-utils';
|
|
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
|
import listButtonHorizontal from '@/ux-components/list-button-horizontal/list-button-horizontal.vue';
|
|
|
|
/** @ignore */
|
|
function setupMocks({ mockData }) {
|
|
const wrapper = mount(listButtonHorizontal, {
|
|
...mockData,
|
|
propsData: {
|
|
...mockData.propsData,
|
|
groupName: 'my-group',
|
|
modelValue: mockData.propsData?.isMultiSelect ? ['5'] : '5',
|
|
value: mockData.propsData?.isMultiSelect ? ['4'] : '4'
|
|
},
|
|
mixins: [inputButtonWrapperMixin]
|
|
});
|
|
|
|
return { wrapper };
|
|
}
|
|
|
|
describe('list-button-horizontal.vue', () => {
|
|
describe('styling/UI', () => {
|
|
it('Should return screen reader text', async () => {
|
|
// Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
screenReaderOnlyText: 'Screen Reader Only Text'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const paragraph = wrapper.find('span.sr-only');
|
|
|
|
expect(paragraph.text()).toEqual('Screen Reader Only Text');
|
|
});
|
|
|
|
it('Should return text alignment class', async () => {
|
|
// Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
textPosition: 'text-center'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const paragraph = wrapper.find('span.m-0');
|
|
|
|
expect(paragraph.attributes('class')).toContain('text-center');
|
|
});
|
|
|
|
it('Should return aria-required state', async () => {
|
|
// Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isRequired: true
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const input = wrapper.find('input');
|
|
|
|
expect(input.attributes()['aria-required']).toEqual('true');
|
|
});
|
|
|
|
it("is cash or insurance button => has 'strong' class", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
additionalButtonStyling: 'listButtonHorizontalStrong'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const label = wrapper.find('label');
|
|
|
|
expect(label.classes()).toContain('strong');
|
|
});
|
|
|
|
test('has buttonLabel => displays buttonLabel', () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
buttonLabel: 'Surprise!'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const content = wrapper.find('.list-button-horizontal-content');
|
|
expect(content.isVisible()).toBe(true);
|
|
expect(content.text()).toContain('Surprise!');
|
|
});
|
|
|
|
test('has buttonLabelSubCopy => displays buttonLabelSubCopy', () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
buttonLabel: 'Surprise!',
|
|
buttonLabelSubCopy: 'Super duper surprise :)'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const content = wrapper.find('.list-button-horizontal-content');
|
|
expect(content.isVisible()).toBe(true);
|
|
expect(content.text()).toContain('Super duper surprise :)');
|
|
});
|
|
|
|
test('has screenReaderOnlyText => displays screenReaderOnlyText', () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
buttonLabel: 'Surprise!',
|
|
buttonLabelSubCopy: 'Super duper surprise :)',
|
|
screenReaderOnlyText: 'Tests are fun!'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Assert
|
|
const content = wrapper.find('.list-button-horizontal-content');
|
|
const screenReaderOnlyText = wrapper.find('.sr-only');
|
|
expect(content.isVisible()).toBe(true);
|
|
expect(screenReaderOnlyText.exists()).toBe(true);
|
|
expect(screenReaderOnlyText.text()).toContain('Tests are fun!');
|
|
});
|
|
});
|
|
});
|