diff --git a/project-manager/src/app/login/login.component.spec.ts b/project-manager/src/app/login/login.component.spec.ts new file mode 100644 index 0000000..b9bf07b --- /dev/null +++ b/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); + }); + + }); + +}); diff --git a/project-manager/src/app/login/login.component.ts b/project-manager/src/app/login/login.component.ts index 0907a86..12a5e3a 100644 --- a/project-manager/src/app/login/login.component.ts +++ b/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, diff --git a/project-manager/src/app/mocks/mock-login-service.spec.ts b/project-manager/src/app/mocks/mock-login-service.spec.ts new file mode 100644 index 0000000..8ba45ea --- /dev/null +++ b/project-manager/src/app/mocks/mock-login-service.spec.ts @@ -0,0 +1,3 @@ +export class MockLoginService { + +}