Allow use of arrow keys to navigate FAYT results and update tests

Refs #371
This commit is contained in:
Will Abson
2016-10-26 12:56:42 +01:00
parent 68fc93ecbc
commit a8bea1800b
7 changed files with 453 additions and 217 deletions

View File

@@ -19,7 +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, folderResult, noResult, errorJson } from './../assets/alfresco-search.component.mock';
import { result, results, folderResult, noResult, errorJson } from './../assets/alfresco-search.component.mock';
import { AlfrescoSearchService } from '../services/alfresco-search.service';
import {
AlfrescoApiService,
@@ -35,6 +35,12 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
let fixture: ComponentFixture<AlfrescoSearchAutocompleteComponent>, element: HTMLElement;
let component: AlfrescoSearchAutocompleteComponent;
let updateSearchTerm = (newSearchTerm: string): void => {
let oldSearchTerm = component.searchTerm;
component.searchTerm = newSearchTerm;
component.ngOnChanges({searchTerm: { currentValue: newSearchTerm, previousValue: oldSearchTerm}});
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
@@ -64,230 +70,337 @@ 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.resultsEmitter.subscribe(() => {
fixture.detectChanges();
expect( element.querySelector('#result_user_0').innerHTML).toBe('John Doe');
expect( element.querySelector('#result_name_0').innerHTML).toBe('<b _ngcontent-a-1="">MyDoc</b>');
done();
});
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.resultsEmitter.subscribe(() => {
fixture.detectChanges();
let imgEl = <any> 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.resultsEmitter.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('<b _ngcontent-a-1="">MyDoc</b>');
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.errorEmitter.subscribe(() => {
fixture.detectChanges();
let resultsEl = element.querySelector('[data-automation-id="autocomplete_results"]');
let errorEl = <any> 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 = <any> 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 = <any> 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 preview when file item clicked', (done) => {
spyOn(searchService, 'getSearchNodesPromise')
.and.returnValue(Promise.resolve(result));
component.resultsEmitter.subscribe(() => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).click();
});
updateSearchTerm('searchTerm');
component.preview.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.preview, 'emit');
component.resultsEmitter.subscribe(() => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).click();
expect(component.preview.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 preview when enter key pressed when a file item is in focus', (done) => {
component.resultsEmitter.subscribe(() => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', {
key: 'Enter'
}));
});
updateSearchTerm('searchTerm');
component.preview.subscribe(() => {
done();
});
});
it('should emit cancel event when escape key pressed when a result is in focus', (done) => {
component.resultsEmitter.subscribe(() => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', {
key: 'Escape'
}));
});
updateSearchTerm('searchTerm');
component.cancelEmitter.subscribe(() => {
done();
});
});
it('should focus the next result when down arrow key pressed when a result is in focus', (done) => {
component.resultsEmitter.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.resultsEmitter.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.resultsEmitter.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.resultsEmitter.subscribe(() => {
fixture.detectChanges();
let firstResult: any = element.querySelector('#result_row_0');
firstResult.dispatchEvent(new KeyboardEvent('keyup', {
key: 'ArrowUp'
}));
});
component.scrollBackEmitter.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 = <any> 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.resultsEmitter.subscribe(() => {
fixture.detectChanges();
(<any> 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 = <any> 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();
(<any> element.querySelector('#result_row_0')).click();
component.focusEmitter.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.resultsEmitter.subscribe(() => {
fixture.detectChanges();
(<any> 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();
(<any> element.querySelector('#result_row_0')).click();
expect(component.preview.emit).not.toHaveBeenCalled();
done();
component.focusEmitter.subscribe((e: FocusEvent) => {
expect(e).not.toBeNull();
expect(e.type).toBe('blur');
done();
});
});
component.searchTerm = 'searchTerm';
component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
});
it('should give focus to the first result when focusResult() is called externally', (done) => {
it('should emit preview when enter key pressed when a file item is in focus', (done) => {
component.resultsEmitter.subscribe(() => {
fixture.detectChanges();
let firstResult: any = element.querySelector('#result_row_0');
spyOn(firstResult, 'focus');
component.focusResult();
expect(firstResult.focus).toHaveBeenCalled();
done();
});
let searchService = fixture.debugElement.injector.get(AlfrescoSearchService);
spyOn(searchService, 'getSearchNodesPromise')
.and.returnValue(Promise.resolve(result));
component.resultsEmitter.subscribe(x => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', {
key: 'Enter'
}));
updateSearchTerm('searchTerm');
});
component.searchTerm = 'searchTerm';
component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
component.preview.subscribe(e => {
done();
});
});
it('should emit a focus event when a result comes into focus', (done) => {
let searchService = fixture.debugElement.injector.get(AlfrescoSearchService);
spyOn(searchService, 'getSearchNodesPromise')
.and.returnValue(Promise.resolve(result));
component.resultsEmitter.subscribe(x => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).dispatchEvent(new FocusEvent('focus'));
});
component.searchTerm = 'searchTerm';
component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
component.focusEmitter.subscribe((e: FocusEvent) => {
expect(e).not.toBeNull();
expect(e.type).toBe('focus');
done();
});
});
it('should emit a focus event when a result loses focus', (done) => {
let searchService = fixture.debugElement.injector.get(AlfrescoSearchService);
spyOn(searchService, 'getSearchNodesPromise')
.and.returnValue(Promise.resolve(result));
component.resultsEmitter.subscribe(x => {
fixture.detectChanges();
(<any> element.querySelector('#result_row_0')).dispatchEvent(new FocusEvent('blur'));
});
component.searchTerm = 'searchTerm';
component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
component.focusEmitter.subscribe((e: FocusEvent) => {
expect(e).not.toBeNull();
expect(e.type).toBe('blur');
done();
});
});
});