diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index b1f10e7d5..2fe818932 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -475,7 +475,6 @@ groupName="demo-4" ariaLabelBy="vehicle-model" buttonID="1" - buttonLabelSubCopy="" textPosition="text-center" loaderColor="blue" loaderPosition="right" @@ -489,7 +488,6 @@ groupName="demo-4" ariaLabelBy="vehicle-model" buttonID="2" - buttonLabelSubCopy="" textPosition="text-center" loaderColor="blue" loaderPosition="right" @@ -503,7 +501,6 @@ groupName="demo-4" ariaLabelBy="vehicle-model" buttonID="3" - buttonLabelSubCopy="" textPosition="text-center" loaderColor="blue" loaderPosition="right" @@ -526,8 +523,8 @@ groupName="demo-4-checkbox" ariaLabelBy="vehicle-model" buttonID="4" - buttonLabelSubCopy="" textPosition="text-center" + loaderEnabled=true loaderColor="blue" loaderPosition="right" sizeInRem="1" @@ -539,8 +536,8 @@ groupName="demo-4-checkbox" ariaLabelBy="vehicle-model" buttonID="5" - buttonLabelSubCopy="" textPosition="text-center" + loaderEnabled=true loaderColor="blue" loaderPosition="right" sizeInRem="1" @@ -552,8 +549,8 @@ groupName="demo-4-checkbox" ariaLabelBy="vehicle-model" buttonID="6" - buttonLabelSubCopy="" textPosition="text-center" + loaderEnabled=true loaderColor="blue" loaderPosition="right" sizeInRem="1" 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 bb575074c..5a13cf67a 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,47 +1,219 @@ import { shallowMount } from "@vue/test-utils"; import listButtonHorizontal from "./list-button-horizontal"; +import { nextTick } from "vue"; describe("list-button.vue", () => { - it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => { + + it("Should return input type checkbox if isMultiSelect is true", async () => { // Act const wrapper = shallowMount(listButtonHorizontal, { propsData: { - buttonID: "2023", - groupName: "TestGroup", - loaderColor: "blue", - loaderPosition: "right", - loaderEnabled: "true", - sizeInRem: "1.5", + isMultiSelect: true, }, }); // Assert const input = wrapper.find("input"); - const label = wrapper.find("label"); - const paragraph = wrapper.find("span"); - await input.trigger("click"); - - expect(input.attributes()).toEqual({ - id: "2023", - type: "radio", - value: "2023", - name: "TestGroup", - "aria-required": "true", - }); - - expect(label.attributes()).toEqual({ - tabindex: "-1", - for: "2023", - "aria-labelledby": "2023", - class: "d-flex flex-column justify-content-center py-3 px-4 last-item", - "aria-checked": "false", - }); - - expect(label.text()).toEqual("2023"); - - expect(paragraph.text()).toEqual("2023"); - - expect(wrapper.vm.isLoaderDisplayed).toBe(true); + 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, { + propsData: { + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.exists()).toBe(true); + + }); + + it("Should return loader color", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + loaderColor: "blue", + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + 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, { + propsData: { + loaderPosition: "right", + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.attributes('class')).toContain("right"); + + }); + + it("Should return loader size in rem", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + sizeInRem: 1, + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.attributes('style')).toContain("1rem"); + + }); + + it("Should return first item if first item in group", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + positionInGroup: 1 + }, + }); + + // Assert + + const label = wrapper.find("label"); + + expect(label.attributes('class')).toContain("first-item"); + + }); + + it("Should return last item if last item in group", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + positionInGroup: 3, + totalInGroup: 3 + }, + }); + + // Assert + + const label = wrapper.find("label"); + + expect(label.attributes('class')).toContain("last-item"); + + }); + }); diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 97642d2c1..c4f8d995c 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -5,17 +5,15 @@
@@ -29,13 +27,12 @@ export default { isMultiSelect: Boolean, /* Defines use as checkbox */ groupName: String, /* Required, unique for each button GROUP */ buttonID: String, /* Required, unique for each button. Used for button id, label and