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 1b7a07ca8b..f069941ab9 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 } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } 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,6 +30,7 @@ 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: { @@ -60,15 +61,18 @@ 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') => { - const searchInput = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-input"]')); + const typeToSearchBox = (searchTerm = 'string-to-search'): void => { + const searchInput = testingUtils.getByCSS('[data-automation-id="content-node-selector-search-input"]'); searchInput.nativeElement.value = searchTerm; component.searchInput.setValue(searchTerm); fixture.detectChanges(); }; - const triggerSearchResults = (searchResults: ResultSetPaging) => { + const getSearchIcon = (type: string): DebugElement => testingUtils.getByCSS(`[data-automation-id="content-node-selector-search-${type}"]`); + + const triggerSearchResults = (searchResults: ResultSetPaging): void => { const service = fixture.debugElement.injector.get(SearchQueryBuilderService); service.executed.next(searchResults); }; @@ -92,6 +96,8 @@ describe('ContentNodeSelectorPanelComponent', () => { searchQueryBuilderService = fixture.debugElement.injector.get(SearchQueryBuilderService); searchQueryBuilderService.resetToDefaults(); + testingUtils = new UnitTestingUtils(fixture.debugElement); + spyOn(nodeService, 'getNode').and.returnValue( of( new Node({ @@ -196,7 +202,7 @@ describe('ContentNodeSelectorPanelComponent', () => { spyOn(component, 'clearSearch'); fixture.detectChanges(); - const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]')); + const clearIcon = getSearchIcon('clear'); clearIcon.nativeElement.click(); fixture.detectChanges(); @@ -357,8 +363,8 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); tick(debounceSearch); - 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"]')); + const searchIcon = getSearchIcon('icon'); + const clearIcon = getSearchIcon('clear'); expect(searchIcon).not.toBeNull(); expect(clearIcon).toBeNull(); @@ -371,13 +377,26 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - 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"]')); + const searchIcon = getSearchIcon('icon'); + const clearIcon = getSearchIcon('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]; @@ -553,7 +572,7 @@ describe('ContentNodeSelectorPanelComponent', () => { })); it('should show the current folder content instead of search results if search was not performed', async () => { - const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); + const documentList = testingUtils.getByDirective(DocumentListComponent); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); }); @@ -565,7 +584,7 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); + const documentList = testingUtils.getByDirective(DocumentListComponent); expect(documentList).not.toBeNull(); expect( documentList.componentInstance.rowFilter({ @@ -593,7 +612,7 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); + const documentList = testingUtils.getByDirective(DocumentListComponent); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.rowFilter).toBeTruthy(); @@ -607,7 +626,7 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); - const documentList = fixture.debugElement.query(By.directive(DocumentListComponent)); + const documentList = testingUtils.getByDirective(DocumentListComponent); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.imageResolver).toBe(resolver); }); @@ -619,7 +638,7 @@ describe('ContentNodeSelectorPanelComponent', () => { triggerSearchResults(fakeResultSetPaging); fixture.detectChanges(); - const documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); + const documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); expect(documentList).not.toBeNull(); expect(component.hasValidQuery).toEqual(true); expect(documentList.componentInstance.currentFolderId).toBeNull(); @@ -664,12 +683,12 @@ describe('ContentNodeSelectorPanelComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - const clearButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]')); + const clearButton = getSearchIcon('clear'); expect(clearButton).not.toBeNull(); clearButton.triggerEventHandler('click', {}); fixture.detectChanges(); - const documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); + const documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); expect(documentList).not.toBeNull(); expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); done(); @@ -696,13 +715,13 @@ describe('ContentNodeSelectorPanelComponent', () => { component.siteChanged({ entry: { guid: 'Kame-Sennin Muten Roshi' } } as SiteEntry); fixture.detectChanges(); - let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); + let documentList = testingUtils.getByCSS('[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 = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]')); + documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]'); expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku'); done(); @@ -711,7 +730,7 @@ describe('ContentNodeSelectorPanelComponent', () => { describe('Pagination "Load more" button', () => { it('should NOT be shown by default', () => { fixture.detectChanges(); - const pagination = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]')); + const pagination = testingUtils.getByCSS('[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 db6005e8cf..9be81f942e 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,18 +13,26 @@ 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 624f925935..c02a265bdc 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,11 +80,6 @@ $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 { @@ -92,6 +87,14 @@ $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); + } + } } } }