角4单元测试表

我想填写一个表格4并测试结果。这里的组件：角4单元测试表

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); 
    } 
}

这是我的模板：

<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 { 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叫，但所有领域空白。所以我觉得我很接近，但我无法弄清楚如何填写表格。有任何想法吗？

编辑：我发现在线代码似乎表明我需要将事件发送到Angular系统，所以我补充说，但仍然没有骰子。

SUCCESS：我以前在By.css选择中抓取错误的元素。我将上面的示例更新为我的工作解决方案。

来源

2017-05-13 Jason

我更新了我的工作解决方案的规格。主要问题是我没有调用first.dispatchEvent（new Event（'input'））;我的By.css行也有一个不好的CSS选择。

来源

2017-05-17 04:56:34 Jason

角4单元测试表

回答

相关问题