From 2dd74d1eb3a14dd62a4d06ee1fc19146350b7998 Mon Sep 17 00:00:00 2001 From: bmauger Date: Mon, 10 Jan 2022 15:47:03 -0500 Subject: [PATCH] CSR-241 update unit test for list-button.vue. --- .../list-button-horizontal.spec.js | 2 +- .../list-button/list-button.spec.js | 202 +++++++++++++++--- src/ux-components/list-button/list-button.vue | 4 + 3 files changed, 176 insertions(+), 32 deletions(-) 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 5a13cf67a..e6d47f3fb 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 @@ -2,7 +2,7 @@ import { shallowMount } from "@vue/test-utils"; import listButtonHorizontal from "./list-button-horizontal"; import { nextTick } from "vue"; -describe("list-button.vue", () => { +describe("list-button-horizontal.vue", () => { it("Should return input type checkbox if isMultiSelect is true", 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 06c96d1a3..c583839ec 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -1,46 +1,186 @@ import { shallowMount } from "@vue/test-utils"; import listButton from "./list-button"; +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(listButton, { propsData: { - buttonID: "2023", - groupName: "TestGroup", - loaderColor: "blue", - loaderPosition: "right", - sizeInRem: "1.5", + isMultiSelect: true, }, }); // Assert const input = wrapper.find("input"); - const label = wrapper.find("label"); - const paragraph = wrapper.find("span"); - await label.trigger("click"); - - expect(input.attributes()).toEqual({ - id: "2023", - type: "radio", - value: "2023", - name: "TestGroup", - "aria-required": "false", - }); - - expect(label.attributes()).toEqual({ - tabindex: "-1", - for: "2023", - "aria-labelledby": "2023", - class: "d-flex flex-column justify-content-center py-3 px-4", - "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(listButton, { + 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(listButton, { + 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(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, { + 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(listButton, { + 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(listButton, { + 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(listButton, { + 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"); + + }); + }); diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index a65833396..d82486f23 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -31,6 +31,7 @@ export default { screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */ buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */ textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */ + loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */ loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */ loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */ sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */ @@ -44,6 +45,9 @@ export default { displayLoader() { this.isLoaderDisplayed = true; }, + handleClick() { + this.loaderEnabled && this.displayLoader(); + } }, components: { loader,