Merge pull request #144 from ShellyDCMS/automatically-register-angula…

…r-event-emitters

Add spies for dynamic component outputs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shellygo/cypress-test-utils",
   "description": "Cypress Test Automation Utilities",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "author": "Shelly Goldblit",
   "private": false,
   "license": "MIT",
@@ -48,6 +48,7 @@
     "cypress-wait-if-happens": "^1.3.3",
     "cypress-wait-until": "^3.0.2",
     "lit": "^2.7.4",
+    "ng-dynamic-component": "^10.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-html-parser": "^2.0.2",

src/renderer/index.ts

@@ -1,9 +1,10 @@
-import { CommonModule } from "@angular/common";
 import {
   Component,
+  EventEmitter,
   inject,
   ViewChild,
   ViewContainerRef,
+  type ComponentRef,
   type TemplateRef,
   type Type
 } from "@angular/core";
@@ -12,6 +13,7 @@ import type { MountConfig } from "cypress/angular";
 import type { LitElement, TemplateResult } from "lit";
 import { templateContent } from "lit-html/directives/template-content.js";
 import { html, unsafeStatic } from "lit/static-html.js";
+import { DynamicModule } from "ng-dynamic-component";
 import type { Attributes, ComponentClass, FunctionComponent } from "react";
 import ReactHtmlParser from "react-html-parser";
 import { CypressHelper } from "../";
@@ -174,21 +176,19 @@ export class RenderFactory {
     selector
   }: AngularOptions<T>) {
     @Component({
-      selector: "ng-component-outlet-simple-example",
+      selector: "ng-component-outlet",
       template: `<ng-template #ref> ${children} </ng-template>
-        <ng-container
-          *ngComponentOutlet="
-            dynamicComponent;
-            inputs: inputs;
-            content: projectedContent
-          "
-        ></ng-container>`,
+        <ndc-dynamic
+          [ndcDynamicComponent]="component"
+          [ndcDynamicInputs]="inputs"
+          [ndcDynamicContent]="projectedContent"
+          (ndcDynamicCreated)="componentCreated($event)"
+        ></ndc-dynamic>`,
       standalone: true,
-      imports: [CommonModule]
+      imports: [DynamicModule]
     })
     class NgComponentOutlet {
-      dynamicComponent = type;
-
+      component = type;
       inputs = props;
 
       @ViewChild("ref", { static: true }) template!: TemplateRef<any>;
@@ -202,6 +202,14 @@ export class RenderFactory {
       }
 
       projectedContent: any[][] = [];
+
+      componentCreated(compRef: ComponentRef<any>) {
+        const helper = new CypressHelper();
+        for (const key of Object.keys(compRef.instance)) {
+          if (compRef.instance[key] instanceof EventEmitter)
+            compRef.instance[key].subscribe(helper.given.spy(key));
+        }
+      }
     }
 
     const angularComponentHelper = new CypressAngularComponentHelper();