0
私は角度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);
}
}
これが私のテンプレートです：私のテスト結果がregisterAccountはなく、すべてのフィールドと呼ばれているという
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: ''
});
});
});
：
<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>
は、だから私は、次の仕様を作成しましたブランク。だから私は近いと思うが、私はフォームを記入する方法を理解できない。何か案は？
EDIT：イベントをAngularシステムにディスパッチする必要があると思われるコードがオンラインで見つかりましたので、追加しましたが、まだダイスは追加していません。
成功：以前は、By.cssの選択項目で間違った要素を取得していました。上記の例を私の実用的なソリューションに更新しました。