test: add comprehensive test suite for components, composables, and pages

Add 16 new test files covering:
- Composables: useBackend, useMeta, useDataJson
- Type classes: QueryResult, ResumeContent
- UI components: BadgeList, BadgeListCard
- Navbar components: LanguageSwitcher, ThemeSwitcher
- App components: AppNavbar, AppFooter
- VocalSynth components: Projects, Tools
- Pages: contact, resume, [...slug]

Tests focus on pure logic, interfaces, and component rendering where
possible, avoiding complex mocking of Nuxt auto-imported composables.

Total: 174 tests across 17 test files (including existing useApi tests).

app/components/Ui/BadgeList.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import BadgeList from './BadgeList.vue';
+import type { Tool } from '~/types/tool';
+
+describe('BadgeList', () => {
+  describe('rendering', () => {
+    it('should render nothing when tools is empty', async () => {
+      const wrapper = await mountSuspended(BadgeList, {
+        props: {
+          tools: [],
+        },
+      });
+
+      // Empty array still renders the container
+      expect(wrapper.find('.flex').exists()).toBe(true);
+    });
+
+    it('should render badges for each tool', async () => {
+      const tools: Tool[] = [{ name: 'TypeScript' }, { name: 'Vue.js' }, { name: 'Nuxt' }];
+
+      const wrapper = await mountSuspended(BadgeList, {
+        props: { tools },
+      });
+
+      expect(wrapper.text()).toContain('TypeScript');
+      expect(wrapper.text()).toContain('Vue.js');
+      expect(wrapper.text()).toContain('Nuxt');
+    });
+
+    it('should render tool name without link when link is not provided', async () => {
+      const tools: Tool[] = [{ name: 'Plain Tool' }];
+
+      const wrapper = await mountSuspended(BadgeList, {
+        props: { tools },
+      });
+
+      expect(wrapper.text()).toContain('Plain Tool');
+      // Should not have a NuxtLink for this tool
+      const links = wrapper.findAll('a');
+      const plainToolLinks = links.filter((link) => link.text().includes('Plain Tool'));
+      expect(plainToolLinks.length).toBe(0);
+    });
+
+    it('should render tool name with link when link is provided', async () => {
+      const tools: Tool[] = [{ name: 'Linked Tool', link: 'https://example.com' }];
+
+      const wrapper = await mountSuspended(BadgeList, {
+        props: { tools },
+      });
+
+      expect(wrapper.text()).toContain('Linked Tool');
+      // Should have a link
+      const link = wrapper.find('a');
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe('https://example.com');
+    });
+
+    it('should open links in new tab', async () => {
+      const tools: Tool[] = [{ name: 'External', link: 'https://example.com' }];
+
+      const wrapper = await mountSuspended(BadgeList, {
+        props: { tools },
+      });
+
+      const link = wrapper.find('a');
+      expect(link.attributes('target')).toBe('_blank');
+    });
+  });
+
+  describe('props', () => {
+    it('should accept tools prop', async () => {
+      const tools: Tool[] = [{ name: 'Test' }];
+
+      const wrapper = await mountSuspended(BadgeList, {
+        props: { tools },
+      });
+
+      expect(wrapper.props('tools')).toEqual(tools);
+    });
+  });
+
+  describe('mixed tools', () => {
+    it('should render both linked and non-linked tools correctly', async () => {
+      const tools: Tool[] = [
+        { name: 'With Link', link: 'https://example.com' },
+        { name: 'Without Link' },
+        { name: 'Another Link', link: 'https://another.com' },
+      ];
+
+      const wrapper = await mountSuspended(BadgeList, {
+        props: { tools },
+      });
+
+      expect(wrapper.text()).toContain('With Link');
+      expect(wrapper.text()).toContain('Without Link');
+      expect(wrapper.text()).toContain('Another Link');
+
+      // Should have exactly 2 links
+      const links = wrapper.findAll('a');
+      expect(links.length).toBe(2);
+    });
+  });
+});

app/components/Ui/BadgeListCard.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import BadgeListCard from './BadgeListCard.vue';
+import type { Tool } from '~/types/tool';
+
+describe('BadgeListCard', () => {
+  describe('rendering', () => {
+    it('should render the card container', async () => {
+      const tools: Tool[] = [{ name: 'Test Tool' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+      });
+
+      expect(wrapper.find('.my-10').exists()).toBe(true);
+    });
+
+    it('should render slot content', async () => {
+      const tools: Tool[] = [{ name: 'Test Tool' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+        slots: {
+          default: 'Card Title',
+        },
+      });
+
+      expect(wrapper.text()).toContain('Card Title');
+    });
+
+    it('should render tools via BadgeList component', async () => {
+      const tools: Tool[] = [{ name: 'Tool A' }, { name: 'Tool B', link: 'https://example.com' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+      });
+
+      expect(wrapper.text()).toContain('Tool A');
+      expect(wrapper.text()).toContain('Tool B');
+    });
+  });
+
+  describe('props', () => {
+    it('should accept tools prop', async () => {
+      const tools: Tool[] = [{ name: 'Test' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+      });
+
+      expect(wrapper.props('tools')).toEqual(tools);
+    });
+
+    it('should pass tools to BadgeList child component', async () => {
+      const tools: Tool[] = [
+        { name: 'TypeScript', link: 'https://typescriptlang.org' },
+        { name: 'Vue.js', link: 'https://vuejs.org' },
+      ];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+      });
+
+      // BadgeList should render all tools
+      expect(wrapper.text()).toContain('TypeScript');
+      expect(wrapper.text()).toContain('Vue.js');
+    });
+  });
+
+  describe('slots', () => {
+    it('should render default slot in title position', async () => {
+      const tools: Tool[] = [{ name: 'Test' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+        slots: {
+          default: '<strong>Programming Languages</strong>',
+        },
+      });
+
+      expect(wrapper.find('strong').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Programming Languages');
+    });
+
+    it('should work without slot content', async () => {
+      const tools: Tool[] = [{ name: 'Test' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+      });
+
+      // Should still render without errors
+      expect(wrapper.text()).toContain('Test');
+    });
+  });
+
+  describe('styling', () => {
+    it('should have vertical margin class', async () => {
+      const tools: Tool[] = [{ name: 'Test' }];
+
+      const wrapper = await mountSuspended(BadgeListCard, {
+        props: { tools },
+      });
+
+      // Card should have my-10 class for vertical spacing
+      expect(wrapper.find('.my-10').exists()).toBe(true);
+    });
+  });
+});