DigitalConsumer.ISS/src/digital-components/button-question/button-question.spec.js

1105 lines
41 KiB
JavaScript

import { shallowMount } from '@vue/test-utils';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
/** @ignore */
function setupMocks(mountOptionsMockData = {}) {
const defaultMountOptions = { route: { query: { issPage: 'page-name' } } };
const baseMountOptions =
getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
return allMountOptions;
}
describe('buttonQuestion.vue', () => {
it('Fieldset classes should contain row if button type is listCard', () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonTypeString: 'listCard',
groupName: 'group-name'
}
});
// Assert
const Div = wrapper.find('fieldset div');
expect(Div.classes()).toContain('row');
});
});
describe('buttonQuestion.vue', () => {
it('Fieldset classes should contain d-flex if button type is listButtonHorizontal', () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonTypeString: 'listButtonHorizontal',
groupName: 'group-name'
}
});
// Assert
const Div = wrapper.find('fieldset div');
expect(Div.classes()).toContain('d-flex');
});
});
describe('buttonQuestion.vue', () => {
it('Fieldset classes should contain ui-radio if button type is radio', () => {
// Act
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonTypeString: 'radio',
groupName: 'group-name'
}
});
// Assert
const Div = wrapper.find('fieldset div');
expect(Div.classes()).toContain('ui-radio');
});
});
describe('buttonQuestion.vue', () => {
describe('selectedValues', () => {
test('is radio => should emit captured value', async () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({ propsData: { groupName: 'group-name' } })
);
await wrapper.setProps({
answers: ['2022', '2021', '2020'],
isMultiSelect: false,
modelValue: ''
});
// Act
wrapper.vm.selectedValues = '2021';
// Assert
expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual('2021');
});
test('is checkbox => should emit captured value', async () => {
const wrapper = shallowMount(
buttonQuestion,
setupMocks({ propsData: { groupName: 'group-name' } })
);
await wrapper.setProps({
answers: ['2022', '2021', '2020'],
isMultiSelect: false,
modelValue: ''
});
// Act
wrapper.vm.selectedValues = ['2022', '2021', '2020', '2019', '2020'];
// Assert
expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([
'2022',
'2021',
'2020',
'2019',
'2020'
]);
});
});
describe('buttonsInfo', () => {
describe('buttonLabel', () => {
test('answers have buttonLabel properties => buttonsInfo buttonsLabel properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonLabel: 'Label 1'
},
{
buttonLabel: 'Label 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabel).toEqual('Label 1');
expect(buttonsInfo[1].buttonLabel).toEqual('Label 2');
});
test('answers have Text properties, no buttonLabel properties => buttonsInfo buttonsLabel properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
Text: 'Label 1'
},
{
Text: 'Label 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabel).toEqual('Label 1');
expect(buttonsInfo[1].buttonLabel).toEqual('Label 2');
});
test('answers have buttonLabel and Text properties => buttonsInfo buttonsLabel properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonLabel: 'buttonLabel 1',
Text: 'Text 1'
},
{
buttonLabel: 'buttonLabel 2',
Text: 'Text 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabel).toEqual('buttonLabel 1');
expect(buttonsInfo[1].buttonLabel).toEqual('buttonLabel 2');
});
test('answers is an array of strings => buttonLabel is answer values', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabel).toEqual('answer 1');
expect(buttonsInfo[1].buttonLabel).toEqual('answer 2');
});
});
describe('altText', () => {
test('answers have altText properties => buttonsInfo altText properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
altText: 'altText 1'
},
{
altText: 'altText 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].altText).toEqual('altText 1');
expect(buttonsInfo[1].altText).toEqual('altText 2');
});
test('answers have Name properties, no buttonLabel properties => buttonsInfo altText properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
Name: 'Name 1'
},
{
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].altText).toEqual('Name 1');
expect(buttonsInfo[1].altText).toEqual('Name 2');
});
test('answers have altText and Name properties => buttonsInfo altText properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
altText: 'altText 1',
Name: 'Name 1'
},
{
altText: 'altText 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].altText).toEqual('altText 1');
expect(buttonsInfo[1].altText).toEqual('altText 2');
});
test('answers is an array of strings => altText is answer values', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].altText).toEqual('answer 1');
expect(buttonsInfo[1].altText).toEqual('answer 2');
});
});
describe('buttonLabelSubCopy', () => {
test('answers have buttonLabelSubCopy properties => buttonsInfo buttonLabelSubCopy properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonLabelSubCopy: 'buttonLabelSubCopy 1'
},
{
buttonLabelSubCopy: 'buttonLabelSubCopy 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabelSubCopy).toEqual('buttonLabelSubCopy 1');
expect(buttonsInfo[1].buttonLabelSubCopy).toEqual('buttonLabelSubCopy 2');
});
test('answers have SubText properties, no buttonLabelSubCopy properties => buttonsInfo buttonLabelSubCopy properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
SubText: 'SubText 1'
},
{
SubText: 'SubText 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabelSubCopy).toEqual('SubText 1');
expect(buttonsInfo[1].buttonLabelSubCopy).toEqual('SubText 2');
});
test('answers have buttonLabelSubCopy and SubText properties => buttonsInfo buttonLabelSubCopy properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonLabelSubCopy: 'buttonLabelSubCopy 1',
SubText: 'buttonLabelSubCopy 1'
},
{
buttonLabelSubCopy: 'buttonLabelSubCopy 2',
SubText: 'buttonLabelSubCopy 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabelSubCopy).toEqual('buttonLabelSubCopy 1');
expect(buttonsInfo[1].buttonLabelSubCopy).toEqual('buttonLabelSubCopy 2');
});
test('answers is an array of strings => there are no buttonLabelSubCopy properties', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonLabelSubCopy).toBe(undefined);
expect(buttonsInfo[1].buttonLabelSubCopy).toBe(undefined);
});
});
describe('buttonImage', () => {
test('answers have buttonImage properties => buttonsInfo buttonImage properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonImage: 'buttonImage 1'
},
{
buttonImage: 'buttonImage 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImage).toEqual('buttonImage 1');
expect(buttonsInfo[1].buttonImage).toEqual('buttonImage 2');
});
test('answers have AnswerImageUrl properties, no buttonImage properties => buttonsInfo buttonImage properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
AnswerImageUrl: 'AnswerImageUrl 1'
},
{
AnswerImageUrl: 'AnswerImageUrl 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImage).toEqual('AnswerImageUrl 1');
expect(buttonsInfo[1].buttonImage).toEqual('AnswerImageUrl 2');
});
test('answers have buttonImage and AnswerImageUrl properties => buttonsInfo buttonImage properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonImage: 'buttonImage 1',
AnswerImageUrl: 'AnswerImageUrl 1'
},
{
buttonImage: 'buttonImage 2',
AnswerImageUrl: 'AnswerImageUrl 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImage).toEqual('buttonImage 1');
expect(buttonsInfo[1].buttonImage).toEqual('buttonImage 2');
});
test('answers is an array of strings => there are no buttonImage properties', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImage).toBe(undefined);
expect(buttonsInfo[1].buttonImage).toBe(undefined);
});
});
describe('buttonImageId', () => {
test('answers have buttonImageId properties => buttonsInfo buttonImageId properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonImageId: 'buttonImageId 1'
},
{
buttonImageId: 'buttonImageId 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImageId).toEqual('buttonImageId 1');
expect(buttonsInfo[1].buttonImageId).toEqual('buttonImageId 2');
});
test('answers have ImageId properties, no buttonImageId properties => buttonsInfo buttonImage properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
ImageId: 'ImageId 1'
},
{
ImageId: 'ImageId 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImageId).toEqual('ImageId 1');
expect(buttonsInfo[1].buttonImageId).toEqual('ImageId 2');
});
test('answers have buttonImageId and ImageId properties => buttonsInfo buttonImageId properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: [
{
buttonImageId: 'buttonImageId 1',
ImageId: 'ImageId 1'
},
{
buttonImageId: 'buttonImageId 2',
ImageId: 'ImageId 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImageId).toEqual('buttonImageId 1');
expect(buttonsInfo[1].buttonImageId).toEqual('buttonImageId 2');
});
test('answers is an array of strings => there are no buttonImageId properties', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].buttonImageId).toBe(undefined);
expect(buttonsInfo[1].buttonImageId).toBe(undefined);
});
});
describe('groupName', () => {
const answers = [[['answer 1', 'answer 2']], [[{ value: 1 }, { value: 2 }]]];
test.each(answers)(
'answers have groupName properties with spaces => buttonsInfo groupName properties are correct',
(answerGroup) => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: answerGroup,
groupName: 'this is my group name'
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].groupName).toEqual('this-is-my-group-name');
expect(buttonsInfo[1].groupName).toEqual('this-is-my-group-name');
}
);
test.each(answers)(
'answers have groupName properties with no spaces => buttonsInfo groupName properties are correct',
(answerGroup) => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
answers: answerGroup,
groupName: 'this-is-my-group-name'
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].groupName).toEqual('this-is-my-group-name');
expect(buttonsInfo[1].groupName).toEqual('this-is-my-group-name');
}
);
});
describe('value', () => {
describe('useTextForValue is true', () => {
test('answers have value properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
value: 'value 1'
},
{
value: 'value 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers have Text properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
Text: 'Text 1'
},
{
Text: 'Text 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('Text 1');
expect(buttonsInfo[1].value).toEqual('Text 2');
});
test('answers have Name properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
Name: 'Name 1'
},
{
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('Name 1');
expect(buttonsInfo[1].value).toEqual('Name 2');
});
test('answers have value and Text properties, no Name properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
value: 'value 1',
Text: 'Text 1'
},
{
value: 'value 2',
Text: 'Text 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers have value and Name properties, no Text properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
value: 'value 1',
Name: 'Name 1'
},
{
value: 'value 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers have Text and Name properties, no value properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
Text: 'Text 1',
Name: 'Name 1'
},
{
Text: 'Text 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('Text 1');
expect(buttonsInfo[1].value).toEqual('Text 2');
});
test('answers have value, Text, and Name properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: [
{
value: 'value 1',
Text: 'Text 1',
Name: 'Name 1'
},
{
value: 'value 2',
Text: 'Text 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers is an array of strings => buttonInfo value property values are values from array', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: true,
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('answer 1');
expect(buttonsInfo[1].value).toEqual('answer 2');
});
});
describe('useTextForValue is false', () => {
test('answers have value properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
value: 'value 1'
},
{
value: 'value 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers have Text properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
Text: 'Text 1'
},
{
Text: 'Text 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toBe(null);
expect(buttonsInfo[1].value).toBe(null);
});
test('answers have Name properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
Name: 'Name 1'
},
{
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('Name 1');
expect(buttonsInfo[1].value).toEqual('Name 2');
});
test('answers have value and Text properties, no Name properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
value: 'value 1',
Text: 'Text 1'
},
{
value: 'value 2',
Text: 'Text 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers have value and Name properties, no Text properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
value: 'value 1',
Name: 'Name 1'
},
{
value: 'value 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers have Text and Name properties, no value properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
Text: 'Text 1',
Name: 'Name 1'
},
{
Text: 'Text 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('Name 1');
expect(buttonsInfo[1].value).toEqual('Name 2');
});
test('answers have value, Text, and Name properties => buttonsInfo value properties are correct', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: [
{
value: 'value 1',
Text: 'Text 1',
Name: 'Name 1'
},
{
value: 'value 2',
Text: 'Text 2',
Name: 'Name 2'
}
]
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('value 1');
expect(buttonsInfo[1].value).toEqual('value 2');
});
test('answers is an array of strings => buttonInfo value property values are values from array', () => {
// Arrange
const wrapper = shallowMount(
buttonQuestion,
setupMocks({
propsData: {
useTextForValue: false,
answers: ['answer 1', 'answer 2']
}
})
);
// Act
const { buttonsInfo } = wrapper.vm;
// Assert
expect(buttonsInfo[0].value).toEqual('answer 1');
expect(buttonsInfo[1].value).toEqual('answer 2');
});
});
});
});
});