Add isolated tests blog app; Add blog entry timestamp

project-manager/karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration
-// Generated on Sat Mar 25 2017 06:31:51 GMT+0100 (CET)
+// Generated on Thu Mar 09 2017 06:31:51 GMT+0100 (CET)
 
 module.exports = function(config) {
   config.set({
@@ -12,6 +12,9 @@ module.exports = function(config) {
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['jasmine', '@angular/cli'],
 
+
+    // list of plugins to load. A plugin can be a string (in which case it will
+    // be required by Karma) or an inlined plugin - Object
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),

project-manager/src/app/blog/blog-entry/blog-entry.component.html

@@ -4,9 +4,14 @@
     </div>
     <div class="blog-summary">
         <span class="title">{{entry.title}}</span>
-        <p> {{entry.text}}</p>
+        <p>{{entry.text}}</p>
     </div>
     <div class="blog-delete">
         <button (click)="deleteBlogEntry(entry.id)">Entfernen</button>
     </div>
+  <div class="blog-timestamp">
+    <hr>
+    <span class="ts-title">created at:</span>
+    <span class="timestamp">{{entry.createdAt | date: 'yyyy-MM-dd'}}</span>
+  </div>
 </div>

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

@@ -0,0 +1,60 @@
+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
+
+  });
+
+});

project-manager/src/app/blog/blog-entry/blog-entry.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input } from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {BlogEntry} from './blog-entry';
 import {BlogComponent} from "../blog.component";
 

project-manager/src/app/blog/blog-entry/blog-entry.ts

@@ -1,6 +1,7 @@
 export class BlogEntry {
-  id :number;
+  id : number;
   title: string;
   text: string;
   image: string;
+  createdAt: Date;
 }

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

@@ -1,9 +1,48 @@
 import {BlogComponent} from './blog.component'
+import {Title} from "@angular/platform-browser";
 
-describe('', () => {
+describe('Blog Component Isolated Test', () => {
 
-  it('', () => {
+  let blogComponent: BlogComponent;
 
+  beforeEach(() => {
+    blogComponent = new BlogComponent(null, null, new Title('Project Blog'));
   });
 
+  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', () => {
+    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);
+  });
 });

project-manager/src/app/blog/blog.component.ts

@@ -18,9 +18,12 @@ export class BlogComponent {
 
   constructor(r: ActivatedRoute, private router: Router, private titleService: Title) {
     this.entries = initialEntries;
-    if (this.entries.length != 0) {
+    this.entries.forEach((entry)=> {
-      this.id = this.entries[this.entries.length-1].id;
+      entry.createdAt = new Date()
+      if (this.id < entry.id) {
+        this.id = entry.id;
       }
+    });
   }
 
   createBlogEntry(title:string, image:string, text:string) {
@@ -31,6 +34,8 @@ export class BlogComponent {
     entry.title = title;
     entry.image = image;
     entry.text = text;
+    entry.createdAt = new Date();
+    console.log(this.entries);
 
     this.entries.push(entry);
   }