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

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

import { HomeComponent } from "./home.component";

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

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

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

  it("should create", () => {
    expect(component).toBeTruthy();
  });

  it("should render correctly", () => {
    const header = compiled.querySelector("h1");
    expect(header?.innerText.trim()).toBe("Naomi Carrigan");
    const socials = compiled.querySelectorAll("app-social");
    expect(socials).toHaveSize(Socials.length);
    const logos = compiled.querySelectorAll("app-logo");
    expect(logos).toHaveSize(Logos.length);
  });

  it("should render the timeline view", () => {
    component.changeView("resume");
    fixture.detectChanges();
    compiled = fixture.nativeElement;
    const timeline = compiled.querySelector("app-timeline");
    expect(timeline).toBeDefined();
    const testimonials = compiled.querySelector("app-testimonials");
    expect(testimonials).toBeNull();
  });

  it("should render the testimonials view", () => {
    component.changeView("testimonials");
    fixture.detectChanges();
    compiled = fixture.nativeElement;
    const timeline = compiled.querySelector("app-timeline");
    expect(timeline).toBeNull();
    const testimonials = compiled.querySelector("app-testimonials");
    expect(testimonials).toBeDefined();
  });
});
