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/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);
+    });
+  });
+});