inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-24276 Fix mat chip display in card view array item (#9992)

Browse Source 
* AAE-24276 Fix mat chip display in card view array item

* AAE-24276 Updated unit tests
This commit is contained in:
Ehsan Rezaei
2024-07-25 16:20:10 +02:00
committed by GitHub
parent 5d969ccca5
commit d86a67558c
3 changed files with 25 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
View File

@@ -3,7 +3,7 @@
<ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock"> <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
<mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container"> <mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
<ng-container *ngIf="displayCount > 0; else withOutDisplayCount" > <ng-container *ngIf="displayCount > 0; else withOutDisplayCount" >
<mat-chip-option <mat-chip
*ngFor="let item of items.slice(0, displayCount)" *ngFor="let item of items.slice(0, displayCount)"
(keyup.enter)="clicked()" (keyup.enter)="clicked()"
(click)="clicked()" (click)="clicked()"
@@ -12,16 +12,16 @@
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon> <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item?.value}}</span> <span>{{item?.value}}</span>
</div> </div>
</mat-chip-option> </mat-chip>
<mat-chip-option <mat-chip
*ngIf="items.length > displayCount" *ngIf="items.length > displayCount"
data-automation-id="card-arrayitem-more-chip" data-automation-id="card-arrayitem-more-chip"
[matMenuTriggerFor]="menu"> [matMenuTriggerFor]="menu">
<span>{{items.length - displayCount}} {{'CORE.CARDVIEW.MORE' | translate}}</span> <span>{{items.length - displayCount}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
</mat-chip-option> </mat-chip>
</ng-container> </ng-container>
<ng-template #withOutDisplayCount> <ng-template #withOutDisplayCount>
<mat-chip-option <mat-chip
*ngFor="let item of items" *ngFor="let item of items"
(keyup.enter)="clicked()" (keyup.enter)="clicked()"
(click)="clicked()" (click)="clicked()"
@@ -30,21 +30,21 @@
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon> <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item?.value}}</span> <span>{{item?.value}}</span>
</div> </div>
</mat-chip-option> </mat-chip>
</ng-template> </ng-template>
</mat-chip-listbox> </mat-chip-listbox>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<mat-card appearance="outlined" class="adf-array-item-more-chip-container"> <mat-card appearance="outlined" class="adf-array-item-more-chip-container">
<mat-card-content> <mat-card-content>
<mat-chip-listbox> <mat-chip-listbox>
<mat-chip-option (click)="clicked()" (keyup.enter)="clicked()" <mat-chip (click)="clicked()" (keyup.enter)="clicked()"
*ngFor="let item of items.slice(displayCount, items.length)" *ngFor="let item of items.slice(displayCount, items.length)"
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value"> [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
<div class="adf-card-view-array-chip-content"> <div class="adf-card-view-array-chip-content">
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon> <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item?.value}}</span> <span>{{item?.value}}</span>
</div> </div>
</mat-chip-option> </mat-chip>
</mat-chip-listbox> </mat-chip-listbox>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

5
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

@@ -2,8 +2,7 @@
.adf { .adf {
&-array-item-icon { &-array-item-icon {
font-size: var(--theme-subheading-2-font-size); margin-right: 5px;
padding-top: 8px;
} }
&-array-item-action { &-array-item-action {
@@ -52,7 +51,7 @@
} }
&-card-view-array-chip-content { &-card-view-array-chip-content {
align-items: center;
display: flex; display: flex;
cursor: pointer;
} }
} }

34
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts
View File

@@ -118,13 +118,12 @@ describe('CardViewArrayItemComponent', () => {
}); });
fixture.detectChanges(); fixture.detectChanges();
const chipListBox = await loader.getHarness(MatChipListboxHarness); const chipListBox = await loader.getAllHarnesses(MatChipHarness);
const chipList = await chipListBox.getChips(); expect(chipListBox).not.toBeNull();
expect(chipList).not.toBeNull(); expect(chipListBox.length).toBe(4);
expect(chipList.length).toBe(4);
const firstChipText = await chipList[0].getText(); const firstChipText = await chipListBox[0].getText();
const secondChipText = await chipList[1].getText(); const secondChipText = await chipListBox[1].getText();
expect(firstChipText).toEqual('Zlatan'); expect(firstChipText).toEqual('Zlatan');
expect(secondChipText).toEqual('Lionel Messi'); expect(secondChipText).toEqual('Lionel Messi');
}); });
@@ -136,15 +135,14 @@ describe('CardViewArrayItemComponent', () => {
}); });
fixture.detectChanges(); fixture.detectChanges();
const chipListBox = await loader.getHarness(MatChipListboxHarness); const chipListBox = await loader.getAllHarnesses(MatChipHarness);
const chipList = await chipListBox.getChips(); expect(chipListBox).not.toBeNull();
expect(chipList).not.toBeNull(); expect(chipListBox.length).toBe(4);
expect(chipList.length).toBe(4);
const chip1Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Zlatan"]` })); const chip1Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Zlatan"]` }));
const chip2Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Lionel Messi"]` })); const chip2Icon = await loader.getHarness(MatIconHarness.with({ ancestor: `[data-automation-id="card-arrayitem-chip-Lionel Messi"]` }));
const firstChipText = await chipList[0].getText(); const firstChipText = await chipListBox[0].getText();
const secondChipText = await chipList[1].getText(); const secondChipText = await chipListBox[1].getText();
expect(firstChipText).toEqual('Zlatan'); expect(firstChipText).toEqual('Zlatan');
expect(await chip1Icon.getName()).toBe('person'); expect(await chip1Icon.getName()).toBe('person');
@@ -178,12 +176,11 @@ describe('CardViewArrayItemComponent', () => {
it('should render all values if noOfItemsToDisplay is not defined', async () => { it('should render all values if noOfItemsToDisplay is not defined', async () => {
fixture.detectChanges(); fixture.detectChanges();
const chipList = await loader.getHarness(MatChipListboxHarness); const chipList = await loader.getAllHarnesses(MatChipHarness);
const chips = await chipList.getChips();
const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]')); const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
expect(moreElement).toBeNull(); expect(moreElement).toBeNull();
expect(chips.length).toBe(4); expect(chipList.length).toBe(4);
}); });
it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', async () => { it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', async () => {
@@ -193,11 +190,10 @@ describe('CardViewArrayItemComponent', () => {
}); });
fixture.detectChanges(); fixture.detectChanges();
const chipList = await loader.getHarness(MatChipListboxHarness); const chipList = await loader.getAllHarnesses(MatChipHarness);
const chips = await chipList.getChips();
expect(chips.length).toBe(3); expect(chipList.length).toBe(3);
expect(await chips[2].getText()).toBe('2 CORE.CARDVIEW.MORE'); expect(await chipList[2].getText()).toBe('2 CORE.CARDVIEW.MORE');
}); });
}); });
}); });