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 (#10050)

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -301,21 +301,22 @@ describe('SearchTextInputComponent', () => {
tick(200); 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 () => { it('should clear button be visible when showClearButton is set to true', async () => {
component.showClearButton = true; component.showClearButton = true;
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); 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', () => { it('should clear button not be visible when showClearButton is set to false', () => {
component.showClearButton = false; component.showClearButton = false;
fixture.detectChanges(); 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 () => { it('should reset the search when clicking the clear button', async () => {
@ -327,8 +328,7 @@ describe('SearchTextInputComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]')); getClearSearchButton().click();
clearButton.nativeElement.dispatchEvent(new MouseEvent('mousedown'));
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();