[AAE-10292] Fix opening two dialogs for card view array items (#7770)

* [AAE-10292] Fix opening two dialogs for card view array items

* Trigger travis
This commit is contained in:
Tomasz Gnyp
2022-08-16 19:24:48 +02:00
committed by GitHub
parent be0545801d
commit d2a246ac2f
3 changed files with 43 additions and 11 deletions

View File

@@ -1,5 +1,5 @@
<div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
<div class="adf-property-value adf-card-view-array-item-container" (click)="clicked()">
<div class="adf-property-value adf-card-view-array-item-container">
<ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
<mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
<ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
@@ -46,6 +46,7 @@
<span class="adf-card-array-item-default" data-automation-id="card-arrayitem-default">{{ property?.default | translate }}</span>
</ng-template>
<button mat-icon-button *ngIf="showClickableIcon()"
(click)="clicked()"
class="adf-array-item-action"
[attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"

View File

@@ -26,21 +26,11 @@
max-height: 300px;
overflow-y: auto;
}
.mat-chip {
cursor: pointer;
}
}
&-property-value {
.mat-chip-list {
width: 100%;
padding-top: 6px;
cursor: pointer;
}
.mat-chip {
cursor: pointer;
}
}
@@ -50,5 +40,9 @@
display: flex;
place-content: center space-between;
align-items: center;
.mat-chip:hover {
cursor: pointer;
}
}
}

View File

@@ -23,10 +23,13 @@ import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
import { CardViewArrayItemModel, CardViewArrayItem } from '../../models/card-view-arrayitem.model';
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { CardViewUpdateService } from 'core/public-api';
describe('CardViewArrayItemComponent', () => {
let component: CardViewArrayItemComponent;
let fixture: ComponentFixture<CardViewArrayItemComponent>;
let service: CardViewUpdateService;
let serviceSpy: jasmine.Spy;
const mockData = [
{ icon: 'person', value: 'Zlatan' },
@@ -55,10 +58,44 @@ describe('CardViewArrayItemComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(CardViewArrayItemComponent);
service = TestBed.inject(CardViewUpdateService);
component = fixture.componentInstance;
component.property = new CardViewArrayItemModel(mockDefaultProps);
});
describe('Click event', () => {
beforeEach(() => {
serviceSpy = spyOn(service, 'clicked');
component.property = new CardViewArrayItemModel({
...mockDefaultProps,
clickable: true
});
fixture.detectChanges();
});
it('should call service on chip click', () => {
const chip: HTMLElement = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"]');
chip.dispatchEvent(new Event('click'));
expect(serviceSpy).toHaveBeenCalled();
});
it('should call service on edit icon click', () => {
const editIcon: HTMLElement = fixture.nativeElement.querySelector('[data-automation-id="card-array-item-clickable-icon-array"]');
editIcon.dispatchEvent(new Event('click'));
expect(serviceSpy).toHaveBeenCalled();
});
it('should NOT call service on chip list container click', () => {
const chiplistContainer: HTMLElement = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-list-container"]');
chiplistContainer.dispatchEvent(new Event('click'));
expect(serviceSpy).not.toHaveBeenCalled();
});
});
describe('Rendering', () => {
it('should render the label', () => {
fixture.detectChanges();