import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SocialMediaComponent } from './social-media.component';

describe('SocialMediaComponent', () => {
  let fixture: ComponentFixture<SocialMediaComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [SocialMediaComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(SocialMediaComponent);
    fixture.componentRef.setInput('code', 'instagram');
    fixture.componentRef.setInput('icon', 'instagram');
    fixture.componentRef.setInput('name', 'Instagram');
    fixture.componentRef.setInput('url', 'https://instagram.com/acme');
    fixture.detectChanges();
  });

  it('renders a safe external social media link', () => {
    const link = fixture.nativeElement.querySelector('a') as HTMLAnchorElement;
    const icon = fixture.nativeElement.querySelector('i') as HTMLElement;

    expect(link.getAttribute('href')).toBe('https://instagram.com/acme');
    expect(link.getAttribute('target')).toBe('_blank');
    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
    expect(link.getAttribute('aria-label')).toBe('Instagram');
    expect(link.dataset['socialMedia']).toBe('instagram');
    expect(icon.className).toBe('fa-brands fa-instagram');
  });

  it('keeps a complete Font Awesome class', () => {
    fixture.componentRef.setInput('icon', 'fa-brands fa-linkedin-in');
    fixture.detectChanges();

    const icon = fixture.nativeElement.querySelector('i') as HTMLElement;

    expect(icon.className).toBe('fa-brands fa-linkedin-in');
  });
});
