TypeScript testing.beforeEachProviders函數代碼示例

describe('Home', () => {
  // provide our implementations or mocks to the dependency injector
  beforeEachProviders(() => [
    BaseRequestOptions,
    MockBackend,
    provide(Http, {
      useFactory: function(backend, defaultOptions) {
        return new Http(backend, defaultOptions);
      },
      deps: [MockBackend, BaseRequestOptions]
    }),

    AppState,
    Title,
    Home
  ]);

  it('should have default data', inject([ Home ], (home) => {
    expect(home.localState).toEqual({ value: '' });
  }));

  it('should have a title', inject([ Home ], (home) => {
    expect(!!home.title).toEqual(true);
  }));

  it('should log ngOnInit', inject([ Home ], (home) => {
    spyOn(console, 'log');
    expect(console.log).not.toHaveBeenCalled();

    home.ngOnInit();
    expect(console.log).toHaveBeenCalled();
  }));

});

describe('Dashboard Component', () => {
  setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
  let tcb: TestComponentBuilder;

  beforeEachProviders(() => [
    TestComponentBuilder,
    HTTP_PROVIDERS,
    ROUTER_FAKE_PROVIDERS,
    provide(Location, {useClass: SpyLocation}),
    provide(DirectiveResolver, {useClass: MockDirectiveResolver}),
    provide(ViewResolver, {useClass: MockViewResolver}),
    HeroService,
    AppComponent,
  ]);

  beforeEach(inject([TestComponentBuilder], (tcb_) => {
    tcb = tcb_;
  }));

  it('should render the title', (done) => {
    return tcb.createAsync(DashboardComponent)
      .then(fixture => {
        let component = fixture.componentInstance;
        component.title = 'Top_heroes';
        fixture.detectChanges();
        let element = fixture.nativeElement;
        expect(element.querySelector('h3').innerText).toContain('Top_heroes');
        done();
      });
  });
});

describe('Login Component', () => {
  setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
  let tcb: TestComponentBuilder;

  beforeEachProviders(() => [
    TestComponentBuilder,
    provide(DirectiveResolver, {useClass: MockDirectiveResolver}),
    provide(ViewResolver, {useClass: MockViewResolver}),
    LoginComponent,
  ]);

  beforeEach(inject([TestComponentBuilder], (tcb_) => {
    tcb = tcb_;
  }));

  it('should render form', (done) => {
    tcb.createAsync(LoginComponent)
      .then((fixture) => {
        let element = fixture.nativeElement;
        fixture.detectChanges();
        let form = element.querySelector('form');
        expect(form).toBeTruthy();
        expect(form.querySelector('input[name="username"]')).toBeTruthy();
        expect(form.querySelector('input[name="password"]')).toBeTruthy();
        done();
      });
  });
});

describe('API Service', () => {

  beforeEachProviders(() => [API]);


  it('should ...', inject([API], (service: API) => {

  }));

});

  describe('OrderService', () => {

    beforeEachProviders(() => [{ provide: OrderService, useFactory: () => new OrderService(false) },
      DateFormatter,
      DatePipe
    ]);

    it('should fetch our data', inject([OrderService], (orderService: OrderService) => {
      expect(orderService.getData().length).toBe(2);
    }));

    it('should fetch our data', inject([DateFormatter], (dateFormatService: DateFormatter) => {
      expect(dateFormatService.x).toBe(3);
    }));
  });

describe('About', () => {
  // provide our implementations or mocks to the dependency injector
  beforeEachProviders(() => [
    About
  ]);

  it('should log ngOnInit', inject([ About ], (about) => {
    spyOn(console, 'log');
    expect(console.log).not.toHaveBeenCalled();

    about.ngOnInit();
    expect(console.log).toHaveBeenCalled();
  }));

});

describe('Router', () => {
  let location: Location;
  let router: Router;

  beforeEachProviders(() => [
    RouteRegistry,
    provide(Location, {useClass: SpyLocation}),
    provide(Router, {useClass: RootRouter}),
    provide(ROUTER_PRIMARY_COMPONENT, {useValue: MyApp})
  ]);

  beforeEach(inject([Router, Location], (_router, _location) => {
    location = _location;
    router = _router;
  }));

  it('should be able to navigate to Home', done => {
    router.navigate(['/Home']).then(() => {
      expect(location.path()).toBe('');
      done();
    }).catch(e => done.fail(e));
  });

  it('should be able to navigate to About by route name', done => {
    router.navigate(['/About']).then(() => {
      expect(location.path()).toBe('/about');
      done();
    }).catch(e => done.fail(e));
  });

  it('should be able to navigate to Weather by URL', done => {
    router.navigateByUrl('/about').then(() => {
      expect(location.path()).toBe('/about');
      done();
    }).catch(e => done.fail(e));
  });
});

describe('Http-HeroService (mockBackend)', () => {

  beforeEachProviders(() => [
    HTTP_PROVIDERS,
    provide(XHRBackend, {useClass: MockBackend})
  ]);

  it('can instantiate service when inject service',
    withProviders(() => [HeroService])
      .inject([HeroService], (service: HeroService) => {
        expect(service instanceof HeroService).toBe(true);
  }));


  it('can instantiate service with "new"', inject([Http], (http: Http) => {
    expect(http).not.toBeNull('http should be provided');
    let service = new HeroService(http);
    expect(service instanceof HeroService).toBe(true, 'new service should be ok');
  }));


  it('can provide the mockBackend as XHRBackend',
    inject([XHRBackend], (backend: MockBackend) => {
      expect(backend).not.toBeNull('backend should be provided');
  }));

  describe('when getHeroes', () => {
      let backend: MockBackend;
      let service: HeroService;
      let fakeHeroes: HeroData[];
      let response: Response;


      beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
        backend = be;
        service = new HeroService(http);
        fakeHeroes = makeHeroData();
        let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
        response = new Response(options);
      }));

      it('should have expected fake heroes (then)', async(inject([], () => {
        backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));

        service.getHeroes().toPromise()
        // .then(() => Promise.reject('deliberate'))
          .then(heroes => {
            expect(heroes.length).toEqual(fakeHeroes.length,
              'should have expected no. of heroes');
          });
      })));

      it('should have expected fake heroes (Observable.do)', async(inject([], () => {
        backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));

        service.getHeroes()
          .do(heroes => {
            expect(heroes.length).toEqual(fakeHeroes.length,
              'should have expected no. of heroes');
          })
          .toPromise();
      })));


      it('should be OK returning no heroes', async(inject([], () => {
        let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
        backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));

        service.getHeroes()
          .do(heroes => {
            expect(heroes.length).toEqual(0, 'should have no heroes');
          })
          .toPromise();
      })));

      it('should treat 404 as an Observable error', async(inject([], () => {
        let resp = new Response(new ResponseOptions({status: 404}));
        backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));

        service.getHeroes()
          .do(heroes => {
            fail('should not respond with heroes');
          })
          .catch(err => {
            expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
            return Observable.of(null); // failure is the expected test result
          })
          .toPromise();
      })));
  });
});

  describe('using TCB', () => {
    let comp: DashboardComponent;
    let mockHeroService: MockHeroService;

    beforeEachProviders(() => {
      mockHeroService = new MockHeroService();
      return [
        provide(Router,      {useClass: MockRouter}),
        provide(MockRouter,  {useExisting: Router}),
        provide(HeroService, {useValue: mockHeroService})
      ];
    });

    it('can instantiate it',
      async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(DashboardComponent);
    })));

    it('should NOT have heroes before OnInit',
      async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(DashboardComponent).then(fixture => {
        comp = fixture.debugElement.componentInstance;

        expect(comp.heroes.length).toEqual(0,
          'should not have heroes before OnInit');
      });
    })));

    it('should NOT have heroes immediately after OnInit',
      async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(DashboardComponent).then(fixture => {
        comp = fixture.debugElement.componentInstance;
        fixture.detectChanges(); // runs initial lifecycle hooks

        expect(comp.heroes.length).toEqual(0,
          'should not have heroes until service promise resolves');
      });
    })));

    it('should HAVE heroes after HeroService gets them',
      async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {

      tcb.createAsync(DashboardComponent).then(fixture => {
        comp = fixture.debugElement.componentInstance;
        fixture.detectChanges();           // runs ngOnInit -> getHeroes

        mockHeroService.lastPromise // the one from getHeroes
          .then(() => {
            expect(comp.heroes.length).toBeGreaterThan(0,
              'should have heroes after service promise resolves');
          });

      });
    })));

    it('should DISPLAY heroes after HeroService gets them',
      async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {

      tcb.createAsync(DashboardComponent).then(fixture => {
        comp = fixture.debugElement.componentInstance;
        fixture.detectChanges();           // runs ngOnInit -> getHeroes

        mockHeroService.lastPromise // the one from getHeroes
          .then(() => {

            // Find and examine the displayed heroes
            fixture.detectChanges();      // update bindings
            let heroNames = fixture.debugElement.queryAll(By.css('h4'));

            expect(heroNames.length).toEqual(4, 'should display 4 heroes');

            // the 4th displayed hero should be the 5th mock hero
            expect(heroNames[3].nativeElement)
              .toHaveText(mockHeroService.mockHeroes[4].name);
          });

      });
    })));

    it('should tell ROUTER to navigate by hero id',
      async(inject([TestComponentBuilder, Router],
      (tcb: TestComponentBuilder, router: MockRouter) => {

      let spy = spyOn(router, 'navigate').and.callThrough();

      tcb.createAsync(DashboardComponent).then(fixture => {
        let hero: Hero = {id: 42, name: 'Abbracadabra' };
        comp = fixture.debugElement.componentInstance;
        comp.gotoDetail(hero);

        let linkParams = spy.calls.mostRecent().args[0];
        expect(linkParams[0]).toEqual('HeroDetail', 'should nav to "HeroDetail"');
        expect(linkParams[1].id).toEqual(hero.id, 'should nav to fake hero\'s id');

      });
    })));
  });