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