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/VocalSynth/Projects.test.ts

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import Projects from './Projects.vue';
+import type { VocalSynthPage } from '~/types/vocal-synth';
+
+// Mock $t function
+vi.stubGlobal('$t', (key: string) => {
+  const translations: Record<string, string> = {
+    'pages.vocal-synthesis.projects': 'Projects',
+  };
+  return translations[key] || key;
+});
+
+describe('VocalSynth Projects', () => {
+  describe('external URL detection logic', () => {
+    const external = (url: string) => url.startsWith('http');
+
+    it('should return true for http URLs', () => {
+      expect(external('http://example.com')).toBe(true);
+    });
+
+    it('should return true for https URLs', () => {
+      expect(external('https://example.com')).toBe(true);
+    });
+
+    it('should return false for relative URLs', () => {
+      expect(external('/keine-tashi')).toBe(false);
+    });
+
+    it('should return false for paths without protocol', () => {
+      expect(external('/vocal-synthesis/project')).toBe(false);
+    });
+  });
+
+  describe('component rendering', () => {
+    it('should render the component', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [],
+      };
+
+      const wrapper = await mountSuspended(Projects, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.exists()).toBe(true);
+    });
+
+    it('should display projects title', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [],
+      };
+
+      const wrapper = await mountSuspended(Projects, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Projects');
+    });
+
+    it('should render projects from injected data', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [
+          {
+            title: 'Test Project',
+            icon: 'mdi:music',
+            description: 'A test vocal synthesis project',
+            link: '/test-project',
+          },
+        ],
+        tools: [],
+      };
+
+      const wrapper = await mountSuspended(Projects, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Test Project');
+      expect(wrapper.text()).toContain('A test vocal synthesis project');
+    });
+
+    it('should render multiple projects', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [
+          {
+            title: 'Project One',
+            icon: 'mdi:music',
+            description: 'First project',
+            link: '/project-one',
+          },
+          {
+            title: 'Project Two',
+            icon: 'mdi:microphone',
+            description: 'Second project',
+            link: 'https://example.com/project-two',
+          },
+        ],
+        tools: [],
+      };
+
+      const wrapper = await mountSuspended(Projects, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Project One');
+      expect(wrapper.text()).toContain('Project Two');
+      expect(wrapper.text()).toContain('First project');
+      expect(wrapper.text()).toContain('Second project');
+    });
+
+    it('should render project icons', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [
+          {
+            title: 'Project with Icon',
+            icon: 'mdi:music-note',
+            description: 'Has an icon',
+            link: '/project',
+          },
+        ],
+        tools: [],
+      };
+
+      const wrapper = await mountSuspended(Projects, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      // Icon container should exist
+      expect(wrapper.find('.min-w-13').exists()).toBe(true);
+    });
+
+    it('should handle empty projects array', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [],
+      };
+
+      const wrapper = await mountSuspended(Projects, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.text()).toContain('Projects');
+    });
+  });
+});

app/components/VocalSynth/Tools.test.ts

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import Tools from './Tools.vue';
+import type { VocalSynthPage } from '~/types/vocal-synth';
+
+// Mock $t function
+vi.stubGlobal('$t', (key: string) => {
+  const translations: Record<string, string> = {
+    'pages.vocal-synthesis.tools': 'Tools',
+  };
+  return translations[key] || key;
+});
+
+describe('VocalSynth Tools', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('should render the component when data is provided', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [{ name: 'UTAU' }],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.exists()).toBe(true);
+    });
+
+    it('should render tools title', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [{ name: 'UTAU' }],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Tools');
+    });
+
+    it('should render tools from injected data', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [
+          { name: 'UTAU', link: 'https://utau.com' },
+          { name: 'OpenUtau', link: 'https://openutau.com' },
+        ],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('UTAU');
+      expect(wrapper.text()).toContain('OpenUtau');
+    });
+  });
+
+  describe('conditional rendering', () => {
+    it('should not render when data is undefined', async () => {
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData: undefined,
+          },
+        },
+      });
+
+      // Component should exist but content may be hidden
+      expect(wrapper.exists()).toBe(true);
+    });
+
+    it('should render when data has tools', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [{ name: 'Tool A' }, { name: 'Tool B' }],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Tool A');
+      expect(wrapper.text()).toContain('Tool B');
+    });
+  });
+
+  describe('BadgeListCard integration', () => {
+    it('should pass tools to BadgeListCard', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [{ name: 'Synth Tool', link: 'https://synth.example.com' }],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Synth Tool');
+    });
+  });
+
+  describe('tool links', () => {
+    it('should render tools with links', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [{ name: 'Linked Tool', link: 'https://example.com' }],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Linked Tool');
+      // Link should be rendered by BadgeList
+      const link = wrapper.find('a[href="https://example.com"]');
+      expect(link.exists()).toBe(true);
+    });
+
+    it('should render tools without links', async () => {
+      const pageData: VocalSynthPage = {
+        projects: [],
+        tools: [{ name: 'Plain Tool' }],
+      };
+
+      const wrapper = await mountSuspended(Tools, {
+        global: {
+          provide: {
+            pageData,
+          },
+        },
+      });
+
+      expect(wrapper.text()).toContain('Plain Tool');
+    });
+  });
+});