NCI-COMPONENT and unit test

- Refactored NCI-SECTION component, extracting the createComponent function into its own Vue component named NCI-COMPONENT.
- Created basic unit test for NCI-COMPONENT

[Ticket: NCI-13]

nci/app/components/nci-component/__test__/index.test.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils'
+import nciComponent from '@/nci/app/components/nci-component/index.vue'
+import { Button } from '@/nci/app/interfaces';
+
+/** NCI-COMPONENT Tests */
+/**
+ * Pass a component definition and get a rendered component back.
+ * @test Check the component loads
+ */
+describe('nci-anchor component', () => {
+
+  test('Successfully loads a button.', () => {
+
+    let wrapper = mount(nciComponent, {
+      propsData: {
+        component: {
+          type: "title",
+          title: "Contact Us",
+          href: "https://www.nuxt.org",
+          size: "md",
+          color: "primary",
+          styles: "w-auto bg-gray-200"
+        } as Button
+      },
+    })
+    /** Check the component mounted */
+    expect(wrapper.vm).toBeTruthy();
+
+  });
+})

nci/app/components/nci-component/index.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+/** Import utilities from Vue3 Composition API */
+import { defineComponent, PropType, h } from "@nuxtjs/composition-api";
+
+/** NCI-COMPONENT COMPONENT */
+/**
+ * Setup the component
+ * @function nciComponent
+ * @param {object} component Definition of a component
+ */
+const nciComponent = defineComponent({
+  name: "nci-component",
+  props: {
+    component: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () =>
+      h("nci-" + props.component.type, {
+        props: { ...props.component },
+      });
+  },
+});
+
+export default nciComponent;
+</script>

nci/app/components/nci-section/index.vue

@@ -2,7 +2,9 @@
 /** Import utilities from Vue3 Composition API */
 import { defineComponent, PropType, h } from "@nuxtjs/composition-api";
 
+/** Import typescript types and interfaces */
 import { Components, Group, Image, Title, Button } from "@/nci/app/interfaces";
+
 /** NCI-SECTION COMPONENT */
 /**
  * Setup the component
@@ -11,7 +13,6 @@ import { Components, Group, Image, Title, Button } from "@/nci/app/interfaces";
  * @param {object} props Props that are passed to the component.
  * @param {function} setup Setup data and methods and return to component.
  */
-
 const nciSection = defineComponent({
   name: "nci-section",
   inheritAttrs: false,
@@ -26,17 +27,15 @@ const nciSection = defineComponent({
     },
   },
   setup(props) {
-    const createComponent = (component: Image | Title | Button) => {
-      return h("nci-" + component.type, {
-        props: { ...component },
-      });
-    };
-
     const createGroup = (group: Group) => {
       let groupComponents = [];
       for (const key in group.components) {
         groupComponents.push(
-          createComponent(group.components[key] as Image | Title | Button)
+          h("nci-component", {
+            props: {
+              component: group.components[key] as Image | Title | Button,
+            },
+          })
         );
       }
       return h("div", { class: group.styles }, [groupComponents]);
@@ -47,7 +46,11 @@ const nciSection = defineComponent({
       for (const key in components) {
         key !== "group"
           ? componentArray.push(
-              createComponent(components[key] as Image | Title | Button)
+              h("nci-component", {
+                props: {
+                  component: components[key] as Image | Title | Button,
+                },
+              })
             )
           : componentArray.push(createGroup(components[key] as Group));
       }