Can't create a KeyboardEvent for testing an input component (angular) within Internet Explorer 11

Question

We have our up and running karma test suite for our angular application. All tests are green for chrome. Now I have to fix a test which is failing for IE 11. The exception I get is the following:

TypeError: Object doesn't support this action
       at createEventWithKeycode (http://localhost:9876/_karma_webpack_/main.bundle.js:3574:5)
       at Anonymous function (http://localhost:9876/_karma_webpack_/main.bundle.js:3115:13)
       at Anonymous function (http://localhost:9876/_karma_webpack_/vendor.bundle.js:74994:17)
       at ZoneDelegate.prototype.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:10531:13)
       at ProxyZoneSpec.prototype.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:26806:13)
       at ZoneDelegate.prototype.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:10531:13)
       at Zone.prototype.run (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:10283:17)
       at Anonymous function (http://localhost:9876/_karma_webpack_/vendor.bundle.js:26503:13)

What I understand is that the test case is creating an angular component for testing with the help of angulars TestBed class. With some magic code we get the input component itself and run a keydown event on it:

inputComponent.onKeyDownInput(event);

But when I run the code in IE the exception occurs already when I try to create the event object with the following code:

const event = new KeyboardEvent('keydown', {         //This triggers the exception
    bubbles: true,
    cancelable: true,
    shiftKey: true
  });

The KeyboardEvent Object is defined in a typings file lib.es6.d.ts:

declare var KeyboardEvent: {
    prototype: KeyboardEvent;
    new(typeArg: string, eventInitDict?: KeyboardEventInit): KeyboardEvent;
    readonly DOM_KEY_LOCATION_JOYSTICK: number;
    readonly DOM_KEY_LOCATION_LEFT: number;
    readonly DOM_KEY_LOCATION_MOBILE: number;
    readonly DOM_KEY_LOCATION_NUMPAD: number;
    readonly DOM_KEY_LOCATION_RIGHT: number;
    readonly DOM_KEY_LOCATION_STANDARD: number;
}

Can someone pls give some light on this issue? Pls remember that everything is working with chrome - only IE doesn't behave!

Answer 1

If anybody comes across this, I was able to get the below to work

function createKeyEvent(
    key: Key|number = null, options: {type: 'keyup'|'keydown'|'input', bubbles?: boolean, cancelable?: boolean} = {
      type: 'keyup',
      bubbles: true,
      cancelable: true
    }): KeyboardEvent {
  let eventInitDict: any = {bubbles: options.bubbles, cancelable: options.cancelable};
  if (key) {
    eventInitDict.key = String.fromCharCode(key);
  }
  if (key === Key.Shift) {
    eventInitDict.shiftKey = true;
    key = null;
  }
  let event;
  if (isBrowser(['ie10', 'ie11'])) {
    event = document.createEvent('KeyboardEvent') as KeyboardEvent;
    event.initKeyboardEvent(options.type, options.cancelable, options.bubbles, window, key, 0, 0, 0, 0);
  } else {
    event = new KeyboardEvent(options.type, eventInitDict)
  }
  if (key) {
    Object.defineProperties(event, {which: {get: () => key}});
    Object.defineProperties(event, {keyCode: {get: () => key}});
  }

  return event;
}

Edit: Adding info about the Key object

export enum Key {
  Backspace = 8,
  Tab = 9,
  Enter = 13,
  Shift = 16,
  Escape = 27,
  Space = 32,
  End = 35,
  Home = 36,
  ArrowLeft = 37,
  ArrowUp = 38,
  ArrowRight = 39,
  ArrowDown = 40
}

Edit #2: Adding isBrowser function

export type Browser = 'ie9'|'ie10'|'ie11'|'ie'|'edge'|'chrome'|'safari'|'firefox';

export function getBrowser(ua = window.navigator.userAgent) {
  let browser = 'unknown';

  // IE < 11
  const msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    return 'ie' + parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  // IE 11
  if (ua.indexOf('Trident/') > 0) {
    let rv = ua.indexOf('rv:');
    return 'ie' + parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  // Edge
  if (ua.indexOf('Edge/') > 0) {
    return 'edge';
  }

  // Chrome
  if (ua.indexOf('Chrome/') > 0) {
    return 'chrome';
  }

  // Safari
  if (ua.indexOf('Safari/') > 0) {
    return 'safari';
  }

  // Firefox
  if (ua.indexOf('Firefox/') > 0) {
    return 'firefox';
  }

  if (browser === 'unknown') {
    throw new Error('Browser detection failed for: ' + ua);
  }
}

export function isBrowser(browsers: Browser|Browser[], ua = window.navigator.userAgent) {
  let browsersStr = Array.isArray(browsers) ? (browsers as Browser[]).map(x => x.toString()) : [browsers.toString()];
  let browser = getBrowser(ua);

  if (browsersStr.indexOf('ie') > -1 && browser.startsWith('ie')) {
    return true;
  } else {
    return browsersStr.indexOf(browser) > -1;
  }
}