Add Login Test (template-driven-form)

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

@@ -0,0 +1,52 @@
+import {TestBed} from "@angular/core/testing";
+import {LoginComponent} from "./login.component";
+import {RouterTestingModule} from "@angular/router/testing";
+import {LoginService} from "../services/login-service/login-service";
+import {MockLoginService} from "../mocks/mock-login-service.spec";
+import {FormsModule} from "@angular/forms";
+import Spy = jasmine.Spy;
+
+
+describe('Login Component Template Driven Form Test with Spy', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, RouterTestingModule.withRoutes([])],
+      declarations: [LoginComponent],
+      providers: [
+        {provide: LoginService, useClass: MockLoginService}
+      ],
+    })
+  });
+
+
+  it('should be possible to request login', () => {
+
+    const inputUser = 'testuser';
+    const inputPass = 'testpass';
+
+    const loginFixture = TestBed.createComponent(LoginComponent);
+    const loginInstance = loginFixture.componentInstance;
+    const loginElement = loginFixture.nativeElement;
+    loginFixture.autoDetectChanges(true);
+
+    // Login ausfuellen und absenden
+    loginFixture.whenStable().then(() => {
+      // Spy anmelden
+      // sobald Spy angemeldet ist, wird der eigentliche Methodenrumpf 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();
+
+      // Spy auswerten
+      expect(spy).toHaveBeenCalledWith(inputUser, inputPass);
+    });
+
+  });
+
+});

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

@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoginService} from "../services/login-service/login-service";
+import {NgForm} from "@angular/forms";
 
 @Component({
   selector: 'login',
@@ -8,6 +9,7 @@ import {LoginService} from "../services/login-service/login-service";
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent {
+  @ViewChild(NgForm) form : NgForm;
 
 
   constructor(private loginService: LoginService,

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

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