각도 4 단위 테스트 양식

Question

각도 4로 양식을 작성하고 결과를 테스트하려고합니다.

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Create Account</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <form [formGroup]="account" (ngSubmit)="createAccount()"> 
    <ion-list> 
     <ion-item> 
     <ion-label floating>First Name</ion-label> 
     <ion-input type="text" formControlName="first_name"></ion-input> 
     </ion-item> 

     <ion-item> 
     <ion-label floating>Last Name</ion-label> 
     <ion-input type="text" formControlName="last_name"></ion-input> 
     </ion-item> 

     <ion-item> 
     <ion-label floating>Email</ion-label> 
     <ion-input type="text" formControlName="email"></ion-input> 
     </ion-item> 

     <ion-item> 
     <ion-label floating>Password</ion-label> 
     <ion-input type="password" formControlName="password"></ion-input> 
     </ion-item> 
    </ion-list> 

    <div style="width:90%; margin: 0px auto; text-align:center;"> 
     <button ion-button block type="submit" [disabled]="!account.valid">Create Account</button> 
     <div style="margin-top:20px;"><a (click)="login()">Already Have an Account? Login!</a></div> 
    </div> 
    </form> 
</ion-content> 

그래서 나는 다음과 같은 사양을 만들어 : 이것은 내 템플릿입니다

import { Component } from '@angular/core'; 
import { Validators, FormBuilder, FormGroup } from '@angular/forms'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Angular2TokenService } from 'angular2-token'; 

@Component({ 
    selector: 'page-create-account', 
    templateUrl: 'create_account.html' 
}) 
export class CreateAccountPage { 
    private account : FormGroup; 
    selectedItem: any; 
    icons: string[]; 
    items: Array<{title: string, note: string, icon: string}>; 

    constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, private _tokenService: Angular2TokenService) { 
    this.account = this.formBuilder.group({ 
     first_name: ['', Validators.required], 
     last_name: ['', Validators.required], 
     email: ['', Validators.required], 
     password: ['', [Validators.required, Validators.minLength(8)]], 
     passwordConfirmation: [''], 
    }); 
    } 

    createAccount() { 
    this.account.value['passwordConfirmation'] = this.account.value['password']; 
    this._tokenService.registerAccount(this.account.value).subscribe(
     res =>  this.navCtrl.push(StartListingPage), 
     error => console.log(error) 
    ); 
    } 

    login(event) { 
    this.navCtrl.setRoot(LoginAccountPage); 
    } 
} 

다음은 구성 요소의

import { Nav, Platform } from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { Angular2TokenService } from 'angular2-token'; 
import { TestBed, getTestBed, ComponentFixture, async } from '@angular/core/testing'; 
import { IonicModule } from 'ionic-angular'; 
import { By }    from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { Validators, FormBuilder, FormGroup } from '@angular/forms'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { CreateAccountPage } from './create_account'; 

let comp: CreateAccountPage; 
let fixture: ComponentFixture<CreateAccountPage>; 

class MockNavParams { 
    data = { }; 
} 

describe('CreateAccountPage',() => { 
    beforeEach(async(() => { 
     let tokenMock = jasmine.createSpyObj('tokenMock', ['registerAccount', 'subscribe']); 
     tokenMock.registerAccount.and.returnValue(tokenMock); 
     TestBed.configureTestingModule({ 
      declarations: [ CreateAccountPage ], 
      providers: [ NavController, FormBuilder, 
       { provide: Angular2TokenService, useValue: tokenMock }, 
       { provide: NavParams, useClass: MockNavParams}, 
      ], 
      imports: [ 
       IonicModule.forRoot(CreateAccountPage) 
      ], 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(CreateAccountPage); 
     comp = fixture.componentInstance; 
    }); 

    afterEach(() => { 
     fixture.destroy(); 
     comp = null; 
    }); 

    it('should create account when clicked',() => {  
     fixture.detectChanges(); 
     let inputs = fixture.debugElement.queryAll(By.css('input')); 

     let first = inputs[0].nativeElement; 
     first.value = 'Jason'; 
     first.dispatchEvent(new Event('input')); 
     expect(comp.account.value['first_name']).toBe('Jason'); 

     let form = fixture.debugElement.query(By.css('form')); 
     form.triggerEventHandler('submit', null); 
     // The above works or this line also works: 
     //form.nativeElement.dispatchEvent(new Event('submit')); 
     expect(comp.createAccount).toHaveBeenCalled; 

     let tokenMock = getTestBed().get(Angular2TokenService); 
     expect(tokenMock.registerAccount).toHaveBeenCalledWith({ 
      first_name: 'Jason', 
      last_name: '', 
      email: '', 
      password: '', 
      passwordConfirmation: '' 
     }); 
    }); 
}); 

내 테스트 결과는 registerAccount이라고 말한다을하지만, 모든 필드와 공백. 그래서 저는 가까이에 있다고 생각하지만 양식을 채우는 방법을 알 수는 없습니다. 어떤 아이디어?

EDIT : 코드를 온라인으로 찾았으므로 이벤트를 Angular 시스템으로 보내야합니다. 그래도 추가 했으므로 주사위를 추가하지 않았습니다.

성공 : 이전에 By.css 선택에서 잘못된 요소를 가져 왔습니다. 위의 예제를 제 작업 솔루션으로 업데이트했습니다.

Answer 1

위의 스펙을 제 작업 솔루션으로 업데이트했습니다. 주요 문제는 first.dispatchEvent (new Event ('input'))를 호출하지 않아서였습니다. By.css 줄에 CSS 선택 항목도 잘못되었습니다.