diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index 1d0a0d103..1878de18b 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -10,6 +10,7 @@ export default { buttonLabel: [Number, String], buttonLabelSubCopy: String, buttonImage: String, + buttonImageId: String, altText: { type: String, default: "", diff --git a/src/mixins/input-button-wrapper-mixin.spec.js b/src/mixins/input-button-wrapper-mixin.spec.js index 8724a5dd9..c0028ddab 100644 --- a/src/mixins/input-button-wrapper-mixin.spec.js +++ b/src/mixins/input-button-wrapper-mixin.spec.js @@ -1,6 +1,10 @@ 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"; +import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; +import listButton from "@/ux-components/list-button/list-button"; +import listCard from "@/ux-components/list-card/list-card"; +import radio from "@/ux-components/radio/radio"; describe("input-button-wrapper-mixin", () => { describe("mouse clicks", () => { @@ -184,21 +188,100 @@ describe("input-button-wrapper-mixin", () => { ); }); }); + + // shared checks between components that use input-button-wrapper-mixin + describe("shared checks", () => { + const inputButtonComponents = [listButtonHorizontal, listButton, listCard, radio]; + test.each(inputButtonComponents.map((x) => [x.name, x]))( + "%s - should return input type checkbox if isMultiSelect is true", + async (name, inputButtonComponent) => { + // Act + const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({ + component: inputButtonComponent, + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + + // Assert + const input = wrapper.find("input"); + expect(input.attributes().type).toEqual("checkbox"); + } + ); + + test.each(inputButtonComponents.map((x) => [x.name, x]))( + "%s - return input type radio if isMultiSelect is false or not specified", + async (name, inputButtonComponent) => { + // Act + const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({ + component: inputButtonComponent, + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + + // Assert + const input = wrapper.find("input"); + expect(input.attributes().type).toEqual("radio"); + } + ); + + const selectedValues = ["something", ["test"]]; + inputButtonComponents.forEach((inputButtonComponent) => { + test.each(selectedValues)( + `${inputButtonComponent.name} with selectedValue %s - should emit button value on click`, + async (selectedValue) => { + // Act + const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({ + component: inputButtonComponent, + 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); + } + ); + }); + }); }); -function setupBaseInputButtonWrapper({ mockData = {} }) { - const originalData = baseInputButton.data(); - baseInputButton.data = () => { - return { - ...originalData, - // $route: { - // query: { - // fmgPage: "myPage", - // }, - // }, - }; - }; +function setupMocksForComponentsUsingInputButtonWrapperMixin({ mockData, component }) { + const wrapper = mount(component, { + ...mockData, + propsData: { + ...mockData.propsData, + groupName: "my-group", + modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5", + value: "4", + }, + mixins: [inputButtonWrapperMixin], + }); + return { wrapper }; +} + +function setupBaseInputButtonWrapper({ mockData = {} }) { baseInputButton.methods.pushClickEventToGA = jest.fn(); const baseInputButtonWrapper = { 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 e101e5fc0..09a63b349 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 @@ -3,67 +3,6 @@ import listButtonHorizontal from "./list-button-horizontal"; 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, - }, - }, - }); - - // 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); - }); - }); - describe("styling/UI", () => { it("Should return screen reader text", async () => { // Act diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index d932b1ea3..0b4909420 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -27,7 +27,6 @@ describe("list-button.vue", () => { await wrapper.vm.$nextTick(); // Assert - console.log(wrapper.html()) const loader = wrapper.findComponent({ name: "loader" }); expect(loader.exists()).toBe(true); });