RouterTestingModule: `DebugElement.triggerEventHandler` errors for an anchor tag

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request

Current behavior Given a RouterLink on an anchor tag like this:

<a routerLink="/simple">click me</a>

The test expression debugElement.triggerEventHandler('click', null); throws error Cannot read property 'button' of null

Traced the problem to a line in the generated component.ngfactory.js:

_View_RootComponent0.prototype._handle_click_1_0 = function($event) {
  var self = this;
  self.markPathToRootAsCheckOnce();
  self.debug(1,1,2);
  var pd_0 = (self._RouterLinkWithHref_1_3.onClick($event.button,$event.ctrlKey,$event.metaKey) !== false);
  return (true && pd_0);
};

Notice the reference to $event.button. In practice, the $event is null and wouldn’t be a button anyway.

See repro

Expected behavior Should be able to trigger button.

Workaround is to click the native element:

 // element.triggerEventHandler('click', null); // bug
    element.nativeElement.click(); // works in Chrome, fails in phantom

Angular version: 2.0.0-final

Reproduction of the problem

Paste this as a spec in any test harness and watch it fail:

import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, inject, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

@Component({selector: 'root-cmp', template: `
  <a routerLink="/simple">click me</a>
  <router-outlet></router-outlet>
`})
class RootComponent {}

@Component({selector: 'blank-cmp', template: `<p>blank component</p>`})
class DefaultComponent {}


@Component({selector: 'simple-cmp', template: `simple`})
class FirstPageComponent {}

fdescribe('Integration', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([
          {path: '', component: DefaultComponent},
          {path: 'simple', component: FirstPageComponent}
        ]),
      ],
      declarations: [
        RootComponent,
        DefaultComponent,
        FirstPageComponent
      ]
    });
  });

  // Fails when call triggerEventHandler
  it('should navigate when the link is clicked',
      fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
    const fixture = createRoot(router, RootComponent);
    let element = fixture.debugElement.query(By.css('a'));

    // element.triggerEventHandler('click', null); // bug!
    // element.nativeElement.dispatchEvent(newEvent('click')); // also fails by doing nothing
    element.nativeElement.click(); // works in Chrome, fails in phantom

    advance(fixture);
    expect(location.path()).toEqual('/simple');
  })));

});

function advance(fixture: ComponentFixture<any>): void {
  tick();
  fixture.detectChanges();
}

function createRoot(router: Router, type: any): ComponentFixture<any> {
  const f = TestBed.createComponent(type);
  advance(f);
  router.initialNavigation();
  advance(f);
  return f;
}

function newEvent(eventName: string, bubbles = false, cancelable = false) {
  let evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
  evt.initCustomEvent(eventName, bubbles, cancelable, null);
  return evt;
}

[ishitatsuyuki]

I don’t want to bump, but the docs mentions this usage without describing details of DebugElement. We should fix that for less misperception.

[ilkercat]

(Meanwhile) it is mentioned in the docs: https://angular.io/guide/testing#triggereventhandler

Other handlers are less forgiving. For example, the RouterLink directive expects an object with a button property that identifies which mouse button was pressed. This directive throws an error if the event object doesn’t do this correctly.