diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index ae556efe..b958da8c 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -1,117 +1,1121 @@ import { shallowMount } from "@vue/test-utils"; import buttonQuestion from "@/common-components/button-question/button-question"; - -jest.mock("@/store", () => { return {}; }, { virtual: true }); +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" - } + 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", + ]); + }); }); - // Assert - const fieldSet = wrapper.find('fieldset'); - expect(fieldSet.classes()).toContain("overflow-scroll"); - }); -}); + 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", + }, + ], + }, + }) + ); -describe("buttonQuestion.vue", () => { - it("Fieldset classes should contain row if button type is listCard", () => { - // Act - const wrapper = shallowMount(buttonQuestion, { - propsData: { - buttonType: "listCard", - groupName: "group-name" - } + // 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"); + }); + }); + }); }); - // 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: { - buttonType: "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: { - buttonType: "radio", - groupName: "group-name" - } - }); - // Assert - const Div = wrapper.find('fieldset div'); - expect(Div.classes()).toContain("ui-radio"); - }); -}); - - -// testing a computed property -describe("buttonQuestion.vue", () => { - it("getColLength should return '12' if prop isWide is set to true", () => { - // Act - const localThis = { isWide: true } - - expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12"); - }); -}); - -describe("buttonQuestion.vue", () => { - it("getColLength should return '' if prop isWide is set to false", () => { - // Act - const localThis = { - isWide: false, - answers: ['a', 'b'], - groupName: "group-name" - } - - expect(buttonQuestion.computed.getColLength.call(localThis)).toBe(""); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should return answer.Text if prop useTextForValue is true", async () => { - // Act - const localThis = { useTextForValue: true }; - const answer = { 'Name': 'testName', 'Text': 'testText' }; - - // Assert - expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testText'); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should return answer.Name if prop useTextForValue is false and answer.Name exists", async () => { - // Act - const localThis = { useTextForValue: false }; - const answer = { 'Name': 'testName', 'Text': 'testText' }; - - // Assert - expect(buttonQuestion.methods.getValue.call(localThis, answer)).toBe('testName'); - }); }); function setupMocks(mountOptionsMockData = {}) { - const defaultMountOptions = { route: { query: { issPage: 'page-name' } } }; + const defaultMountOptions = { route: { query: { issPage: "page-name" } } }; + const baseMountOptions = getMountOptions( + Object.assign(defaultMountOptions, mountOptionsMockData) + ); + const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); - return defaultMountOptions; + return allMountOptions; } diff --git a/src/store/store.spec.js b/src/store/store.spec.js index f8aba905..5bf8bbad 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -114,7 +114,7 @@ describe("Store", () => { expect(store.order.vehicle.imageUrl).toEqual(response.data.imageUrl); expect(store.order.vehicle.imageVifNumber).toEqual(response.data.imageVifNumber); - expect(store.order.vehicle.imageVifColor).toEqual(response.data.imageVifColor); + expect(store.order.vehicle.style).toEqual(response.data.style); }); it("setVehicle should call globalMethods.callHttpClient", () => { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index 0d51bf57..43271781 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -1,264 +1,139 @@ -import { shallowMount } from "@vue/test-utils"; +import { mount } from "@vue/test-utils"; import listButtonHorizontal from "./list-button-horizontal"; -import { nextTick } from "vue"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; describe("list-button-horizontal.vue", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isMultiSelect: true, - }, + 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!"); + }); }); - - // Assert - const input = wrapper.find("input"); - - expect(input.attributes().type).toEqual("checkbox"); - }); - - it("Should return input type radio if isMultiSelect is false or not specified", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isMultiSelect: false, - }, - }); - - // Assert - const input = wrapper.find("input"); - - expect(input.attributes().type).toEqual("radio"); - }); - - it("Should return primary label text (buttonID)", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - buttonID: "List Card Checkbox", - }, - }); - - // Assert - const label = wrapper.find("label"); - - expect(label.attributes().for).toEqual("List Card Checkbox"); - }); - - it("Should return screen reader text", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - 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 = shallowMount(listButtonHorizontal, { - 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 = shallowMount(listButtonHorizontal, { - propsData: { - isRequired: true, - }, - }); - - // Assert - const input = wrapper.find("input"); - - expect(input.attributes()["aria-required"]).toEqual("true"); - }); - - it("Should return loader enabled true", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - selectingInitiatesLoad: true, - }, - }); - - // Assert - - const label = wrapper.find("label"); - - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.triggerButton(); - - await nextTick(); - - const loader = wrapper.find("loader-stub"); - - expect(loader.exists()).toBe(true); - }); - - it("Should return loader color", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - loaderColor: "blue", - selectingInitiatesLoad: true, - }, - }); - - // Assert - - const label = wrapper.find("label"); - - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.triggerButton(); - - await nextTick(); - - const loader = wrapper.find("loader-stub"); - - expect(loader.attributes("class")).toContain("blue"); - }); - - it("Should return loader position", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - loaderPosition: "right", - selectingInitiatesLoad: true, - }, - }); - - // Assert - - const label = wrapper.find("label"); - - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.triggerButton(); - - await nextTick(); - - const loader = wrapper.find("loader-stub"); - - expect(loader.attributes("class")).toContain("right"); - }); - - it("Should emit button value on click", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - value: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - modelValue: ["List Card Checkbox"], - }, - }); - wrapper.vm.handleCheckChange(); - // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]); - }); - - it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - modelValue: ["List Card Checkbox"], - isMultiSelect: false, - value: "Car-Front", - selectedValues: ["Car-Front"] - }, - }); - // Assert - expect(wrapper.vm.checkValue).toEqual(true); - }); - - it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - selectingInitiatesLoad: false, - }, - }); - - // Assert - wrapper.vm.handleInputChange(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - }); - - it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - isMultiSelect: true, - }, - }); - - // Assert - wrapper.vm.handleKeyupArrow(); - - await nextTick(); - - expect(wrapper.vm.handleKeyupArrow).toHaveReturned; - }); - - it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => { - // Act - const wrapper = shallowMount(listButtonHorizontal, { - propsData: { - selectingInitiatesLoad: false, - isMultiSelect: false, - }, - }); - - // Assert - wrapper.vm.handleKeyupArrow(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - }); - }); + +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 }; +} diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index e54710ed..3b7d267d 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -1,256 +1,304 @@ -import { shallowMount } from "@vue/test-utils"; +import { mount } from "@vue/test-utils"; import listButton from "./list-button"; -import { nextTick } from "vue"; +import { GaActions } from "@/constants/analytics"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; describe("list-button.vue", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isMultiSelect: true, - }, + describe("loader", () => { + it("selectingInitiatesLoad is true and answer is changed => show the loader", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + global: { + mocks: { + $route: { query: { fmgPage: "page-name" } }, + GaActions: GaActions, + pushEventToGA: jest.fn(), + }, + }, + propsData: { + selectingInitiatesLoad: true, + }, + }, + }); + + // Act + wrapper.vm.selectedValue = "something"; + await wrapper.vm.$nextTick(); + + // Assert + const loader = wrapper.findComponent({ name: "loader" }); + expect(loader.exists()).toBe(true); + }); + + it("Should return loader color", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + global: { + mocks: { + $route: { query: { fmgPage: "page-name" } }, + GaActions: GaActions, + pushEventToGA: jest.fn(), + }, + }, + propsData: { + loaderColor: "blue", + selectingInitiatesLoad: true, + }, + }, + }); + + // Act + wrapper.vm.selectedValue = "something"; + await wrapper.vm.$nextTick(); + + // Assert + const loader = wrapper.findComponent({ name: "loader" }); + expect(loader.attributes("class")).toContain("blue"); + }); + + it("Should return loader position", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + global: { + mocks: { + $route: { query: { fmgPage: "page-name" } }, + GaActions: GaActions, + pushEventToGA: jest.fn(), + }, + }, + propsData: { + loaderPosition: "right", + selectingInitiatesLoad: true, + }, + }, + }); + + // Act + wrapper.vm.selectedValue = "something"; + await wrapper.vm.$nextTick(); + + // Assert + const loader = wrapper.findComponent({ name: "loader" }); + expect(loader.attributes("class")).toContain("right"); + }); }); - // Assert - const input = wrapper.find("input"); + describe("baseInputButton checks", () => { + it("Should return input type checkbox if isMultiSelect is true", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); - expect(input.attributes().type).toEqual("checkbox"); - }); + // Assert + const input = wrapper.find("input"); - it("Should return input type radio if isMultiSelect is false or not specified", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isMultiSelect: false, - }, + expect(input.attributes().type).toEqual("checkbox"); + }); + + it("Should return input type radio if isMultiSelect is false or not specified", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + + // Assert + const input = wrapper.find("input"); + expect(input.attributes().type).toEqual("radio"); + }); + + it("(Radio) Should emit button value on selectedValue change", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + value: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + modelValue: "List Card Checkbox", + buttonID: "list-card-id", + }, + }, + }); + + // Act + wrapper.vm.selectedValue = "test"; + + // Assert + expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual("test"); + }); + + it("(Checkbox) Should emit button value on selectedValue change", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + value: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + modelValue: "List Card Checkbox", + buttonID: "list-card-id", + isMultiSelect: true, + }, + }, + }); + + // Act + wrapper.vm.selectedValue = ["test"]; + + // Assert + expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["test"]); + }); }); - // Assert - const input = wrapper.find("input"); + describe("styling/UI", () => { + test("has buttonLabel => displays buttonLabel", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + modelValue: "", + groupName: "groupName", + value: "myValue", + }, + }, + }); - expect(input.attributes().type).toEqual("radio"); - }); + // Assert + const content = wrapper.find(".list-button-content"); + expect(content.isVisible()).toBe(true); + expect(content.text()).toContain("Surprise!"); + }); - it("Should return primary label text (buttonID)", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - buttonID: "List Card Checkbox", - }, + test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + buttonLabelSubCopy: "Super duper surprise :)", + modelValue: "", + groupName: "groupName", + value: "myValue", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-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!", + modelValue: "", + groupName: "groupName", + value: "myValue", + }, + }, + }); + + // Assert + const content = wrapper.find(".list-button-content"); + const screenReaderOnlyText = wrapper.find(".sr-only"); + expect(content.isVisible()).toBe(true); + expect(screenReaderOnlyText.exists()).toBe(true); + expect(screenReaderOnlyText.text()).toContain("Tests are fun!"); + }); + + it("Should return screen reader text", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + screenReaderOnlyText: "Screen Reader Only Text", + modelValue: "", + groupName: "groupName", + value: "myValue", + }, + }, + }); + + // 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", + modelValue: "", + groupName: "groupName", + value: "myValue", + }, + }, + }); + + // 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, + groupName: "groupName", + modelValue: "", + value: "myValue", + }, + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.attributes()["aria-required"]).toEqual("true"); + }); }); - - // Assert - const label = wrapper.find("label"); - - expect(label.attributes().for).toEqual("List Card Checkbox"); - }); - - it("Should return screen reader text", async () => { - // Act - const wrapper = shallowMount(listButton, { - 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 = shallowMount(listButton, { - 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 = shallowMount(listButton, { - propsData: { - isRequired: true, - }, - }); - - // Assert - const input = wrapper.find("input"); - - expect(input.attributes()["aria-required"]).toEqual("true"); - }); - - it("Should return loader enabled true", async () => { - // Act - const wrapper = shallowMount(listButton, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - selectingInitiatesLoad: true, - }, - }); - - // Assert - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.triggerButton(); - - await nextTick(); - - const loader = wrapper.find("loader-stub"); - - expect(loader.exists()).toBe(true); - }); - - it("Should return loader color", async () => { - // Act - const wrapper = shallowMount(listButton, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - loaderColor: "blue", - selectingInitiatesLoad: true, - }, - }); - - // Assert - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.triggerButton(); - await nextTick(); - - const loader = wrapper.find("loader-stub"); - - expect(loader.attributes("class")).toContain("blue"); - }); - - it("Should return loader position", async () => { - // Act - const wrapper = shallowMount(listButton, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - loaderPosition: "right", - selectingInitiatesLoad: true, - }, - }); - - // Assert - wrapper.vm.handleCheckChange = jest.fn(); - wrapper.vm.triggerButton(); - - await nextTick(); - - const loader = wrapper.find("loader-stub"); - - expect(loader.attributes("class")).toContain("right"); - }); - - it("Should emit button value on click", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - value: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - modelValue: ["List Card Checkbox"], - buttonID: 'list-card-id' - }, - }); - - wrapper.vm.handleCheckChange(); - - // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: false, buttonId: 'list-card-id'}]); - - }); - - it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - modelValue: ["List Card Checkbox"], - selectedValues: "Car-Front" - }, - }); - // Assert - expect(wrapper.componentVM.checkValue).toEqual(false); - }); - - it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - selectingInitiatesLoad: false, - }, - }); - - // Assert - wrapper.vm.handleInputChange(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - }); - - it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - isMultiSelect: true, - }, - }); - - // Assert - wrapper.vm.handleKeyupArrow(); - - await nextTick(); - - expect(wrapper.vm.handleKeyupArrow).toHaveReturned; - }); - - it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => { - // Act - const wrapper = shallowMount(listButton, { - propsData: { - selectingInitiatesLoad: false, - isMultiSelect: false, - }, - }); - - // Assert - wrapper.vm.handleKeyupArrow(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - }); - }); + +function setupMocks({ mockData }) { + const wrapper = mount(listButton, { + ...mockData, + mixins: [inputButtonWrapperMixin], + }); + + return { wrapper }; +} diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 9c9e1986..25d4a353 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -1,329 +1,179 @@ -import { shallowMount } from "@vue/test-utils"; +import { mount } from "@vue/test-utils"; import listCard from "./list-card"; import { nextTick } from "vue"; describe("list-card.vue", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isMultiSelect: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "checkbox-demo-1", - groupName: "Checkbox 1", - buttonImage: "windshield-damage.svg", - }, - }); + it("Should return input type checkbox if isMultiSelect is true", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isMultiSelect: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "checkbox-demo-1", + groupName: "Checkbox 1", + buttonImage: "windshield-damage.svg", + value: "test value", + }, + }); - // Assert - const input = wrapper.find("input"); - expect(input.attributes().type).toEqual("checkbox"); + // Assert + const input = wrapper.find("input"); + expect(input.attributes().type).toEqual("checkbox"); }); - it("Should return primary label text", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - }, - }); + it("Should return primary label text", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + value: "test value", + }, + }); - // Assert - const paragraph = wrapper.find("p"); - expect(paragraph.text()).toEqual("Windshield"); + // Assert + const paragraph = wrapper.find("p"); + expect(paragraph.text()).toEqual("Windshield"); }); - it("Should return secondary (sub) label text", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - buttonLabelSubCopy: "Test", - }, - }); + it("Should return secondary (sub) label text", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + buttonLabelSubCopy: "Test", + value: "test value", + }, + }); - // Assert - const paragraph = wrapper.find("p:nth-of-type(2)"); - expect(paragraph.text()).toEqual("Test"); + // Assert + const paragraph = wrapper.find("p:nth-of-type(2)"); + expect(paragraph.text()).toEqual("Test"); }); - it("Should return value used for various text settings including the label 'for' and input id", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - buttonLabelSubCopy: "Test", - }, - }); + it("Should return input group name used for radio or checkbox", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + buttonLabelSubCopy: "Test", + value: "test value", + }, + }); - // Assert - const label = wrapper.find("label"); - expect(label.attributes().for).toEqual("List Card Checkbox"); + // Assert + const input = wrapper.find("input"); + expect(input.attributes().name).toEqual("radio 1"); }); - it("Should return input group name used for radio or checkbox", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - buttonLabelSubCopy: "Test", - }, - }); + it("Should return aria-required state", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + value: "test value", + }, + }); - // Assert - const input = wrapper.find("input"); - expect(input.attributes().name).toEqual("radio 1"); + // Assert + const input = wrapper.find("input"); + expect(input.attributes()["aria-required"]).toEqual("true"); }); - it("Should return aria-required state", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - }, - }); + it("Should return flex row classes if isWide is true", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: true, + buttonLabelSubCopy: "", + value: "test value", + }, + }); - // Assert - const input = wrapper.find("input"); - expect(input.attributes()["aria-required"]).toEqual("true"); + // Assert + const label = wrapper.find(".list-card-content"); + expect(label.exists()).toBe(true); + const labelClasses = wrapper.vm.labelClasses; + expect(labelClasses).toContain("flex-row"); + expect(label.classes()).toContain("flex-row"); }); - it("Should return flex row classes if isWide is true", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: true, - buttonLabelSubCopy: "", - }, - }); + it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is provided", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: true, + buttonLabelSubCopy: "Button Subcopy", + value: "test value", + }, + }); - // Assert - const label = wrapper.find("label"); - expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4"]); + // Assert + const label = wrapper.find(".list-card-content"); + expect(label.exists()).toBe(true); + const labelClasses = wrapper.vm.labelClasses; + expect(labelClasses).toContain("flex-row"); + expect(label.classes()).toContain("flex-row"); + expect(labelClasses).toContain("checkboxTop"); + expect(label.classes()).toContain("checkboxTop"); }); - it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: true, - buttonLabelSubCopy: "Button Subcopy", - }, - }); + it("Should return flex column classes if isWide is false", () => { + // Act + const wrapper = mount(listCard, { + propsData: { + isRadioHorizontal: true, + buttonLabel: "Windshield", + buttonID: "List Card Checkbox", + groupID: "radio-demo-1", + groupName: "radio 1", + buttonImage: "windshield-damage.svg", + isRequired: true, + isWide: false, + value: "test value", + }, + }); - // Assert - const label = wrapper.find("label"); - expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4", "checkboxTop"]); + // Assert + const label = wrapper.find(".list-card-content"); + expect(label.exists()).toBe(true); + const labelClasses = wrapper.vm.labelClasses; + expect(labelClasses).toContain("flex-column"); + expect(label.classes()).toContain("flex-column"); }); - - it("Should return flex column classes if isWide is false", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - buttonID: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - }, - }); - - // Assert - const label = wrapper.find("label"); - expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]); - }); - - it("Should emit button value on click", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - value: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - buttonID: 'list-card-id', - selectedValues: "List Card Checkbox" - }, - }); - wrapper.vm.handleCheckChange(); - // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]); - }); - - it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isRadioHorizontal: true, - buttonLabel: "Windshield", - value: "List Card Checkbox", - groupID: "radio-demo-1", - groupName: "radio 1", - buttonImage: "windshield-damage.svg", - isRequired: true, - isWide: false, - selectedValues: "Car-Front" - }, - }); - // Assert - expect(wrapper.componentVM.checkValue).toEqual(false); - }); - - it("Should set an initial value for validation if selectedValues include the value", async () => { - // Arrange - const wrapper = shallowMount(listCard, { - propsData: { - value: "Windshield", - groupName: "radio 1", - selectedValues: ["Windshield"], - }, - }); - - // Assert - expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]); - }); - - it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - selectingInitiatesLoad: false, - }, - }); - - // Assert - wrapper.vm.handleInputChange(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - }); - - it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - isMultiSelect: true, - }, - }); - - // Assert - wrapper.vm.handleKeyupArrow(); - - await nextTick(); - - expect(wrapper.vm.handleKeyupArrow).toHaveReturned; - }); - - it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => { - // Act - const wrapper = shallowMount(listCard, { - propsData: { - selectingInitiatesLoad: false, - isMultiSelect: false, - }, - }); - - // Assert - wrapper.vm.handleKeyupArrow(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - }); - - it("Should run handleChange if triggerButton is triggered", async () => { - - // Act - const wrapper = shallowMount(listCard, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - selectingInitiatesLoad: false, - }, - }); - - // Assert - wrapper.vm.triggerButton(); - - await nextTick(); - - expect(wrapper.vm.handleChange).toBeCalled; - expect(wrapper.vm.handleCheckChange).not.toBeCalled; - expect(wrapper.vm.displayLoader).not.toBeCalled; - }); - - it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => { - // Act - const wrapper = shallowMount(listCard, { - global: { - mocks: { - '$route': { query: { issPage: 'page-name' } }, - } - }, - propsData: { - selectingInitiatesLoad: true, - }, - }); - - // Assert - wrapper.vm.triggerButton(); - - await nextTick(); - - expect(wrapper.vm.handleCheckChange).toBeCalled; - expect(wrapper.vm.displayLoader).toBeCalled; - }); - });