[AAE-29973] added unit tests for input and output

Alfresco · Jan 15, 2025 · b76bed2 · b76bed2
1 parent d3e3d2e
commit b76bed2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/...cess-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.spec.ts b/...cess-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.spec.ts
@@ -17,30 +17,46 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ScreenRenderingService } from '../../../services/public-api';
 import { TaskScreenCloudComponent } from './screen-cloud.component';
 
 @Component({
     selector: 'adf-cloud-test-component',
-    template: `<div class="adf-cloud-test-container">test component</div>`,
+    template: `
+        <div class="adf-cloud-test-container">
+            test component
+            <div class="adf-cloud-test-container-taskId">{{ taskId }}</div>
+            <button class="adf-cloud-test-container-complete-btn" (click)="onComplete()">complete</button>
+        </div>
+    `,
     imports: [CommonModule],
     standalone: true
 })
-class TestComponent {}
+class TestComponent {
+    @Input() taskId = '';
+    @Output() taskCompleted = new EventEmitter();
+    onComplete() {
+        this.taskCompleted.emit();
+    }
+}
 
 @Component({
     selector: 'adf-cloud-test-actions-component',
-    template: `<adf-cloud-task-screen [taskId]="'1'" [appName]="'app-name-test'" [screenId]="'test'">
-        <div buttons class="adf-cloud-test-buttons">
-            <button>Test</button>
-        </div>
-    </adf-cloud-task-screen> `,
+    template: `
+        <adf-cloud-task-screen [taskId]="'1'" [appName]="'app-name-test'" [screenId]="'test'" (taskCompleted)="onTaskCompleted()">
+            <div buttons class="adf-cloud-test-buttons">
+                <button>Test</button>
+            </div>
+        </adf-cloud-task-screen>
+    `,
     imports: [CommonModule, TaskScreenCloudComponent],
     standalone: true
 })
-class TestWrapperComponent {}
+class TestWrapperComponent {
+    onTaskCompleted() {}
+}
 
 describe('TaskScreenCloudComponent', () => {
     let fixture: ComponentFixture<TestWrapperComponent>;
@@ -66,4 +82,19 @@ describe('TaskScreenCloudComponent', () => {
         const projectedContent = fixture.debugElement.query(By.css('.adf-cloud-test-buttons'));
         expect(projectedContent).toBeTruthy();
     });
+
+    it('should set input property for dynamic component', () => {
+        const inputValueFromDynamicComponent = fixture.debugElement.query(By.css('.adf-cloud-test-container-taskId'));
+        expect((inputValueFromDynamicComponent.nativeElement as HTMLElement).textContent).toBe('1');
+    });
+
+    it('should subscribe to the output of dynamic component', () => {
+        const onTaskCompletedSpy = spyOn(fixture.componentInstance, 'onTaskCompleted');
+        const btnComplete = fixture.debugElement.query(By.css('.adf-cloud-test-container-complete-btn'));
+
+        expect(btnComplete).toBeDefined();
+
+        (btnComplete.nativeElement as HTMLButtonElement).click();
+        expect(onTaskCompletedSpy).toHaveBeenCalled();
+    });
 });
diff --git a/lib/process-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.ts b/lib/process-services-cloud/src/lib/screen/components/screen-cloud/screen-cloud.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { Component, ComponentRef, EventEmitter, inject, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentRef, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
 import { ScreenRenderingService } from '../../../services/public-api';
 import { MatCardModule } from '@angular/material/card';
 import { UserTaskCustomUi } from './screen-cloud.interface';
@@ -59,6 +59,8 @@ export class TaskScreenCloudComponent implements OnInit {
 
     @ViewChild('container', { read: ViewContainerRef, static: true })
     container: ViewContainerRef;
+
+    private destroyRef = inject(DestroyRef);
     componentRef: ComponentRef<UserTaskCustomUi>;
 
     private readonly screenRenderingService = inject(ScreenRenderingService);
@@ -96,13 +98,13 @@ export class TaskScreenCloudComponent implements OnInit {
 
     subscribeToOutputs() {
         if (this.componentRef.instance?.taskSaved) {
-            this.componentRef.instance.taskSaved.pipe(takeUntilDestroyed()).subscribe(() => this.taskSaved.emit());
+            this.componentRef.instance.taskSaved.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.taskSaved.emit());
         }
         if (this.componentRef.instance?.taskCompleted) {
-            this.componentRef.instance.taskCompleted.pipe(takeUntilDestroyed()).subscribe(() => this.taskCompleted.emit());
+            this.componentRef.instance.taskCompleted.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.taskCompleted.emit());
         }
         if (this.componentRef.instance?.error) {
-            this.componentRef.instance.error.pipe(takeUntilDestroyed()).subscribe((data) => this.error.emit(data));
+            this.componentRef.instance.error.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data) => this.error.emit(data));
         }
     }
 }