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

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

import { TimelineComponent } from "./timeline.component";

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

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

    fixture = TestBed.createComponent(TimelineComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should have expected properties", () => {
    expect(component.employment).toEqual(
      Employment.sort((a, b) => b.start.getTime() - a.start.getTime())
    );
  });

  it("should render timeline correctly", () => {
    compiled = fixture.nativeElement;
    const jobs = compiled.querySelectorAll("app-job");
    expect(jobs).toHaveSize(Employment.length);
    for (let i = 0; i < component.employment.length; i++) {
      const job = jobs[i];
      const title = job.querySelector("h2");
      expect(title?.textContent).toBe(component.employment[i].title);
    }
  });
});
