src/components/ui/__tests__/FetchedTags.spec.js

@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest';
-import { mount } from '@vue/test-utils';
+import { createWrapper } from 'app/test/vitest/helper';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
 
 describe('tags computed property', () => {
     it('returns an object with the correct keys and values', () => {
-        const wrapper = mount(FetchedTags, {
+        const vm = createWrapper(FetchedTags, {
             props: {
                 item: {
                     tag1: 'JavaScript',
@@ -18,7 +18,7 @@ describe('tags computed property', () => {
                 columns: 2,
             },
         });
-        expect(wrapper.vm.tags).toEqual({
+        expect(vm.vm.tags).toEqual({
             JavaScript: 'Programming Language',
             Vue: 'Framework',
             EmptyTag: '',
@@ -26,19 +26,18 @@ describe('tags computed property', () => {
     });
 
     it('returns an empty object if the item prop is an empty object', () => {
-        const wrapper = mount(FetchedTags, {
+        const vm = createWrapper(FetchedTags, {
             props: {
                 item: {},
                 tag: 'tag',
                 value: 'value',
             },
         });
-        expect(wrapper.vm.tags).toEqual({});
+        expect(vm.vm.tags).toEqual({});
     });
 
-    // Test the computed columnStyle with a defined 'columns' prop
     it('should calculate the correct columnStyle when columns prop is defined', () => {
-        const wrapper = mount(FetchedTags, {
+        const vm = createWrapper(FetchedTags, {
             props: {
                 item: {
                     tag1: 'JavaScript',
@@ -54,16 +53,15 @@ describe('tags computed property', () => {
         });
 
         const expectedStyle = {
-            'grid-template-columns': 'repeat(2, 1fr)', // Should be 3 equal columns
-            'max-width': '8rem', // Should be 3 * 4rem = 12rem
+            'grid-template-columns': 'repeat(2, 1fr)',
+            'max-width': '8rem', 
         };
 
-        expect(wrapper.vm.columnStyle).toEqual(expectedStyle);
+        expect(vm.vm.columnStyle).toEqual(expectedStyle);
     });
 
-    // Test the computed columnStyle with a falsy 'columns' prop (e.g., null or undefined)
     it('should return an empty object for columnStyle when columns prop is not defined', () => {
-        const wrapper = mount(FetchedTags, {
+        const vm = createWrapper(FetchedTags, {
             props: {
                 item: {
                     tag1: 'JavaScript',
@@ -78,7 +76,6 @@ describe('tags computed property', () => {
             },
         });
 
-        // Should return an empty object as no grid layout is applied
-        expect(wrapper.vm.columnStyle).toEqual({});
+        expect(vm.vm.columnStyle).toEqual({});
     });
 });