Angular 2 - 具有 Window 依赖性的单元测试服务

Question

我正在尝试测试 Angular2 中的服务。在服务中，我多次使用 window.location 和 window.location.hash 。在阅读了 Stackoverflow 上的其他一些问题后，我决定在服务中注入窗口，而不是直接使用全局窗口。

@Injectable()
export class AuthService {
    constructor(private router: Router, private window: Window) { }
}

为此，我已在以下位置注册了窗口app.module.ts：

providers: [
           AuthService,
           {
               provide: Window,
               useValue: window
           },
           OtherService
 ]

现在在我的测试中，我尝试以与此答案类似的方式模拟窗口：/sf/answers/2602383311/

beforeEach(() => {
routerStub = {
  navigate: jasmine.createSpy('navigate')
};
mockWindow = <any> { location: <any> {hash: 'testhash'}};
TestBed.configureTestingModule({
  providers: [
    AuthService,
    { provide: Router, useValue: routerStub },
    { provide: Window, useValue: mockWindow }
  ]
});

authService = TestBed.get(AuthService);
});

我收到的错误如下：“错误：无法解析 AuthService 的所有参数：([object Object]，？)”

因此，虽然注入模拟路由器工作得很好，但注入模拟窗口似乎不起作用。谁能帮我这个？我做错了什么吗？我无法找到适合我的解决方案。

Answer 1

像这样尝试一下

在您的服务中：

constructor(http: Http, @Inject('Window') private window: Window) {
        super(http);
        console.log(window.location);
    }

在提供服务的模块中，提供如下窗口：

providers: [AuthService,{ provide: 'Window', useValue: window }, OtherService]

然后在你的测试中：

...
mockWindow = { location: {hash: 'testhash'}};
TestBed.configureTestingModule({
  providers: [
    AuthService,
    { provide: Router, useValue: routerStub },
   { provide: 'Window', useValue: mockWindow },

  ]
});
...

但请注意，AoT 有一个未解决的错误 https://github.com/angular/angular/issues/15640