Merge pull request #132 from Safelite/CSR-241-add-prop

CSR-241 unit test updates.

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"

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

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -5,17 +5,15 @@
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
   </label>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick()" @click="handleClick()" />
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
+      <span class="m-0" :class="textPosition">{{buttonID}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+      <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
     </label>
   </div>
 </template>
@@ -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 <label for> */
-    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     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)) */
+    sizeInRem: Number, /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
     totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
     positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
     isRequired: Boolean,