61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
|
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
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|