class Page {
  // getter properties wait to query the DOM until called.
  get buttons()     { return this.queryAll('button'); }
  get saveBtn()     { return this.buttons[0]; }
  get cancelBtn()   { return this.buttons[1]; }
  get nameDisplay() { return this.query('span'); }
  get nameInput()   { return this.query('input'); }

  gotoListSpy: jasmine.Spy;
  navigateSpy:  jasmine.Spy;

  constructor(fixture: ComponentFixture) {
    // get the navigate spy from the injected router spy object
    const routerSpy =  fixture.debugElement.injector.get(Router);
    this.navigateSpy = routerSpy.navigate;

    // spy on component's `gotoList()` method
    const component = fixture.componentInstance;
    this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
  }

  //// query helpers ////
  private query(selector: string): T {
    return fixture.nativeElement.querySelector(selector);
  }

  private queryAll(selector: string): T[] {
    return fixture.nativeElement.querySelectorAll(selector);
  }
}