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

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

import { CertificationsComponent } from "./certifications.component";

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

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

    fixture = TestBed.createComponent(CertificationsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    compiled = fixture.nativeElement;
  });

  it("should load the certifications", () => {
    expect(component.certs).toEqual(
      Certifications.sort((a, b) => b.date.getTime() - a.date.getTime())
    );
  });

  it("should render the certifications correctly", () => {
    const sorted = Certifications.sort(
      (a, b) => b.date.getTime() - a.date.getTime()
    );
    const certs = compiled.querySelectorAll(".cert");
    for (let i = 0; i < certs.length; i++) {
      const cert = certs[i];
      const title = cert.querySelector(".title");
      expect(title?.textContent?.trim()).toBe(sorted[i].name);
      const img = cert.querySelector("img");
      expect(img?.src).toContain(`/assets/img/certs/${sorted[i].fileName}`);
      const issued = cert.querySelector(".issued");
      expect(issued?.textContent?.trim()).toBe(
        `${sorted[i].issuer} - ${sorted[i].date.toLocaleDateString("en-GB", {
          month: "long",
          year: "numeric"
        })}`
      );
    }
  });
});
