final unittest

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

@@ -8,8 +8,9 @@ import {BlogComponent} from "../blog.component";
   styleUrls: ['../blog.component.css']
 })
 export class BlogEntryComponent {
-  @Input() blogComponent: BlogComponent;
   @Input() entry: BlogEntry;
+  @Input() blogComponent: BlogComponent;
+
 
   deleteBlogEntry(id: number) {
     this.blogComponent.deleteBlogEntry(id);

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

@@ -1,5 +1,7 @@
 <h1>Angular-Blog</h1>
-<blog-entry *ngFor="let entry of entries" [entry]="entry" [blogComponent]="this"></blog-entry>
+<div id="entry-list">
+  <blog-entry *ngFor="let entry of entries" [entry]="entry" [blogComponent]="this"></blog-entry>
+</div>
 <h2>Neuen Blog-Eintrag erstellen</h2>
 
 <div class="form">

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

@@ -1,19 +1,27 @@
 import {BlogComponent} from './blog.component'
-import {TestBed} from "@angular/core/testing";
+import {async, TestBed} from "@angular/core/testing";
 import {RouterTestingModule} from "@angular/router/testing";
 import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
 import {By} from "@angular/platform-browser";
-import {FormsModule} from "@angular/forms";
+import {BlogEntryComponent} from "./blog-entry/blog-entry.component";;
 
 describe('Blog Component', () => {
 
-  describe('Isolated Class Test', () => {
-    let blogComponent: BlogComponent;
+  describe('Isolated Component Test', () => {
+    let blogComponent;
 
     beforeEach(() => {
-      blogComponent = new BlogComponent(null, null, null);
+      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) => {
@@ -102,4 +110,28 @@ describe('Blog Component', () => {
 
   });
 
+  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);
+    });
+  })
+
 });

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

@@ -3,7 +3,7 @@ import {LoginComponent} from "./login.component";
 import {RouterTestingModule} from "@angular/router/testing";
 import {LoginService} from "../services/login-service/login-service";
 import {FormsModule} from "@angular/forms";
-import {MockEmptyClass} from "../mocks/mock-empty-class";
+import {MockLoginService} from "../mocks/mock-login-service";
 import Spy = jasmine.Spy;
 
 
@@ -14,7 +14,7 @@ describe('Login Component UI Driven Form Test with Spy', () => {
       imports: [FormsModule, RouterTestingModule.withRoutes([])],
       declarations: [LoginComponent],
       providers: [
-        {provide: LoginService, useClass: MockEmptyClass}
+        {provide: LoginService, useClass: MockLoginService}
       ],
     })
   });
@@ -30,21 +30,20 @@ describe('Login Component UI Driven Form Test with Spy', () => {
     loginFixture.autoDetectChanges(true);
 
     // Login ausfuellen und absenden
-    loginFixture.whenStable().then(() => {
-      // Spy anmelden, die eigentliche Methode wird nicht mehr aufgerufen
-      const spy = spyOn(loginInstance, 'login');
 
-      // Formular Eingabe
-      loginElement.querySelector('div /deep/ div > #inputEmail').value = inputUser;
-      loginElement.querySelector('div /deep/ div > #inputPassword').value = inputPass;
-      // Trigger Submit - nicht möglich über click() oder HTTPNode submit()
-      // daher in Comp '@ViewChild(NgForm)' benoetigt
-      loginInstance.form.ngSubmit.emit();
+    let service = loginFixture.debugElement.injector.get(LoginService);
+    // Spy anmelden, die eigentliche Methode wird nicht mehr aufgerufen
+    const spy = spyOn(service, 'login');
 
-      // Spy auswerten
-      expect(spy).toHaveBeenCalledWith(inputUser, inputPass);
-    });
+    // Formular Eingabe
+    loginElement.querySelector('div /deep/ div > #inputEmail').value = inputUser;
+    loginElement.querySelector('div /deep/ div > #inputPassword').value = inputPass;
+    // Trigger Submit - nicht möglich über click() oder HTTPNode submit()
+    // daher in Comp '@ViewChild(NgForm)' benoetigt
+    loginInstance.form.ngSubmit.emit();
 
+    // Spy auswerten
+    expect(spy).toHaveBeenCalledWith(inputUser, inputPass);
   });
 
 });

project-manager/src/app/mocks/mock-empty-class.ts

@@ -1,3 +0,0 @@
-export class MockEmptyClass {
-
-}

project-manager/src/app/mocks/mock-login-service.ts

@@ -0,0 +1,5 @@
+export class MockLoginService {
+
+  login(name, password) {};
+
+}

project-manager/src/app/tasks/edit-task/edit-task.component.spec.ts

@@ -18,28 +18,6 @@ import {generateRandomString} from "../../test/test.helper";
 
 describe('EditTask Component', () => {
 
-  @Component({
-    template: '<router-outlet></router-outlet>'
-  })
-  class TestComponent {
-  }
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [FormsModule, RouterTestingModule.withRoutes([
-          {path: 'new', component: EditTaskComponent},
-          {path: 'edit/:id', component: EditTaskComponent}
-        ],
-      )],
-      declarations: [EditTaskComponent, ShowErrorComponent, APPLICATION_VALIDATORS, TestComponent],
-      providers: [
-        Title,
-        {provide: TaskService, useClass: MockTaskService},
-      ]
-    });
-  });
-
-
   describe('Template Driven Form API-based Test', () => {
 
     let fixture;
@@ -47,11 +25,20 @@ describe('EditTask Component', () => {
     let form;
 
     beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [FormsModule, RouterTestingModule.withRoutes([],
+        )],
+        declarations: [EditTaskComponent, ShowErrorComponent, APPLICATION_VALIDATORS],
+        providers: [
+          Title,
+          {provide: TaskService, useClass: MockTaskService},
+        ]
+      });
       fixture = TestBed.createComponent(EditTaskComponent);
       fixture.autoDetectChanges(true);
     });
 
-    it('should validate the title correctly', (done) => {
+    it('should validate the title correctly', () => {
       fixture.whenStable().then(() => {
         form = fixture.componentInstance.form.form;
         const titleControl = form.get('title');
@@ -66,7 +53,6 @@ describe('EditTask Component', () => {
 
         titleControl.setValue(generateRandomString(101));
         expect(titleControl.errors['maxlength']).toEqual({requiredLength: 100, actualLength: 101});
-        done();
       });
     });
 
@@ -86,7 +72,7 @@ describe('EditTask Component', () => {
       });
     });
 
-    it('should show error on tag name provided with gt 0 and lt 3', (done) => {
+    it('should show error on tag name provided with gt 0 and lt 3', () => {
       fixture.componentInstance.addTag();
       fixture.whenStable().then(() => {
         form = fixture.componentInstance.form.form;
@@ -99,11 +85,11 @@ describe('EditTask Component', () => {
 
         tagControl.setValue('abc');
         expect(tagControl.errors).toBeNull();
-        done();
+
       });
     });
 
-    it('should validate assignee email correctly', (done) => {
+    it('should validate assignee email correctly', () => {
       fixture.whenStable().then(() => {
         form = fixture.componentInstance.form.form;
         const invalidEmailObject = {invalidEMail: true};
@@ -121,16 +107,40 @@ describe('EditTask Component', () => {
 
         assigneeEmail.setValue('test@web.de');
         expect(assigneeEmail.errors).toBeNull();
-        done();
       })
     });
 
   });
 
+  /**
+   *  Hinweis: Die folgende TestSuite entstammt dem ursprünglichen edit-task.component.spec.ts Tests
+   *  dieses Projektes und ist geistiges Eigentum vom Chritoph Höller, dem Ersteller des Ausgangsprojektes
+   */
   describe('Routing', () => {
 
+    @Component({
+      template: '<router-outlet></router-outlet>'
+    })
+    class TestComponent {
+    }
+
     let taskService: TaskService;
 
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [FormsModule, RouterTestingModule.withRoutes([
+            {path: 'new', component: EditTaskComponent},
+            {path: 'edit/:id', component: EditTaskComponent}
+          ],
+        )],
+        declarations: [EditTaskComponent, ShowErrorComponent, APPLICATION_VALIDATORS, TestComponent],
+        providers: [
+          Title,
+          {provide: TaskService, useClass: MockTaskService},
+        ]
+      });
+    });
+
     beforeEach(inject([TaskService], (_taskService) => {
       taskService = _taskService;
     }));

project-manager/src/app/test/basic-test-example.spec.ts

@@ -1,37 +1,79 @@
 // Test Suite
 describe('Basic Test', () => {
 
-  // Variablendeklaration zur Verwendung in mehreren Testfällen
-  let someInt;
+  // geschachtelte TestSuite
+  describe('Matcher example', () => {
+    // Variablendeklaration zur Verwendung in mehreren Testfällen
+    let someInt;
 
-  // Methode wird vor jedem Testfall ausgeführt
-  beforeEach(() => {
-    someInt = 2;
+    // Methode wird vor jedem Testfall ausgeführt
+    beforeEach(() => {
+      someInt = 2;
+    });
+
+    // Testfall 1
+    it('should succeed on most commonly used matchers', () => {
+      expect(1 + 1).toBe(2)
+      expect(null).toEqual(null);
+      expect('Hello world').toContain('Hello');
+      expect(true).toBeTruthy();
+      expect(false).toBeFalsy();
+      expect(null).toBeNull();
+      expect(undefined).toBeUndefined();
+      expect('angular.txt').toMatch(/\w+.(txt)/);
+      expect('World').not.toContain('Hello');
+    });
+
+    //Testfall 2
+    it('someInt should have value from beforeEach()', () => {
+      expect(someInt).toBe(2);
+      someInt = 20;
+      expect(someInt).toBe(20);
+    });
+
+    // Testfall 3
+    it('someInt should have overwritten value from beforeEach()', () => {
+      expect(someInt).toBe(2);
+    });
   });
 
-  // Testfall 1
-  it('should succeed on most commonly used matchers', () => {
-    expect(1 + 1).toBe(2)
-    expect(null).toEqual(null);
-    expect('Hello world').toContain('Hello');
-    expect(true).toBeTruthy();
-    expect(false).toBeFalsy();
-    expect(null).toBeNull();
-    expect(undefined).toBeUndefined();
-    expect('angular.txt').toMatch(/\w+.(txt)/);
-    expect('World').not.toContain('Hello');
+
+  describe('Calculator Class Testing', () => {
+    class Calculator {
+      private val1: number = 0;
+      private val2: number = 0;
+
+      constructor(val1: number, val2: number) {
+        this.val1 = val1;
+        this.val2 = val2;
+      }
+
+      add(): number {
+        return this.val1 + this.val2
+      };
+
+      sub(): number {
+        return this.val1 - this.val2
+      };
+
+      mul(): number {
+        return this.val1 * this.val2
+      };
+
+      div(): number {
+        return this.val1 / this.val2
+      };
+    }
+
+    it('should return calculated values for each method', () => {
+      const calc = new Calculator(4, 12);
+      expect(calc.add()).toBe(16);
+      expect(calc.sub()).toBe(-8);
+      expect(calc.mul()).toBe(48);
+      expect(calc.div()).toBe(1 / 3);
+    });
+
   });
 
-  //Testfall 2
-  it('someInt should have value from beforeEach()', () => {
-    expect(someInt).toBe(2);
-    someInt = 20;
-    expect(someInt).toBe(20);
-  });
-
-  // Testfall 3
-  it('someInt should have overwritten value from beforeEach()', () => {
-    expect(someInt).toBe(2);
-  });
 
 });