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

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+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, {
+            props: {
+                item: {
+                    tag1: 'JavaScript',
+                    value1: 'Programming Language',
+                    tag2: 'Vue',
+                    value2: 'Framework',
+                    tag3: 'EmptyTag',
+                },
+                tag: 'tag',
+                value: 'value',
+                columns: 2,
+            },
+        });
+        expect(wrapper.vm.tags).toEqual({
+            JavaScript: 'Programming Language',
+            Vue: 'Framework',
+            EmptyTag: '',
+        });
+    });
+
+    it('returns an empty object if the item prop is an empty object', () => {
+        const wrapper = mount(FetchedTags, {
+            props: {
+                item: {},
+                tag: 'tag',
+                value: 'value',
+            },
+        });
+        expect(wrapper.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, {
+            props: {
+                item: {
+                    tag1: 'JavaScript',
+                    value1: 'Programming Language',
+                    tag2: 'Vue',
+                    value2: 'Framework',
+                    tag3: 'EmptyTag',
+                },
+                tag: 'tag',
+                value: 'value',
+                columns: 2,
+            },
+        });
+
+        const expectedStyle = {
+            'grid-template-columns': 'repeat(2, 1fr)', // Should be 3 equal columns
+            'max-width': '8rem', // Should be 3 * 4rem = 12rem
+        };
+
+        expect(wrapper.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, {
+            props: {
+                item: {
+                    tag1: 'JavaScript',
+                    value1: 'Programming Language',
+                    tag2: 'Vue',
+                    value2: 'Framework',
+                    tag3: 'EmptyTag',
+                },
+                tag: 'tag',
+                value: 'value',
+                columns: null,
+            },
+        });
+
+        // Should return an empty object as no grid layout is applied
+        expect(wrapper.vm.columnStyle).toEqual({});
+    });
+});