AAE-23830 Label for people component (#10064)

* AAE-23830 Label for people component * AAE-23830 Managed to load label conditionally
Alfresco · Aug 9, 2024 · 80a70cf · 80a70cf
1 parent 834405d
commit 80a70cf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
@@ -7,7 +7,6 @@
         <adf-cloud-people
             [preSelectUsers]="preSelectUsers"
             [appName]="appName"
-            [title]="title"
             [readOnly]="field.readOnly"
             [validate]="validate"
             [searchUserCtrl]="search"

diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
@@ -6,7 +6,8 @@
         class="adf-people-cloud"
         [class.adf-invalid]="hasError() && isDirty()"
     >
-        <ng-content select="[label]"></ng-content>
+        <ng-content *ngIf="!title" select="[label]"></ng-content>
+        <mat-label *ngIf="title">{{ title | translate }}</mat-label>
         <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
@@ -27,7 +28,6 @@
                    [formControl]="searchUserCtrl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="userMultipleChipList"
-                   [placeholder]="title | translate"
                    [required]="required"
                    (focus)="setFocus(true)"
                    (blur)="setFocus(false); markAsTouched()"

diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
@@ -30,6 +30,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
+import { MatFormFieldHarness } from '@angular/material/form-field/testing';
 
 describe('PeopleCloudComponent', () => {
     let loader: HarnessLoader;
@@ -92,21 +93,21 @@ describe('PeopleCloudComponent', () => {
         loader = TestbedHarnessEnvironment.loader(fixture);
     });
 
-    it('should populate placeholder when title is present', () => {
+    it('should populate label when title is present', async () => {
         component.title = 'TITLE_KEY';
         fixture.detectChanges();
 
-        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
+        const inputField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-people-cloud' }));
 
-        expect(inputElement.placeholder).toEqual('TITLE_KEY');
+        expect(await inputField.getLabel()).toEqual('TITLE_KEY');
     });
 
-    it('should not populate placeholder when title is not present', () => {
+    it('should not populate label when title is not present', async () => {
         fixture.detectChanges();
 
-        const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
+        const inputField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-people-cloud' }));
 
-        expect(inputElement.placeholder).toEqual('');
+        expect(await inputField.getLabel()).toBeNull();
     });
 
     describe('Search user', () => {