harb/web-app/src/components/socialButton.spec.ts

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { mount } from '@vue/test-utils';
import { defineComponent } from 'vue';
import SocialBadge from './SocialButton.vue';

function mockIconComponent(name: string) {
  return {
    __esModule: true,
    default: defineComponent({
      name,
      template: `<svg class='${name.toLowerCase()}'></svg>`,
    }),
  };
}

vi.mock('@/components/icons/IconDiscord.vue', () => mockIconComponent('IconDiscord'));
vi.mock('@/components/icons/IconTwitter.vue', () => mockIconComponent('IconTwitter'));
vi.mock('@/components/icons/IconTelegram.vue', () => mockIconComponent('IconTelegram'));

describe('SocialBadge.vue', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = null;
  });

  it('renders the correct link', () => {
    wrapper = mount(SocialBadge, {
      props: {
        href: 'https://example.com',
      },
    });

    const link = wrapper.find('a');
    expect(link.exists()).toBe(true);
    expect(link.attributes('href')).toBe('https://example.com');
    expect(link.attributes('target')).toBe('_blank');
  });

  it('applies the correct color for light mode', () => {
    wrapper = mount(SocialBadge, {
      props: {
        dark: false,
      },
    });

    const badge = wrapper.find('.social-badge');
    expect(badge.attributes('style')).toContain('color: black');
    expect(badge.attributes('style')).toContain('border-color: black');
  });

  it('applies the correct color for dark mode', () => {
    wrapper = mount(SocialBadge, {
      props: {
        dark: true,
      },
    });

    const badge = wrapper.find('.social-badge');
    expect(badge.attributes('style')).toContain('color: white');
    expect(badge.attributes('style')).toContain('border-color: white');
  });

  it('does not render an icon if the type is unsupported', async () => {
    wrapper = mount(SocialBadge, {
      props: {
        type: 'unsupported',
      },
    });

    await wrapper.vm.$nextTick();

    const icon = wrapper.find('.social-badge-icon').find('component');
    expect(icon.exists()).toBe(false);
  });

  it('renders without crashing when no props are provided', () => {
    wrapper = mount(SocialBadge);

    expect(wrapper.exists()).toBe(true);
  });
});