AAE-23830 Label for people component (#10064)

* AAE-23830 Label for people component

* AAE-23830 Managed to load label conditionally
This commit is contained in:
Ehsan Rezaei
2024-08-09 10:32:33 +02:00
committed by GitHub
parent 834405d197
commit 80a70cf789
3 changed files with 9 additions and 9 deletions

View File

@@ -7,7 +7,6 @@
<adf-cloud-people <adf-cloud-people
[preSelectUsers]="preSelectUsers" [preSelectUsers]="preSelectUsers"
[appName]="appName" [appName]="appName"
[title]="title"
[readOnly]="field.readOnly" [readOnly]="field.readOnly"
[validate]="validate" [validate]="validate"
[searchUserCtrl]="search" [searchUserCtrl]="search"

View File

@@ -6,7 +6,8 @@
class="adf-people-cloud" class="adf-people-cloud"
[class.adf-invalid]="hasError() && isDirty()" [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-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
<mat-chip-row <mat-chip-row
*ngFor="let user of selectedUsers" *ngFor="let user of selectedUsers"
@@ -27,7 +28,6 @@
[formControl]="searchUserCtrl" [formControl]="searchUserCtrl"
[matAutocomplete]="auto" [matAutocomplete]="auto"
[matChipInputFor]="userMultipleChipList" [matChipInputFor]="userMultipleChipList"
[placeholder]="title | translate"
[required]="required" [required]="required"
(focus)="setFocus(true)" (focus)="setFocus(true)"
(blur)="setFocus(false); markAsTouched()" (blur)="setFocus(false); markAsTouched()"

View File

@@ -30,6 +30,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing'; import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
import { MatInputHarness } from '@angular/material/input/testing'; import { MatInputHarness } from '@angular/material/input/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
describe('PeopleCloudComponent', () => { describe('PeopleCloudComponent', () => {
let loader: HarnessLoader; let loader: HarnessLoader;
@@ -92,21 +93,21 @@ describe('PeopleCloudComponent', () => {
loader = TestbedHarnessEnvironment.loader(fixture); 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'; component.title = 'TITLE_KEY';
fixture.detectChanges(); 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(); 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', () => { describe('Search user', () => {