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

import {BlogComponent} from './blog.component'
import {async, inject, TestBed} from "@angular/core/testing";
import {RouterTestingModule} from "@angular/router/testing";
import {Component, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
import {By} from "@angular/platform-browser";
import {BlogEntryComponent} from "./blog-entry/blog-entry.component";;
import {Router} from "@angular/router/router";

describe('Blog Component', () => {

  describe('Isolated Component Test', () => {
    let blogComponent;

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

    beforeEach(async(()=> {
      TestBed.overrideComponent(BlogComponent, {set: {template: ''}});
      blogComponent = TestBed.createComponent(BlogComponent).componentInstance;
    }));

    it('should have initial entries', () => {
      expect(blogComponent.entries.length).toBe(2);
      blogComponent.entries.forEach((entry) => {
        expect(entry.id).toBeLessThanOrEqual(blogComponent.id);
        expect(entry.createdAt.getDate()).toBe(new Date().getDate());
      })
    });

    it('should create new list entry and increment id-pointer', () => {
      let preCreationId = blogComponent.id;
      let entryTitle = "some fancy title";
      let entryImage = "https://avatars1.githubusercontent.com/u/3284117";
      let entryText = "some important text";
      blogComponent.createBlogEntry(entryTitle, entryImage, entryText);

      let newEntry = blogComponent.entries[blogComponent.entries.length - 1];
      expect(newEntry.id - 1).toBe(preCreationId);
      expect(newEntry.image).toBe(entryImage);
      expect(newEntry.text).toBe(entryText);
      expect(newEntry.createdAt.getDate()).toBe(new Date().getDate());
    });

    it('should delete entry by given id - and not change global max-id', () => {
      let preDeletionId = blogComponent.id;
      let latestId = blogComponent.entries[blogComponent.entries.length - 1].id;
      blogComponent.deleteBlogEntry(latestId);

      expect(blogComponent.id).toBe(preDeletionId);
      expect(() => {
        if (blogComponent.entries.length > 0) {
          return blogComponent.entries[blogComponent.entries.length - 1];
        } else {
          return 0;
        }
      }).not.toBe(latestId);
    });
  });

  describe('Basic DOM Form Test ', () => {

    let fixture;
    let instance;
    let element;

    const testTitle = 'testTitle';
    const testImage = 'imageUrl';
    const testText = 'testText';

    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [RouterTestingModule.withRoutes([])],
        declarations: [BlogComponent],
        // CUSTOM_ELEMENTS_SCHEMA - verhindert das Laden von Sub-Komponenten
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
      });
      fixture = TestBed.createComponent(BlogComponent);
      instance = fixture.componentInstance;
    });

    it('should call create method with provided field input - using nativeElement', () => {
      element = fixture.nativeElement;
      const spy = spyOn(instance, 'createBlogEntry');
      // beachten : value würde immer funktionieren um Werte als Variable
      // übertragbar einzutragen/ auszulesen, textContent hingegen nur bei textarea
      element.querySelector('div > #title').value = testTitle;
      element.querySelector('.form :nth-child(2) > input').value = testImage;
      element.querySelector('#text').textContent = testText;
      element.querySelector('div > button').click();

      expect(spy).toHaveBeenCalledWith(testTitle, testImage, testText);
    });


    it('should call create method with provided field input - using debugElement', () => {
      element = fixture.debugElement;
      const spy = spyOn(instance, 'createBlogEntry');
      // beachten : value würde immer funktionieren um Werte als Variable
      // übertragbar einzutragen/ auszulesen, textContent hingegen nur bei textarea
      element.query(By.css('#title')).nativeElement.value = testTitle;
      element.query(By.css('.form :nth-child(2) > input')).nativeElement.value = testImage;
      element.query(By.css('#text')).nativeElement.textContent = testText;
      element.query(By.css('button')).nativeElement.click();

      expect(spy).toHaveBeenCalledWith(testTitle, testImage, testText);
    });

  });

  describe('Basic DOM Form Test including BlogEntryComponent ', () => {

    let fixture;
    let instance;
    let element;

    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [RouterTestingModule.withRoutes([])],
        declarations: [BlogComponent, BlogEntryComponent],
      });
      fixture = TestBed.createComponent(BlogComponent);
      instance = fixture.componentInstance;
      element = fixture.debugElement;
    });

    it('should find first entry title in DOM', () => {
      fixture.detectChanges();
      const firstEntryTitle = instance.entries[0].title;
      expect(element.query(By.css('#entry-list > blog-entry > div > div:nth-child(2) > .title'))
        .nativeElement.textContent).toBe(firstEntryTitle);
    });
  })

});