inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-8514] Use proper icon button in search text input ()

Browse Source 
* [ACS-8514] Use proper icon button in search text input

* [ACS-8514] Adapt unit tests
This commit is contained in:
MichalKinas 2024-08-06 15:28:09 +02:00 committed by GitHub
parent c2bdce8d89
commit 3406341859
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 10 deletions

15
lib/core/src/lib/search-text/search-text-input.component.html

@ -1,6 +1,7 @@
<div class="adf-search-container" [attr.state]="subscriptAnimationState.value">
<div [@transitionMessages]="subscriptAnimationState"
(@transitionMessages.done)="applySearchFocus($event)">
<div class="adf-search-container-transition"
[@transitionMessages]="subscriptAnimationState"
(@transitionMessages.done)="applySearchFocus($event)">
<button mat-icon-button
*ngIf="expandable"
id="adf-search-button"
@ -27,10 +28,16 @@
(ngModelChange)="inputChange($event)"
[searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null"
(keyup.enter)="searchSubmit($event)">
<mat-icon *ngIf="canShowClearSearch()" matSuffix
<button mat-icon-button
*ngIf="canShowClearSearch()"
matSuffix
data-automation-id="adf-clear-search-button"
class="adf-clear-search-button"
(mousedown)="resetSearch()">clear</mat-icon>
[title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="resetSearch()"
(keyup.enter)="resetSearch()">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
</div>

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

@ -301,21 +301,22 @@ describe('SearchTextInputComponent', () => {
tick(200);
}));
const getClearSearchButton = (): HTMLButtonElement =>
fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'))?.nativeElement;
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();
expect(getClearSearchButton()).toBeDefined();
});
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();
expect(getClearSearchButton()).toBeUndefined();
});
it('should reset the search when clicking the clear button', async () => {
@ -327,8 +328,7 @@ describe('SearchTextInputComponent', () => {
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'));
getClearSearchButton().click();
fixture.detectChanges();
await fixture.whenStable();