test: integration test for output() api (#54650)

Adds an integration test for `output()` and `outputFromObservable()`.
The test verifies the JIT transform as well.

PR Close #54650

integration/cli-signal-inputs/package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build --configuration production",
     "pretest": "ng version",
-    "test": "ng test && ng e2e",
+    "test": "ng test && ng e2e && ng build --configuration=production",
     "lint": "ng lint",
     "e2e": "ng e2e --port 0"
   },

integration/cli-signal-inputs/src/app/app.component.ts

@@ -9,7 +9,8 @@ import {GreetComponent} from './greet.component';
     <greet [firstName]="firstName" [lastName]="lastName" [decoratorInput]="10" />
 
     <p>Unbound last name</p>
-    <greet class="unbound-last-name" [firstName]="firstName" />
+    <greet class="unbound-last-name" [firstName]="firstName" (clickFromInside)="$event.charAt(0)"
+                                     (clickFromInside2)="$event.toExponential(2)"/>
 
     <button class="set-last-name-btn" (click)="lastName = 'Doe'">Set last name</button>
     <button class="unset-last-name-btn" (click)="lastName = undefined">Unset last name</button>

integration/cli-signal-inputs/src/app/greet.component.spec.ts

@@ -24,15 +24,20 @@ describe('greet component', () => {
     fixture.detectChanges();
 
     expect(fixture.componentInstance.clickCount).toBe(1);
+    expect(fixture.componentInstance.clickCount2).toBe(1);
   });
 });
 
 @Component({
   standalone: true,
-  template: `<greet [firstName]="firstName" (clickFromInside)="clickCount = clickCount + 1"/>`,
+  template: `
+    <greet [firstName]="firstName" (clickFromInside)="clickCount = clickCount + 1"
+           (clickFromInside2)="clickCount2 = clickCount2 + 1"/>
+  `,
   imports: [GreetComponent],
 })
 class TestCmp {
   clickCount = 0;
+  clickCount2 = 0;
   firstName = 'Initial';
 }

integration/cli-signal-inputs/src/app/greet.component.ts

@@ -1,4 +1,6 @@
-import {ChangeDetectionStrategy, Component, Input, input, ɵoutput} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, input, output} from '@angular/core';
+import {outputFromObservable} from '@angular/core/rxjs-interop';
+import {Subject} from 'rxjs';
 
 @Component({
   selector: 'greet',
@@ -18,9 +20,15 @@ export class GreetComponent {
 
   @Input() decoratorInput = 0;
 
-  clickFromInside = ɵoutput();
+  clickFromInside = output<string>();
+
+  private clickFromInsideInterop$ = new Subject<number>();
+  clickFromInsideInterop = outputFromObservable(this.clickFromInsideInterop$, {
+    alias: 'clickFromInside2',
+  });
 
   dispatchOutputEvent() {
-    this.clickFromInside.emit();
+    this.clickFromInside.emit('someString');
+    this.clickFromInsideInterop$.next(1);
   }
 }