framit/app/components/VocalSynth/Tools.test.ts

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