fix: 🐛 type check on component outputs (#693)

Allow subjects as component output ✅ Closes: #689
ngneat · Feb 7, 2025 · 08c9a21 · 08c9a21
1 parent bfd6ad5
commit 08c9a21
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 8 deletions.
diff --git a/projects/spectator/jest/test/function-output/function-output.component.spec.ts b/projects/spectator/jest/test/function-output/function-output.component.spec.ts
@@ -14,13 +14,30 @@ describe('FunctionOutputComponent', () => {
     });
 
     it('should emit the event on button click', () => {
-      let output;
+      let output = false;
       spectator.output('buttonClick').subscribe((result) => (output = result));
 
       spectator.click('button');
 
       expect(output).toEqual(true);
     });
+
+    it('should emit the event on button click - EventEmitter', () => {
+      let output = false;
+      spectator.output('buttonClickedEvent').subscribe((result) => (output = result));
+
+      spectator.click('button');
+
+      expect(output).toEqual(true);
+    });
+
+    it('should emit the event on button click - Subject', () => {
+      let output = false;
+      spectator.output('buttonClickedSubject').subscribe((result) => (output = result));
+      spectator.click('button');
+
+      expect(output).toEqual(true);
+    });
   });
 
   describe('with SpectatorHost', () => {
@@ -36,12 +53,30 @@ describe('FunctionOutputComponent', () => {
     });
 
     it('should emit the event on button click', () => {
-      let output;
+      let output = false;
       host.output('buttonClick').subscribe((result) => (output = result));
 
       host.click('button');
 
       expect(output).toEqual(true);
     });
+
+    it('should emit the event on button click - EventEmitter', () => {
+      let output = false;
+      host.output('buttonClickedEvent').subscribe((result) => (output = result));
+
+      host.click('button');
+
+      expect(output).toEqual(true);
+    });
+
+    it('should emit the event on button click - Subject', () => {
+      let output = false;
+      host.output('buttonClickedSubject').subscribe((result) => (output = result));
+
+      host.click('button');
+
+      expect(output).toEqual(true);
+    });
   });
 });
diff --git a/projects/spectator/src/lib/base/dom-spectator.ts b/projects/spectator/src/lib/base/dom-spectator.ts
@@ -1,7 +1,7 @@
 import { DebugElement, ElementRef, EventEmitter, OutputEmitterRef, Type } from '@angular/core';
 import { ComponentFixture, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 
 import { dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent } from '../dispatch-events';
 import { DOMSelector } from '../dom-selectors';
@@ -20,7 +20,7 @@ const KEY_UP = 'keyup';
 
 type KeysMatchingReturnType<T, V> = keyof { [P in keyof T as T[P] extends V ? P : never]: P } & keyof T;
 type KeysMatchingOutputFunction<T> = KeysMatchingReturnType<T, OutputEmitterRef<any>>;
-type KeysMatchingClassicOutput<T> = KeysMatchingReturnType<T, EventEmitter<any>>;
+type KeysMatchingClassicOutput<T> = KeysMatchingReturnType<T, EventEmitter<any> | Subject<any>>;
 type KeysMatchingOutput<T> = KeysMatchingOutputFunction<T> | KeysMatchingClassicOutput<T>;
 
 /**

diff --git a/projects/spectator/test/function-output/function-output.component.spec.ts b/projects/spectator/test/function-output/function-output.component.spec.ts
@@ -1,5 +1,6 @@
 import { createComponentFactory, createHostFactory, Spectator, SpectatorHost } from '@ngneat/spectator';
 import { FunctionOutputComponent } from './function-output.component';
+import { fakeAsync, tick } from '@angular/core/testing';
 
 describe('FunctionOutputComponent', () => {
   describe('with Spectator', () => {
@@ -14,13 +15,30 @@ describe('FunctionOutputComponent', () => {
     });
 
     it('should emit the event on button click', () => {
-      let output;
+      let output = false;
       spectator.output('buttonClick').subscribe((result) => (output = result));
 
       spectator.click('button');
 
       expect(output).toEqual(true);
     });
+
+    it('should emit the event on button click - EventEmitter', () => {
+      let output = false;
+      spectator.output('buttonClickedEvent').subscribe((result) => (output = result));
+
+      spectator.click('button');
+
+      expect(output).toEqual(true);
+    });
+
+    it('should emit the event on button click - Subject', () => {
+      let output = false;
+      spectator.output('buttonClickedSubject').subscribe((result) => (output = result));
+      spectator.click('button');
+
+      expect(output).toEqual(true);
+    });
   });
 
   describe('with SpectatorHost', () => {
@@ -36,12 +54,30 @@ describe('FunctionOutputComponent', () => {
     });
 
     it('should emit the event on button click', () => {
-      let output;
+      let output = false;
       host.output('buttonClick').subscribe((result) => (output = result));
 
       host.click('button');
 
       expect(output).toEqual(true);
     });
+
+    it('should emit the event on button click - EventEmitter', () => {
+      let output = false;
+      host.output('buttonClickedEvent').subscribe((result) => (output = result));
+
+      host.click('button');
+
+      expect(output).toEqual(true);
+    });
+
+    it('should emit the event on button click - Subject', () => {
+      let output = false;
+      host.output('buttonClickedSubject').subscribe((result) => (output = result));
+
+      host.click('button');
+
+      expect(output).toEqual(true);
+    });
   });
 });
diff --git a/projects/spectator/test/function-output/function-output.component.ts b/projects/spectator/test/function-output/function-output.component.ts
@@ -1,10 +1,23 @@
-import { Component, input, output, ɵINPUT_SIGNAL_BRAND_WRITE_TYPE } from '@angular/core';
+import { Component, EventEmitter, input, Output, output, ɵINPUT_SIGNAL_BRAND_WRITE_TYPE } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
 
 @Component({
   selector: 'app-function-output',
-  template: ` <button (click)="buttonClick.emit(true)">Emit function output</button> `,
+  template: ` <button (click)="buttonClicked()">Emit function output</button> `,
   standalone: true,
 })
 export class FunctionOutputComponent {
   public buttonClick = output<boolean>();
+
+  @Output()
+  public buttonClickedEvent = new EventEmitter<boolean>();
+
+  @Output()
+  public buttonClickedSubject = new ReplaySubject<boolean>();
+
+  protected buttonClicked(): void {
+    this.buttonClick.emit(true);
+    this.buttonClickedEvent.emit(true);
+    this.buttonClickedSubject.next(true);
+  }
 }