diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 75982cf73..273f3d491 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -1,8 +1,6 @@ import { shallowMount, mount } from "@vue/test-utils"; import baseInputButton from "./base-input-button"; -import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; -// TODO KO describe("baseInputButton.vue", () => { describe("general", () => { describe("checkbox", () => { @@ -73,14 +71,14 @@ describe("baseInputButton.vue", () => { }, }, }); - + // Act await wrapper.trigger("click"); - + // Assert expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(["X"]); }); - + test("input is checked", async () => { // Arrange const { wrapper } = setupMocks({ @@ -92,17 +90,16 @@ describe("baseInputButton.vue", () => { }, }); const input = wrapper.find("input"); - + // Act await wrapper.trigger("click"); - - + // Assert expect(input.element.checked).toBe(true); }); - }) - - describe("clicked twice" ,() => { + }); + + describe("clicked twice", () => { test("input is unchecked", async () => { // Arrange const { wrapper } = setupMocks({ @@ -114,15 +111,15 @@ describe("baseInputButton.vue", () => { }, }); const input = wrapper.find("input"); - + // Act await wrapper.trigger("click"); await wrapper.trigger("click"); - + // Assert expect(input.element.checked).toBe(false); }); - }) + }); describe("is initially checked, click once", () => { test("input is unchecked", async () => { @@ -132,19 +129,19 @@ describe("baseInputButton.vue", () => { propsData: { isMultiSelect: true, value: "X", - modelValue:["X"] + modelValue: ["X"], }, }, }); const input = wrapper.find("input"); - + // Act await wrapper.trigger("click"); - + // Assert expect(input.element.checked).toBe(false); }); - + test("input is unchecked", async () => { // Arrange const { wrapper } = setupMocks({ @@ -152,19 +149,19 @@ describe("baseInputButton.vue", () => { propsData: { isMultiSelect: true, value: "X", - modelValue:["X"] + modelValue: ["X"], }, }, }); const input = wrapper.find("input"); - + // Act await wrapper.trigger("click"); - + // Assert expect(input.element.checked).toBe(false); }); - }) + }); }); describe("radio", () => { @@ -189,12 +186,8 @@ describe("baseInputButton.vue", () => { }); }); - describe("keyboard navigation and events", () => { + describe("events", () => { describe("checkbox", () => { - test.todo("focus on a checkbox => update:modelValue is not emitted"); - - test.todo("blur from a checkbox => update:modelValue is not emitted"); - test("change event fired from checkbox => update:modelValue is emitted with correct value", async () => { // Arrange const { wrapper } = setupMocks({ @@ -257,10 +250,6 @@ describe("baseInputButton.vue", () => { }); describe("radio", () => { - test.todo("focus on a radio button => update:modelValue is not emitted"); - - test.todo("blur from a radio button => update:modelValue is not emitted"); - test("focus and click space on a radio button => update:modelValue is emitted with correct value", async () => { // Arrange const { wrapper } = setupMocks({ @@ -775,7 +764,19 @@ describe("baseInputButton.vue", () => { }); describe("handlePushClickEventToGACheck", () => { - test.todo(""); + test.todo("called from click or click-like event => call pushClickEventToGA"); + + describe("called from keyboard navigation/button-question-focus-helper", () => { + test.todo("valueToEmit is null => pushClickEventToGA not called"); + + test.todo("isMultiSelect => pushClickEventToGA not called"); + + test.todo("!isMultiSelect and selectingInitiatesLoad => pushClickEventToGA not called"); + + test.todo("valueToEmit is null => pushClickEventToGA not called"); + + test.todo("valueToEmit is null => pushClickEventToGA not called"); + }); }); describe("pushClickEventToGA", () => { @@ -1011,179 +1012,17 @@ describe("baseInputButton.vue", () => { }); }); - describe("integration testing", () => { + describe("keyboard navigation", () => { describe("checkbox", () => { - test("click on both => both are selected", async () => { - // Arrange - const { wrapper } = setupBaseInputButtonWrapper({ - mockData: { - isMultiSelect: true, - }, - }); + test.todo("focus on a checkbox => update:modelValue is not emitted"); - // Act - const buttonWrappers = wrapper.findAllComponents({ - name: "baseInputButtonWrapper", - }); - const inputButtonOne = buttonWrappers.at(0); - const inputButtonTwo = buttonWrappers.at(1); - expect(inputButtonOne.vm.isMultiSelect).toBe(true); - expect(inputButtonTwo.vm.isMultiSelect).toBe(true); - expect(wrapper.vm.value).toEqual([]); - - await inputButtonOne.find("input").trigger("click"); - await inputButtonTwo.find("input").trigger("click"); - - // Assert - expect(wrapper.vm.value).toEqual(["value1", "value2"]); - }); - - test("click input 1, 2, 1 => only input 2 selected", async () => { - // Arrange - const { wrapper } = setupBaseInputButtonWrapper({ - mockData: { - isMultiSelect: true, - }, - }); - - // Act - const buttonWrappers = wrapper.findAllComponents({ - name: "baseInputButtonWrapper", - }); - const inputButtonOne = buttonWrappers.at(0); - const inputButtonTwo = buttonWrappers.at(1); - expect(inputButtonOne.vm.isMultiSelect).toBe(true); - expect(inputButtonTwo.vm.isMultiSelect).toBe(true); - expect(wrapper.vm.value).toEqual([]); - - await inputButtonOne.find("input").trigger("click"); - await inputButtonTwo.find("input").trigger("click"); - await inputButtonOne.find("input").trigger("click"); - - // Assert - expect(wrapper.vm.value).toEqual(["value2"]); - }); - - const defaultCheckedCases = [ - [["value2"], false, true], - [["value1", "value2"], true, true], - [["value1"], true, false], - [[], false, false], - ]; - test.each(defaultCheckedCases)( - "initial value is %s => correct input buttons are selected", - async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => { - // Arrange - const { wrapper } = setupBaseInputButtonWrapper({ - mockData: { - isMultiSelect: true, - initialValue: modelValue, - }, - }); - - // Act - const buttonWrappers = wrapper.findAllComponents({ - name: "baseInputButtonWrapper", - }); - const inputs = wrapper.findAll("input"); - const inputButtonOne = buttonWrappers.at(0); - const inputButtonTwo = buttonWrappers.at(1); - - // Assert - expect(inputButtonOne.vm.isMultiSelect).toBe(true); - expect(inputButtonTwo.vm.isMultiSelect).toBe(true); - expect(inputs[0].element.checked).toBe(isInputButtonOneChecked); - expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked); - expect(wrapper.vm.value).toEqual(modelValue); - } - ); + test.todo("blur from a checkbox => update:modelValue is not emitted"); }); describe("radio", () => { - test("click on both => last clicked is selected", async () => { - // Arrange - const { wrapper } = setupBaseInputButtonWrapper({ - mockData: { - isMultiSelect: false, - }, - }); + test.todo("focus on a radio button => update:modelValue is not emitted"); - // Act - const buttonWrappers = wrapper.findAllComponents({ - name: "baseInputButtonWrapper", - }); - const inputButtonOne = buttonWrappers.at(0); - const inputButtonTwo = buttonWrappers.at(1); - expect(inputButtonOne.vm.isMultiSelect).toBe(false); - expect(inputButtonTwo.vm.isMultiSelect).toBe(false); - expect(wrapper.vm.value).toEqual(""); - - await inputButtonOne.find("input").trigger("click"); - await inputButtonTwo.find("input").trigger("click"); - - // Assert - expect(wrapper.vm.value).toEqual("value2"); - }); - - test("click input 1, 2, 1 => input 1 is selected", async () => { - // Arrange - const { wrapper } = setupBaseInputButtonWrapper({ - mockData: { - isMultiSelect: false, - }, - }); - - // Act - const buttonWrappers = wrapper.findAllComponents({ - name: "baseInputButtonWrapper", - }); - const inputButtonOne = buttonWrappers.at(0); - const inputButtonTwo = buttonWrappers.at(1); - expect(inputButtonOne.vm.isMultiSelect).toBe(false); - expect(inputButtonTwo.vm.isMultiSelect).toBe(false); - expect(wrapper.vm.value).toEqual(""); - - await inputButtonOne.find("input").trigger("click"); - await inputButtonTwo.find("input").trigger("click"); - await inputButtonOne.find("input").trigger("click"); - - // Assert - expect(wrapper.vm.value).toEqual("value1"); - }); - - const defaultCheckedCases = [ - ["", false, false], - ["value1", true, false], - ["value2", false, true], - [[], false, false], - ]; - test.each(defaultCheckedCases)( - "initial value is %s => correct input buttons are selected", - async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => { - // Arrange - const { wrapper } = setupBaseInputButtonWrapper({ - mockData: { - isMultiSelect: false, - initialValue: modelValue, - }, - }); - - // Act - const buttonWrappers = wrapper.findAllComponents({ - name: "baseInputButtonWrapper", - }); - const inputs = wrapper.findAll("input"); - const inputButtonOne = buttonWrappers.at(0); - const inputButtonTwo = buttonWrappers.at(1); - - // Assert - expect(inputButtonOne.vm.isMultiSelect).toBe(false); - expect(inputButtonTwo.vm.isMultiSelect).toBe(false); - expect(inputs[0].element.checked).toBe(isInputButtonOneChecked); - expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked); - expect(wrapper.vm.value).toEqual(modelValue); - } - ); + test.todo("blur from a radio button => update:modelValue is not emitted"); }); }); }); @@ -1216,50 +1055,3 @@ function setupMocks({ mockData = {}, shouldShallowMount = true }) { return { wrapper }; } - -function setupBaseInputButtonWrapper({ mockData = {} }) { - const originalData = baseInputButton.data(); - baseInputButton.data = () => { - return { - ...originalData, - // $route: { - // query: { - // fmgPage: "myPage", - // }, - // }, - }; - }; - - baseInputButton.methods.pushClickEventToGA = jest.fn(); - - const baseInputButtonWrapper = { - name: "baseInputButtonWrapper", - components: { baseInputButton }, - template: '
', - mixins: [inputButtonWrapperMixin], - }; - - let parentComponentTemplate = `
`; - parentComponentTemplate += ``; - parentComponentTemplate += ``; - parentComponentTemplate += `
`; - const wrapper = mount( - { - data() { - return { - value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""), - $route: { - query: { - fmgPage: "myPage", - }, - }, - }; - }, - template: parentComponentTemplate, - components: { baseInputButtonWrapper }, - }, - {} - ); - - return { wrapper }; -} diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index 3f4fd4c2c..c01a9a94c 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -97,7 +97,6 @@ export default { }, handleClick(e) { this.handleSelectionChange(e); - console.log(this.valueToEmit) this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index 2e732d881..0e51949a8 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -3,171 +3,172 @@ import buttonQuestion from "@/common-components/button-question/button-question" import { getMountOptions } from "@/helpers/unit-test-helper.js"; jest.mock( - "@/store", - () => { - return {}; - }, - { virtual: true } + "@/store", + () => { + return {}; + }, + { virtual: true } ); 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"); - }); + // 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: { - buttonType: "listCard", - groupName: "group-name", - }, + it("Fieldset classes should contain row if button type is listCard", () => { + // Act + const wrapper = shallowMount(buttonQuestion, { + propsData: { + buttonType: "listCard", + groupName: "group-name", + }, + }); + // Assert + const Div = wrapper.find("fieldset div"); + expect(Div.classes()).toContain("row"); }); - // 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", - }, + 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"); }); - // 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", - }, + 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"); }); - // 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 }; + 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 there's not buttonLabel 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" - ); - }); -}); - -// TODO KO -describe("buttonQuestion.vue", () => { - describe.skip("handleAnswerChange", () => { - test("is radio => should emit captured value", async () => { - // Act - const wrapper = shallowMount( - buttonQuestion, - setupMocks({ propsData: { groupName: "group-name" } }) - ); - await wrapper.setProps({ - answers: ["2022", "2021", "2020"], - isMultiSelect: false, - modelValue: "", - }); - const val = "2021"; - wrapper.vm.handleAnswerChange(val); - - // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]); + expect(buttonQuestion.computed.getColLength.call(localThis)).toBe("12"); }); +}); - 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: "", - }); - const val = ["2022", "2021", , "2019", "2020"]; - wrapper.vm.handleAnswerChange(val); +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", + }; - // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ - ["2022", "2021", , "2019", "2020"], - ]); + 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 there's not buttonLabel 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"); + }); +}); + +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", + ]); + }); }); - }); }); function setupMocks(mountOptionsMockData = {}) { - const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } }; - const baseMountOptions = getMountOptions( - Object.assign(defaultMountOptions, mountOptionsMockData) - ); - const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); + const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } }; + const baseMountOptions = getMountOptions( + Object.assign(defaultMountOptions, mountOptionsMockData) + ); + const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); - return allMountOptions; + return allMountOptions; } diff --git a/src/helpers/button-question-focus-helper.js b/src/helpers/button-question-focus-helper.js index 9884fa041..f2aac0ba5 100644 --- a/src/helpers/button-question-focus-helper.js +++ b/src/helpers/button-question-focus-helper.js @@ -8,7 +8,6 @@ let lastFocusedInputGroupName = ""; let onButtonQuestionLostFocusCallback = null; -// TODO KO add tests const handleAnyComponentFocus = (e) => { const targetType = e.target.type; if (targetType !== "radio" && targetType !== "checkbox") { diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js index 7e6fe9130..df45f7867 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.spec.js +++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js @@ -148,7 +148,7 @@ describe("vehicle-parts.vue", () => { expect(arePagePrerequisitesValid).toBe(true); }); - test.only("Initial data, should populate this.selectedGlassParts", async () => { + test("Initial data, should populate this.selectedGlassParts", async () => { //Arrange store.getters.pageData.mockReturnValue(basePartResponse); diff --git a/src/mixins/input-button-wrapper-mixin.spec.js b/src/mixins/input-button-wrapper-mixin.spec.js index 8f03de0aa..8724a5dd9 100644 --- a/src/mixins/input-button-wrapper-mixin.spec.js +++ b/src/mixins/input-button-wrapper-mixin.spec.js @@ -1,81 +1,234 @@ +import { mount } from "@vue/test-utils"; +import baseInputButton from "@/common-components/base-input-button/base-input-button"; +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; + describe("input-button-wrapper-mixin", () => { describe("mouse clicks", () => { describe("checkbox", () => { - test.todo("clicking once checks the baseInputButton"); + test("click on both => both are selected", async () => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + mockData: { + isMultiSelect: true, + }, + }); - test.todo("clicking twice unchecks the baseInputButton"); + // Act + const buttonWrappers = wrapper.findAllComponents({ + name: "baseInputButtonWrapper", + }); + const inputButtonOne = buttonWrappers.at(0); + const inputButtonTwo = buttonWrappers.at(1); + expect(inputButtonOne.vm.isMultiSelect).toBe(true); + expect(inputButtonTwo.vm.isMultiSelect).toBe(true); + expect(wrapper.vm.value).toEqual([]); - test.todo( - "is initially checked => checking unchecks the baseInputButton" - ); + await inputButtonOne.find("input").trigger("click"); + await inputButtonTwo.find("input").trigger("click"); - test.todo("clicked => correct event and value are emitted"); + // Assert + expect(wrapper.vm.value).toEqual(["value1", "value2"]); + }); + + test("click input 1, 2, 1 => only input 2 selected", async () => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + mockData: { + isMultiSelect: true, + }, + }); + + // Act + const buttonWrappers = wrapper.findAllComponents({ + name: "baseInputButtonWrapper", + }); + const inputButtonOne = buttonWrappers.at(0); + const inputButtonTwo = buttonWrappers.at(1); + expect(inputButtonOne.vm.isMultiSelect).toBe(true); + expect(inputButtonTwo.vm.isMultiSelect).toBe(true); + expect(wrapper.vm.value).toEqual([]); + + await inputButtonOne.find("input").trigger("click"); + await inputButtonTwo.find("input").trigger("click"); + await inputButtonOne.find("input").trigger("click"); + + // Assert + expect(wrapper.vm.value).toEqual(["value2"]); + }); }); describe("radio", () => { - test.todo("clicking once selects the baseInputButton"); + test("click on both => last clicked is selected", async () => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + mockData: { + isMultiSelect: false, + }, + }); - test.todo("clicking twice keeps the baseInputButton selected"); + // Act + const buttonWrappers = wrapper.findAllComponents({ + name: "baseInputButtonWrapper", + }); + const inputButtonOne = buttonWrappers.at(0); + const inputButtonTwo = buttonWrappers.at(1); + expect(inputButtonOne.vm.isMultiSelect).toBe(false); + expect(inputButtonTwo.vm.isMultiSelect).toBe(false); + expect(wrapper.vm.value).toEqual(""); - test.todo( - "is initially selected => click keeps the baseInputButton selected" - ); + await inputButtonOne.find("input").trigger("click"); + await inputButtonTwo.find("input").trigger("click"); - test.todo("clicked => correct event and value are emitted"); + // Assert + expect(wrapper.vm.value).toEqual("value2"); + }); + + test("click input 1, 2, 1 => input 1 is selected", async () => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + mockData: { + isMultiSelect: false, + }, + }); + + // Act + const buttonWrappers = wrapper.findAllComponents({ + name: "baseInputButtonWrapper", + }); + const inputButtonOne = buttonWrappers.at(0); + const inputButtonTwo = buttonWrappers.at(1); + expect(inputButtonOne.vm.isMultiSelect).toBe(false); + expect(inputButtonTwo.vm.isMultiSelect).toBe(false); + expect(wrapper.vm.value).toEqual(""); + + await inputButtonOne.find("input").trigger("click"); + await inputButtonTwo.find("input").trigger("click"); + await inputButtonOne.find("input").trigger("click"); + + // Assert + expect(wrapper.vm.value).toEqual("value1"); + }); }); }); - describe("keyboard navigation and", () => { + describe("initial values", () => { describe("checkbox", () => { - test.todo( - "focus on a checkbox => inputButtonClicked is not emitted" - ); + const defaultCheckedCases = [ + [["value2"], false, true], + [["value1", "value2"], true, true], + [["value1"], true, false], + [[], false, false], + ]; + test.each(defaultCheckedCases)( + "initial value is %s => correct input buttons are selected", + async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + mockData: { + isMultiSelect: true, + initialValue: modelValue, + }, + }); - test.todo( - "blur from a checkbox => inputButtonClicked is not emitted" - ); + // Act + const buttonWrappers = wrapper.findAllComponents({ + name: "baseInputButtonWrapper", + }); + const inputs = wrapper.findAll("input"); + const inputButtonOne = buttonWrappers.at(0); + const inputButtonTwo = buttonWrappers.at(1); - test.todo( - "focus and click space on a checkbox => inputButtonClicked is emitted with correct value" - ); - - test.todo( - "focus and click space on a checkbox that is already checked => inputButtonClicked is emitted with correct value" - ); - - test.todo( - "focus and click enter on a checkbox => inputButtonClicked is emitted with correct value" - ); - - test.todo( - "focus and click enter on a checkbox that is already checked => inputButtonClicked is emitted with correct value" + // Assert + expect(inputButtonOne.vm.isMultiSelect).toBe(true); + expect(inputButtonTwo.vm.isMultiSelect).toBe(true); + expect(inputs[0].element.checked).toBe(isInputButtonOneChecked); + expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked); + expect(wrapper.vm.value).toEqual(modelValue); + } ); }); describe("radio", () => { - test.todo( - "focus on a radio button => inputButtonClicked is not emitted" - ); + const defaultCheckedCases = [ + ["", false, false], + ["value1", true, false], + ["value2", false, true], + [[], false, false], + ]; + test.each(defaultCheckedCases)( + "initial value is %s => correct input buttons are selected", + async (modelValue, isInputButtonOneChecked, isInputButtonTwoChecked) => { + // Arrange + const { wrapper } = setupBaseInputButtonWrapper({ + mockData: { + isMultiSelect: false, + initialValue: modelValue, + }, + }); - test.todo( - "blur from a radio button => inputButtonClicked is not emitted" - ); + // Act + const buttonWrappers = wrapper.findAllComponents({ + name: "baseInputButtonWrapper", + }); + const inputs = wrapper.findAll("input"); + const inputButtonOne = buttonWrappers.at(0); + const inputButtonTwo = buttonWrappers.at(1); - test.todo( - "focus and click space on a radio button => inputButtonClicked is emitted with correct value" - ); - - test.todo( - "focus and click space on a radio button that is already selected => inputButtonClicked is emitted with correct value" - ); - - test.todo( - "focus and click enter on a radio button => inputButtonClicked is emitted with correct value" - ); - - test.todo( - "focus and click enter on a radio button that is already selected => inputButtonClicked is emitted with correct value" + // Assert + expect(inputButtonOne.vm.isMultiSelect).toBe(false); + expect(inputButtonTwo.vm.isMultiSelect).toBe(false); + expect(inputs[0].element.checked).toBe(isInputButtonOneChecked); + expect(inputs[1].element.checked).toBe(isInputButtonTwoChecked); + expect(wrapper.vm.value).toEqual(modelValue); + } ); }); }); }); + +function setupBaseInputButtonWrapper({ mockData = {} }) { + const originalData = baseInputButton.data(); + baseInputButton.data = () => { + return { + ...originalData, + // $route: { + // query: { + // fmgPage: "myPage", + // }, + // }, + }; + }; + + baseInputButton.methods.pushClickEventToGA = jest.fn(); + + const baseInputButtonWrapper = { + name: "baseInputButtonWrapper", + components: { baseInputButton }, + template: '
', + mixins: [inputButtonWrapperMixin], + }; + + let parentComponentTemplate = `
`; + parentComponentTemplate += ``; + parentComponentTemplate += ``; + parentComponentTemplate += `
`; + const wrapper = mount( + { + data() { + return { + value: mockData.initialValue ?? (mockData.isMultiSelect ? [] : ""), + $route: { + query: { + fmgPage: "myPage", + }, + }, + }; + }, + template: parentComponentTemplate, + components: { baseInputButtonWrapper }, + }, + {} + ); + + return { wrapper }; +} 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 6817ec8c5..e101e5fc0 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,202 +1,200 @@ -import { shallowMount, mount } from "@vue/test-utils"; +import { mount } from "@vue/test-utils"; import listButtonHorizontal from "./list-button-horizontal"; -import { nextTick } from "vue"; -import { GaActions } from "@/constants/analytics"; import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin"; describe("list-button-horizontal.vue", () => { - // TODO KO Have this moved out to somewhere shared - describe("Shared baseInputButton checks", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - isMultiSelect: true, - }, - }, - }); + // TODO KO Have this moved out to somewhere shared + describe("Shared baseInputButton checks", () => { + it("Should return input type checkbox if isMultiSelect is true", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); - // 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 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"); + }); + + const selectedValues = ["something", ["test"]] + it.each(selectedValues)("Should emit button value on click", async (selectedValue) => { + // 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", + }, + }, + }); + + // Act + wrapper.vm.selectedValue = selectedValue; + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue); + }); }); - it("Should return input type radio if isMultiSelect is false or not specified", async () => { - // Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - isMultiSelect: false, - }, - }, - }); + describe("styling/UI", () => { + it("Should return screen reader text", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + screenReaderOnlyText: "Screen Reader Only Text", + }, + }, + }); - // Assert - const input = wrapper.find("input"); - expect(input.attributes().type).toEqual("radio"); + // 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 'radio-fancy' class", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isCashOrInsurance: true, + }, + }, + }); + + // Assert + const label = wrapper.find("label"); + + expect(label.classes()).toContain("radio-fancy"); + }); + + 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!"); + }); }); - - // TODO KO - it.skip("Should emit button value on click", 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", - }, - }, - }); - - // Act - wrapper.vm.handleAnswerChange("test"); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.emitted()["change"][0]).toEqual(["test"]); - }); - }); - - 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 'radio-fancy' class", () => { - // Arrange/Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - isCashOrInsurance: true, - }, - }, - }); - - // Assert - const label = wrapper.find("label"); - - expect(label.classes()).toContain("radio-fancy"); - }); - - 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!"); - }); - }); }); 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], - }); + 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 }; + 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 21c1a37b4..d932b1ea3 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -1,262 +1,305 @@ -import { shallowMount, mount } 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"; -// TODO KO -describe.skip("list-button.vue", () => { - 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, - }, - }, - }); +describe("list-button.vue", () => { + 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.handleAnswerChange("something"); - await wrapper.vm.$nextTick(); + // Act + wrapper.vm.selectedValue = "something"; + await wrapper.vm.$nextTick(); - // Assert - const loader = wrapper.findComponent({ name: "loader" }); - expect(loader.exists()).toBe(true); + // Assert + console.log(wrapper.html()) + 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"); + }); }); - it("Should return loader color", async () => { - // Act - const { wrapper } = setupMocks({ - mockData: { - global: { - mocks: { - $route: { query: { fmgPage: "page-name" } }, - GaActions: GaActions, - pushEventToGA: jest.fn(), - }, - }, - propsData: { - loaderColor: "blue", - selectingInitiatesLoad: true, - }, - }, - }); + describe("baseInputButton checks", () => { + it("Should return input type checkbox if isMultiSelect is true", async () => { + // Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); - // Act - wrapper.vm.handleAnswerChange("something"); - await nextTick(); + // Assert + const input = wrapper.find("input"); - // Assert - const loader = wrapper.findComponent({ name: "loader" }); - expect(loader.attributes("class")).toContain("blue"); + 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"]); + }); }); - 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, - }, - }, - }); + describe("styling/UI", () => { + test("has buttonLabel => displays buttonLabel", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + buttonLabel: "Surprise!", + modelValue: "", + groupName: "groupName", + value: "myValue" + }, + }, + }); - // Act - wrapper.vm.handleAnswerChange("test"); - await nextTick(); + // Assert + const content = wrapper.find(".list-button-content"); + expect(content.isVisible()).toBe(true); + expect(content.text()).toContain("Surprise!"); + }); - // Assert - const loader = wrapper.findComponent({ name: "loader" }); - expect(loader.attributes("class")).toContain("right"); + 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"); + }); }); - }); - - describe("baseInputButton checks", () => { - it("Should return input type checkbox if isMultiSelect is true", async () => { - // Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - isMultiSelect: true, - }, - }, - }); - - // 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 } = setupMocks({ - mockData: { - propsData: { - isMultiSelect: false, - }, - }, - }); - - // Assert - const input = wrapper.find("input"); - expect(input.attributes().type).toEqual("radio"); - }); - - it("Should emit button value on click", 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", - }, - }, - }); - - // Act - wrapper.vm.handleAnswerChange("test"); - await wrapper.vm.$nextTick(); - - // Assert - expect(wrapper.emitted()["change"][0]).toEqual(["test"]); - }); - }); - - describe("styling/UI", () => { - test("has buttonLabel => displays buttonLabel", () => { - // Arrange/Act - const { wrapper } = setupMocks({ - mockData: { - propsData: { - buttonLabel: "Surprise!", - }, - }, - }); - - // Assert - const content = wrapper.find(".list-button-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-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-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", - }, - }, - }); - - // 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"); - }); - }); }); function setupMocks({ mockData }) { - const wrapper = mount(listButton, { - ...mockData, - mixins: [inputButtonWrapperMixin], - }); + const wrapper = mount(listButton, { + ...mockData, + mixins: [inputButtonWrapperMixin], + }); - return { wrapper }; + return { wrapper }; } diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 54ef98b35..6cc061eb7 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -52,6 +52,7 @@ export default { }, preHandleAnswerChange() { if (this.selectingInitiatesLoad) { + console.log("DISPLAY LOADER") this.displayLoader(); } },