web-dev-qa-db-ja.com

Angular2のrouter.navigateをテストするには？

他の単体テストで_<router-outlet>_メッセージが見つかりませんでしたが、ニースの孤立した例を示すために、特定のアクションのためにユーザーがログインしているかどうかを確認するAuthGuardを作成しました。

これはコードです：

_canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.authService.isLoggedIn()) {
        this.router.navigate(['/login']);
        return false;
    }
    return true;
}
_

次に、このための単体テストを作成します。

これは私がテストを開始する方法です：

_beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            RouterTestingModule.withRoutes([
                {
                    path: 'login',
                    component: DummyComponent
                }
            ])
        ],
        declarations: [
            DummyComponent
        ],
        providers: [
            AuthGuardService,
            {
                provide: AuthService,
                useClass: MockAuthService
            }
        ]
    });
});
_

何もしないDummyComponentを作成しました。今私のテスト。サービスがfalseを返し、this.router.navigate(['/login'])をトリガーするふりをする：

_it('should not let users pass when not logged in', (): void => {
    expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
});
_

これにより、「ロードするプライマリコンセントが見つかりません」という例外がスローされます。明らかにtoThrow()の代わりにtoBe(false)を使用できますが、それはあまり賢明な解決策ではないようです。ここでサービスをテストしているため、_<router-outlet>_タグを配置できるテンプレートはありません。ルーターをモックして独自のナビゲーション機能を作成できますが、RouterTestingModuleのポイントは何ですか？おそらく、ナビゲーションが機能したことを確認したいこともあるでしょう。

unit-testingangularangular2-testing
27
Bart

ルーターをモックして独自のナビゲーション機能を作成できますが、RouterTestingModuleのポイントは何ですか？おそらく、ナビゲーションが機能したことを確認したいこともあるでしょう。

本当の意味はありません。彼が認証ガードの単なる単体テストである場合は、モックを模倣してスパイし、navigateメソッドがlogin引数で呼び出されたことを確認します

let router = {
  navigate: jasmine.createSpy('navigate')
}

{ provide: Router, useValue: router }

expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
expect(router.navigate).toHaveBeenCalledWith(['/login']);

これがnitテストの通常の書き方です。実際の実際のナビゲーションをテストしようとすると、おそらくエンドツーエンドのテストの傘下になります。

48
Paul Samsotha

これは私のために働いた

describe('navigateExample', () => {
    it('navigate Example', () => {
        const routerstub: Router = TestBed.get(Router);
        spyOn(routerstub, 'navigate');
        component.navigateExample();
    });
});
3
alapofa83

ルーターをモックせずにテストする場合は、ルーターをテストに挿入し、そこでナビゲートメソッドを直接スパイできます。 .and.stub()は、呼び出しが何もしないようにします。

describe('something that navigates', () => {
    it('should navigate', inject([Router], (router: Router) => {
      spyOn(router, 'navigate').and.stub();
      expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
      expect(router.navigate).toHaveBeenCalledWith(['/login']);
    }));
  });
2
Chris Putnam