import {TestBed} from "@angular/core/testing";
import {BlogEntryComponent} from "./blog-entry.component";
import {BlogEntry} from "./blog-entry";

describe('Blog Entry Isolated Test', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [BlogEntryComponent],
    })
  });

  it('should render DOM correct according to Input', () => {
    // Umgebung initialisieren
    const fixture = TestBed.createComponent(BlogEntryComponent);
    const blogEntryComponent : BlogEntryComponent = fixture.componentInstance;
    const element = fixture.nativeElement;
    const blogEntry : BlogEntry = new BlogEntry;

    // Testdaten
    const testId = 101;
    const testTitle = "test title";
    const testText = "test text";
    const testImage = "https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

    // Input-Daten
    blogEntry.id = testId;
    blogEntry.title = testTitle;
    blogEntry.text = testText;
    blogEntry.image = testImage;
    blogEntry.createdAt = new Date();
    (<any> blogEntryComponent).entry = blogEntry;

    // DOM update
    fixture.detectChanges();

    // DOM auslesen und Daten abgleichen
    const imageSrc = element.querySelector('div /deep/ .blog-image > img').getAttribute("src");
    expect(imageSrc).toBe(testImage);

    // textContent statt innerHtml
    // siehe http://stackoverflow.com/questions/40227533/angular-2-and-jasmine-unit-testing-cannot-get-the-innerhtml
    const blogTitle = element.querySelector('div /deep/ .blog-summary > span');
    expect(blogTitle.textContent).toBe(testTitle);

    const blogText = element.querySelector('div /deep/ .blog-summary > p').textContent;
    expect(blogText).toBe(testText);

    const blogTs = element.querySelector('div /deep/ .blog-timestamp > .timestamp').textContent;
    expect(new Date(blogTs).getDate()).toBe(new Date().getDate());

    const blogDelete = element.querySelector('div /deep/ .blog-delete > button').textContent;
    expect(blogDelete).toBe("Entfernen")

    // keine Überprüfung der id, die lediglich im EventListener des Delete Button hinterlegt ist, möglich!
    // nur durch click-Event auslösen, was jedoch BlogComponent vorraussetzt

  });

});