import { ComponentFixture, TestBed } from "@angular/core/testing";
import moment from "moment";
import { By } from "@angular/platform-browser";

// Load the implementations that should be tested
import { SamCommentsModule } from "../";
import { Comment } from "../interfaces";
import { SamCommentComponent } from "./";

describe("The Sam Comment component", () => {
  let component: SamCommentComponent;
  let fixture: ComponentFixture<SamCommentComponent>;
  const imgUrl =
    "https://upload.wikimedia.org/wikipedia/commons/c/c6/Georgewashington.jpg";

  const comment: Comment = {
    datetime: new Date(),
    image: imgUrl,
    text: "I did not chop down that cherry tree",
    username: "george-washington@gsa.gov",
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [SamCommentsModule],
    });

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

  it("Should display a username", function () {
    const usernameEl = fixture.debugElement.query(
      By.css(".username")
    ).nativeElement;
    expect(usernameEl.innerHTML).toContain(comment.username);
  });

  it.skip("Should display a published time", () => {
    const timeEl = fixture.debugElement.query(By.css("time")).nativeElement;
    expect(timeEl.innerHTML).toContain(moment(comment.datetime).fromNow());
  });

  it("Should display a comment body", function () {
    const textEl = fixture.debugElement.query(By.css("p")).nativeElement;
    expect(textEl.innerHTML).toContain(comment.text);
  });

  it("Should display an image", function () {
    const imageEl = fixture.debugElement.query(By.css("img")).nativeElement;
    expect(imageEl.src).toBe(comment.image);
  });

  it("Should provide a text alternative for the image (decorative, since the figcaption already names the user)", function () {
    const imageEl = fixture.debugElement.query(By.css("img")).nativeElement;
    expect(imageEl.getAttribute("alt")).toBe("");
  });
});