Angular2, jasmine: Component changes not seen in test spec function

Question

I'm still writing tests for my Angular app. I've a test that modifies an Org object, saves the changes, and then proves that the changes have been kept. However, the test isn't seeing the changes.

My mock Org service that saves the changes:

@Injectable()
export class MockOrgService {
  constructor() { }

  public save(org: Org): Observable<Org> {
    let savedOrg: Org = new Org(org);
    savedOrg.address2 = 'Saved with id: ' + org.id;

    return Observable.of(savedOrg);
  }

}

My mock router:

beforeEach(async(() => {
  routeStub = { data: Observable.of( { org: org1 } ), snapshot: {} } ;
  TestBed.configureTestingModule({
    imports: [ FormsModule, RouterTestingModule ],
    providers : [
        { provide: DialogService, useClass: MockDialogService },
        { provide: GlobalsService, useClass: MockGlobalsService },
        { provide: OrgService, useClass: MockOrgService },
        { provide: ActivatedRoute, useValue: routeStub }          
    ],
    declarations: [ OrgDetailComponent ],
  })
  .compileComponents();
}));

My component function being tested:

private gotoParent(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

public save(): void {
  this.error = null;
  let that = this;

  this.orgService
      .save(that.org)
      .subscribe(
          (org: Org): void => {
            that.org = org; 
            that.savedOrg = new Org(org);
            that.gotoParent();
          },
          error => this.error = error
      );

}

My test:

it('responds to the Save click by saving the Org and refilling the component', async(() => {

  fixture.detectChanges();
  fixture.whenStable().then(() => {
    comp.org.id = 2;
    comp.org.name = 'Another Org';
    let elButton = fixture.debugElement.query(By.css('#save'));
    elButton.nativeElement.click();

    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(comp.error).toBeNull();
      expect(comp.savedOrg.id).toEqual(2);
      expect(comp.savedOrg.name).toEqual('Another Org');
      expect(routeStub).toHaveBeenCalledWith(['../']);
    });
  });

When I use breakpoints I see that the OrgService.save() is called when click() is run, and that in the component save() function the that.savedOrg is being set. But when the test gets into the expect() functions comp.savedOrg is at its original value. It is as though there are two component instances.

FWIW, after setting, or not setting, my savedOrg my function then tries to route. I instead get an error:

Error: Expected a spy, but got Object({ data: ScalarObservable({ _isScalar: true, value: Object({ org: Org({ id: 2, [SNIP]

I'm not sure what I'm supposed to do to tell that the "goToParent" routing has been called.

Thanks in advance for help,

Jerome.

score 0 · Answer 1 · answered Mar 23 '17 at 01:56

0

I figured out the "not seen in test spec function" issue. I am missing a line, right after the first whenStable(), which should be:

comp = fixture.componentInstance;

That makes everything sync OK. Now I must figure out how to make route testing work. That's another job.

Jerome.

answered Mar 23 '17 at 01:56

Jerome P Mrozak

1,907
4
21
33

Now I must figure out how to make route testing work. -> Just mock the router http://stackoverflow.com/a/42965863/2587435 – Paul Samsotha Mar 23 '17 at 02:02
In this other link I posted my complete solution including the route testing for the "Save" button. See https://stackoverflow.com/questions/42966123/angular2-how-to-test-a-component-function-that-sometimes-returns-sometimes-rou – Jerome P Mrozak Mar 25 '17 at 21:58

Angular2, jasmine: Component changes not seen in test spec function

1 Answers1