import { shallowMount, mount } from "@vue/test-utils"; import buttonQuestion from "./button-question"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; describe("buttonQuestion.vue", () => { it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => { // Act const wrapper = shallowMount(buttonQuestion, { propsData: { isOverflowScrollable: true, groupName: "group-name", }, }); // Assert const fieldSet = wrapper.find("fieldset"); expect(fieldSet.classes()).toContain("overflow-scroll"); }); }); 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", ]); }); test("should accept an imported component for buttonTypeObject and successfully add it to components", async () => { // Arrange const mockComponent = { name: "mockComponent", methods: { mockComponentMethod() { return "mockComponentMethod return value"; }, }, }; const wrapper = await shallowMount( buttonQuestion, setupMocks({ propsData: { buttonTypeString: "mockComponent", buttonTypeObject: mockComponent, }, }) ); // Act const componentList = wrapper.vm.$options.components; const componentExists = !!componentList.mockComponent; const componentNameMatches = componentList.mockComponent.name === mockComponent.name; const componentMethodMatches = componentList.mockComponent.methods.mockComponentMethod() === mockComponent.methods.mockComponentMethod(); // Assert expect(componentExists && componentNameMatches && componentMethodMatches).toBe(true); }); }); 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: { name: "page-name" } }; const baseMountOptions = getMountOptions( Object.assign(defaultMountOptions, mountOptionsMockData) ); const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); // Add in group name to avoid vee-validate failures if (!allMountOptions.propsData.groupName) { allMountOptions.propsData.groupName = "group-name"; } return allMountOptions; }