我如何單元測試，在Angular2

Question

我有這個函數調用window.location.href功能需要測試：

login(): void { 
    this.userService.setSessionAndDateOnlogin(); 
    this.loginService.getLogin() 
     .subscribe(
     octopusUrl => window.location.href = octopusUrl); 
    } 

我用window.location.href導航到外部URL。

這是我的測試：

it('login function should call the setSessionAndDateOnLogin function from the userservice and\ 
    subscribe to the getLogin function of the loginService.', 
    fakeAsync(
     inject(
     [LoginComponent, LoginService, UserService], 
     (loginComponent: LoginComponent, loginService: LoginService, userService: UserService) => { 
      spyOn(userService, 'setSessionAndDateOnlogin'); 
      loginComponent.login(); 
      expect(userService.setSessionAndDateOnlogin).toHaveBeenCalled(); 
     }) 
    ) 
); 

當我運行這個測試，我得到以下錯誤：

Some of your tests did a full page reload!

於是，我就嘲笑窗口對象：

import { window } from '@angular/platform-browser/src/facade/browser'; 
... 
class MockWindow { 
    location: { 
    href: '' 
    }; 
} 
... 
beforeEach(() => addProviders([ 
    ... 
    { provide: window, useClass: MockWindow } 
    ])); 

這沒有改變，錯誤依然存在。

有沒有人有這個問題的解決方案？

Answer 1

窗口是一個接口，不能被注入。你應該在測試

describe('SomeServiceWithWindowDependency',() => { 
    beforeEach(() => { 
    let mockWindow: any = { 
     location: { 
     hostname: '' 
     } 
    }; 
    TestBed.configureTestingModule({ 
     providers: [ 
     {provide: WindowToken, useValue: mockWindow}, 
     {provide: SomeServiceWithWindowDependencyToken, useClass: SomeServiceWithWindowDependency} 
     ] 
    }); 
    }); 
    it('should do something', inject([SomeServiceWithWindowDependencyToken, WindowToken], (tested: SomeServiceWithWindowDependency, window: Window) => { 
    window.location.hostname = 'localhost'; 
    expect(tested.someMethod()).toBe('result'); 
    })); 
}); 

使用OpaqueToken

import {Injectable, OpaqueToken, Inject} from '@angular/core'; 

export const WindowToken = new OpaqueToken('Window'); 
export const SomeServiceWithWindowDependencyToken = new OpaqueToken('SomeServiceWithWindowDependency'); 

export function _window(): Window { 
    return window; 
} 


export class SomeServiceWithWindowDependency { 
    private window: Window; 

    constructor(@Inject(WindowToken) window: Window) { 
    this.window = window; 
    } 
} 

然後要記住，配置應用模塊使用真正的窗口對象

@NgModule({ 
declarations: [ 
    ... 
    ], 
    imports: [ 
    ... 
    ], 
    providers: [ 
    ... 
    {provide: WindowToken, useFactory: _window}, 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
}