javascript - Angular2, testing and resolved data: How to test ngOnInit? - Stack Overflow

admin管理员组

文章数量:1431726

I'm working through the Angular2 testing guide and wish to write a test for the ngOnInit() function. The one from the Routing section of the programming guide has this format:

let org: Org = null;

ngOnInit(): void {
  let that = this;

  this.route.data
    .subscribe((data: { org: Org }) => {
      that = data;
    });
}

This is fulfilled through a resolver, like:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Org> {
  let id = this.authService.userId;

  return thisService
    .getOrg(id)
    .map(
      (org: Org) : Org => {

        if(org) {
          return org;
        } else { 
          // If  the Org isn't available then the edit page isn't appropriate.
          this.router.navigate(['/provider/home']);
          return null;
        }
     })
    .first();
}

The code works OK, but I'm not sure how to write a test for ngOnInit. The examples available to me assume that an embedded OrgService can be replaced by a MockOrgService. However, all I have is a resolver.

I'll eventually figure out how to test the resolver on its own. Are there any useful tests I can do with a resolver-based ngOnInit?

I'm working through the Angular2 testing guide and wish to write a test for the ngOnInit() function. The one from the Routing section of the programming guide has this format:

let org: Org = null;

ngOnInit(): void {
  let that = this;

  this.route.data
    .subscribe((data: { org: Org }) => {
      that.org = data.org;
    });
}

This is fulfilled through a resolver, like:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Org> {
  let id = this.authService.user.orgId;

  return this.orgService
    .getOrg(id)
    .map(
      (org: Org) : Org => {

        if(org) {
          return org;
        } else { 
          // If  the Org isn't available then the edit page isn't appropriate.
          this.router.navigate(['/provider/home']);
          return null;
        }
     })
    .first();
}

The code works OK, but I'm not sure how to write a test for ngOnInit. The examples available to me assume that an embedded OrgService can be replaced by a MockOrgService. However, all I have is a resolver.

I'll eventually figure out how to test the resolver on its own. Are there any useful tests I can do with a resolver-based ngOnInit?

• javascript
• angular
• jasmine
• karma-runner
• resolver

Share Improve this question Follow edited Jun 30, 2020 at 14:28 ruffin 17.4k1010 gold badges9595 silver badges149149 bronze badges asked Mar 7, 2017 at 18:53 Jerome P MrozakJerome P Mrozak 1,95744 gold badges2121 silver badges3434 bronze badges 2

• I think testing ngOnInit should be the Angular team's responsibility, you should just need to test the methods that you are calling from it – Gerard Simpson Commented Aug 9, 2017 at 6:50
• Hi. How did you unit test the Resolve class on its own? I'm looking to do that, just wondering what your solution was – Drenai Commented Apr 16, 2018 at 14:44

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 46

What is the behavior or the ngOnInit method? All it does is assign the value of the org when the route data is resolved. So that's all you really need to test.

let routeStub;

beforeEach(() => {
  routeStub = {
    data: null
  }

  TestBed.configureTestingModule({
    providers: [
      { provide: ActivatedRoute, useValue: routeStub }  
    ]
  })
})

it('should assign org when route is resolved', async(() => {
  let org = new Org()
  routeStub.data = Observable.of(org)

  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(component.org).toEqual(org)
  })
}))

I was trying to test ngOnInit() for a component, and unfortunately the accepted answer didn't work for me. However, this did:

describe('your test', () => {
  beforeEach(async() => {
    // set up your component as necessary

    component.ngOnInit();

    await fixture.whenStable();
  });

  it('should verify your test', () => {
    // run your expectation
  });
});

本文标签： javascriptAngular2testing and resolved data How to test ngOnInitStack Overflow