angular4-testing/project-manager/src/app/blog/blog-entry/blog-entry.component.spec.ts

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

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

  describe('Isolated Test', () => {
    it('should render DOM correctly according to Input', () => {
      // Umgebung initialisieren
      TestBed.configureTestingModule({
        declarations: [BlogEntryComponent]
      });
      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').textContent;
      expect(blogTitle).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

    });
  });


  describe('BlogEntryComp -> BlogComp Dependent Test', () => {


    it('should remove entry from BlogComponent on "delete" button click', () => {
      TestBed.configureTestingModule({
        declarations: [BlogEntryComponent, MockBlogComponent]
      });

      const entryFixture = TestBed.createComponent(BlogEntryComponent);
      const entryInstance: BlogEntryComponent = entryFixture.componentInstance;

      const blogFixture = TestBed.createComponent(MockBlogComponent);

      const blogInstance: any = blogFixture.componentInstance;

      const blogEntry: BlogEntry = blogInstance.entries[0];
      entryInstance.entry = blogEntry;
      entryInstance.blogComponent = blogInstance;

      const oldLength = blogInstance.entries.length;
      entryFixture.nativeElement.querySelector('div /deep/ .blog-delete > button').click();
      expect(blogInstance.entries.length).toBe(oldLength - 1);
    });

    it('should remove entry from BlogComponent on "delete" button click : OVERRIDE BLOG TEMPLATE', () => {

      TestBed.overrideComponent(BlogComponent, {
        set: {
          template: '<blog-entry *ngFor="let entry of entries" [entry]="entry" [blogComponent]="this"></blog-entry>'
        }
      });

      TestBed.configureTestingModule({
        imports: [RouterTestingModule.withRoutes([])],
        declarations: [BlogEntryComponent, BlogComponent]
      });

      const entryFixture = TestBed.createComponent(BlogEntryComponent);
      const entryInstance: BlogEntryComponent = entryFixture.componentInstance;

      const blogFixture = TestBed.createComponent(BlogComponent);
      const blogInstance: BlogComponent = blogFixture.componentInstance;

      const blogEntry: BlogEntry = blogInstance.entries[0];
      entryInstance.entry = blogEntry;
      entryInstance.blogComponent = blogInstance;

      const oldLength = blogInstance.entries.length;
      entryFixture.nativeElement.querySelector('div /deep/ .blog-delete > button').click();
      expect(blogInstance.entries.length).toBe(oldLength - 1);
    });

  });

});


// Mocked Blog Component
@Component({
  selector: 'blog',
  template: '<blog-entry></blog-entry>'
})
export class MockBlogComponent {

  entries = [{}, {}];

  deleteBlogEntry(id) {
    this.entries.splice(0, 1);
  }

}