如何在单元测试角度代码时模拟窗口导航器对象

Question

I am using jasmine to write a unit test in angular. The method uses the the window.navigator property. The property is defined outside the method like below

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

In the method to be tested the below code is present which is to be tested

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

The first condition navigator.language gets covered automatically while running the unit test. I want to cover all branches of this code ie, I want to cover all OR conditions while testing. How do I mock the navigator in unit test?

Answer 1

I created a method to return the navigator instead of refering it directly and then mocked the same method in the spec file.

In the component.ts file-

// 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;
...
}

In the spec file -

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

Answer 2

I created a custom InjectionToken for it, which can easily be passed in via constructor in Service-tests:

---

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

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

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

app/app.module.ts :

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

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

app/services/language-service.ts :

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

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

Test:

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

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

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