Jasmine.js Testing - spy on window.navigator.userAgent

问题

I need to find the way to change userAgent value. I tried to spyOn the window.navigator.userAgent. But that's not helping.

JS:

@Injectable()
export class DetectBrowserService {
  browserIE: boolean;
  constructor() {
    this.browserIE = this.detectExplorer();
  }

  public detectExplorer() {
    const brows = window.navigator.userAgent;
    const msie = brows.indexOf('MSIE ');
    if (msie > 0) {
      // IE 10 or older => return version number
      return true;
    }
  }
}

Spec:

it('should test window.navigator.userAgent', () => {
  const wind = jasmine.createSpy('window.navigator.userAgent');
  wind.and.returnValue('1111');
  detectBrowserService = TestBed.get(DetectBrowserService);
  console.log(window.navigator.userAgent);
});

I was expecting 1111, but got the real info about my browser.

回答1:

userAgent is a read-only/constant property on window.navigator. And jasmine.createSpy is generally used to create spies on methods and NOT properties.

Now, I tried directly doing window.navigator.userAgent = '1111'; as window.navigator would simply be accessible in my tests. But I was getting an error saying:

[ts] Cannot assign to 'userAgent' because it is a constant or a read-only property. (property) NavigatorID.userAgent: string

So the only option was to use the good old __defineGetter__. So that's what I did here:

it('should test window.navigator.userAgent', () => {
  window.navigator['__defineGetter__']('userAgent', function(){
    return '1111' // Return whatever you want here
  });
  detectBrowserService = TestBed.get(DetectBrowserService);
  console.log(window.navigator.userAgent);
});

And it works:

Hope this helps!

回答2:

I realize this is old, but to expand on SiddAjmera's answer, here's what I did to test a safari-specific behavior. At the end of the test, it also resets the userAgent so other tests aren't affected (as Pieter De Bie requested in a comment).

it('should redirect if the user is on safari', () => {
  const originalUserAgent = navigator.userAgent;

  fixture = TestBed.createComponent(ComponentToTest);
  component = fixture.componentInstance;

  navigator['__defineGetter__']('userAgent', () => {
    return 'safari';
  });
  fixture.detectChanges();

  component.methodToTest();

  expect(component['window'].location.href).toBe('redirecturl.com');

  // unset the userAgent after test
  navigator['__defineGetter__']('userAgent', () => {
    return originalUserAgent;
  });
});

回答3:

I got a simple solution using Jasmine apis itself.

spyOnProperty(window.navigator, 'userAgent').and.returnValue('Mozilla');

modify the spy in each test as per your requirement.

Not sure from which Jasmine version this API is present, but v3.4 supports this API

来源：https://stackoverflow.com/questions/46806185/jasmine-js-testing-spy-on-window-navigator-useragent

标签

angular

unit-testing

jasmine

karma-jasmine

spyon