watching for variable changes during unitt esting

Question

I am working on a component that mainly does its job on onNgInit() method:

      stage = '';
      onNgInit(){
      const thus : any = this;
      this.stage = "start';
      this.uniService.dataExists().then(result=>{
       // the data exists. get ProductTypes
       that.stockService.productTypes().subscribe(proTypes=>{

        vm.stage = "Setting status to products";
        proTypes.map(product....);
      });
     });
    }

now in my test, the value of stage remains "start" since the code is onNgInit, I believe. I was wondering if there is a way to watch for value change of variables or better yet, the very final value of a specific variable?

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { TrackerComponent } from "./tracker.component";

describe("TrackerComponent", () => {
  let component: TrackerComponent;
  let fixture: ComponentFixture<TrackerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TrackerComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TrackerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  //
  it("should is created", () => {
    expect(component).toBeTruthy();
    expect(component.stage).toEqual('start');// want to track the changes

  });

});

you will have to call the `component.onNgInit` before assertion. — user3875919, Nov 15 '19 at 11:39
I don't really understand what you want to do/ what the problem is. Could you maybe rephrase the post? — lealceldeiro, Nov 15 '19 at 11:42
@user3875919: `fixture.detectChanges` triggers a change detection cycle for the component and implicitly invokes its `ngOnInit` method, there's no need to explicitly invoke it again. — uminder, Nov 15 '19 at 11:57

uminder · Answer 1 · 2019-11-15T12:06:46.890

You need to synchronize the asynchronous calls to uniService.dataExists().then and stockService.productTypes().subscribe prior to check conditions with exec. This can be done using fakeAsync and flush in the second beforeEach function.

import { fakeAsync, flush } from '@angular/core/testing';
...
beforeEach(fakeAsync(() => {
    fixture = TestBed.createComponent(TrackerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    flush();
}));

score 0 · Answer 2 · answered Nov 15 '19 at 12:09

I don't really understand why you called it onNgInit when its ngOnInit but here is an answer assuming its a type:

You need to rewrite a little bit of your ngOnInit to return some sort of value.

  public async ngOnInit(): Promise<void>{
      const thus : any = this;
      this.stage = "start';
      const result = await this.uniService.dataExists();
       // the data exists. get ProductTypes
      const proTypes = await (that.stockService.productTypes().toPromise());
      this.stage = "Setting status to products";
      proTypes.map(product....);
  }

So in your UT you might have something like this:

 it("should is created", (done) => {
    expect(component.stage).toEqual('start');
    component.ngOnInit().then(() =>{
        expect(component.stage).toEqual('Setting status to products');          
        done();
    });
  });

Either this or switch from promises to observables.

Also you shouldn't just trust that functions sort of execute. When testing you should test each stop and its progression.

watching for variable changes during unitt esting

2 Answers2