如何在單元測試角度代碼時模擬窗口導航器對象

Question

我正在使用 jasmine 以 angular 編寫單元測試。 該方法使用 window.navigator 屬性。 該屬性在方法之外定義，如下所示

declare var navigator: any;
navigator = window.navigator;

在要測試的方法中，存在以下要測試的代碼

let locale = navigator.language || navigator.userLanguage || navigator.browserLanguage; 

運行單元測試時，第一個條件navigator.language會自動覆蓋。 我想覆蓋此代碼的所有分支，即，我想在測試時覆蓋所有 OR 條件。 如何在單元測試中模擬導航器？

Answer 1

我創建了一個方法來返回導航器，而不是直接引用它，然后在規范文件中模擬了相同的方法。

在 component.ts 文件中-

// method that returns navigator object
public getNavigatorReference(): any {
    return navigator;
}

// method that uses the above method
private methodThatUsesNavigator(): void {
   let navigatorReference = this.getNavigatorReference();
   let locale = navigatorReference.language || navigatorReference.userLanguage || 
   navigatorReference.browserLanguage;
...
}

在規范文件中 -

Object.defineProperty(navigator, 'userLanguage', {
      get: function () { return 'en'; }
});

Answer 2

我為它創建了一個自定義的 InjectionToken，它可以很容易地通過 Service-tests 中的構造函數傳入：

---

app/tokens/navigator.injection-token.ts ：

import { InjectionToken } from '@angular/core';

export const NavigatorToken = new InjectionToken('navigator-token');

應用程序/app.module.ts ：

import { NavigatorToken } from './tokens/navigator.injection-token.ts';

@NgModule({
  providers: [
    {
      provide: NavigatorToken,
      useValue: navigator,
    }
  ]
})
export class AppModule {}

應用程序/服務/語言服務.ts ：

export class MyService {
  constructor(@Inject(NavigatorToken) private navigatorInstance: typeof navigator) {}

  get browserLanguage(): string {
    return this.navigatorInstance.language;
  }
}

測試：

describe('MyService', () => {
  let service: MyService;

  beforeEach(() => {
    service = new MyService({ language: 'mock-lang' } as any);
  });

  it('should work', () => {
    expect(service.browserLanguage).toBe('mock-lang');
  });
});