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

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