Angular 2 - 具有 Window 依赖项的单元测试服务答案

【问题标题】：Angular 2 - Unit testing service with Window dependencyAngular 2 - 具有 Window 依赖项的单元测试服务
【发布时间】：2017-11-30 12:23:11
【问题描述】：

我正在尝试在 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
 ]

现在在我的测试中，我正在尝试以与此答案类似的方式模拟窗口：https://stackoverflow.com/a/37176904

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);
});

我得到的错误如下：'Error: Can't resolve all parameters for AuthService: ([object Object], ?)'

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

【问题讨论】：

因为测试不在浏览器中运行，所以 window 对象将是未定义的。创建一个“Window”类来包装您的窗口功能并检查窗口对象是否存在。如果存在，则返回，否则返回模拟窗口。
我不能像我在上面的代码中那样提供一个模拟窗口吗？

标签： angular unit-testing dependency-injection karma-jasmine

【解决方案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

【讨论】：