diff --git a/src/common-components/nav-button/nav-button.spec.js b/src/common-components/nav-button/nav-button.spec.js
new file mode 100644
index 00000000..a17850f3
--- /dev/null
+++ b/src/common-components/nav-button/nav-button.spec.js
@@ -0,0 +1,35 @@
+import navButton from "./nav-button"
+
+import { shallowMount } from "@vue/test-utils";
+
+describe('NavButton', () => {
+
+    it('should display input when type is button', () => {
+        const wrapper = shallowMount(navButton, {
+            propsData: {
+                text: "Hello",
+                scenario: "test",
+                type: "button"
+            }
+        });
+
+        expect(wrapper.find('input').exists()).toBe(true);
+        expect(wrapper.find('p').exists()).toBe(false);
+    });
+
+    it('should display p element when type is text', () => {
+        const wrapper = shallowMount(navButton, {
+            propsData: {
+                text: "Hello",
+                scenario: "test",
+                type: "text"
+            }
+        });
+
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find('p').exists()).toBe(true);
+    });
+
+    
+
+  });
\ No newline at end of file
diff --git a/src/common-components/nav-button/nav-button.vue b/src/common-components/nav-button/nav-button.vue
index 209d62b5..fec7e441 100644
--- a/src/common-components/nav-button/nav-button.vue
+++ b/src/common-components/nav-button/nav-button.vue
@@ -6,7 +6,7 @@
 <script>
     
     export default({
-        name: "nav-button",
+        name: "navButton",
         props: {
             text: String,
             scenario: String,