2017-12-20 2 views
0

I'am 따라서 응용 프로그램이 http://localhost:port/login 다음 라우터 설정에 따라 redirectTo를 사용하여 즉시 시작 루트 구성 요소 app.component.html HTML 그냥 <router-outlet></router-outlet>경로를 테스트 할 때 tick() 함수를 사용하는 방법은 무엇입니까?

을 포함 app.component.ts에 대한 단위 테스트를 실행하려고 :

`export const appRoutes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full'}, 
    { path: 'login', component: LoginComponent}, 
    { path: 'add', component: RegisterComponent}, 
    .... 
]; 
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);` 

내 문제는 내가 실행했을 때입니다. app.component.spec.ts에서 다음과 같은 방법을 사용하여 /과 :

it('navigate to "" redirects you to /login', fakeAsync(() => { 
     router.navigate([""]); 
     tick(); 
     expect(location.path()).toBe("/login"); 
    }) 
); 

테스트가 실패하고 보여줍니다 Expected '' to be '/login'하지만이 방법/구문을 사용할 때 :

it("root should be able to navigate to `/login`", fakeAsync(() => { 
     fixture.detectChanges(); 
     // initial navigation 
     router.navigate([""]).then(() => { 
      expect(router.url).toEqual("/login"); 
     }); 
    }) 
); 

다음 테스트를 통과 .

그래서이 경우 정확하게 tick() 기능 등을 사용하면 정확히 무엇이 잘못되었는지 알 수 없습니다.

가장 좋은 방법은 무엇입니까? 첫 번째 방법을 사용하여 실패한 테스트를 수정하거나 두 번째 기능이 내 테스트에 충분합니까?

두 번째 대신 사용할 수있는 첫 번째 방법은 무엇을 변경해야합니까?

이상의 입력을 보려면 여기를 사용하여 각도 및 각-CLI 버전 I'am은 다음과 같습니다

Angular CLI: 1.5.0 
Node: 8.0.0 
OS: darwin x64 
Angular: 5.0.3 
... animations, common, compiler, compiler-cli, core, forms 
... http, language-service, platform-browser 
... platform-browser-dynamic, router 

@angular/cdk: 5.0.0-rc.2 
@angular/cli: 1.5.0 
@angular/material: 5.0.0-rc.2 
@angular-devkit/build-optimizer: 0.0.33 
@angular-devkit/core: 0.0.21 
@angular-devkit/schematics: 0.0.37 
@ngtools/json-schema: 1.1.0 
@ngtools/webpack: 1.8.0 
@schematics/angular: 0.1.7 
typescript: 2.4.2 
webpack: 3.8.1 
+0

두 번째 방법은 일반적으로 구성 요소 테스트를 어떻게 수행했는지입니다. 어떤 앵글과 ng-cli 버전을 사용합니까? – Zlatko

+0

@Zlatko : 내 질문을 업데이트했습니다 ... 각도 및 각도 cli 버전에 관한 정보를 추가했습니다. –

답변

2

문제가 약속이 경우에 해결 될 때까지 tick 기능을 기다리지 않습니다이다. 약속을 되 돌릴 때까지 기다리려면 tick(2000) 이상의 값을 사용할 수 있지만 정확하지는 않습니다.

두 번째 기능은 url이 라우터를 탐색하는 즉시 약속을 해결합니다. 그래서 당신은 맹목적으로 약속까지 기다리는 시간 제한 값을 설정할 필요가 없습니다. 두 번째 방법은 더 정확합니다.

+0

그건 사실입니다 ... 약속을 해결하는 것과 관련이 있지만, tick (2000)을 사용하는 힌트는 실제로 도움이되지 않았습니다 ... 나는 심지어 tick (10000)을 사용했습니다. 도움이되었던 것은'then()'함수를 추가하고 첫 번째 함수를 다음과 같이 변경하는 것입니다 : 'fellowAsync() => {fixture.detectChanges(); router.navigate (("")). (() => {tick(); expect (location.path()) toBe ("/ login");});}))'. 이 방법으로 테스트가 통과됩니다. –

+0

나는'then'이 이미 사용하고 있기 때문에 tick 기능을 사용할 필요가 없다고 생각한다. –

+1

사실이다. 나는 동의한다. 두 번째 방법으로 문제를 해결하고 첫 번째 방법보다 명확합니다. –

관련 문제