Angular Unit Test: Button Click - SPEC HAS NO EXPECTATIONS

Question

I am running an Angular Unit Test with Karma Jasmine. Its testing a button input. We are receiving the note below with two tests, one regular and one with async.

Does anyone know how to fix this unit test? Other tests in the component are running successfully.

HTML:

<div *ngIf="enableButtonFlag">
    <button class="email-edit-button" mat-icon-button (click)="editSharedFormControl('emailAddress')">
        <mat-icon>edit</mat-icon>
    </button>
</div>

Test Attempt 1:

it('click emailAddress Edit button should allow form control enabled', ()=> {

fixture.whenStable().then(() => {
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  tick();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
  });
});

Result: Test Did not Fail or Succeed:

SPEC HAS NO EXPECTATIONS click emailAddress Edit button should allow form control enabled

Test Attempt 2: with Async

it('click emailAddress Edit button should allow form control enabled', async (()  => {

fixture.whenStable().then(() => {
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  tick();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
  }); 
}));

Error: Failed: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of null TypeError: Cannot read property 'nativeElement' of null

Resources:

Spec has no expectations - Jasmine testing the callback function

Spec has no expectation console error although expect is present

score 1 · Accepted Answer · edited Apr 27 '20 at 17:48

For test #1 and test #2:

Make sure to remove ngIf in your html, or set the value appropriately
fixture.whenStable returns a promise when all pending promises have completed. This is not needed for both cases.
The concept of tick only exists when tests are running in a fakeAsync manner. It's not here so it does nothing.

Try:

it('should display emailEdit button', () => {
  // make the requirements to make sure .email-edit-button will be present in the view
  // in essence, it is not blocked by an *ngIf
  fixture.detectChanges();
  const button = fixture.debugElement.query(By.css('.email-edit-button'));
  console.log(button); // see what this logs, make sure it is truthy and a button
  expect(button).not.toBeNull();
});

it('click emailAddress Edit button should allow form control enabled', ()  => {
  // make the requirements to make sure .email-edit-button will be present in the view
  // in essence, it is not blocked by an *ngIf 
  fixture.detectChanges();
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
});

If you make the first test pass (it should display emailEdit button), the second test should be unblocked from Cannot read property 'nativeElement' of null

Angular Unit Test: Button Click - SPEC HAS NO EXPECTATIONS

1 Answers1