Adding unit tests

src/commonComponents/radioQuestion/radioQuestion.spec.js

@@ -1,18 +1,23 @@
 import { shallowMount } from '@vue/test-utils';
 import radioQuestion from './radioQuestion';
 
-test('radioQuestion', () => {
-    // render the component
-    const wrapper = shallowMount(radioQuestion, {
-        propsData: {
-            questionText: 'testString',
-            chooseAnswer: function(){ console.log('test') }
-        }
-    });
+describe('radioQuestion.vue', () => {
+    it("Should render the 'questionText' prop value as a span value for the radio question.", () => {
+        // Act
+        const wrapper = shallowMount(radioQuestion, {
+            propsData: {
+                questionText: 'Question Text',
+                answers: ['Value_1', 'Value_2', 'Value_3'],
+                chooseAnswer: function(){ console.log('test') }
+            }
+        });
 
-    // test if questionText is a string
-    expect(typeof wrapper.props().questionText).toBe('string');
+        const radioButtons = wrapper.findAllComponents('[data-test="radio"]')
 
-    // test if chooseAnswer is a function
-    expect(typeof wrapper.props().chooseAnswer).toBe('function');
-});
+        // Assert
+        expect(wrapper.find('.needed_car_info-text').text()).toEqual('Question Text');
+        expect(radioButtons[0].attributes('text')).toEqual('Value_1');
+        expect(radioButtons[2].attributes('text')).toEqual('Value_3');
+        expect(typeof wrapper.props().chooseAnswer).toBe('function');
+    })
+})

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -5,7 +5,7 @@
     </div>
       <div class="car_list overflow-scroll position-absolute">
           <div v-for="answer in answers" :key="answer" class="mb-2">
-              <radio :text="answer" :value="answer" @click="chooseAnswer(answer)" />
+              <radio :text="answer" :value="answer" @click="chooseAnswer(answer)" data-test="radio" />
           </div>
       </div>
   </div>

src/uxComponents/header/header.spec.js

@@ -1,15 +1,16 @@
 import { shallowMount } from '@vue/test-utils';
 import Header from './header';
 
-test('Header', () => {
-    // render the component
-    const wrapper = shallowMount(Header, {
-        propsData: {
-            text: 'testString'
-        }
-    });
-
-    // test if text is a string
-    expect(typeof wrapper.props().text).toBe('string');
+describe('Header.vue', () => {
+    it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+        // Act
+        const wrapper = shallowMount(Header, {
+            propsData: {
+                text: 'Header Content'
+            }
+        });
 
+        // Assert
+        expect(wrapper.find('span').text()).toContain("Header Content");
+    })
 });

src/uxComponents/radio/radio.spec.js

@@ -1,18 +1,23 @@
 import { shallowMount } from '@vue/test-utils';
 import radio from './radio';
 
-test('radioQuestion', () => {
-    // render the component
-    const wrapper = shallowMount(radio, {
-        propsData: {
-            value: 'testString',
-            text: 'testString2'
-        }
-    });
+describe('radio.vue', () => {
+    it("Should render the 'text' prop value as a span value for the radio button label and add the 'value' prop value as the radio button value and id.", () => {
+        // Act
+        const wrapper = shallowMount(radio, {
+            propsData: {
+                value: 'radio_button_value',
+                text: 'Radio Button Text'
+            }
+        });
 
-    // test if value is a string
-    expect(typeof wrapper.props().value).toBe('string');
-
-    // test if text is a string
-    expect(typeof wrapper.props().text).toBe('string');
-});
+        // Assert
+        expect(wrapper.find('span').text()).toEqual('Radio Button Text');
+        expect(wrapper.find('input').attributes()).toEqual({
+            class: 'position-absolute opacity-0',
+            id: 'radio_button_value',
+            type: 'radio',
+            value: 'radio_button_value'
+        });
+    })
+})