From dc80115834a32a2f3c5749fbe509eae3cd1f2b5f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 6 Jan 2022 10:00:05 -0500
Subject: [PATCH] CSR-246 unit test for list-card.

---
 src/ux-components/list-card/list-card.spec.js | 128 +++++++++++++++++-
 src/ux-components/list-card/list-card.vue     |   2 +-
 2 files changed, 127 insertions(+), 3 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 955f8f8ed..8438e01b9 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -41,7 +41,7 @@ describe("list-card.vue", () => {
     expect(input.attributes().type).toEqual("radio");
   });
 
-  it("Should return input type checkbox and class horizontal if isMultiSelectHorizontal is true", async () => {
+  it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
       propsData: {
@@ -50,7 +50,7 @@ describe("list-card.vue", () => {
         buttonID: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
+        buttonImage: "windshield-damage.svg"
       },
     });
 
@@ -61,4 +61,128 @@ describe("list-card.vue", () => {
 
   });
 
+  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, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("Windshield");
+
+  });
+
+  it("Should return secondary (sub) label text", 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",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p:nth-of-type(2)");
+
+    expect(paragraph.text()).toEqual("Test");
+
+  });
+
+  it("Should return value used for various text settings including the label 'for' and input id", 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",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.attributes().for).toEqual("List Card Checkbox");
+
+  });
+
+  it("Should return input group name used for radio or checkbox", 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",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().name).toEqual("radio 1");
+
+  });
+
+  it("Should return aria-required state", 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",
+        isRequired: true
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes()["aria-required"]).toEqual("true");
+
+  });
+
 });
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 3d2c807bb..daf419704 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -50,7 +50,7 @@ export default {
     //end must choose
     buttonImage: String,//Required: File name of image
     buttonLabel: String,//Required: Label text
-    isRequired: Boolean, //Required: is input required or optional?
+    isRequired: Boolean, //Required: is aria-required required or not?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,//Required: Unique
     groupName: String,//Required: Unique