From 4fe32724c64231eb08bd6c553b588a7de726e02d Mon Sep 17 00:00:00 2001
From: MG <m@sudo.eu>
Date: Sat, 27 Mar 2021 22:18:37 +0100
Subject: [PATCH] feat(#315): ngMocks.trigger and ngMocks.click

---
 .github/workflows/ci.yaml                     | 140 ++++++++---------
 .../mock-helper/events/mock-helper.click.ts   |   5 +
 .../mock-helper/events/mock-helper.event.ts   |  41 +++++
 .../mock-helper/events/mock-helper.trigger.ts |  56 +++++++
 .../format/mock-helper.format-html.ts         |   1 +
 .../src/lib/mock-helper/mock-helper.object.ts |   6 +
 .../src/lib/mock-helper/mock-helper.ts        |  28 ++++
 tests/ng-mocks-trigger/blur.spec.ts           | 146 ++++++++++++++++++
 tests/ng-mocks-trigger/click.spec.ts          | 135 ++++++++++++++++
 tests/ng-mocks-trigger/focus.spec.ts          | 121 +++++++++++++++
 tests/ng-mocks-trigger/test.spec.ts           |  90 +++++++++++
 11 files changed, 699 insertions(+), 70 deletions(-)
 create mode 100644 libs/ng-mocks/src/lib/mock-helper/events/mock-helper.click.ts
 create mode 100644 libs/ng-mocks/src/lib/mock-helper/events/mock-helper.event.ts
 create mode 100644 libs/ng-mocks/src/lib/mock-helper/events/mock-helper.trigger.ts
 create mode 100644 tests/ng-mocks-trigger/blur.spec.ts
 create mode 100644 tests/ng-mocks-trigger/click.spec.ts
 create mode 100644 tests/ng-mocks-trigger/focus.spec.ts
 create mode 100644 tests/ng-mocks-trigger/test.spec.ts

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 78249f9962..09274ee91d 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -19,7 +19,7 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./node_modules
+          path: node_modules
           key: ${{ runner.os }}-root-v1-${{ hashFiles('./package-lock.json') }}
 
       - name: Install dependencies
@@ -66,7 +66,7 @@ jobs:
         uses: actions/upload-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Artifacts
         uses: actions/upload-artifact@v2
@@ -112,7 +112,7 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./node_modules
+          path: node_modules
           key: ${{ runner.os }}-e2e-v1-${{ hashFiles('./package-lock.json') }}
 
       - name: Install dependencies
@@ -140,7 +140,7 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./node_modules
+          path: node_modules
           key: ${{ runner.os }}-root-v1-${{ hashFiles('./package-lock.json') }}
 
       - name: Install dependencies
@@ -181,7 +181,7 @@ jobs:
         id: a5es5
         uses: actions/cache@v2
         with:
-          path: ./e2e/a5es5/node_modules
+          path: e2e/a5es5/node_modules
           key: ${{ runner.os }}-a5es5-v1-${{ hashFiles('./e2e/a5es5/package-lock.json') }}
 
       - name: Install A5 es5 dependencies
@@ -192,7 +192,7 @@ jobs:
         id: a5es2015
         uses: actions/cache@v2
         with:
-          path: ./e2e/a5es2015/node_modules
+          path: e2e/a5es2015/node_modules
           key: ${{ runner.os }}-a5es2015-v1-${{ hashFiles('./e2e/a5es2015/package-lock.json') }}
 
       - name: Install A5 es2015 dependencies
@@ -203,7 +203,7 @@ jobs:
         id: a6
         uses: actions/cache@v2
         with:
-          path: ./e2e/a6/node_modules
+          path: e2e/a6/node_modules
           key: ${{ runner.os }}-a6-v1-${{ hashFiles('./e2e/a6/package-lock.json') }}
 
       - name: Install A6 dependencies
@@ -214,7 +214,7 @@ jobs:
         id: a7
         uses: actions/cache@v2
         with:
-          path: ./e2e/a7/node_modules
+          path: e2e/a7/node_modules
           key: ${{ runner.os }}-a7-v1-${{ hashFiles('./e2e/a7/package-lock.json') }}
 
       - name: Install A7 dependencies
@@ -225,7 +225,7 @@ jobs:
         id: a8
         uses: actions/cache@v2
         with:
-          path: ./e2e/a8/node_modules
+          path: e2e/a8/node_modules
           key: ${{ runner.os }}-a8-v1-${{ hashFiles('./e2e/a8/package-lock.json') }}
 
       - name: Install A8 dependencies
@@ -236,7 +236,7 @@ jobs:
         id: a9
         uses: actions/cache@v2
         with:
-          path: ./e2e/a9/node_modules
+          path: e2e/a9/node_modules
           key: ${{ runner.os }}-a9-v1-${{ hashFiles('./e2e/a9/package-lock.json') }}
 
       - name: Install A9 dependencies
@@ -247,7 +247,7 @@ jobs:
         id: a10
         uses: actions/cache@v2
         with:
-          path: ./e2e/a10/node_modules
+          path: e2e/a10/node_modules
           key: ${{ runner.os }}-a10-v1-${{ hashFiles('./e2e/a10/package-lock.json') }}
 
       - name: Install A10 dependencies
@@ -258,7 +258,7 @@ jobs:
         id: a11
         uses: actions/cache@v2
         with:
-          path: ./e2e/a11/node_modules
+          path: e2e/a11/node_modules
           key: ${{ runner.os }}-a11-v1-${{ hashFiles('./e2e/a11/package-lock.json') }}
 
       - name: Install A11 dependencies
@@ -269,7 +269,7 @@ jobs:
         id: a12
         uses: actions/cache@v2
         with:
-          path: ./e2e/a12/node_modules
+          path: e2e/a12/node_modules
           key: ${{ runner.os }}-a12-v1-${{ hashFiles('./e2e/a12/package-lock.json') }}
 
       - name: Install A12 dependencies
@@ -280,7 +280,7 @@ jobs:
         id: am
         uses: actions/cache@v2
         with:
-          path: ./e2e/am/node_modules
+          path: e2e/am/node_modules
           key: ${{ runner.os }}-am-v1-${{ hashFiles('./e2e/am/package-lock.json') }}
 
       - name: Install A Min dependencies
@@ -303,14 +303,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a5es5/node_modules
+          path: e2e/a5es5/node_modules
           key: ${{ runner.os }}-a5es5-v1-${{ hashFiles('./e2e/a5es5/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a5es5
@@ -335,14 +335,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a5es2015/node_modules
+          path: e2e/a5es2015/node_modules
           key: ${{ runner.os }}-a5es2015-v1-${{ hashFiles('./e2e/a5es2015/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a5es2015
@@ -367,14 +367,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a6/node_modules
+          path: e2e/a6/node_modules
           key: ${{ runner.os }}-a6-v1-${{ hashFiles('./e2e/a6/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a6
@@ -399,14 +399,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a6/node_modules
+          path: e2e/a6/node_modules
           key: ${{ runner.os }}-a6-v1-${{ hashFiles('./e2e/a6/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a6
@@ -431,14 +431,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a7/node_modules
+          path: e2e/a7/node_modules
           key: ${{ runner.os }}-a7-v1-${{ hashFiles('./e2e/a7/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a7
@@ -463,14 +463,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a7/node_modules
+          path: e2e/a7/node_modules
           key: ${{ runner.os }}-a7-v1-${{ hashFiles('./e2e/a7/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a7
@@ -495,14 +495,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a8/node_modules
+          path: e2e/a8/node_modules
           key: ${{ runner.os }}-a8-v1-${{ hashFiles('./e2e/a8/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a8
@@ -527,14 +527,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a8/node_modules
+          path: e2e/a8/node_modules
           key: ${{ runner.os }}-a8-v1-${{ hashFiles('./e2e/a8/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a8
@@ -559,14 +559,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a9/node_modules
+          path: e2e/a9/node_modules
           key: ${{ runner.os }}-a9-v1-${{ hashFiles('./e2e/a9/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a9
@@ -591,14 +591,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a9/node_modules
+          path: e2e/a9/node_modules
           key: ${{ runner.os }}-a9-v1-${{ hashFiles('./e2e/a9/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a9
@@ -623,14 +623,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a9/node_modules
+          path: e2e/a9/node_modules
           key: ${{ runner.os }}-a9-v1-${{ hashFiles('./e2e/a9/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a9
@@ -655,14 +655,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a9/node_modules
+          path: e2e/a9/node_modules
           key: ${{ runner.os }}-a9-v1-${{ hashFiles('./e2e/a9/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a9
@@ -687,14 +687,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a10/node_modules
+          path: e2e/a10/node_modules
           key: ${{ runner.os }}-a10-v1-${{ hashFiles('./e2e/a10/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a10
@@ -719,14 +719,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a10/node_modules
+          path: e2e/a10/node_modules
           key: ${{ runner.os }}-a10-v1-${{ hashFiles('./e2e/a10/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a10
@@ -751,14 +751,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a10/node_modules
+          path: e2e/a10/node_modules
           key: ${{ runner.os }}-a10-v1-${{ hashFiles('./e2e/a10/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a10
@@ -783,14 +783,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a10/node_modules
+          path: e2e/a10/node_modules
           key: ${{ runner.os }}-a10-v1-${{ hashFiles('./e2e/a10/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a10
@@ -815,14 +815,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a11/node_modules
+          path: e2e/a11/node_modules
           key: ${{ runner.os }}-a11-v1-${{ hashFiles('./e2e/a11/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a11
@@ -847,14 +847,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a11/node_modules
+          path: e2e/a11/node_modules
           key: ${{ runner.os }}-a11-v1-${{ hashFiles('./e2e/a11/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a11
@@ -879,14 +879,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a11/node_modules
+          path: e2e/a11/node_modules
           key: ${{ runner.os }}-a11-v1-${{ hashFiles('./e2e/a11/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a11
@@ -911,14 +911,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a11/node_modules
+          path: e2e/a11/node_modules
           key: ${{ runner.os }}-a11-v1-${{ hashFiles('./e2e/a11/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a11
@@ -943,14 +943,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a12/node_modules
+          path: e2e/a12/node_modules
           key: ${{ runner.os }}-a12-v1-${{ hashFiles('./e2e/a12/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a12
@@ -975,14 +975,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a12/node_modules
+          path: e2e/a12/node_modules
           key: ${{ runner.os }}-a12-v1-${{ hashFiles('./e2e/a12/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a12
@@ -1007,14 +1007,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a12/node_modules
+          path: e2e/a12/node_modules
           key: ${{ runner.os }}-a12-v1-${{ hashFiles('./e2e/a12/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a12
@@ -1039,14 +1039,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/a12/node_modules
+          path: e2e/a12/node_modules
           key: ${{ runner.os }}-a12-v1-${{ hashFiles('./e2e/a12/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:a12
@@ -1071,14 +1071,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/am/node_modules
+          path: e2e/am/node_modules
           key: ${{ runner.os }}-am-v1-${{ hashFiles('./e2e/am/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:am
@@ -1103,14 +1103,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/am/node_modules
+          path: e2e/am/node_modules
           key: ${{ runner.os }}-am-v1-${{ hashFiles('./e2e/am/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:am
@@ -1135,14 +1135,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/am/node_modules
+          path: e2e/am/node_modules
           key: ${{ runner.os }}-am-v1-${{ hashFiles('./e2e/am/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:am
@@ -1167,14 +1167,14 @@ jobs:
         id: cache
         uses: actions/cache@v2
         with:
-          path: ./e2e/am/node_modules
+          path: e2e/am/node_modules
           key: ${{ runner.os }}-am-v1-${{ hashFiles('./e2e/am/package-lock.json') }}
 
       - name: Workspace
         uses: actions/download-artifact@v2
         with:
           name: workspace
-          path: ./dist
+          path: dist
 
       - name: Spreading Build
         run: npm run s:am
diff --git a/libs/ng-mocks/src/lib/mock-helper/events/mock-helper.click.ts b/libs/ng-mocks/src/lib/mock-helper/events/mock-helper.click.ts
new file mode 100644
index 0000000000..0fd5ec9e4e
--- /dev/null
+++ b/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);
+};
diff --git a/libs/ng-mocks/src/lib/mock-helper/events/mock-helper.event.ts b/libs/ng-mocks/src/lib/mock-helper/events/mock-helper.event.ts
new file mode 100644
index 0000000000..fa214253b1
--- /dev/null
+++ b/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;
+};
diff --git a/libs/ng-mocks/src/lib/mock-helper/events/mock-helper.trigger.ts b/libs/ng-mocks/src/lib/mock-helper/events/mock-helper.trigger.ts
new file mode 100644
index 0000000000..8e749e2235
--- /dev/null
+++ b/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);
+};
diff --git a/libs/ng-mocks/src/lib/mock-helper/format/mock-helper.format-html.ts b/libs/ng-mocks/src/lib/mock-helper/format/mock-helper.format-html.ts
index d4d8c06194..ca3b68d575 100644
--- a/libs/ng-mocks/src/lib/mock-helper/format/mock-helper.format-html.ts
+++ b/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'), '><')
     : '';
diff --git a/libs/ng-mocks/src/lib/mock-helper/mock-helper.object.ts b/libs/ng-mocks/src/lib/mock-helper/mock-helper.object.ts
index cf7bf78b82..5e52bd8ce5 100644
--- a/libs/ng-mocks/src/lib/mock-helper/mock-helper.object.ts
+++ b/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,
 };
diff --git a/libs/ng-mocks/src/lib/mock-helper/mock-helper.ts b/libs/ng-mocks/src/lib/mock-helper/mock-helper.ts
index a048a6af87..79927bdc3a 100644
--- a/libs/ng-mocks/src/lib/mock-helper/mock-helper.ts
+++ b/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;
diff --git a/tests/ng-mocks-trigger/blur.spec.ts b/tests/ng-mocks-trigger/blur.spec.ts
new file mode 100644
index 0000000000..0f258e67cd
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/tests/ng-mocks-trigger/click.spec.ts b/tests/ng-mocks-trigger/click.spec.ts
new file mode 100644
index 0000000000..616d30c387
--- /dev/null
+++ b/tests/ng-mocks-trigger/click.spec.ts
@@ -0,0 +1,135 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  NgModule,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+import { fromEvent, Subscription } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'target',
+  template: ` <div (click)="clickTag = $event" #element></div> `,
+})
+class TargetComponent implements OnDestroy {
+  public clickFromEvent: any;
+  public clickListener: any;
+  public clickTag: any;
+
+  private subscription?: Subscription;
+
+  @ViewChild('element')
+  public set element(value: ElementRef) {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    this.subscription = fromEvent(value.nativeElement, 'click')
+      .pipe(
+        tap(event => {
+          this.clickFromEvent = event;
+        }),
+      )
+      .subscribe();
+  }
+
+  @HostListener('click', ['$event'])
+  public hostListenerClick(event: any) {
+    this.clickListener = event;
+  }
+
+  public ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}
+
+@NgModule({
+  declarations: [TargetComponent],
+  imports: [CommonModule],
+})
+class TargetModule {}
+
+describe('ng-mocks-trigger:click', () => {
+  beforeEach(() => MockBuilder(TargetComponent).keep(TargetModule));
+
+  it('is able to click for all subscribers via ngMocks.click', () => {
+    const component = MockRender(TargetComponent).point
+      .componentInstance;
+    expect(component.clickFromEvent).toBeUndefined();
+    expect(component.clickListener).toBeUndefined();
+    expect(component.clickTag).toBeUndefined();
+
+    const div = ngMocks.find('div');
+    ngMocks.click(div, {
+      x: 666,
+      y: 777,
+    });
+
+    expect(component.clickFromEvent).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.clickListener).toBe(component.clickFromEvent);
+    expect(component.clickTag).toBe(component.clickFromEvent);
+  });
+
+  it('is able to click for all subscribers via ngMocks.touch with string', () => {
+    const component = MockRender(TargetComponent).point
+      .componentInstance;
+    expect(component.clickFromEvent).toBeUndefined();
+    expect(component.clickListener).toBeUndefined();
+    expect(component.clickTag).toBeUndefined();
+
+    const div = ngMocks.find('div');
+    ngMocks.trigger(div, 'click', {
+      x: 666,
+      y: 777,
+    });
+
+    expect(component.clickFromEvent).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.clickListener).toBe(component.clickFromEvent);
+    expect(component.clickTag).toBe(component.clickFromEvent);
+  });
+
+  it('is able to click for all subscribers via ngMocks.touch with event', () => {
+    const component = MockRender(TargetComponent).point
+      .componentInstance;
+    expect(component.clickFromEvent).toBeUndefined();
+    expect(component.clickListener).toBeUndefined();
+    expect(component.clickTag).toBeUndefined();
+
+    const div = ngMocks.find('div');
+    const event = ngMocks.event(
+      'click',
+      {
+        bubbles: true,
+      },
+      {
+        x: 666,
+        y: 777,
+      },
+    );
+    ngMocks.trigger(div, event);
+
+    expect(component.clickFromEvent).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.clickListener).toBe(component.clickFromEvent);
+    expect(component.clickTag).toBe(component.clickFromEvent);
+  });
+});
diff --git a/tests/ng-mocks-trigger/focus.spec.ts b/tests/ng-mocks-trigger/focus.spec.ts
new file mode 100644
index 0000000000..8685bf3946
--- /dev/null
+++ b/tests/ng-mocks-trigger/focus.spec.ts
@@ -0,0 +1,121 @@
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  NgModule,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+import { fromEvent, Subscription } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'target',
+  template: `
+    <input
+      [formControl]="control"
+      (focus)="focusTag = $event"
+      #element
+    />
+  `,
+})
+class TargetComponent implements OnDestroy {
+  public readonly control = new FormControl();
+  public focusFromEvent: any;
+  public focusListener: any;
+  public focusTag: any;
+
+  private subscription?: Subscription;
+
+  @ViewChild('element')
+  public set element(value: ElementRef) {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    this.subscription = fromEvent(value.nativeElement, 'focus')
+      .pipe(
+        tap(event => {
+          this.focusFromEvent = event;
+        }),
+      )
+      .subscribe();
+  }
+
+  @HostListener('focus', ['$event'])
+  public hostListenerClick(event: any) {
+    this.focusListener = event;
+  }
+
+  public ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}
+
+@NgModule({
+  declarations: [TargetComponent],
+  imports: [ReactiveFormsModule],
+})
+class TargetModule {}
+
+describe('ng-mocks-trigger:focus', () => {
+  beforeEach(() => MockBuilder(TargetComponent).keep(TargetModule));
+
+  it('is able to focus for all subscribers via ngMocks.trigger with string', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    expect(component.focusFromEvent).toBeUndefined();
+    expect(component.focusTag).toBeUndefined();
+
+    const debugElement = ngMocks.find('input');
+    ngMocks.trigger(debugElement, 'focus', {
+      x: 666,
+      y: 777,
+    });
+    expect(component.focusTag).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.focusFromEvent).toBe(component.focusTag);
+
+    expect(component.focusListener).toBeUndefined();
+    ngMocks.trigger(fixture.point, 'focus');
+    expect(component.focusListener).toBeDefined();
+  });
+
+  it('is able to focus for all subscribers via ngMocks.trigger with event', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    expect(component.focusFromEvent).toBeUndefined();
+    expect(component.focusTag).toBeUndefined();
+
+    const debugElement = ngMocks.find('input');
+    const event = ngMocks.event(
+      'focus',
+      {
+        bubbles: false,
+      },
+      {
+        x: 666,
+        y: 777,
+      },
+    );
+    ngMocks.trigger(debugElement, event);
+    expect(component.focusTag).toEqual(
+      jasmine.objectContaining({
+        x: 666,
+        y: 777,
+      }),
+    );
+    expect(component.focusFromEvent).toBe(component.focusTag);
+
+    expect(component.focusListener).toBeUndefined();
+    ngMocks.trigger(fixture.point, event);
+    expect(component.focusListener).toBeDefined();
+  });
+});
diff --git a/tests/ng-mocks-trigger/test.spec.ts b/tests/ng-mocks-trigger/test.spec.ts
new file mode 100644
index 0000000000..a28fecf878
--- /dev/null
+++ b/tests/ng-mocks-trigger/test.spec.ts
@@ -0,0 +1,90 @@
+import {
+  Component,
+  ElementRef,
+  NgModule,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+import { fromEvent, Subscription } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'target',
+  template: `
+    <input
+      [formControl]="control"
+      (focus)="focusTag = $event"
+      #element
+    />
+  `,
+})
+class TargetComponent implements OnDestroy {
+  public readonly control = new FormControl();
+  public focusFromEvent: any;
+  public focusTag: any;
+
+  private subscription?: Subscription;
+
+  @ViewChild('element')
+  public set element(value: ElementRef) {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    this.subscription = fromEvent(value.nativeElement, 'focus')
+      .pipe(
+        tap(event => {
+          this.focusFromEvent = event;
+        }),
+      )
+      .subscribe();
+  }
+
+  public ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}
+
+@NgModule({
+  declarations: [TargetComponent],
+  imports: [ReactiveFormsModule],
+})
+class TargetModule {}
+
+describe('ng-mocks-trigger:test', () => {
+  beforeEach(() => MockBuilder(TargetComponent).keep(TargetModule));
+
+  it('throws on empty elements', () => {
+    MockRender(TargetComponent);
+
+    const debugElement = ngMocks.find('div', undefined);
+    expect(() => ngMocks.trigger(debugElement, 'focus')).toThrowError(
+      'Cannot trigger focus event undefined element',
+    );
+
+    expect(() =>
+      ngMocks.trigger(debugElement, ngMocks.event('click')),
+    ).toThrowError('Cannot trigger click event undefined element');
+  });
+
+  it('skips on disabled elements', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    const debugElement = ngMocks.find('input');
+
+    component.control.disable();
+    fixture.detectChanges();
+    ngMocks.trigger(debugElement, 'focus');
+    expect(component.focusFromEvent).toBeUndefined();
+    expect(component.focusTag).toBeUndefined();
+
+    component.control.enable();
+    fixture.detectChanges();
+    ngMocks.trigger(debugElement, 'focus');
+    expect(component.focusFromEvent).toBeDefined();
+    expect(component.focusTag).toBeDefined();
+  });
+});