import { shallowMount } from "@vue/test-utils"; import buttonQuestion from "@/digital-components/button-question/button-question"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // 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.buttonsInfo; // Assert expect(buttonsInfo[0].value).toEqual("answer 1"); expect(buttonsInfo[1].value).toEqual("answer 2"); }); }); }); }); }); 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; }