[英]Unable to get select button click in unit testing using Jasmine and Angular
Hi here i am using Angular and trying to create a unit test for the Reactive form but unable to succeed您好,我正在使用 Angular 并尝试为 Reactive 表单创建单元测试但无法成功
what i required: How to execute button click after the form is filled both with false and truthy values using jasmine in angular.我需要什么:如何使用 angular 中的 jasmine 在表单填充了假值和真值后执行按钮单击。
what i did: I created a logic but it is not working我做了什么:我创建了一个逻辑,但它不起作用
it('Form check is valid or not if no values entered', () => {
expect(component.userCreationForm.valid).toBeFalsy();
});
it('Form check is valid or not when values entered', () => {
component.userCreationForm.controls['firstname'].setValue('luther');
component.userCreationForm.controls['lastname'].setValue('adams');
component.userCreationForm.controls['email'].setValue('test@gmail.com');
component.userCreationForm.controls['password'].setValue('123456');
expect(component.userCreationForm.valid).toBeTruthy();
});
it('Form Submitted should check from is submitted', () => {
// check form is invalid
expect(component.userCreationForm.invalid).toBeTruthy();
let btn = fixture.debugElement.query(By.css('button[type=submit]'));
// Check button is disabled
expect(btn.nativeElement.disabled).toBeTruthy();
component.userCreationForm.controls['firstname'].setValue('luther');
component.userCreationForm.controls['lastname'].setValue('adams');
component.userCreationForm.controls['email'].setValue('test@gmail.com');
component.userCreationForm.controls['password'].setValue('testpassword');
fixture.detectChanges();
// check button is enabled
expect(btn.nativeElement.disabled).toBeFalsy();
component.onUserCreation();
fixture.detectChanges();
let success = fixture.debugElement.query(By.css('#success-msg')).nativeElement;
expect(success.textContent).toBe('Bubba');
});
html logic html逻辑
<div class="inv-buttons">
<button mat-raised-button color="primary" [disabled]="userCreationForm.invalid" type="submit">Create User</button>
</div>
Below is my stackblitz: https://stackblitz.com/edit/angular-9-material-starter-q9wxvq下面是我的堆栈闪电战: https://stackblitz.com/edit/angular-9-material-starter-q9wxvq
Where ever you want to click that btn you have created.您想在哪里单击您创建的 btn。 Use it like below:-像下面这样使用它:-
btn.nativeElement.click();
I changed your test case below:-我在下面更改了您的测试用例:-
it('Form Submitted should check from is submitted',async () => {
// check form is invalid
expect(component.userCreationForm.invalid).toBeTruthy();
let btn = fixture.debugElement.query(By.css('button[type=submit]'));
// Check button is disabled
expect(btn.nativeElement.disabled).toBeTruthy();
component.userCreationForm.controls['firstname'].setValue('luther');
component.userCreationForm.controls['lastname'].setValue('adams');
component.userCreationForm.controls['email'].setValue('test@gmail.com');
component.userCreationForm.controls['password'].setValue('testpassword');
fixture.detectChanges();
// check button is enabled
expect(btn.nativeElement.disabled).toBeFalsy();
await fixture.whenStable();
console.clear();
btn.nativeElement.click();
fixture.detectChanges();
//component.onUserCreation();
//fixture.detectChanges();
//let success = fixture.debugElement.query(By.css('#success-msg')).nativeElement;
//expect(success.textContent).toBe('Bubba');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.