角度-CLIジャスミンのユニットテスト方法をスパイする方法

Question

login.component.ts：

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 

    loginForm: FormGroup; 
    email: AbstractControl; 
    password: AbstractControl; 
    isError: boolean; 
    errorMessage: string; 
    constructor(public loginService: LoginService, fb: FormBuilder, public router: Router, public helperService: HelperService) { 
    this.loginForm = fb.group({ 
     'email': ['', Validators.compose([Validators.required, Validators.email, Validators.minLength(4), Validators.maxLength(50)]) 
     ], 
     'password': ['', Validators.compose([Validators.required, AppValidator.digitsOnly, Validators.minLength(4), Validators.maxLength(50)]) 
     ] 
    }); 
    } 
    this.email = this.loginForm.controls['email']; 
this.password = this.loginForm.controls['password']; 
    ngOnInit() { } 

    onLogin(loginForm: LoginForm): void { 
    this.isError = false; 
    if (this.loginForm.valid) { 
     // if email='test@gmail.com'& password='123456', login will success else it will fail. 
     this.loginService.fakeLogin(loginForm) 
     .subscribe((res: LoginResponse) => { 
      const url = '/dashboard'; 
      this.router.navigate([url]); 
     }, 
     (err: ErrorResponse) => { 
      this.errorMessage = err.message; 
      this.isError = true; 
     }); 
    } 
    } 
} 

login.component.html：

<div class="login"> 
    <h1>Login</h1> 
    <p *ngIf="isError"> 
     <ngb-alert [type]="'danger'" [dismissible]="true" (close)="closeAlert()">{{ errorMessage }}</ngb-alert> 
    </p> 
    <form method="post" [formGroup]="loginForm" (ngSubmit)="onLogin(loginForm.value)"> 
     <div class="form-group row" [ngClass]="helperService.getInputValidationClass(loginForm,'email')"> 
      <div class="col-sm-12"> 
       <input [formControl]="email" type="text" class="form-control" id="email" placeholder="Email"> 
       <span *ngIf="helperService.showCtrlValidationMsg(loginForm,'email')" class="help-block sub-little-text text-danger">{{helperService.getCtrlValidationMsg(loginForm,'email')}}</span> 
      </div> 
     </div> 
     <div class="form-group row" [ngClass]="helperService.getInputValidationClass(form,'password')"> 
      <div class="col-sm-12"> 
       <input [formControl]="password" type="password" class="form-control" id="password" placeholder="Password"> 
       <span *ngIf="helperService.showCtrlValidationMsg(loginForm,'password')" class="help-block sub-little-text text-danger">{{helperService.getCtrlValidationMsg(loginForm,'password')}}</span> 
      </div> 
     </div> 
     <button type="submit" [disabled]="helperService.isFormSubmitDisabled(loginForm,helperService.isProcessing)" class="btn btn-primary btn-block btn-large login-submit"> 
      <span >Sign in</span><span *ngIf="helperService.isProcessing">Processing...<i class="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span> 
     </button> 
    </form> 
</div> 

login.component.spec .ts：

import { By } from '@angular/platform-browser'; 
import { LoginService } from './login.service'; 
import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar'; 
import { SlimLoadingBarService } from 'ng2-slim-loading-bar'; 
import { RouterTestingModule } from '@angular/router/testing'; 

import { LoginComponent } from './login.component'; 
import { HelperService } from '../shared/helper.service'; 
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap/alert/alert.module'; 
import { NgbAlertConfig } from '@ng-bootstrap/ng-bootstrap/alert/alert-config'; 

describe('LoginComponent',() => { 
    let component: LoginComponent; 
    let fixture: ComponentFixture<LoginComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [FormsModule, ReactiveFormsModule, RouterTestingModule, NgbAlertModule,], 
     declarations: [LoginComponent], 
     providers: [LoginService, HelperService, NgbAlertConfig,], 
    }).compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(LoginComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    function updateForm(loginFormValue) { 
    component.loginForm.controls['email'].setValue(loginFormValue.email); 
    component.loginForm.controls['password'].setValue(loginFormValue.password); 
    }  

    it('isError should be true when password is wrong', fakeAsync(() => { 
    const loginFormValue = { 
     email: 'test@gmail.com', 
     password: '123', // give wrong password 
    }; 
    updateForm(loginFormValue); 
    fixture.debugElement.query(By.css('.login-submit')).triggerEventHandler('ngSubmit', null); 
    tick(); // wait for async operations 
    expect(component.isError).toBeTruthy(); 
    })); 

    it('onLogin should be called', fakeAsync(() => { 
    spyOn(component, 'onLogin'); 
    const loginFormValue = { 
     email: 'test@gmail.com', 
     password: '123456', 
    }; 
    updateForm(loginFormValue); 
    fixture.debugElement.query(By.css('.login-submit')).triggerEventHandler('ngSubmit', null); 
    expect(component.onLogin).toHaveBeenCalledWith(loginFormValue); 
    })); 
}); 

私のテスト例の両方が失敗している：

1. を（パスワードが間違っているときLoginComponentのisErrorが真でなければなりません）：truthyする未定義期待。

2. （LoginComponent onLoginを呼び出す必要があります）：[Object（{email： 'test@gmail.com'、パスワード： '12345'}）]で呼び出されたと思われます。

私はここで間違ってやっている正確に何を？

Answer 1

結果には、onLoginが呼び出されていないことが表示されます。

は

fixture.debugElement.query(By.css('.login-submit')).triggerEventHandler('ngSubmit', null); 

私が使用します：

fixture.debugElement.query(By.css('.login-submit')).click(); 

おそらく別の方法をngSubmitイベントをトリガするために、次のようになります。

fixture.debugElement.query(By.css('.login-submit')).dispatchEvent(new Event('ngSubmit')); 

けれども、私の避難所私の疑惑は、このラインが機能していないということですngSubmitイベントでそれを試してみましたが、他のイベントでも動作します。