Question

单击时我的注销按钮应从应用程序中取出外部链接。它按预期工作但单元测试用例不起作用，因为我们无法模拟window.location.href。所以我使用了两个函数来间接调用window.location.href，但仍然无法正常工作，有人可以帮我解决这个问题。 component.ts如下：

doRedirect(hreflink) {
    window.location.href = hreflink;
  }
  logOut() {
    const hrefUrl = window.location.origin + window.location.pathname;
    if ((window.location.origin.indexOf('dev') > -1) ) {
      this.doRedirect('https://test.xxx.com/autho/logout.html?redirectTo=' + hrefUrl);

    }else {
      this.doRedirect('https://prod.xxx.com/autho/logout.html?redirectTo=' + hrefUrl);

}

单元测试用例规格如下： -

it('should call logout method if user clicks on logout link', fakeAsync(() => {
    const comp = TestBed.get(AppComponent);
    spyOn(comp, 'logOut').and.callFake(function(){});
    const fixture = TestBed.createComponent(AppComponent);
    const elem = fixture.nativeElement.querySelector('.logout');
    fixture.detectChanges();
    elem.click();
    expect(comp.logOut).toHaveBeenCalled();
}));

Answer 1

我从您的代码中可以理解的是，您正在测试按钮的onclick行为。您只测试用户是否点击了按钮，应该调用注销方法。您不需要测试按钮的onclick事件。您只需要测试代码。如果您打算参加考试，那么请告诉我。

但是，如果您想让您的测试工作，您可以将其更改为：

it('should call logout method if user clicks on logout link', fakeAsync(() => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.debugElement.componentInstance;
  spyOn(app, 'logOut');
  const elem = fixture.nativeElement.querySelector('.logout');
  elem.click();
  expect(app.logOut).toHaveBeenCalled();

}））;

然而正如我之前所说，没有必要写这个测试。您可能测试的一件事是检查用户是否会通过查看原点重定向到正确的页面。这将是一个更好的测试。

顺便说一下，我不认为你需要将所有东西都包装在fakeAsync中，因为你没有异步测试任何东西。

更新：如果要测试功能，可以将其放在将返回所需导航字符串的方法中。然后你可以简单地测试一下。

在您的组件中：

 getRedirectString = ((origin: string, hrefUrl: string):string => 
    (origin.indexOf('dev') > -1 ? 
      'https://test.xxx.com/autho/logout.html?redirectTo=':
      'https://prod.xxx.com/autho/logout.html?redirectTo='
    ) + hrefUrl);

然后在你的测试中：

it('when use is in dev, getRedirectString should return the expected navigation string', () => {
    expect(this.app.getRedirectString("xxdevxx")).toContain('test');
  })
  it('when use is in not dev, getRedirectString should return the expected navigation string', () => {
    expect(this.app.getRedirectString("xxxx")).toContain('prod');
  })

window.location.href的angular4单元测试重定向到外部链接不起作用

1 个答案: