From 0301b0d3e3b6faba275d8acffe56250b2a0e9f52 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 20 Jan 2022 10:10:47 -0500
Subject: [PATCH] Fixing test pages and unit tests

---
 src/layouts/component-test/component-test.vue | 24 ++++++++
 src/layouts/form-test/form-test.vue           |  6 ++
 .../list-button-horizontal.spec.js            | 33 -----------
 src/ux-components/list-card/list-card.spec.js | 59 -------------------
 src/ux-components/list-card/list-card.vue     | 18 +-----
 5 files changed, 33 insertions(+), 107 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 94c3b68e9..d303d216d 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -243,6 +243,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
+        buttonLabel="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -255,6 +256,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
+        buttonLabel="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -267,6 +269,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
+        buttonLabel="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -286,6 +289,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2018"
+        buttonLabel="2018"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -297,6 +301,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2017"
+        buttonLabel="2017"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -308,6 +313,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2016"
+        buttonLabel="2016"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -333,6 +339,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
+        buttonLabel="Chevrolet"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -345,6 +352,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
+        buttonLabel="Dodge"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -357,6 +365,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
+        buttonLabel="Ford"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -376,6 +385,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Honda"
+        buttonLabel="Honda"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -387,6 +397,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Acura"
+        buttonLabel="Acura"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -398,6 +409,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Infiniti"
+        buttonLabel="Infiniti"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -423,6 +435,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
+        buttonLabel="Corvette"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -435,6 +448,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
+        buttonLabel="Testarosa"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -447,6 +461,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
+        buttonLabel="S600"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -466,6 +481,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Accord"
+        buttonLabel="Accord"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -477,6 +493,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Civic"
+        buttonLabel="Civic"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -488,6 +505,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Ridgeline"
+        buttonLabel="Ridgeline"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -515,6 +533,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
+        buttonLabel="1"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -528,6 +547,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
+        buttonLabel="2"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -541,6 +561,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
+        buttonLabel="3"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -563,6 +584,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="4"
+        buttonLabel="4"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -576,6 +598,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="5"
+        buttonLabel="5"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -589,6 +612,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="6"
+        buttonLabel="6"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 4d9db67f4..076dcaac0 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -23,6 +23,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="1"
+        buttonLabel="1"
         value="1"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -35,6 +36,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="2"
+        buttonLabel="2"
         value="2"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -47,6 +49,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="3"
+        buttonLabel="3"
         value="3"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -69,18 +72,21 @@
         <listButton
           isMultiSelect
           buttonID="Single Windshield"
+          buttonLabel="Single Windshield"
           value="Single Windshield"
           groupName="demo2"
         />
         <listButton
           isMultiSelect
           buttonID="Driver Side"
+          buttonLabel="Driver Side"
           value="Driver Side"
           groupName="demo2"
         />
         <listButton
           isMultiSelect
           buttonID="Passenger Side"
+          buttonLabel="Passenger Side"
           value="Passenger Side"
           groupName="demo2"
         />
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 e6d47f3fb..91e4e1f6c 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
@@ -183,37 +183,4 @@ describe("list-button-horizontal.vue", () => {
 
   });
 
-  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-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 8438e01b9..3bb6af61c 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -22,65 +22,6 @@ describe("list-card.vue", () => {
     expect(input.attributes().type).toEqual("checkbox");
   });
 
-  it("Should return input type radio if isRadio is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isRadio: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("radio");
-  });
-
-  it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isMultiSelectHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("checkbox");
-
-  });
-
-  it("Should return input type radio if isRadioHorizontal is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isRadioHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("radio");
-
-  });
-
   it("Should return primary label text", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 77d48e206..c038eef75 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
   <!-- Heavily documented below -->
   <div class="col">
     <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
         <img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
         <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@@ -48,21 +48,9 @@ export default {
   },
   setup(props) {
     const { groupName, value } = toRefs(props);
-    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
-      if (props.isMultiSelect) {
-        return "checkbox";
-      } else if (props.isRadio) {
-        return "radio";
-      } else if (props.isMultiSelectHorizontal) {
-        return "checkbox";
-      } else if (props.isRadioHorizontal) {
-        return "radio";
-      }
-    }
-    
-    props.isMultiSelect ? "checkbox" : "radio";
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
     const { checked, handleChange } = useField(groupName, undefined, {
-      type: inputType(),
+      type: inputType,
       checkedValue: value,
     });
     return {