feat(search): do not emit inputSubmitted if only clearing the search …

…field
geonetwork · Oct 21, 2023 · 865d47f · 865d47f
1 parent 697802f
commit 865d47f
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
@@ -4,6 +4,7 @@
   [action]="autoCompleteAction"
   (itemSelected)="handleItemSelection($event)"
   (inputSubmitted)="handleInputSubmission($event)"
+  (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
   [clearOnSelection]="true"
 ></gn-ui-autocomplete>
diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.spec.ts b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.spec.ts
@@ -109,7 +109,6 @@ describe('FuzzySearchComponent', () => {
   })
 
   describe('search enter key press', () => {
-    let outputValue
     describe('when no output defined', () => {
       beforeEach(() => {
         component.handleInputSubmission('blarg')
@@ -123,8 +122,7 @@ describe('FuzzySearchComponent', () => {
     describe('when output is defined', () => {
       beforeEach(() => {
         jest.resetAllMocks()
-        outputValue = null
-        component.inputSubmitted.subscribe((event) => (outputValue = event))
+        component.inputSubmitted.subscribe()
         jest.spyOn(component.inputSubmitted, 'emit')
         component.handleInputSubmission('blarg')
       })
@@ -139,6 +137,25 @@ describe('FuzzySearchComponent', () => {
     })
   })
 
+  describe('search input clear', () => {
+    describe('when output is defined', () => {
+      beforeEach(() => {
+        jest.resetAllMocks()
+        component.inputSubmitted.subscribe()
+        jest.spyOn(component.inputSubmitted, 'emit')
+        component.handleInputCleared()
+      })
+      it('clears the search filters', () => {
+        expect(searchService.updateFilters).toHaveBeenCalledWith({
+          any: '',
+        })
+      })
+      it('does not emit inputSubmitted', () => {
+        expect(component.inputSubmitted.emit).not.toHaveBeenCalled()
+      })
+    })
+  })
+
   describe('search suggestion selection', () => {
     describe('when no output defined', () => {
       beforeEach(() => {

diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts
@@ -72,4 +72,8 @@ export class FuzzySearchComponent implements OnInit {
       this.searchService.updateFilters({ any })
     }
   }
+
+  handleInputCleared() {
+    this.searchService.updateFilters({ any: '' })
+  }
 }
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
@@ -111,34 +111,38 @@ describe('AutocompleteComponent', () => {
       })
     })
     describe('when input is not empty', () => {
-      let anyEmitted
+      let anyEmitted: boolean
+      let clearEmitted: boolean
       let button
       beforeEach(() => {
+        anyEmitted = false
+        clearEmitted = false
         component.inputRef.nativeElement.value = 'blar'
         component.inputRef.nativeElement.dispatchEvent(new InputEvent('input'))
         component.triggerRef.closePanel = jest.fn()
-        component.inputSubmitted.subscribe((event) => (anyEmitted = event))
+        component.inputSubmitted.subscribe(() => (anyEmitted = true))
+        component.inputCleared.subscribe(() => (clearEmitted = true))
         fixture.detectChanges()
         button = fixture.debugElement.query(By.css('.clear-btn'))
+        button.nativeElement.click()
       })
       it('is visible', () => {
         expect(button).not.toBeNull()
       })
       it('resets the text input', () => {
-        button.nativeElement.click()
         expect(component.inputRef.nativeElement.value).toBe('')
       })
       it('sets the text input of the focus', () => {
-        button.nativeElement.click()
         expect(document.activeElement).toBe(component.inputRef.nativeElement)
       })
       it('closes the autocomplete panel', () => {
-        button.nativeElement.click()
         expect(component.triggerRef.closePanel).toHaveBeenCalled()
       })
-      it('clears search result by emitting empty string', () => {
-        button.nativeElement.click()
-        expect(anyEmitted).toEqual('')
+      it('does not emit an inputSubmitted event', () => {
+        expect(anyEmitted).toEqual(false)
+      })
+      it('emits an inputCleared event', () => {
+        expect(clearEmitted).toEqual(true)
       })
     })
   })

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -49,6 +49,7 @@ export class AutocompleteComponent
   @Input() clearOnSelection = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
+  @Output() inputCleared = new EventEmitter<void>()
   @ViewChild(MatAutocompleteTrigger) triggerRef: MatAutocompleteTrigger
   @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
@@ -126,7 +127,7 @@ export class AutocompleteComponent
 
   clear(): void {
     this.inputRef.nativeElement.value = ''
-    this.inputSubmitted.emit('')
+    this.inputCleared.emit()
     this.selectionSubject
       .pipe(take(1))
       .subscribe((selection) => selection && selection.option.deselect())