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

[AAE-36983] Updated translation keys in search-text-input.component.html (#11083)

Browse Source
This commit is contained in:
Alex Molodyh
2025-07-30 15:00:12 -07:00
committed by GitHub
parent bf7f7ebf9f
commit 8978e24c79
3 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lib/core/src/lib/i18n/en.json
View File

@@ -292,7 +292,19 @@
}, },
"SEARCH": { "SEARCH": {
"TOGGLE_ASC_DESC_ORDER": "Toggle results between ascending and descending order", "TOGGLE_ASC_DESC_ORDER": "Toggle results between ascending and descending order",
"SORT_BY": "Sort by" "SORT_BY": "Sort by",
"BUTTON": {
"TOOLTIP": "Search",
"ARIA-LABEL": "Search button"
},
"INPUT": {
"ARIA-LABEL": "Search input"
},
"FILTER": {
"BUTTONS": {
"CLOSE": "Close"
}
}
}, },
"FEATURE-FLAGS": { "FEATURE-FLAGS": {
"OVERRIDES": "Feature flag overrides", "OVERRIDES": "Feature flag overrides",

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

@@ -7,16 +7,16 @@
id="adf-search-button" id="adf-search-button"
class="adf-search-button" class="adf-search-button"
[ngClass]="{'adf-search-button-inactive': subscriptAnimationState.value === 'inactive'}" [ngClass]="{'adf-search-button-inactive': subscriptAnimationState.value === 'inactive'}"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate" [title]="'CORE.SEARCH.BUTTON.TOOLTIP' | translate"
(click)="toggleSearchBar()" (click)="toggleSearchBar()"
(keyup.enter)="toggleSearchBar()"> (keyup.enter)="toggleSearchBar()">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon> <mat-icon [attr.aria-label]="'CORE.SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button> </button>
<mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel"> <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
<mat-label *ngIf='label'>{{label}}</mat-label> <mat-label *ngIf='label'>{{label}}</mat-label>
<input matInput <input matInput
#searchInput #searchInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate" [attr.aria-label]="'CORE.SEARCH.INPUT.ARIA-LABEL' | translate"
[attr.type]="inputType" [attr.type]="inputType"
[autocomplete]="getAutoComplete()" [autocomplete]="getAutoComplete()"
id="adf-control-input" id="adf-control-input"
@@ -34,7 +34,7 @@
matSuffix 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"
[title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate" [title]="'CORE.SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="resetSearch()" (click)="resetSearch()"
(keyup.enter)="resetSearch()"> (keyup.enter)="resetSearch()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>

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

@@ -21,6 +21,8 @@ import { DebugElement } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { UserPreferencesService } from '../common/services/user-preferences.service'; import { UserPreferencesService } from '../common/services/user-preferences.service';
import { UnitTestingUtils } from '../testing/unit-testing-utils'; import { UnitTestingUtils } from '../testing/unit-testing-utils';
import { NoopTranslateModule } from '../testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
describe('SearchTextInputComponent', () => { describe('SearchTextInputComponent', () => {
let fixture: ComponentFixture<SearchTextInputComponent>; let fixture: ComponentFixture<SearchTextInputComponent>;
@@ -31,7 +33,7 @@ describe('SearchTextInputComponent', () => {
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [SearchTextInputComponent] imports: [NoopAnimationsModule, SearchTextInputComponent, NoopTranslateModule]
}); });
fixture = TestBed.createComponent(SearchTextInputComponent); fixture = TestBed.createComponent(SearchTextInputComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
@@ -356,4 +358,37 @@ describe('SearchTextInputComponent', () => {
}); });
}); });
}); });
describe('Translations', () => {
beforeEach(fakeAsync(() => {
component.expandable = true;
component.showClearButton = true;
fixture.detectChanges();
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
tick(200);
}));
it('should contain correct translation key for search button tooltip', () => {
const searchButton = testingUtils.getByCSS('#adf-search-button');
expect(searchButton.nativeElement.getAttribute('title')).toBe('CORE.SEARCH.BUTTON.TOOLTIP');
});
it('should contain correct translation key for search button aria-label', () => {
const searchButton = testingUtils.getByCSS('#adf-search-button');
// eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
const searchIcon = searchButton.nativeElement.querySelector('mat-icon');
expect(searchIcon.getAttribute('aria-label')).toBe('CORE.SEARCH.BUTTON.ARIA-LABEL');
});
it('should contain correct translation key for search input aria-label', () => {
const searchInput = testingUtils.getByCSS('#adf-control-input');
expect(searchInput.nativeElement.getAttribute('aria-label')).toBe('CORE.SEARCH.INPUT.ARIA-LABEL');
});
it('should contain correct translation key for clear button title', () => {
const clearButton = testingUtils.getByDataAutomationId('adf-clear-search-button');
expect(clearButton.nativeElement.getAttribute('title')).toBe('CORE.SEARCH.FILTER.BUTTONS.CLOSE');
});
});
}); });