diff --git a/demo-shell-ng2/app/components/search/search-bar.component.html b/demo-shell-ng2/app/components/search/search-bar.component.html index 52d8ee7a52..b890c54210 100644 --- a/demo-shell-ng2/app/components/search/search-bar.component.html +++ b/demo-shell-ng2/app/components/search/search-bar.component.html @@ -1,5 +1,5 @@ + (searchSubmit)="onSearchSubmit($event);" (searchChange)="onSearchTermChange($event);" (expand)="onExpandToggle($event);" (fileSelect)="onFileClicked($event)"> + (searchSubmit)="onSearchSubmit($event);" + (fileSelect)="onSearchResultSelect($event);"> ``` @@ -172,6 +173,8 @@ bootstrap(SearchDemo, [ **searchChange**: Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string.
**searchSubmit**: Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object.
+**fileSelect**: Emitted when a file item from the list of find-as-you-type results is selected +**expand**: Emitted when the expanded state of the control changes based on focus events and the content of the input control #### Options diff --git a/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts b/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts new file mode 100644 index 0000000000..edd563beb7 --- /dev/null +++ b/ng2-components/ng2-alfresco-search/src/assets/alfresco-search.component.mock.ts @@ -0,0 +1,88 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +const entryItem = { + entry: { + id: '123', + name: 'MyDoc', + isFile : true, + content: { + mimeType: 'text/plain' + }, + createdByUser: { + displayName: 'John Doe' + }, + modifiedByUser: { + displayName: 'John Doe' + } + } +}; + +export var result = { + list: { + entries: [ + entryItem + ] + } +}; + +export var results = { + list: { + entries: [ + entryItem, + entryItem, + entryItem + ] + } +}; + +export var folderResult = { + list: { + entries: [ + { + entry: { + id: '123', + name: 'MyFolder', + isFile : false, + isFolder : true, + createdByUser: { + displayName: 'John Doe' + }, + modifiedByUser: { + displayName: 'John Doe' + } + } + } + ] + } +}; + +export var noResult = { + list: { + entries: [] + } +}; + +export var errorJson = { + error: { + errorKey: 'Search failed', + statusCode: 400, + briefSummary: '08220082 search failed', + stackTrace: 'For security reasons the stack trace is no longer displayed, but the property is kept for previous versions.', + descriptionURL: 'https://api-explorer.alfresco.com' + } +}; diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html index 66fcf83db3..af3d623fc0 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html @@ -1,8 +1,14 @@ - - + +
{{getMimeTypeKey(result)|translate}}
{{result.entry.name}}
@@ -29,5 +35,3 @@
-

{{ 'SEARCH.RESULTS.ERROR' | - translate:{errorMessage: errorMessage} }}

diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts index d88a184b92..43f9e89abb 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts @@ -19,6 +19,7 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component'; import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service'; import { TranslationMock } from './../assets/translation.service.mock'; +import { result, results, folderResult, noResult, errorJson } from './../assets/alfresco-search.component.mock'; import { AlfrescoSearchService } from '../services/alfresco-search.service'; import { AlfrescoApiService, @@ -34,64 +35,10 @@ describe('AlfrescoSearchAutocompleteComponent', () => { let fixture: ComponentFixture, element: HTMLElement; let component: AlfrescoSearchAutocompleteComponent; - let result = { - list: { - entries: [ - { - entry: { - id: '123', - name: 'MyDoc', - isFile : true, - content: { - mimeType: 'text/plain' - }, - createdByUser: { - displayName: 'John Doe' - }, - modifiedByUser: { - displayName: 'John Doe' - } - } - } - ] - } - }; - - let folderResult = { - list: { - entries: [ - { - entry: { - id: '123', - name: 'MyFolder', - isFile : false, - isFolder : true, - createdByUser: { - displayName: 'John Doe' - }, - modifiedByUser: { - displayName: 'John Doe' - } - } - } - ] - } - }; - - let noResult = { - list: { - entries: [] - } - }; - - let errorJson = { - error: { - errorKey: 'Search failed', - statusCode: 400, - briefSummary: '08220082 search failed', - stackTrace: 'For security reasons the stack trace is no longer displayed, but the property is kept for previous versions.', - descriptionURL: 'https://api-explorer.alfresco.com' - } + let updateSearchTerm = (newSearchTerm: string): void => { + let oldSearchTerm = component.searchTerm; + component.searchTerm = newSearchTerm; + component.ngOnChanges({searchTerm: { currentValue: newSearchTerm, previousValue: oldSearchTerm}}); }; beforeEach(async(() => { @@ -123,167 +70,352 @@ describe('AlfrescoSearchAutocompleteComponent', () => { expect(translationService.addTranslationFolder).toHaveBeenCalledWith('node_modules/ng2-alfresco-search/dist/src'); }); - it('should display search results when a search term is provided', () => { - let searchTerm = { currentValue: 'customSearchTerm', previousValue: ''}; - spyOn(component, 'displaySearchResults').and.stub(); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({ - searchTerm: searchTerm + describe('search results', () => { + + let searchService; + + beforeEach(() => { + searchService = fixture.debugElement.injector.get(AlfrescoSearchService); }); - fixture.detectChanges(); - expect(component.displaySearchResults).toHaveBeenCalledWith(searchTerm.currentValue); + + it('should clear results straight away when a new search term is entered', async(() => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(result)); + + component.searchTerm = 'searchTerm'; + component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''} }); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + component.searchTerm = 'searchTerm2'; + component.ngOnChanges({searchTerm: { currentValue: 'searchTerm2', previousValue: 'searchTerm'} }); + fixture.detectChanges(); + expect(element.querySelectorAll('table[data-automation-id="autocomplete_results"] tbody tr').length).toBe(0); + }); + })); + + it('should display the returned search results', (done) => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(result)); + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + expect( element.querySelector('#result_user_0').innerHTML).toBe('John Doe'); + expect( element.querySelector('#result_name_0').innerHTML).toBe('MyDoc'); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + + it('should limit the number of returned search results to the configured maximum', (done) => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(results)); + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + expect(element.querySelectorAll('table[data-automation-id="autocomplete_results"] tbody tr').length).toBe(2); + done(); + }); + + component.maxResults = 2; + updateSearchTerm('searchTerm'); + }); + + it('should display the correct thumbnail for result items', (done) => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(result)); + + component.baseComponentPath = 'http://localhost'; + + let thumbnailService = fixture.debugElement.injector.get(AlfrescoThumbnailService); + spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg'); + spyOn(thumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE'); + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + let imgEl = element.querySelector('#result_row_0 img'); + expect(imgEl).not.toBeNull(); + expect(imgEl.src).toBe('http://localhost/img/fake-type-icon.svg'); + expect(imgEl.alt).toBe('SEARCH.ICONS.FAKE_TYPE'); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + + it('should display no result if no result are returned', (done) => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(noResult)); + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + expect(element.querySelector('#search_no_result')).not.toBeNull(); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + }); - it('should clear results straight away when a new search term is entered', async(() => { + describe('errors', () => { - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.resolve(result)); + let searchService; - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''} }); - - fixture.whenStable().then(() => { - fixture.detectChanges(); - component.searchTerm = 'searchTerm2'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm2', previousValue: 'searchTerm'} }); - fixture.detectChanges(); - expect(element.querySelectorAll('table[data-automation-id="autocomplete_results"] tbody tr').length).toBe(0); - }); - })); - - it('should display the returned search results', (done) => { - - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.resolve(result)); - - component.resultsEmitter.subscribe(x => { - fixture.detectChanges(); - expect( element.querySelector('#result_user_0').innerHTML).toBe('John Doe'); - expect( element.querySelector('#result_name_0').innerHTML).toBe('MyDoc'); - done(); + beforeEach(() => { + searchService = fixture.debugElement.injector.get(AlfrescoSearchService); + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.reject(errorJson)); }); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''} }); + it('should display an error if an error is encountered running the search', (done) => { + + component.resultsLoad.subscribe(() => {}, () => { + fixture.detectChanges(); + let resultsEl = element.querySelector('[data-automation-id="autocomplete_results"]'); + let errorEl = element.querySelector('[data-automation-id="autocomplete_error_message"]'); + expect(resultsEl).toBeNull(); + expect(errorEl).not.toBeNull(); + expect(errorEl.innerText.trim()).toBe('SEARCH.RESULTS.ERROR'); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + + it('should clear errors straight away when a new search is performed', async(() => { + + updateSearchTerm('searchTerm'); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + component.searchTerm = 'searchTerm2'; + component.ngOnChanges({searchTerm: { currentValue: 'searchTerm2', previousValue: 'searchTerm'} }); + fixture.detectChanges(); + let errorEl = element.querySelector('[data-automation-id="autocomplete_error_message"]'); + expect(errorEl).toBeNull(); + }); + })); + }); - it('should display the correct thumbnail for result items', (done) => { + describe('mouse interactions', () => { - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.resolve(result)); + let searchService; - component.baseComponentPath = 'http://localhost'; - - let thumbnailService = fixture.debugElement.injector.get(AlfrescoThumbnailService); - spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg'); - spyOn(thumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE'); - - component.resultsEmitter.subscribe(() => { - fixture.detectChanges(); - let imgEl = element.querySelector('#result_row_0 img'); - expect(imgEl).not.toBeNull(); - expect(imgEl.src).toBe('http://localhost/img/fake-type-icon.svg'); - expect(imgEl.alt).toBe('SEARCH.ICONS.FAKE_TYPE'); - done(); + beforeEach(() => { + searchService = fixture.debugElement.injector.get(AlfrescoSearchService); + }); + + it('should emit file select when file item clicked', (done) => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(result)); + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + ( element.querySelector('#result_row_0')).click(); + }); + + updateSearchTerm('searchTerm'); + + component.fileSelect.subscribe(() => { + done(); + }); + }); + + it('should not emit preview if a non-file item is clicked', (done) => { + + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(folderResult)); + + spyOn(component.fileSelect, 'emit'); + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + ( element.querySelector('#result_row_0')).click(); + expect(component.fileSelect.emit).not.toHaveBeenCalled(); + done(); + }); + + updateSearchTerm('searchTerm'); }); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''} }); }); - it('should display no result if no result are returned', (done) => { + describe('keyboard interactions', () => { - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.resolve(noResult)); + let searchService; - component.resultsEmitter.subscribe(x => { - fixture.detectChanges(); - expect(element.querySelector('#search_no_result')).not.toBeNull(); - done(); + beforeEach(() => { + searchService = fixture.debugElement.injector.get(AlfrescoSearchService); + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(results)); + }); + + it('should emit file select when enter key pressed when a file item is in focus', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + ( element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', { + key: 'Enter' + })); + }); + + updateSearchTerm('searchTerm'); + + component.fileSelect.subscribe(() => { + done(); + }); + }); + + it('should emit cancel event when escape key pressed when a result is in focus', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + ( element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', { + key: 'Escape' + })); + }); + + updateSearchTerm('searchTerm'); + + component.cancel.subscribe(() => { + done(); + }); + }); + + it('should focus the next result when down arrow key pressed when a result is in focus', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + let firstResult: any = element.querySelector('#result_row_0'); + let secondResult: any = element.querySelector('#result_row_1'); + spyOn(secondResult, 'focus'); + firstResult.focus(); + firstResult.dispatchEvent(new KeyboardEvent('keyup', { + key: 'ArrowDown' + })); + expect(secondResult.focus).toHaveBeenCalled(); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + + it('should do nothing when down arrow key pressed when the last result is in focus', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + let lastResult: any = element.querySelector('#result_row_2'); + lastResult.focus(); + lastResult.dispatchEvent(new KeyboardEvent('keyup', { + key: 'ArrowDown' + })); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + + it('should focus the previous result when up arrow key pressed when a result is in focus', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + let firstResult: any = element.querySelector('#result_row_0'); + let secondResult: any = element.querySelector('#result_row_1'); + spyOn(firstResult, 'focus'); + secondResult.focus(); + secondResult.dispatchEvent(new KeyboardEvent('keyup', { + key: 'ArrowUp' + })); + expect(firstResult.focus).toHaveBeenCalled(); + done(); + }); + + updateSearchTerm('searchTerm'); + }); + + it('should emit scroll back event when up arrow key pressed and the first result is in focus', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + let firstResult: any = element.querySelector('#result_row_0'); + firstResult.dispatchEvent(new KeyboardEvent('keyup', { + key: 'ArrowUp' + })); + }); + + component.scrollBack.subscribe(() => { + done(); + }); + + updateSearchTerm('searchTerm'); }); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}}); }); - it('should display an error if an error is encountered running the search', (done) => { + describe('changing focus', () => { - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.reject(errorJson)); + let searchService; - component.errorEmitter.subscribe(() => { - fixture.detectChanges(); - let resultsEl = element.querySelector('[data-automation-id="autocomplete_results"]'); - let errorEl = element.querySelector('[data-automation-id="autocomplete_error_message"]'); - expect(resultsEl).toBeNull(); - expect(errorEl).not.toBeNull(); - expect(errorEl.innerText.trim()).toBe('SEARCH.RESULTS.ERROR'); - done(); + beforeEach(() => { + searchService = fixture.debugElement.injector.get(AlfrescoSearchService); + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(result)); }); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}}); - }); + it('should emit a focus event when a result comes into focus', (done) => { - it('should clear errors straight away when a new search is performed', async(() => { + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + ( element.querySelector('#result_row_0')).dispatchEvent(new FocusEvent('focus')); + }); - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.reject(errorJson)); + updateSearchTerm('searchTerm'); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}}); - - fixture.whenStable().then(() => { - fixture.detectChanges(); - component.searchTerm = 'searchTerm2'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm2', previousValue: 'searchTerm'} }); - fixture.detectChanges(); - let errorEl = element.querySelector('[data-automation-id="autocomplete_error_message"]'); - expect(errorEl).toBeNull(); - }); - })); - - it('should emit preview when file item clicked', (done) => { - - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.resolve(result)); - - component.resultsEmitter.subscribe(x => { - fixture.detectChanges(); - ( element.querySelector('#result_row_0')).click(); + component.searchFocus.subscribe((e: FocusEvent) => { + expect(e).not.toBeNull(); + expect(e.type).toBe('focus'); + done(); + }); }); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}}); + it('should emit a focus event when a result loses focus', (done) => { - component.preview.subscribe(e => { - done(); - }); - }); + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + ( element.querySelector('#result_row_0')).dispatchEvent(new FocusEvent('blur')); + }); - it('should not emit preview if a non-file item is clicked', (done) => { + updateSearchTerm('searchTerm'); - let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); - spyOn(searchService, 'getSearchNodesPromise') - .and.returnValue(Promise.resolve(folderResult)); - - spyOn(component.preview, 'emit'); - component.resultsEmitter.subscribe(x => { - fixture.detectChanges(); - ( element.querySelector('#result_row_0')).click(); - expect(component.preview.emit).not.toHaveBeenCalled(); - done(); + component.searchFocus.subscribe((e: FocusEvent) => { + expect(e).not.toBeNull(); + expect(e.type).toBe('blur'); + done(); + }); + }); + + it('should give focus to the first result when focusResult() is called externally', (done) => { + + component.resultsLoad.subscribe(() => { + fixture.detectChanges(); + let firstResult: any = element.querySelector('#result_row_0'); + spyOn(firstResult, 'focus'); + component.focusResult(); + expect(firstResult.focus).toHaveBeenCalled(); + done(); + }); + + updateSearchTerm('searchTerm'); }); - component.searchTerm = 'searchTerm'; - component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}}); }); }); diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts index 31f046b96e..903883f98a 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnInit, OnChanges, Output } from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, OnInit, OnChanges, Output, ViewChild } from '@angular/core'; import { AlfrescoSearchService } from './../services/alfresco-search.service'; import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service'; import { AlfrescoTranslationService } from 'ng2-alfresco-core'; @@ -40,14 +40,25 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { @Input() ngClass: any; - @Output() - preview: EventEmitter = new EventEmitter(); + @Input() + maxResults: number = 5; @Output() - resultsEmitter = new EventEmitter(); + fileSelect: EventEmitter = new EventEmitter(); @Output() - errorEmitter = new EventEmitter(); + searchFocus: EventEmitter = new EventEmitter(); + + @Output() + cancel = new EventEmitter(); + + @Output() + resultsLoad = new EventEmitter(); + + @Output() + scrollBack = new EventEmitter(); + + @ViewChild('resultsTableBody', {}) resultsTableBody: ElementRef; constructor(private alfrescoSearchService: AlfrescoSearchService, private translate: AlfrescoTranslationService, @@ -72,20 +83,20 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { * Loads and displays search results * @param searchTerm Search query entered by user */ - public displaySearchResults(searchTerm) { + private displaySearchResults(searchTerm) { if (searchTerm !== null && searchTerm !== '') { this.alfrescoSearchService .getLiveSearchResults(searchTerm) .subscribe( results => { - this.results = results.list.entries; + this.results = results.list.entries.slice(0, this.maxResults); this.errorMessage = null; - this.resultsEmitter.emit(this.results); + this.resultsLoad.emit(this.results); }, error => { this.results = null; this.errorMessage = error; - this.errorEmitter.emit(error); + this.resultsLoad.error(error); } ); } @@ -116,17 +127,65 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { } } - onItemClick(node, event?: Event): void { - if (event) { - event.preventDefault(); - } + focusResult(): void { + let firstResult: any = this.resultsTableBody.nativeElement.querySelector('tr'); + firstResult.focus(); + } + + onItemClick(node): void { if (node && node.entry) { if (node.entry.isFile) { - this.preview.emit({ + this.fileSelect.emit({ value: node }); } } } + onRowFocus($event: FocusEvent): void { + this.searchFocus.emit($event); + } + + onRowBlur($event: FocusEvent): void { + this.searchFocus.emit($event); + } + + onRowEnter(node): void { + if (node && node.entry) { + if (node.entry.isFile) { + this.fileSelect.emit({ + value: node + }); + } + } + } + + private getNextElementSibling(node: Element): Element { + return node.nextElementSibling; + } + + private getPreviousElementSibling(node: Element): Element { + return node.previousElementSibling; + } + + onRowArrowDown($event: KeyboardEvent): void { + let nextElement: any = this.getNextElementSibling( $event.target); + if (nextElement) { + nextElement.focus(); + } + } + + onRowArrowUp($event: KeyboardEvent): void { + let previousElement: any = this.getPreviousElementSibling( $event.target); + if (previousElement) { + previousElement.focus(); + } else { + this.scrollBack.emit($event); + } + } + + onRowEscape($event: KeyboardEvent): void { + this.cancel.emit($event); + } + } diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html index 868063b0f5..2ea9201e75 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html @@ -22,6 +22,9 @@ - + (fileSelect)="onFileClicked($event)" + (searchFocus)="onAutoCompleteFocus($event)" + (scrollBack)="onAutoCompleteReturn($event)" + (cancel)="onAutoCompleteCancel($event)"> diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts index b8321de775..de1382c37c 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts @@ -20,6 +20,7 @@ import { AlfrescoSearchControlComponent } from './alfresco-search-control.compon import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component'; import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service'; import { TranslationMock } from './../assets/translation.service.mock'; +import { result } from './../assets/alfresco-search.component.mock'; import { AlfrescoSettingsService, AlfrescoApiService, @@ -150,24 +151,45 @@ describe('AlfrescoSearchControlComponent', () => { expect(autocomplete.classList.contains('active')).toBe(false); }); - it('should make find-as-you-type control visible when search box has focus', () => { + it('should make find-as-you-type control visible when search box has focus', (done) => { fixture.detectChanges(); - inputEl.dispatchEvent(new Event('focus')); - fixture.detectChanges(); - let autocomplete: Element = element.querySelector('alfresco-search-autocomplete'); - expect(autocomplete.classList.contains('active')).toBe(true); + inputEl.dispatchEvent(new FocusEvent('focus')); + window.setTimeout(() => { // wait for debounce() to complete + fixture.detectChanges(); + let autocomplete: Element = element.querySelector('alfresco-search-autocomplete'); + expect(autocomplete.classList.contains('active')).toBe(true); + done(); + }, 100); }); it('should hide find-as-you-type results when the search box loses focus', (done) => { fixture.detectChanges(); - inputEl.dispatchEvent(new Event('focus')); - inputEl.dispatchEvent(new Event('blur')); + inputEl.dispatchEvent(new FocusEvent('focus')); + inputEl.dispatchEvent(new FocusEvent('blur')); window.setTimeout(() => { fixture.detectChanges(); let autocomplete: Element = element.querySelector('alfresco-search-autocomplete'); expect(autocomplete.classList.contains('active')).toBe(false); done(); - }, 250); + }, 100); + }); + + it('should keep find-as-you-type control visible when user tabs into results', (done) => { + let searchService = fixture.debugElement.injector.get(AlfrescoSearchService); + spyOn(searchService, 'getSearchNodesPromise') + .and.returnValue(Promise.resolve(result)); + + fixture.detectChanges(); + inputEl.dispatchEvent(new FocusEvent('focus')); + fixture.detectChanges(); + inputEl.dispatchEvent(new FocusEvent('blur')); + component.onAutoCompleteFocus(new FocusEvent('focus')); + window.setTimeout(() => { // wait for debounce() to complete + fixture.detectChanges(); + let autocomplete: Element = element.querySelector('alfresco-search-autocomplete'); + expect(autocomplete.classList.contains('active')).toBe(true); + done(); + }, 100); }); it('should hide find-as-you-type results when escape key pressed', () => { @@ -195,6 +217,42 @@ describe('AlfrescoSearchControlComponent', () => { expect(autocomplete.classList.contains('active')).toBe(true); }); + it('should select the first result in find-as-you-type when down arrow is pressed and FAYT is visible', (done) => { + fixture.detectChanges(); + spyOn(component.autocompleteComponent, 'focusResult'); + fixture.detectChanges(); + inputEl.dispatchEvent(new Event('focus')); + window.setTimeout(() => { // wait for debounce() to complete + fixture.detectChanges(); + inputEl.dispatchEvent(new KeyboardEvent('keyup', { + key: 'ArrowDown' + })); + fixture.detectChanges(); + expect(component.autocompleteComponent.focusResult).toHaveBeenCalled(); + done(); + }, 100); + }); + + it('should focus input element when find-as-you-type returns control', () => { + fixture.detectChanges(); + spyOn(inputEl, 'focus'); + fixture.detectChanges(); + component.onAutoCompleteReturn(new KeyboardEvent('keyup', { + key: 'ArrowUp' + })); + expect(inputEl.focus).toHaveBeenCalled(); + }); + + it('should focus input element when find-as-you-type is cancelled', () => { + fixture.detectChanges(); + spyOn(inputEl, 'focus'); + fixture.detectChanges(); + component.onAutoCompleteCancel(new KeyboardEvent('keyup', { + key: 'ArrowUp' + })); + expect(inputEl.focus).toHaveBeenCalled(); + }); + it('should NOT display a find-as-you-type control when configured not to', () => { fixture.componentInstance.autocompleteEnabled = false; fixture.detectChanges(); @@ -239,44 +297,53 @@ describe('AlfrescoSearchControlComponent', () => { describe('component focus', () => { - it('should fire an event when the search box receives focus', () => { + it('should fire an event when the search box receives focus', (done) => { spyOn(component.expand, 'emit'); let inputEl: HTMLElement = element.querySelector('input'); - inputEl.dispatchEvent(new Event('focus')); - expect(component.expand.emit).toHaveBeenCalledWith({ - expanded: true - }); + inputEl.dispatchEvent(new FocusEvent('focus')); + window.setTimeout(() => { + expect(component.expand.emit).toHaveBeenCalledWith({ + expanded: true + }); + done(); + }, 100); }); - it('should fire an event when the search box loses focus', () => { + it('should fire an event when the search box loses focus', (done) => { spyOn(component.expand, 'emit'); let inputEl: HTMLElement = element.querySelector('input'); - inputEl.dispatchEvent(new Event('blur')); - expect(component.expand.emit).toHaveBeenCalledWith({ - expanded: false - }); + inputEl.dispatchEvent(new FocusEvent('blur')); + window.setTimeout(() => { + expect(component.expand.emit).toHaveBeenCalledWith({ + expanded: false + }); + done(); + }, 100); }); it('should NOT fire an event when the search box receives/loses focus but the component is not expandable', - () => { + (done) => { spyOn(component.expand, 'emit'); component.expandable = false; let inputEl: HTMLElement = element.querySelector('input'); - inputEl.dispatchEvent(new Event('focus')); - inputEl.dispatchEvent(new Event('blur')); - expect(component.expand.emit).not.toHaveBeenCalled(); + inputEl.dispatchEvent(new FocusEvent('focus')); + inputEl.dispatchEvent(new FocusEvent('blur')); + window.setTimeout(() => { + expect(component.expand.emit).not.toHaveBeenCalled(); + done(); + }, 100); }); }); describe('file preview', () => { - it('should emit a preview event when onFileClicked is called', () => { - spyOn(component.preview, 'emit'); + it('should emit a file select event when onFileClicked is called', () => { + spyOn(component.fileSelect, 'emit'); component.onFileClicked({ value: 'node12345' }); - expect(component.preview.emit).toHaveBeenCalledWith({ + expect(component.fileSelect.emit).toHaveBeenCalledWith({ 'value': 'node12345' }); }); diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts index 3c44af48f9..0657cf121f 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts @@ -16,9 +16,11 @@ */ import { FormControl, Validators } from '@angular/forms'; -import { Component, Input, Output, OnInit, ElementRef, EventEmitter, ViewChild } from '@angular/core'; +import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ViewChild } from '@angular/core'; import { AlfrescoTranslationService } from 'ng2-alfresco-core'; +import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component'; import { SearchTermValidator } from './../forms/search-term-validator'; +import { Observable, Subject } from 'rxjs/Rx'; @Component({ moduleId: module.id, @@ -26,7 +28,7 @@ import { SearchTermValidator } from './../forms/search-term-validator'; templateUrl: './alfresco-search-control.component.html', styleUrls: ['./alfresco-search-control.component.css'] }) -export class AlfrescoSearchControlComponent implements OnInit { +export class AlfrescoSearchControlComponent implements OnInit, OnDestroy { @Input() searchTerm = ''; @@ -47,7 +49,7 @@ export class AlfrescoSearchControlComponent implements OnInit { searchSubmit = new EventEmitter(); @Output() - preview = new EventEmitter(); + fileSelect = new EventEmitter(); @Output() expand = new EventEmitter(); @@ -56,6 +58,9 @@ export class AlfrescoSearchControlComponent implements OnInit { @ViewChild('searchInput', {}) searchInput: ElementRef; + @ViewChild('autocomplete') + autocompleteComponent: AlfrescoSearchAutocompleteComponent; + @Input() autocompleteEnabled = true; @@ -66,6 +71,8 @@ export class AlfrescoSearchControlComponent implements OnInit { searchValid = false; + private focusSubject = new Subject(); + constructor(private translate: AlfrescoTranslationService) { this.searchControl = new FormControl( @@ -80,11 +87,18 @@ export class AlfrescoSearchControlComponent implements OnInit { this.onSearchTermChange(value); } ); + + this.setupFocusEventHandlers(); + this.translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src'); } + ngOnDestroy(): void { + this.focusSubject.unsubscribe(); + } + private onSearchTermChange(value: string): void { - this.searchActive = true; + this.setAutoCompleteDisplayed(true); this.autocompleteSearchTerm = value; this.searchControl.setValue(value, true); this.searchValid = this.searchControl.valid; @@ -94,6 +108,20 @@ export class AlfrescoSearchControlComponent implements OnInit { }); } + private setupFocusEventHandlers() { + let focusEvents: Observable = this.focusSubject.asObservable().debounceTime(50); + focusEvents.filter(($event: FocusEvent) => { + return $event.type === 'focusin' || $event.type === 'focus'; + }).subscribe(($event) => { + this.onSearchFocus($event); + }); + focusEvents.filter(($event: any) => { + return $event.type === 'focusout' || $event.type === 'blur'; + }).subscribe(($event) => { + this.onSearchBlur($event); + }); + } + getTextFieldClassName(): string { return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : ''); } @@ -121,38 +149,73 @@ export class AlfrescoSearchControlComponent implements OnInit { } } + isAutoCompleteDisplayed(): boolean { + return this.searchActive; + } + + setAutoCompleteDisplayed(display: boolean): void { + this.searchActive = display; + } + onFileClicked(event): void { - this.preview.emit({ + this.fileSelect.emit({ value: event.value }); } - onFocus(): void { - this.searchActive = true; + onSearchFocus($event): void { + this.setAutoCompleteDisplayed(true); + } + + onSearchBlur($event): void { + this.setAutoCompleteDisplayed(false); + } + + onFocus($event): void { if (this.expandable) { this.expand.emit({ expanded: true }); } + this.focusSubject.next($event); } - onBlur(): void { - window.setTimeout(() => { - this.searchActive = false; - }, 200); + onBlur($event): void { if (this.expandable && (this.searchControl.value === '' || this.searchControl.value === undefined)) { this.expand.emit({ expanded: false }); } + this.focusSubject.next($event); } onEscape(): void { - this.searchActive = false; + this.setAutoCompleteDisplayed(false); } onArrowDown(): void { - this.searchActive = true; + if (this.isAutoCompleteDisplayed()) { + this.autocompleteComponent.focusResult(); + } else { + this.setAutoCompleteDisplayed(true); + } + } + + onAutoCompleteFocus($event): void { + this.focusSubject.next($event); + } + + onAutoCompleteReturn($event): void { + if (this.searchInput) { + ( this.searchInput.nativeElement).focus(); + } + } + + onAutoCompleteCancel($event): void { + if (this.searchInput) { + ( this.searchInput.nativeElement).focus(); + } + this.setAutoCompleteDisplayed(false); } } diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html index 224ab2ec98..75cfea1fb4 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html @@ -16,7 +16,7 @@ - + {{getMimeTypeKey(result)|translate}} {{result.entry.name}} diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts index b4278936c4..8489511c7d 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts @@ -162,7 +162,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(searchService.getSearchNodesPromise).toHaveBeenCalled(); expect(element.querySelector('#result_user_0')).not.toBeNull(); @@ -181,7 +181,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(noResult)); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(element.querySelector('#search_no_result')).not.toBeNull(); done(); @@ -197,7 +197,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.reject(errorJson)); - component.errorEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => {}, () => { fixture.detectChanges(); let resultsEl = element.querySelector('[data-automation-id="search_result_table"]'); let errorEl = element.querySelector('[data-automation-id="search_error_message"]'); @@ -217,7 +217,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(searchService.getSearchNodesPromise).toHaveBeenCalledWith('searchTerm2'); expect(element.querySelector('#result_user_0')).not.toBeNull(); @@ -238,7 +238,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).click(); }); @@ -246,7 +246,7 @@ describe('AlfrescoSearchComponent', () => { component.searchTerm = 'searchTerm'; component.ngOnInit(); - component.preview.subscribe(e => { + component.preview.subscribe(() => { done(); }); }); @@ -258,7 +258,7 @@ describe('AlfrescoSearchComponent', () => { .and.returnValue(Promise.resolve(folderResult)); spyOn(component.preview, 'emit'); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).click(); expect(component.preview.emit).not.toHaveBeenCalled(); diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts index e38bb3e761..cd71b4617a 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts @@ -38,10 +38,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit { preview: EventEmitter = new EventEmitter(); @Output() - resultsEmitter = new EventEmitter(); - - @Output() - errorEmitter = new EventEmitter(); + resultsLoad = new EventEmitter(); results: any = null; @@ -112,13 +109,13 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit { .subscribe( results => { this.results = results.list.entries; - this.resultsEmitter.emit(this.results); + this.resultsLoad.emit(this.results); this.errorMessage = null; }, error => { this.results = null; this.errorMessage = error; - this.errorEmitter.emit(error); + this.resultsLoad.error(error); } ); } diff --git a/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.spec.ts b/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.spec.ts index 56f0093492..814737874d 100644 --- a/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.spec.ts @@ -77,4 +77,16 @@ describe('AlfrescoSearchService', () => { ); }); + it('should notify a general error if the API does not return a specific error', (done) => { + spyOn(fakeApi.core.searchApi, 'liveSearchNodes').and.returnValue(Promise.reject(null)); + service.getLiveSearchResults('').subscribe( + () => {}, + (res: any) => { + expect(res).toBeDefined(); + expect(res).toEqual('Server error'); + done(); + } + ); + }); + });