Add tests for breadcrumb component

frontend-vue3/src/components/BreadCrumb.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-
-import {ref} from "vue";
+import { ref } from 'vue'
 
 interface Props {
   title: string
@@ -27,7 +26,6 @@ const breadCrumbItems = ref<BreadCrumbItem[]>([
     href: ''
   }
 ])
-
 </script>
 
 <template>
@@ -41,5 +39,3 @@ const breadCrumbItems = ref<BreadCrumbItem[]>([
     </v-container>
   </div>
 </template>
-
-<style scoped></style>

frontend-vue3/src/components/__tests__/BreadCrumb.spec.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import BreadCrumb from '../BreadCrumb.vue'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+  components,
+  directives
+})
+
+describe('BreadCrumb.vue', () => {
+  const wrapper = mount(BreadCrumb, {
+    global: {
+      plugins: [vuetify]
+    },
+    propsData: {
+      title: 'TITLE',
+      itemName: 'ItemName'
+    }
+  })
+
+  it('renders the breadcrumb title correctly', async () => {
+    const title = wrapper.get('.v-breadcrumbs__prepend h2').text()
+
+    expect(title).toBe('TITLE')
+  })
+
+  it('renders the breadcrumb items correctly', async () => {
+    const breadCrumbItems = wrapper.findAllComponents('.v-breadcrumbs-item')
+
+    expect(breadCrumbItems).length(2)
+    expect(breadCrumbItems[0].text()).toBe('Home')
+    expect(breadCrumbItems[1].text()).toBe('ItemName')
+  })
+})

frontend-vue3/src/views/GuideView.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import BreadCrumb from '@/components/BreadCrumb.vue'
-
-
 </script>
 
 <template>