带路由器的角度 2 测试 [英] angular 2 testing w/router

问题描述

我有一个组件，当用户登录它时，它会路由到一个名为 /dashboard 的 url，我真的很难弄清楚为什么我会收到以下错误.

I have a component and when a user logs in it routes to a url called /dashboard I am really struggling figuring out why I am getting the following error.

cannot read property 'args' of undefined

我一直在关注关于使用路由器进行测试的官方文档，这里是 https://angular.io/docs/ts/latest/guide/testing.html#!#routed-component但它似乎没有帮助.我的一半问题是我不太了解文档中的所有代码.这是我对路线的单元测试

I have been following the official docs on testing with router found here https://angular.io/docs/ts/latest/guide/testing.html#!#routed-component but it doesnt seem to help. Half my problem is I dont quite understand all the code in the doc. Here is my unit test for the route

 beforeEach(async(()=>{

      class AuthStub{
        private loggedin: boolean = false;
            login(){
              return this.loggedin = true;

            }
      };

      class RouterStub{
        navigateByUrl(url:string){return url;}
      }

    TestBed.configureTestingModule({
      declarations: [ HomePageContentComponent ],
      providers:[
        {provide: Auth, useClass:AuthStub},
        {provide: Router, useClass: RouterStub}
        ]
    })
    .compileComponents()
  }));

  beforeEach(()=>{

      fixture = TestBed.createComponent(HomePageContentComponent);
      comp = fixture.componentInstance;

      de = fixture.debugElement.query(By.css('.loginbtn'));
      el = de.nativeElement;
      fixture.detectChanges();

    });

    it('Should log in and navigate to dashboard', inject([Router],(router:Router)=>{

      const spy = spyOn(router, 'navigateByUrl');

      el.click();

      const navArgs = spy.calls.first().args[0];

      expect(navArgs).toBe('/dashboard');

    }))      
}); 

所以我的问题是这行代码在做什么...

So my question is what is this line of code doing...

const navArgs = spy.calls.first().args[0];

我该如何解决我的问题?

and how can I fix my problem?

已添加服务

@Injectable()
export class Auth { 
    lock = new Auth0Lock('fakefakefakefakefake', 'fake.auth0.com', {
         additionalSignUpFields: [{
            name: "address",                              
            placeholder: "enter your address"
        }],
        theme: {
            primaryColor:"#b3b3b3",
        },
         languageDictionary: {
            title: "FAKE"
        }
    });

    userProfile: any;

    constructor(private router: Router) {
        this.userProfile = JSON.parse(localStorage.getItem('profile'));

        this.lock.on("authenticated", (authResult) => {
            localStorage.setItem('id_token', authResult.idToken);

            this.lock.getProfile(authResult.idToken, (error, profile) => {
                if (error) {

                    alert(error);
                    return;
                }

                profile.user_metadata = profile.user_metadata || {};
                localStorage.setItem('profile', JSON.stringify(profile));
                this.userProfile = profile;
            });
            this.router.navigate(['/dashboard']);
        });
    }

    public login(){
        this.lock.show();

    };

    public authenticated() {
        return tokenNotExpired();
    };

    public logout() {
        localStorage.removeItem('id_token');
        localStorage.removeItem('profile');
        this.router.navigate(['/logout']);
    };
}

推荐答案

假设您有以下组件:

@Component({
  selector: 'home-comp',
  template: `<button (click)="login()" class="loginbtn">Login</button>
  `
})
export class HomePageContentComponent {
  constructor(private auth: Auth, private router: Router) { }

  login() {
    this.router.navigateByUrl(`/dashboard`);
  }
}

在用模拟版本替换真实的 Router 之后的测试中:

In your test after replacing real Router with mocked version:

{ provide: Router, useClass: RouterStub }

在你的情况下:

it('Should log in and navigate to dashboard', inject([Router],(router:Router)=>{

router 将是 RouterStub 的实例.

然后你监视 navigateByUrl 方法来观察它被调用了多少次

then you spy on for navigateByUrl method to watching how many times it was called

const spy = spyOn(router, 'navigateByUrl');

所以当你点击 .loginbtn 按钮时 router.navigateByUrl 正在运行(见上面的组件)并且 spy 增加 calls 带有一些信息(例如，所谓的参数)

so when you clicking on the .loginbtn button router.navigateByUrl is running (see above component) and spy incrementes calls with some information(for example, what was called the argument)

最后在这一行

const navArgs = spy.calls.first().args[0];

预计您的 router.navigateByUrl 方法至少被调用一次，然后从第一次调用中获取传递的参数.

is expected that your router.navigateByUrl method was called at least once then is getting passed argument from the first call.

这是有效的现场示例

Here is working Live Example

可能你在某个地方出错了，并且你的 router.navigateByUrl 没有被执行.

Possible you went wrong somewhere and your router.navigateByUrl isn't executed.

这篇关于带路由器的角度 2 测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！