From 1e226d967e1689652cc0b92cda1b58b79191856a Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 28 Feb 2020 15:08:35 +0000 Subject: [PATCH] additional tests for search chip list (#5523) --- .../search-chip-list.component.html | 12 +- .../search-chip-list.component.spec.ts | 116 ++++++++++++++++-- .../search-filter/search-filter.component.ts | 7 +- 3 files changed, 119 insertions(+), 16 deletions(-) diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html index 88c98c1013..29d6f43e8e 100644 --- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html +++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html @@ -1,15 +1,17 @@ + data-automation-id="reset-filter" + color="primary" + selected + matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}" + matTooltipPosition="right" + (click)="searchFilter.resetAllSelectedBuckets()"> {{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }} diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.spec.ts b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.spec.ts index c1e4ffb6c1..3ccee41290 100644 --- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.spec.ts +++ b/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 { TestBed } from '@angular/core/testing'; +import { CoreModule, setupTestBed } from '@alfresco/adf-core'; +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: ` - + + ` }) class TestComponent { - + allowClear = true; searchFilter = { - selectedBuckets: [], + selectedBuckets: [], unselectFacetBucket() {} }; } describe('SearchChipListComponent', () => { + let fixture: ComponentFixture; + let component: TestComponent; setupTestBed({ imports: [ @@ -46,14 +53,79 @@ describe('SearchChipListComponent', () => { ] }); - it('should remove items from the search filter', () => { - const fixture = TestBed.createComponent(TestComponent); - const component: TestComponent = fixture.componentInstance; + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + 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 selectedBucket2 = {field: { id: 2 }, bucket: {label: 'bucket2'}}; + const selectedBucket1: any = { field: { id: 1 }, bucket: {label: 'bucket1'} }; + 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(); + }); }); diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts index cc976dc1b0..de79107c80 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts +++ b/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();