Merge pull request #133 from Safelite/CSR-241-unit-test-updates

CSR-241 update unit test for list-button.vue.

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

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");
+
+  });
+
 });

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,