inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

New implementation of focus/blur event management using Obserable

Browse Source 
Refs #371
This commit is contained in:
Will Abson
2016-10-25 18:08:57 +01:00
parent 964111a3b6
commit 8bfe58c2a7
7 changed files with 241 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts
View File

@@ -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', () => {
@@ -239,32 +261,41 @@ 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);
});
});