CSR-341-radio finish radio button component and unit test.

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

@@ -1 +1,63 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import radio from "./radio";
+import { nextTick } from "vue";
+
+describe("radio.vue", () => {
+  it("Should return group name", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        groupName: "radio-button-test",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().name).toEqual("radio-button-test");
+  });
+
+  it("Should return checkbox id", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonID: "Radio ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("Radio ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "label text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("label text");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        screenReaderOnlyText: "screenreader text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span");
+
+    expect(paragraph.text()).toEqual("screenreader text");
+  });
+});

src/ux-components/radio/radio.vue

@@ -2,12 +2,14 @@
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
   <div class="ui-radio d-flex">
     <input
-      type="radio"
+    type="radio"
-      aria-checked="false"
+    aria-checked="false"
-      :name="groupName"
+    :name="groupName"
-      :id="buttonID"
+    :id="buttonID"
-      :aria-required="isRequired"
+    :aria-required="isRequired"
-      :value="value"
+    :value="value"
+    :v-model="checkValue"
+    @change="handleCheckChanged"
     />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -19,6 +21,8 @@
 </template>
 
 <script>
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 export default {
   name: "radio",
   props: {
@@ -26,10 +30,50 @@ export default {
     buttonLabel: String,
     buttonID: String,
     isRequired: Boolean,
-    value: String,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
     modelValue: String,
     screenReaderOnlyText: String,
   },
+  data() {
+    return {
+      checkValue: Boolean,
+    };
+  },
+  created(){
+    if(this.selectedButtonIDs){
+      this.checkValue = this.selectedButtonIDs[0];
+    }
+  },
+  methods: {
+    handleClick(value) {
+      this.handleChange(value);
+    },
+    handleCheckChange(newValue, oldValue){
+      const isInitialization = typeof(oldValue) === 'function';
+      if (!isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+      }
+    }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const { checked, handleChange, errorMessage } = useField(
+      groupName,
+      undefined,
+      {
+        type: "radio",
+        checkedValue: value,
+      }
+    );
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
 };
 </script>