additional tests for search chip list (#5523)

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html

@@ -1,15 +1,17 @@
 <mat-chip-list>
     <ng-container *ngIf="searchFilter && searchFilter.selectedBuckets.length">
         <mat-chip *ngIf="clearAll && searchFilter.selectedBuckets.length > 1"
-                  color="primary"
+            data-automation-id="reset-filter"
-                  selected
+            color="primary"
-                  matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
+            selected
-                  matTooltipPosition="right"
+            matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
-                  (click)="searchFilter.resetAllSelectedBuckets()">
+            matTooltipPosition="right"
+            (click)="searchFilter.resetAllSelectedBuckets()">
             {{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }}
         </mat-chip>
 
         <mat-chip
+            data-automation-id="chip-list-entry"
             *ngFor="let selection of searchFilter.selectedBuckets"
             [removable]="true"
             (removed)="searchFilter.unselectFacetBucket(selection.field, selection.bucket)">

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.spec.ts

@@ -16,25 +16,32 @@
  */
 
 import { Component } from '@angular/core';
-import { setupTestBed, CoreModule } from '@alfresco/adf-core';
+import { CoreModule, setupTestBed } from '@alfresco/adf-core';
-import { TestBed } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { SearchModule } from '../../search.module';
+import { By } from '@angular/platform-browser';
+import { SelectedBucket } from '../search-filter/search-filter.component';
 
 @Component({
     selector: 'adf-test-component',
     template: `
-        <adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
+        <adf-search-chip-list
+            [searchFilter]="searchFilter"
+            [clearAll]="allowClear">
+        </adf-search-chip-list>
     `
 })
 class TestComponent {
-
+    allowClear = true;
     searchFilter = {
-        selectedBuckets: [],
+        selectedBuckets: <SelectedBucket[]> [],
         unselectFacetBucket() {}
     };
 }
 
 describe('SearchChipListComponent', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let component: TestComponent;
 
     setupTestBed({
         imports: [
@@ -46,14 +53,79 @@ describe('SearchChipListComponent', () => {
         ]
     });
 
-    it('should remove items from the search filter', () => {
+    beforeEach(() => {
-        const fixture = TestBed.createComponent(TestComponent);
+        fixture = TestBed.createComponent(TestComponent);
-        const component: TestComponent = fixture.componentInstance;
+        component = fixture.componentInstance;
+    });
 
+    it('should display clear button only when entries present', () => {
+        fixture.detectChanges();
+
+        let clearButton = fixture.debugElement.query(By.css(`[data-automation-id="reset-filter"]`));
+        expect(clearButton).toBeNull();
+
+        component.searchFilter.selectedBuckets = [{
+            bucket: {
+                count: 1,
+                label: 'test',
+                filterQuery: 'query'
+            },
+            field: null
+        }];
+        fixture.detectChanges();
+        clearButton = fixture.debugElement.query(By.css(`[data-automation-id="reset-filter"]`));
+        expect(clearButton).toBeDefined();
+    });
+
+    it('should reflect changes in the search filter', () => {
+        const selectedBuckets = component.searchFilter.selectedBuckets;
+        fixture.detectChanges();
+
+        let chips = fixture.debugElement.queryAll(By.css(`[data-automation-id="chip-list-entry"]`));
+        expect(chips.length).toBe(0);
+
+        selectedBuckets.push({
+            bucket: {
+                count: 1,
+                label: 'test',
+                filterQuery: 'query'
+            },
+            field: null
+        });
+
+        fixture.detectChanges();
+        chips = fixture.debugElement.queryAll(By.css(`[data-automation-id="chip-list-entry"]`));
+        expect(chips.length).toBe(1);
+    });
+
+    it('should remove the entry upon remove button click', async () => {
+        spyOn(component.searchFilter, 'unselectFacetBucket').and.callThrough();
+
+        component.searchFilter.selectedBuckets = [
+            {
+                bucket: {
+                    count: 1,
+                    label: 'test',
+                    filterQuery: 'query'
+                },
+                field: null
+            }
+        ];
+
+        fixture.detectChanges();
+
+        const chips = fixture.debugElement.queryAll(By.css(`[data-automation-id="chip-list-entry"] .mat-chip-remove`));
+        chips[0].nativeElement.click();
+
+        await fixture.whenStable();
+        expect(component.searchFilter.unselectFacetBucket).toHaveBeenCalled();
+    });
+
+    it('should remove items from the search filter on clear button click', () => {
         spyOn(component.searchFilter, 'unselectFacetBucket').and.stub();
 
-        const selectedBucket1 = {field: { id: 1 }, bucket: {label: 'bucket1'}};
+        const selectedBucket1: any = { field: { id: 1 }, bucket: {label: 'bucket1'} };
-        const selectedBucket2 = {field: { id: 2 }, bucket: {label: 'bucket2'}};
+        const selectedBucket2: any = { field: { id: 2 }, bucket: {label: 'bucket2'} };
         component.searchFilter.selectedBuckets = [selectedBucket1, selectedBucket2];
 
         fixture.detectChanges();
@@ -66,4 +138,28 @@ describe('SearchChipListComponent', () => {
 
         expect(component.searchFilter.unselectFacetBucket).toHaveBeenCalledWith(selectedBucket1.field, selectedBucket1.bucket);
     });
+
+    it('should disable clear mode via input properties', () => {
+        spyOn(component.searchFilter, 'unselectFacetBucket').and.callThrough();
+
+        component.allowClear = false;
+        component.searchFilter.selectedBuckets = [
+            {
+                bucket: {
+                    count: 1,
+                    label: 'test',
+                    filterQuery: 'query'
+                },
+                field: null
+            }
+        ];
+
+        fixture.detectChanges();
+
+        const chips = fixture.debugElement.queryAll(By.css(`[data-automation-id="chip-list-entry"] .mat-chip-remove`));
+        expect(chips.length).toBe(1);
+
+        const clearButton = fixture.debugElement.query(By.css(`[data-automation-id="reset-filter"]`));
+        expect(clearButton).toBeNull();
+    });
 });

lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts

@@ -26,6 +26,11 @@ import { takeUntil } from 'rxjs/operators';
 import { GenericBucket, GenericFacetResponse, ResultSetContext, ResultSetPaging } from '@alfresco/js-api';
 import { Subject } from 'rxjs';
 
+export interface SelectedBucket {
+    field: FacetField;
+    bucket: FacetFieldBucket;
+}
+
 @Component({
     selector: 'adf-search-filter',
     templateUrl: './search-filter.component.html',
@@ -49,7 +54,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
         'default': false
     };
     displayResetButton: boolean;
-    selectedBuckets: Array<{ field: FacetField, bucket: FacetFieldBucket }> = [];
+    selectedBuckets: SelectedBucket[] = [];
 
     private onDestroy$ = new Subject<boolean>();