Merge pull request #61 from Safelite/feature/CSR-121_unit-testing-for-radio

Feature/csr 121 unit testing for radio

src/common-components/radio-question/radio-question.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-4 mb-3 d-flex">
+    <div class="needed_car_info mt-4 mb-2 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>

src/layouts/vehicle-year/vehicle-year.vue

@@ -42,7 +42,7 @@ export default {
 
         .car_list {
         // Height will be determined by overall height of content above list
-        height: calc(100% - 260px);
+        height: calc(100% - 255px);
         width: calc(100% - 1rem);
         }
     }

src/ux-components/radio/radio.spec.js

@@ -2,21 +2,46 @@ import { shallowMount } from "@vue/test-utils";
 import radio from "./radio";
 
 describe("radio.vue", () => {
-  it("Should render the 'radioID' prop value as a span value for the radio button label.", () => {
+  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
     // Act
     const wrapper = shallowMount(radio, {
       propsData: {
         radioID: "2023",
-        groupName: "TestGroup"
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+        errorMessage: 'null'
       },
     });
 
     // Assert
-    expect(wrapper.find("input").attributes()).toEqual({
+    const input = wrapper.find("input");
+    const label = wrapper.find("label");
+    const paragraph = wrapper.find("p");
+
+    await label.trigger('click');
+
+    expect(input.attributes()).toEqual({
       id: "2023",
       type: "radio",
       value: "2023",
       name: "TestGroup",
-    })
+    });
+
+    expect(label.attributes()).toEqual({
+      role: "radio",
+      tabindex: "0",
+      for: "2023",
+      class: "d-flex align-items-center justify-content-between p-2",
+      "aria-checked": "false"
+    });
+
+    expect(label.text()).toEqual('2023');
+
+    expect(paragraph.text()).toEqual('null');
+
+    expect(wrapper.vm.display).toBe(true);
+
   });
 });

src/ux-components/radio/radio.vue

@@ -25,13 +25,11 @@ export default {
   name: "radioList",
   props: [
     "groupName",
-    "ariaLabelBy",
     "radioID",
     "errorMessage",
     "loaderColor",
     "loaderPosition",
     "sizeInRem"
-
   ],
   data() {
     return {