From 147af98bda478d7782390fb7e4600e5d62e55e0b Mon Sep 17 00:00:00 2001 From: Will Abson Date: Fri, 23 Sep 2016 18:07:40 +0100 Subject: [PATCH] Restore navigation to search page in demo-shell - Remove deprecated router component - searchChanges and new searchSubmit component outputs work as you would expect - Update tests Refs #737 --- .../search/search-bar.component.html | 2 +- .../components/search/search-bar.component.ts | 18 ++++++++-- .../alfresco-search-control.component.spec.ts | 34 +++++++++++++++++++ .../alfresco-search-control.component.ts | 12 ++++--- .../alfresco-search.component.spec.ts | 19 +++++++---- .../components/alfresco-search.component.ts | 24 +++++++------ 6 files changed, 85 insertions(+), 24 deletions(-) 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 4d89fd0d8b..52d8ee7a52 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);" (preview)="onFileClicked($event)"> { expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(0); }); }); + + describe('search submit', () => { + + it('should fire a search when a term has been entered', () => { + spyOn(component.searchSubmit, 'emit'); + alfrescoSearchControlComponentFixture.detectChanges(); + let formEl = element.querySelector('form'); + component.searchTerm = 'searchTerm1'; + component.searchControl.updateValue('searchTerm1'); + alfrescoSearchControlComponentFixture.detectChanges(); + formEl.dispatchEvent(new Event('submit')); + + alfrescoSearchControlComponentFixture.detectChanges(); + + expect(component.searchSubmit.emit).toHaveBeenCalledWith({ + 'value': 'searchTerm1' + }); + }); + + it('should not fire a search when no term has been entered', () => { + spyOn(component.searchSubmit, 'emit'); + alfrescoSearchControlComponentFixture.detectChanges(); + let inputEl = element.querySelector('input[type="text"]'); + let formEl = element.querySelector('form'); + inputEl.value = ''; + formEl.dispatchEvent(new Event('submit')); + + alfrescoSearchControlComponentFixture.detectChanges(); + + expect(component.searchSubmit.emit).not.toHaveBeenCalled(); + }); + + }); + }); */ 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 09eee56960..1432361a88 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 @@ -45,6 +45,9 @@ export class AlfrescoSearchControlComponent { @Output() searchChange = new EventEmitter(); + @Output() + searchSubmit = new EventEmitter(); + @Output() preview = new EventEmitter(); @@ -74,6 +77,10 @@ export class AlfrescoSearchControlComponent { (value: string) => { this.autocompleteSearchTerm = value; this.searchValid = this.searchControl.valid; + this.searchChange.emit({ + value: value, + valid: this.searchValid + }); } ); @@ -98,11 +105,8 @@ export class AlfrescoSearchControlComponent { * @param event Submit event that was fired */ onSearch(event): void { - if (event) { - event.preventDefault(); - } if (this.searchControl.valid) { - this.searchChange.emit({ + this.searchSubmit.emit({ value: this.searchTerm }); this.searchInput.nativeElement.blur(); 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 7136ea6306..b1c8e34a6a 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 @@ -15,11 +15,11 @@ * limitations under the License. */ -/* -import { PLATFORM_PIPES } from '@angular/core'; +import { PLATFORM_PIPES, ReflectiveInjector } from '@angular/core'; import { it, describe, expect, inject, beforeEachProviders, beforeEach } from '@angular/core/testing'; import { TestComponentBuilder } from '@angular/compiler/testing'; -import { RouteParams } from '@angular/router-deprecated'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs/Rx'; import { AlfrescoSearchComponent } from './alfresco-search.component'; import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service'; import { TranslationMock } from './../assets/translation.service.mock'; @@ -103,12 +103,20 @@ describe('AlfrescoSearchComponent', () => { }); it('should take the provided search term from query param provided via RouteParams', () => { - let search = new AlfrescoSearchComponent(null, null, null, new RouteParams({q: 'exampleTerm692'})); + let injector = ReflectiveInjector.resolveAndCreate([ + { provide: ActivatedRoute, useValue: { params: Observable.from([{ q: 'exampleTerm692' }]) } } + ]); + let search = new AlfrescoSearchComponent(null, null, null, injector.get(ActivatedRoute)); + search.ngOnInit(); expect(search.searchTerm).toBe('exampleTerm692'); }); it('should have a null search term if no query param provided via RouteParams', () => { - let search = new AlfrescoSearchComponent(null, null, null, new RouteParams({})); + let injector = ReflectiveInjector.resolveAndCreate([ + { provide: ActivatedRoute, useValue: { params: Observable.from([{}]) } } + ]); + let search = new AlfrescoSearchComponent(null, null, null, injector.get(ActivatedRoute)); + search.ngOnInit(); expect(search.searchTerm).toBeNull(); }); @@ -191,4 +199,3 @@ describe('AlfrescoSearchComponent', () => { }); }); -*/ 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 1c06325fa9..6930c03851 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 @@ -15,8 +15,8 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, Output, OnChanges, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { Component, EventEmitter, Input, Output, Optional, OnChanges, SimpleChanges, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; import { AlfrescoSearchService } from './../services/alfresco-search.service'; import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service'; import { AlfrescoTranslationService } from 'ng2-alfresco-core'; @@ -46,12 +46,12 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit { errorMessage; - route: any[] = []; + queryParamName = 'q'; constructor(private alfrescoSearchService: AlfrescoSearchService, private translate: AlfrescoTranslationService, private _alfrescoThumbnailService: AlfrescoThumbnailService, - private activatedRoute: ActivatedRoute) { + @Optional() private route: ActivatedRoute) { if (translate !== null) { translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src'); @@ -61,15 +61,19 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit { } ngOnInit(): void { - this.activatedRoute.params.subscribe(params => { - this.searchTerm = params['q']; + if (this.route) { + this.route.params.forEach((params: Params) => { + this.searchTerm = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null; + this.displaySearchResults(this.searchTerm); + }); + } else { this.displaySearchResults(this.searchTerm); - }); + } } - ngOnChanges(changes): void { - if (changes.searchTerm) { - this.displaySearchResults(changes.searchTerm.currentValue); + ngOnChanges(changes: SimpleChanges): void { + if (changes['searchTerm']) { + this.displaySearchResults(changes['searchTerm'].currentValue); } }