portfolio/src/app/social/social.component.spec.ts

import { ComponentFixture, TestBed } from "@angular/core/testing";

import { Socials } from "../config/Socials";

import { SocialComponent } from "./social.component";

describe("SocialComponent", () => {
  let component: SocialComponent;
  let fixture: ComponentFixture<SocialComponent>;
  let compiled: HTMLElement;

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

    fixture = TestBed.createComponent(SocialComponent);
    component = fixture.componentInstance;
  });

  for (const expected of Socials) {
    it(`should parse ${expected.label} properties correctly`, () => {
      component.social = expected;
      fixture.detectChanges();
      expect(component.social).toBe(expected);
      expect(component.link).toBe(expected.link);
      expect(component.alt).toBe(expected.alt);
      expect(component.icon).toEqual(expected.icon);
      expect(component.label).toBe(expected.label);
    });

    it("should render an icon correctly", () => {
      component.social = expected;
      fixture.detectChanges();
      compiled = fixture.nativeElement;

      const link = compiled.querySelector("a");
      expect(link?.href).toContain(expected.link);
      expect(link?.rel).toBe("noopener noreferrer");
      expect(link?.target).toBe("_blank");
      expect(link?.ariaLabel).toBe(expected.label);

      const icon = compiled.querySelector("fa-icon");
      const svg = icon?.querySelector("svg");
      const path = svg?.querySelector("path");
      expect(path?.getAttribute("d")).toBe(expected.icon.icon[4] as string);
    });
  }
});