[AAE-5392] - Make search text input more configurable & add an event … (#7188)

* [AAE-5392] - Make search text input more configurable & add an event emitter to indicate the states of it

* Remove fdescribe

* Emit empty search term when the search gets cleared

* Emit the empty search term when the search gets collapsed by the Search icon

* Same onBlur, emit the empty search term

* Add unit tests for emitters resetting the search term

* Fix comments, use reset event emitter instead of emitting an empty search term

* Update documentation

* Revert reset to boolean

* Fix flaky unit test

lib/core/search-text/search-text-input.component.spec.ts

@@ -260,4 +260,127 @@ describe('SearchTextInputComponent', () => {
             expect(element.querySelector('#adf-control-input').getAttribute('autocomplete')).toBe('on');
         });
     });
+
+    describe('Search visibility', () => {
+        beforeEach(() => {
+            userPreferencesService.setWithoutStore('textOrientation', 'ltr');
+            fixture.detectChanges();
+        });
+
+        it('should emit an event when the search becomes active', fakeAsync(() => {
+            const searchVisibilityChangeSpy = spyOn(component.searchVisibility, 'emit');
+            component.toggleSearchBar();
+            tick(200);
+
+            expect(searchVisibilityChangeSpy).toHaveBeenCalledWith(true);
+        }));
+
+        it('should emit an event when the search becomes inactive', fakeAsync(() => {
+            component.toggleSearchBar();
+            tick(200);
+            expect(component.subscriptAnimationState.value).toEqual('active');
+
+            const searchVisibilityChangeSpy = spyOn(component.searchVisibility, 'emit');
+            component.toggleSearchBar();
+            tick(200);
+
+            expect(component.subscriptAnimationState.value).toEqual('inactive');
+            expect(searchVisibilityChangeSpy).toHaveBeenCalledWith(false);
+        }));
+
+        it('should reset emit when the search becomes inactive', fakeAsync(() => {
+            const resetSpy = spyOn(component.reset, 'emit');
+
+            component.toggleSearchBar();
+            tick(200);
+            expect(component.subscriptAnimationState.value).toEqual('active');
+            component.searchTerm = 'fake-search-term';
+
+            component.toggleSearchBar();
+            tick(200);
+
+            expect(resetSpy).toHaveBeenCalled();
+            expect(component.searchTerm).toEqual('');
+        }));
+
+        describe('Clear button', () => {
+            beforeEach(fakeAsync(() => {
+                fixture.detectChanges();
+                component.subscriptAnimationState.value = 'active';
+                fixture.detectChanges();
+                tick(200);
+            }));
+
+            it('should clear button be visible when showClearButton is set to true', async () => {
+                component.showClearButton = true;
+                fixture.detectChanges();
+                await fixture.whenStable();
+                const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'));
+
+                expect(clearButton).not.toBeNull();
+            });
+
+            it('should clear button not be visible when showClearButton is set to false', () => {
+                component.showClearButton = false;
+                fixture.detectChanges();
+                const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'));
+
+                expect(clearButton).toBeNull();
+            });
+
+            it('should reset the search when clicking the clear button', async () => {
+                const resetEmitSpy = spyOn(component.reset, 'emit');
+                const searchVisibilityChangeSpy = spyOn(component.searchVisibility, 'emit');
+
+                component.searchTerm = 'fake-search-term';
+                component.showClearButton = true;
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'));
+                clearButton.nativeElement.dispatchEvent(new MouseEvent('mousedown'));
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                expect(resetEmitSpy).toHaveBeenCalled();
+                expect(searchVisibilityChangeSpy).toHaveBeenCalledWith(false);
+                expect(component.subscriptAnimationState.value).toEqual('inactive');
+                expect(component.searchTerm).toEqual('');
+            });
+
+        });
+
+        describe('Collapse on blur', () => {
+            beforeEach(fakeAsync(() => {
+                fixture.detectChanges();
+                component.toggleSearchBar();
+                tick(200);
+            }));
+
+            it('should collapse search on blur when the collapseOnBlur is set to true', fakeAsync (() => {
+                const searchVisibilityChangeSpy = spyOn(component.searchVisibility, 'emit');
+                const resetEmitSpy = spyOn(component.reset, 'emit');
+                component.collapseOnBlur = true;
+                component.searchTerm = 'fake-search-term';
+                component.onBlur({ relatedTarget: null });
+                tick(200);
+
+                expect(searchVisibilityChangeSpy).toHaveBeenCalledWith(false);
+                expect(component.subscriptAnimationState.value).toEqual('inactive');
+                expect(component.searchTerm).toEqual('');
+                expect(resetEmitSpy).toHaveBeenCalled();
+            }));
+
+            it('should not collapse search on blur when the collapseOnBlur is set to false', () => {
+                const searchVisibilityChangeSpy = spyOn(component.searchVisibility, 'emit');
+                component.searchTerm = 'fake-search-term';
+                component.collapseOnBlur = false;
+                component.onBlur({ relatedTarget: null });
+
+                expect(searchVisibilityChangeSpy).not.toHaveBeenCalled();
+                expect(component.subscriptAnimationState.value).toEqual('active');
+                expect(component.searchTerm).toEqual('fake-search-term');
+            });
+        });
+    });
 });