Unable to get select button click in unit testing using Jasmine and Angular

Question

Hi here i am using Angular and trying to create a unit test for the Reactive form but unable to succeed

what i required : How to execute button click after the form is filled both with false and truthy values using jasmine in angular.

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('[email protected]');
    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('[email protected]');
    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

<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

Well if I understand it correctly, you're not calling click anywhere. You're just checking enabled/disabled state of the button. Try btn.click() after check, if it's enabled. — mat.hudak
– mat.hudak, Commented May 29, 2020 at 6:10
Add btn.click() just under expect(btn.nativeElement.disabled).toBeFalsy(); — mat.hudak
– mat.hudak, Commented May 29, 2020 at 6:56
getting error as Property 'click' does not exist on type 'DebugElement' — Madpop
– Madpop, Commented May 29, 2020 at 6:58

Aakash Garg · Accepted Answer · 2020-05-31 19:35:45Z

Where ever you want to click that btn you have created. 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('[email protected]');
    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');

 });

Collectives™ on Stack Overflow

Unable to get select button click in unit testing using Jasmine and Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related