From 79455adab35a0463558fef21ea8202f71c697af3 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 5 Jan 2022 17:00:59 -0500
Subject: [PATCH] CSR-241 WIP unit test.

---
 src/ux-components/list-card/list-card.spec.js | 66 ++++++++++++++++++-
 src/ux-components/list-card/list-card.vue     | 13 ++--
 2 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 3d0843e10..736fed6b9 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -1 +1,65 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import listCard from "./list-card";
+
+describe("list-card.vue", () => {
+
+  it("Should return input type checkbox if isMultiSelect is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelect: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "checkbox-demo-1",
+        groupName: "Checkbox 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    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 and class horizontal 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",
+        class: "horizontal"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+    
+  });
+
+});
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 177d43e90..3d2c807bb 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -5,7 +5,7 @@
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
-      <p class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
@@ -13,7 +13,7 @@
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
-      <p class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
+      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
@@ -22,7 +22,7 @@
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
-        <p class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
       </div>
     </label>
   </div>
@@ -32,7 +32,7 @@
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
-        <p class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
       </div>
     </label>
   </div>
@@ -48,11 +48,12 @@ export default {
     isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
     isRadioHorizontal: Boolean,//Defines use as horizontal radio button
     //end must choose
-    buttonImage: String,//Optional: File name of image
+    buttonImage: String,//Required: File name of image
     buttonLabel: String,//Required: Label text
+    isRequired: Boolean, //Required: is input required or optional?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,//Required: Unique
-    groupName: String,//Rquired: Unique
+    groupName: String,//Required: Unique
     buttonLabelSubCopy: String,//Optional: sub text
   }
 };