Add title props to CardBoxBig, Add test

src/components/Content/CardBoxBig.vue

@@ -1,7 +1,13 @@
+<script setup>
+defineProps({
+    title: String
+})
+</script>
+
 <template>
     <div class="uk-flex uk-flex-center uk-flex-middle">
         <div class="uk-width-1-1@s uk-width-3-5@l uk-width-1-3@xl">
-            <UFCardBox>
+            <UFCardBox :title="title">
                 <slot />
             </UFCardBox>
         </div>

src/tests/components/Content/CardBox.test.js

@@ -1,28 +1,30 @@
-import { expect, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { mount } from '@vue/test-utils'
 import CardBox from '../../../components/Content/CardBox.vue'
 
-test('Basic test', () => {
-    // Arrange
-    const wrapper = mount(CardBox, {
-        props: {
-            title: 'Hello world'
-        },
-        slots: {
-            default: 'This is the slot content'
-        }
-    })
+describe('CardBoxBig.vue', () => {
+    test('Basic test', () => {
+        // Arrange
+        const wrapper = mount(CardBox, {
+            props: {
+                title: 'Hello world'
+            },
+            slots: {
+                default: 'This is the slot content'
+            }
+        })
 
-    // Assert
-    expect(wrapper.get('[data-test="title"]').text()).toMatch('Hello world')
-    expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
-})
+        // Assert
+        expect(wrapper.get('[data-test="title"]').text()).toMatch('Hello world')
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
+    })
 
-test('Test with no prop and slot', () => {
-    // Arrange
-    const wrapper = mount(CardBox)
+    test('Test with no prop and slot', () => {
+        // Arrange
+        const wrapper = mount(CardBox)
 
-    // Assert
-    expect(wrapper.find('[data-test="title"]').exists()).toBe(false)
-    expect(wrapper.get('[data-test="slot"]').text()).toMatch('')
+        // Assert
+        expect(wrapper.find('[data-test="title"]').exists()).toBe(false)
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('')
+    })
 })

src/tests/components/Content/CardBoxBig.test.js

@@ -0,0 +1,33 @@
+import { describe, expect, test } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+import CardBox from '../../../components/Content/CardBox.vue'
+import CardBoxBig from '../../../components/Content/CardBoxBig.vue'
+
+config.global.stubs['UFCardBox'] = CardBox
+
+describe('CardBoxBig.vue', () => {
+    test('Basic test', () => {
+        // Arrange
+        const wrapper = mount(CardBoxBig, {
+            props: {
+                title: 'Hello world'
+            },
+            slots: {
+                default: 'This is the slot content'
+            }
+        })
+
+        // Assert
+        expect(wrapper.get('[data-test="title"]').text()).toMatch('Hello world')
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('This is the slot content')
+    })
+
+    test('Test with no prop and slot', () => {
+        // Arrange
+        const wrapper = mount(CardBoxBig)
+
+        // Assert
+        expect(wrapper.find('[data-test="title"]').exists()).toBe(false)
+        expect(wrapper.get('[data-test="slot"]').text()).toMatch('')
+    })
+})