/* eslint-disable max-len */ 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'); }); }); }); }); });