feat(#315): ngMocks.trigger and ngMocks.click

libs/ng-mocks/src/lib/mock-helper/events/mock-helper.click.ts

@@ -0,0 +1,5 @@
+import mockHelperTrigger from './mock-helper.trigger';
+
+export default (selector: any, payload?: object) => {
+  mockHelperTrigger(selector, 'click', payload);
+};

libs/ng-mocks/src/lib/mock-helper/events/mock-helper.event.ts

@@ -0,0 +1,41 @@
+import mockHelperStub from '../mock-helper.stub';
+
+/**
+ * @see https://developer.mozilla.org/de/docs/Web/Events
+ */
+const preventBubble = ['focus', 'blur', 'load', 'unload', 'change', 'reset', 'scroll'];
+
+// istanbul ignore next
+function customEvent(event: string, params?: EventInit) {
+  const initParams = {
+    bubbles: false,
+    cancelable: false,
+    ...params,
+  };
+  const eventObj = document.createEvent('CustomEvent');
+  eventObj.initCustomEvent(event, initParams.bubbles, initParams.cancelable, null);
+
+  return eventObj;
+}
+
+const eventCtor =
+  typeof (Event as any) === 'function'
+    ? (event: string, init?: EventInit): Event => new Event(event, init)
+    : /* istanbul ignore next */ customEvent;
+
+export default (
+  event: string,
+  init?: EventInit,
+  overrides?: Partial<UIEvent | KeyboardEvent | MouseEvent | TouchEvent | Event>,
+): Event => {
+  const eventObj = eventCtor(event, {
+    bubbles: preventBubble.indexOf(event) === -1,
+    cancelable: true,
+    ...init,
+  });
+  if (overrides) {
+    mockHelperStub(eventObj, overrides);
+  }
+
+  return eventObj;
+};

libs/ng-mocks/src/lib/mock-helper/events/mock-helper.trigger.ts

@@ -0,0 +1,56 @@
+import { DebugElement } from '@angular/core';
+
+import mockHelperStub from '../mock-helper.stub';
+
+import mockHelperEvent from './mock-helper.event';
+
+/**
+ * @see https://developer.mozilla.org/de/docs/Web/Events
+ */
+const preventBubble = ['focus', 'blur', 'load', 'unload', 'change', 'reset', 'scroll'];
+
+const toEventObj = (
+  event: string | UIEvent | KeyboardEvent | MouseEvent | TouchEvent | Event,
+  debugElement?: DebugElement | null,
+): Event => {
+  const eventObj =
+    typeof event === 'string'
+      ? mockHelperEvent(event, {
+          bubbles: preventBubble.indexOf(event) === -1,
+          cancelable: true,
+        })
+      : event;
+  if (!eventObj.target && debugElement) {
+    mockHelperStub(eventObj, {
+      target: debugElement.nativeElement,
+    });
+  }
+
+  return eventObj;
+};
+
+export default (
+  debugElement: DebugElement | undefined | null,
+  eventName: string | UIEvent | KeyboardEvent | MouseEvent | TouchEvent | Event,
+  payload?: Partial<UIEvent | KeyboardEvent | MouseEvent | TouchEvent | Event>,
+) => {
+  if (!debugElement) {
+    throw new Error(
+      `Cannot trigger ${typeof eventName === 'string' ? eventName : eventName.type} event undefined element`,
+    );
+  }
+
+  // nothing to emit on disabled elements
+  if (debugElement.nativeElement.disabled) {
+    return;
+  }
+
+  const callback = (event: Event) => {
+    if (payload) {
+      mockHelperStub(event, payload);
+    }
+  };
+  debugElement.nativeElement.addEventListener(eventName, callback, true);
+  debugElement.nativeElement.dispatchEvent(toEventObj(eventName, debugElement));
+  debugElement.nativeElement.removeEventListener(eventName, callback, true);
+};

libs/ng-mocks/src/lib/mock-helper/format/mock-helper.format-html.ts

@@ -8,6 +8,7 @@ const normalizeValue = (html: string | undefined): string =>
     ? html
         .replace(new RegExp('\\s+', 'mg'), ' ')
         .replace(new RegExp('<!--.*?-->', 'mg'), '')
+        .replace(new RegExp('<!--.*?', 'mg'), '')
         .replace(new RegExp('\\s+', 'mg'), ' ')
         .replace(new RegExp('>\\s+<', 'mg'), '><')
     : '';

libs/ng-mocks/src/lib/mock-helper/mock-helper.object.ts

@@ -3,6 +3,9 @@ import mockHelperReveal from './crawl/mock-helper.reveal';
 import mockHelperRevealAll from './crawl/mock-helper.reveal-all';
 import mockHelperChange from './cva/mock-helper.change';
 import mockHelperTouch from './cva/mock-helper.touch';
+import mockHelperClick from './events/mock-helper.click';
+import mockHelperEvent from './events/mock-helper.event';
+import mockHelperTrigger from './events/mock-helper.trigger';
 import mockHelperFormatHtml from './format/mock-helper.format-html';
 import mockHelperFormatText from './format/mock-helper.format-text';
 import mockHelperAutoSpy from './mock-helper.auto-spy';
@@ -34,8 +37,10 @@ import mockHelperFindTemplateRefs from './template-ref/mock-helper.find-template
 export default {
   autoSpy: mockHelperAutoSpy,
   change: mockHelperChange,
+  click: mockHelperClick,
   crawl: mockHelperCrawl,
   defaultMock: mockHelperDefaultMock,
+  event: mockHelperEvent,
   faster: mockHelperFaster,
   find: mockHelperFind,
   findAll: mockHelperFindAll,
@@ -64,4 +69,5 @@ export default {
   stubMember: mockHelperStubMember,
   throwOnConsole: mockHelperThrowOnConsole,
   touch: mockHelperTouch,
+  trigger: mockHelperTrigger,
 };

libs/ng-mocks/src/lib/mock-helper/mock-helper.ts

@@ -30,6 +30,11 @@ export const ngMocks: {
    */
   change(el: DebugNode, value: any): void;
 
+  /**
+   * @see https://ng-mocks.sudo.eu/api/ngMocks/click
+   */
+  click(debugElement: MockedDebugElement | undefined | null, payload?: Partial<MouseEvent>): void;
+
   /**
    * @see https://ng-mocks.sudo.eu/api/ngMocks/crawl
    */
@@ -63,6 +68,15 @@ export const ngMocks: {
    */
   defaultMock<T>(def: AnyType<T>, handler?: (value: T, injector: Injector) => void | Partial<T>): void;
 
+  /**
+   * @see https://ng-mocks.sudo.eu/api/ngMocks/event
+   */
+  event(
+    event: string,
+    init?: EventInit,
+    overrides?: Partial<UIEvent | KeyboardEvent | MouseEvent | TouchEvent | Event>,
+  ): Event;
+
   /**
    * @see https://ng-mocks.sudo.eu/api/ngMocks/faster
    */
@@ -492,4 +506,18 @@ export const ngMocks: {
    * @see https://ng-mocks.sudo.eu/api/ngMocks/touch
    */
   touch(el: DebugNode): void;
+
+  /**
+   * @see https://ng-mocks.sudo.eu/api/ngMocks/trigger
+   */
+  trigger(debugElement: MockedDebugElement | undefined | null, event: Event): void;
+
+  /**
+   * @see https://ng-mocks.sudo.eu/api/ngMocks/trigger
+   */
+  trigger(
+    debugElement: MockedDebugElement | undefined | null,
+    event: string,
+    payload?: Partial<UIEvent | KeyboardEvent | MouseEvent | TouchEvent>,
+  ): void;
 } = mockHelperObject;

tests/ng-mocks-trigger/blur.spec.ts

@@ -0,0 +1,146 @@
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  NgModule,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import {
+  MockBuilder,
+  MockRender,
+  MockService,
+  ngMocks,
+} from 'ng-mocks';
+import { fromEvent, Subscription } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'target',
+  template: `
+    <input
+      [formControl]="control"
+      (blur)="blurTag = $event"
+      #element
+    />
+  `,
+})
+class TargetComponent implements OnDestroy {
+  public blurFromEvent: any;
+  public blurListener: any;
+  public blurTag: any;
+
+  public readonly control = new FormControl(null, {
+    updateOn: 'blur',
+  });
+
+  private subscription?: Subscription;
+
+  @ViewChild('element')
+  public set element(value: ElementRef) {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    this.subscription = fromEvent(value.nativeElement, 'blur')
+      .pipe(
+        tap(event => {
+          this.blurFromEvent = event;
+        }),
+      )
+      .subscribe();
+  }
+
+  @HostListener('blur', ['$event'])
+  public hostListenerClick(event: any) {
+    this.blurListener = event;
+  }
+
+  public ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}
+
+@NgModule({
+  declarations: [TargetComponent],
+  imports: [ReactiveFormsModule],
+})
+class TargetModule {}
+
+describe('ng-mocks-trigger:blur', () => {
+  beforeEach(() => MockBuilder(TargetComponent).keep(TargetModule));
+
+  it('is able to blur for all subscribers via ngMocks.trigger with string', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    expect(component.blurFromEvent).toBeUndefined();
+    expect(component.blurTag).toBeUndefined();
+
+    const debugElement = ngMocks.find('input');
+    ngMocks.trigger(debugElement, 'blur', {
+      x: 666,
+      y: 777,
+    });
+    expect(component.blurTag).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.blurFromEvent).toBe(component.blurTag);
+
+    expect(component.blurListener).toBeUndefined();
+    ngMocks.trigger(fixture.point, 'blur');
+    expect(component.blurListener).toBeDefined();
+  });
+
+  it('is able to blur for all subscribers via ngMocks.trigger with event', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    expect(component.blurFromEvent).toBeUndefined();
+    expect(component.blurTag).toBeUndefined();
+
+    const debugElement = ngMocks.find('input');
+    const event = ngMocks.event(
+      'blur',
+      {
+        bubbles: false,
+      },
+      {
+        x: 666,
+        y: 777,
+      },
+    );
+    ngMocks.trigger(debugElement, event);
+    expect(component.blurTag).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.blurFromEvent).toBe(component.blurTag);
+
+    expect(component.blurListener).toBeUndefined();
+    ngMocks.trigger(fixture.point, event);
+    expect(component.blurListener).toBeDefined();
+  });
+
+  it('behaves right with input and blur', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    expect(component.control.value).toEqual(null);
+
+    const debugElement = ngMocks.find('input');
+    ngMocks.trigger(debugElement, 'input', {
+      target: MockService(HTMLInputElement, {
+        value: '666',
+      }),
+    });
+    expect(component.control.value).toEqual(null);
+
+    ngMocks.trigger(debugElement, 'blur');
+    expect(component.control.value).toEqual('666');
+  });
+});