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">
<mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
<ng-container *ngIf="displayCount > 0; else withOutDisplayCount" >
<mat-chip-option
<mat-chip
*ngFor="let item of items.slice(0, displayCount)"
(keyup.enter)="clicked()"
(click)="clicked()"
@@ -12,16 +12,16 @@
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item?.value}}</span>
</div>
</mat-chip-option>
<mat-chip-option
</mat-chip>
<mat-chip
*ngIf="items.length > displayCount"
data-automation-id="card-arrayitem-more-chip"
[matMenuTriggerFor]="menu">
<span>{{items.length - displayCount}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
</mat-chip-option>
</mat-chip>
</ng-container>
<ng-template #withOutDisplayCount>
<mat-chip-option
<mat-chip
*ngFor="let item of items"
(keyup.enter)="clicked()"
(click)="clicked()"
@@ -30,21 +30,21 @@
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item?.value}}</span>
</div>
</mat-chip-option>
</mat-chip>
</ng-template>
</mat-chip-listbox>
<mat-menu #menu="matMenu">
<mat-card appearance="outlined" class="adf-array-item-more-chip-container">
<mat-card-content>
<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)"
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
<div class="adf-card-view-array-chip-content">
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item?.value}}</span>
</div>
</mat-chip-option>
</mat-chip>
</mat-chip-listbox>
</mat-card-content>
</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 {
&-array-item-icon {
font-size: var(--theme-subheading-2-font-size);
padding-top: 8px;
margin-right: 5px;
}
&-array-item-action {
@@ -52,7 +51,7 @@
}
&-card-view-array-chip-content {
align-items: center;
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();
const chipListBox = await loader.getHarness(MatChipListboxHarness);
const chipList = await chipListBox.getChips();
expect(chipList).not.toBeNull();
expect(chipList.length).toBe(4);
const chipListBox = await loader.getAllHarnesses(MatChipHarness);
expect(chipListBox).not.toBeNull();
expect(chipListBox.length).toBe(4);
const firstChipText = await chipList[0].getText();
const secondChipText = await chipList[1].getText();
const firstChipText = await chipListBox[0].getText();
const secondChipText = await chipListBox[1].getText();
expect(firstChipText).toEqual('Zlatan');
expect(secondChipText).toEqual('Lionel Messi');
});
@@ -136,15 +135,14 @@ describe('CardViewArrayItemComponent', () => {
});
fixture.detectChanges();
const chipListBox = await loader.getHarness(MatChipListboxHarness);
const chipList = await chipListBox.getChips();
expect(chipList).not.toBeNull();
expect(chipList.length).toBe(4);
const chipListBox = await loader.getAllHarnesses(MatChipHarness);
expect(chipListBox).not.toBeNull();
expect(chipListBox.length).toBe(4);
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 firstChipText = await chipList[0].getText();
const secondChipText = await chipList[1].getText();
const firstChipText = await chipListBox[0].getText();
const secondChipText = await chipListBox[1].getText();
expect(firstChipText).toEqual('Zlatan');
expect(await chip1Icon.getName()).toBe('person');
@@ -178,12 +176,11 @@ describe('CardViewArrayItemComponent', () => {
it('should render all values if noOfItemsToDisplay is not defined', async () => {
fixture.detectChanges();
const chipList = await loader.getHarness(MatChipListboxHarness);
const chips = await chipList.getChips();
const chipList = await loader.getAllHarnesses(MatChipHarness);
const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
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 () => {
@@ -193,11 +190,10 @@ describe('CardViewArrayItemComponent', () => {
});
fixture.detectChanges();
const chipList = await loader.getHarness(MatChipListboxHarness);
const chips = await chipList.getChips();
const chipList = await loader.getAllHarnesses(MatChipHarness);
expect(chips.length).toBe(3);
expect(await chips[2].getText()).toBe('2 CORE.CARDVIEW.MORE');
expect(chipList.length).toBe(3);
expect(await chipList[2].getText()).toBe('2 CORE.CARDVIEW.MORE');
});
});
});