[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
Alfresco · Aug 16, 2022 · d2a246a · d2a246a
1 parent be05458
commit d2a246a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
@@ -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"

diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -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;
+        }
     }
 }
diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts
@@ -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();