framit/app/components/Ui/BadgeList.test.ts

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