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

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 {FormsModule} from "@angular/forms";
import {MockEmptyClass} from "../mocks/mock-empty-class";
import Spy = jasmine.Spy;


describe('Login Component UI Driven Form Test with Spy', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, RouterTestingModule.withRoutes([])],
      declarations: [LoginComponent],
      providers: [
        {provide: LoginService, useClass: MockEmptyClass}
      ],
    })
  });


  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, 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();

      // Spy auswerten
      expect(spy).toHaveBeenCalledWith(inputUser, inputPass);
    });

  });

});