feat: allow OutputEmitterRef keys in triggerEventHandler (#672)

ngneat · Sep 12, 2024 · 06bc093 · 06bc093
1 parent 02ed01d
commit 06bc093
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/projects/spectator/src/lib/base/dom-spectator.ts b/projects/spectator/src/lib/base/dom-spectator.ts
@@ -265,7 +265,7 @@ export abstract class DomSpectator<I> extends BaseSpectator {
     return event;
   }
 
-  public triggerEventHandler<C = any, K extends KeysMatching<C, EventEmitter<any>> = any>(
+  public triggerEventHandler<C = any, K extends KeysMatching<C, EventEmitter<any> | OutputEmitterRef<any>> = any>(
     directiveOrSelector: Type<C> | string | DebugElement,
     eventName: K,
     eventObj: OutputType<C[K]>,

diff --git a/projects/spectator/test/child-custom-event/child-custom-event-parent.component.spec.ts b/projects/spectator/test/child-custom-event/child-custom-event-parent.component.spec.ts
@@ -13,15 +13,31 @@ describe('ChildCustomEventParentComponent', () => {
     declareComponent: false,
   });
 
-  it('should trigger custom event with directive selector', () => {
-    spectator = createComponent();
-    spectator.triggerEventHandler(ChildCustomEventComponent, 'customEvent', 'hello');
-    expect(spectator.query(byText('hello'))).toExist();
+  describe('new EventEmitter()', () => {
+    it('should trigger custom event with directive selector', () => {
+      spectator = createComponent();
+      spectator.triggerEventHandler(ChildCustomEventComponent, 'customEventUsingEventEmitter', 'hello');
+      expect(spectator.query(byText('hello'))).toExist();
+    });
+
+    it('should trigger custom event with string selector', () => {
+      spectator = createComponent();
+      spectator.triggerEventHandler('app-child-custom-event', 'customEventUsingEventEmitter', 'hello');
+      expect(spectator.query(byText('hello'))).toExist();
+    });
   });
 
-  it('should trigger custom event with string selector', () => {
-    spectator = createComponent();
-    spectator.triggerEventHandler('app-child-custom-event', 'customEvent', 'hello');
-    expect(spectator.query(byText('hello'))).toExist();
+  describe('output()', () => {
+    it('should trigger custom event with directive selector', () => {
+      spectator = createComponent();
+      spectator.triggerEventHandler(ChildCustomEventComponent, 'customEventUsingOutputEmitter', 'hello');
+      expect(spectator.query(byText('hello'))).toExist();
+    });
+
+    it('should trigger custom event with string selector', () => {
+      spectator = createComponent();
+      spectator.triggerEventHandler('app-child-custom-event', 'customEventUsingOutputEmitter', 'hello');
+      expect(spectator.query(byText('hello'))).toExist();
+    });
   });
 });
diff --git a/projects/spectator/test/child-custom-event/child-custom-event-parent.component.ts b/projects/spectator/test/child-custom-event/child-custom-event-parent.component.ts
@@ -3,14 +3,21 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-child-custom-event-parent',
   template: `
-    <app-child-custom-event (customEvent)="onCustomEvent($event)"></app-child-custom-event>
+    <app-child-custom-event
+      (customEventUsingEventEmitter)="onCustomEventUsingEventEmitter($event)"
+      (customEventUsingOutputEmitter)="onCustomEventUsingOutputEmitter($event)"
+    />
     <p>{{ eventValue }}</p>
   `,
 })
 export class ChildCustomEventParentComponent {
   public eventValue = '';
 
-  public onCustomEvent(eventValue: string): void {
+  public onCustomEventUsingEventEmitter(eventValue: string): void {
+    this.eventValue = eventValue;
+  }
+
+  public onCustomEventUsingOutputEmitter(eventValue: string): void {
     this.eventValue = eventValue;
   }
 }
diff --git a/projects/spectator/test/child-custom-event/child-custom-event.component.ts b/projects/spectator/test/child-custom-event/child-custom-event.component.ts
@@ -1,9 +1,10 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-child-custom-event',
   template: ` <p>Custom child</p> `,
 })
 export class ChildCustomEventComponent {
-  @Output() customEvent = new EventEmitter<string>();
+  @Output() customEventUsingEventEmitter = new EventEmitter<string>();
+  customEventUsingOutputEmitter = output<string>();
 }