diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component-search.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component-search.spec.ts index f069941ab9..1b7a07ca8b 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component-search.spec.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component-search.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { Node, NodeEntry, NodePaging, RequestScope, ResultSetPaging, SiteEntry, SitePaging, SitePagingList } from '@alfresco/js-api'; @@ -30,7 +30,6 @@ import { SearchQueryBuilderService } from '../../search'; import { mockSearchRequest } from '../../mock/search-query.mock'; import { SitesService } from '../../common/services/sites.service'; import { NodesApiService } from '../../common/services/nodes-api.service'; -import { UnitTestingUtils } from '../../../../../core/src/lib/testing/unit-testing-utils'; const fakeResultSetPaging: ResultSetPaging = { list: { @@ -61,18 +60,15 @@ describe('ContentNodeSelectorPanelComponent', () => { const fakeNodeEntry = new Node({ id: 'fakeId' }); const nodeEntryEvent = new NodeEntryEvent(fakeNodeEntry); let searchQueryBuilderService: SearchQueryBuilderService; - let testingUtils: UnitTestingUtils; - const typeToSearchBox = (searchTerm = 'string-to-search'): void => { - const searchInput = testingUtils.getByCSS('[data-automation-id="content-node-selector-search-input"]'); + const typeToSearchBox = (searchTerm = 'string-to-search') => { + const searchInput = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-input"]')); searchInput.nativeElement.value = searchTerm; component.searchInput.setValue(searchTerm); fixture.detectChanges(); }; - const getSearchIcon = (type: string): DebugElement => testingUtils.getByCSS(`[data-automation-id="content-node-selector-search-${type}"]`); - - const triggerSearchResults = (searchResults: ResultSetPaging): void => { + const triggerSearchResults = (searchResults: ResultSetPaging) => { const service = fixture.debugElement.injector.get(SearchQueryBuilderService); service.executed.next(searchResults); }; @@ -96,8 +92,6 @@ describe('ContentNodeSelectorPanelComponent', () => { searchQueryBuilderService = fixture.debugElement.injector.get(SearchQueryBuilderService); searchQueryBuilderService.resetToDefaults(); - testingUtils = new UnitTestingUtils(fixture.debugElement); - spyOn(nodeService, 'getNode').and.returnValue( of( new Node({ @@ -202,7 +196,7 @@ describe('ContentNodeSelectorPanelComponent', () => { spyOn(component, 'clearSearch'); fixture.detectChanges(); - const clearIcon = getSearchIcon('clear'); + const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]')); clearIcon.nativeElement.click(); fixture.detectChanges(); @@ -363,8 +357,8 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); tick(debounceSearch); - const searchIcon = getSearchIcon('icon'); - const clearIcon = getSearchIcon('clear'); + const searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]')); + const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]')); expect(searchIcon).not.toBeNull(); expect(clearIcon).toBeNull(); @@ -377,26 +371,13 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const searchIcon = getSearchIcon('icon'); - const clearIcon = getSearchIcon('clear'); + const searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]')); + const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]')); expect(searchIcon).toBeNull(); expect(clearIcon).not.toBeNull(); })); - it('should call clear method on the X (clear) button click', fakeAsync(() => { - fixture.detectChanges(); - typeToSearchBox('123'); - tick(debounceSearch); - - fixture.detectChanges(); - - spyOn(component, 'clear'); - const clearButton = getSearchIcon('clear'); - clearButton.nativeElement.click(); - expect(component.clear).toHaveBeenCalled(); - })); - it('should clear the search field, nodes and chosenNode when clicking on the X (clear) icon', async () => { component.chosenNode = [entry]; @@ -572,7 +553,7 @@ describe('ContentNodeSelectorPanelComponent', () => { })); it('should show the current folder content instead of search results if search was not performed', async () => { - const documentList = testingUtils.getByDirective(DocumentListComponent); + const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); }); @@ -584,7 +565,7 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const documentList = testingUtils.getByDirective(DocumentListComponent); + const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); expect(documentList).not.toBeNull(); expect( documentList.componentInstance.rowFilter({ @@ -612,7 +593,7 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const documentList = testingUtils.getByDirective(DocumentListComponent); + const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.rowFilter).toBeTruthy(); @@ -626,7 +607,7 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const documentList = testingUtils.getByDirective(DocumentListComponent); + const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.imageResolver).toBe(resolver); }); @@ -638,7 +619,7 @@ describe('ContentNodeSelectorPanelComponent', () => { triggerSearchResults(fakeResultSetPaging); fixture.detectChanges(); - const documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); + const documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); expect(documentList).not.toBeNull(); expect(component.hasValidQuery).toEqual(true); expect(documentList.componentInstance.currentFolderId).toBeNull(); @@ -683,12 +664,12 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - const clearButton = getSearchIcon('clear'); + const clearButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]')); expect(clearButton).not.toBeNull(); clearButton.triggerEventHandler('click', {}); fixture.detectChanges(); - const documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); + const documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); done(); @@ -715,13 +696,13 @@ describe('ContentNodeSelectorPanelComponent', () => { component.siteChanged({ entry: { guid: 'Kame-Sennin Muten Roshi' } } as SiteEntry); fixture.detectChanges(); - let documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); + let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); expect(documentList.componentInstance.currentFolderId).toBe('Kame-Sennin Muten Roshi'); component.siteChanged({ entry: { guid: undefined } } as SiteEntry); fixture.detectChanges(); - documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); + documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); done(); @@ -730,7 +711,7 @@ describe('ContentNodeSelectorPanelComponent', () => { describe('Pagination "Load more" button', () => { it('should NOT be shown by default', () => { fixture.detectChanges(); - const pagination = testingUtils.getByCSS('[data-automation-id="adf-infinite-pagination-button"]'); + const pagination = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]')); expect(pagination).toBeNull(); }); diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html index 9be81f942e..db6005e8cf 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html @@ -13,26 +13,18 @@ adf-auto-focus data-automation-id="content-node-selector-search-input"> - + clear + - search + data-automation-id="content-node-selector-search-icon">search + + [attr.title]="'COMMON.CLEAR' | translate"> clear diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss index c02a265bdc..624f925935 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -80,6 +80,11 @@ $search-result-height: calc(100% - 60px); width: 1em; height: 1em; font-size: 20px; + cursor: pointer; + + &:hover { + color: var(--adf-theme-foreground-base-color); + } } .adf-permission-search-input-clear-button { @@ -87,14 +92,6 @@ $search-result-height: calc(100% - 60px); width: 20px; height: 32px; margin-right: 1.5px; - - .adf-permission-search-icon:is(mat-icon) { - cursor: pointer; - - &:hover { - color: var(--adf-theme-foreground-base-color); - } - } } } }