CODEWITHSUNDEEP
unit-testingangularangular2-testing
coder
coder

Reputation: 333

Angular 2: template not updating in test

I am just trying to make this work.

it('should have expected <h1> text', async(() => {
  let fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();

  const sectionEl = fixture.debugElement.query(By.css("section"));

  spyOn(fixture.debugElement.componentInstance, "runMe");

  sectionEl.nativeElement.click();
  expect(fixture.debugElement.componentInstance.runMe).toHaveBeenCalled();

  expect(sectionEl.nativeElement.textContent).toBe("changed!");

So, the runMe function did not change the section's text, but the spy shows runMe was called.

Upvotes: 1

Views: 3160

Answers (1)

Paul Samsotha
Paul Samsotha

Reputation: 209004

Hard to tell without seeing a more complete example. But with clicking stuff, it usually involves asynchronous event handling. Therefore we need to wait for the event handling to complete. In a test, how we can do that is by calling fixture.whenStable, which returns a promise. We can continue the test when the promise resolves.

sectionEl.nativeElement.click();
fixture.whenStable().then(() => {
  expect(fixture.debugElement.componentInstance.runMe).toHaveBeenCalled();

  fixture.detectChanges();
  expect(sectionEl.nativeElement.textContent).toBe("changed!");
});

Upvotes: 1

Related Questions