Re-add search control tests working for final NG 2.0.0

Refs #737

ng2-components/ng2-alfresco-search/index.ts

@@ -29,6 +29,7 @@ export * from './src/services/alfresco-search.service';
 export * from './src/services/alfresco-thumbnail.service';
 export * from './src/components/alfresco-search.component';
 export * from './src/components/alfresco-search-control.component';
+export * from './src/components/alfresco-search-autocomplete.component';
 
 export const ALFRESCO_SEARCH_DIRECTIVES: [any] = [
     AlfrescoSearchComponent,

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts

@@ -15,10 +15,7 @@
  * limitations under the License.
  */
 
-/*
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { it, describe, expect, inject, beforeEachProviders, beforeEach, afterEach } from '@angular/core/testing';
-import { PLATFORM_PIPES } from '@angular/core';
-import { TestComponentBuilder } from '@angular/compiler/testing';
 import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
 import { TranslationMock } from './../assets/translation.service.mock';
@@ -29,14 +26,13 @@ import {
     AlfrescoAuthenticationService,
     AlfrescoContentService,
     AlfrescoTranslationService,
-    AlfrescoPipeTranslate
+    CoreModule
 } from 'ng2-alfresco-core';
 
-declare let jasmine: any;
-
 describe('AlfrescoSearchAutocompleteComponent', () => {
 
-    let alfrescoSearchComponentFixture, element, component;
+    let alfrescoSearchComponentFixture: ComponentFixture<AlfrescoSearchAutocompleteComponent>, element: HTMLElement;
+    let component: AlfrescoSearchAutocompleteComponent;
 
     let result = {
         list: {
@@ -98,47 +94,41 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
         }
     };
 
-    beforeEachProviders(() => {
+    beforeEach(async(() => {
-        return [
+        TestBed.configureTestingModule({
-            { provide: PLATFORM_PIPES, useValue: AlfrescoPipeTranslate, multi: true },
+            imports: [
-            {provide: AlfrescoTranslationService, useClass: TranslationMock},
+                CoreModule
-            AlfrescoThumbnailService,
+            ],
-            AlfrescoSettingsService,
+            declarations: [ AlfrescoSearchAutocompleteComponent ], // declare the test component
-            AlfrescoApiService,
+            providers: [
-            AlfrescoAuthenticationService,
+                {provide: AlfrescoTranslationService, useClass: TranslationMock},
-            AlfrescoContentService,
+                AlfrescoThumbnailService,
-            AlfrescoSearchService
+                AlfrescoSettingsService,
-        ];
+                AlfrescoApiService,
-    });
+                AlfrescoAuthenticationService,
-
+                AlfrescoContentService,
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                AlfrescoSearchService
-        return tcb
+            ]
-            .createAsync(AlfrescoSearchAutocompleteComponent)
+        }).compileComponents().then(() => {
-            .then(fixture => {
+            alfrescoSearchComponentFixture = TestBed.createComponent(AlfrescoSearchAutocompleteComponent);
-                jasmine.Ajax.install();
+            component = alfrescoSearchComponentFixture.componentInstance;
-                alfrescoSearchComponentFixture = fixture;
+            element = alfrescoSearchComponentFixture.nativeElement;
-                element = alfrescoSearchComponentFixture.nativeElement;
+        });
-                component = alfrescoSearchComponentFixture.componentInstance;
-            });
     }));
 
-    afterEach(() => {
+    // it('should setup i18n folder', () => {
-        jasmine.Ajax.uninstall();
+    //     let translation = jasmine.createSpyObj('AlfrescoTranslationService', [
-    });
+    //         'addTranslationFolder'
-
+    //     ]);
-    it('should setup i18n folder', () => {
+    //     let search = new AlfrescoSearchAutocompleteComponent(null, translation, null);
-        let translation = jasmine.createSpyObj('AlfrescoTranslationService', [
+    //     expect(search).toBeDefined();
-            'addTranslationFolder'
+    //
-        ]);
+    // });
-        let search = new AlfrescoSearchAutocompleteComponent(null, translation, null);
-        expect(search).toBeDefined();
-
-    });
 
     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.searchTerm = 'searchTerm';
         component.ngOnChanges({
             searchTerm: searchTerm
         });
@@ -147,6 +137,11 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
     });
 
     it('should display the returned search results', (done) => {
+
+        let searchService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoSearchService);
+        spyOn(searchService, 'getSearchNodesPromise')
+            .and.returnValue(Promise.resolve(result));
+
         component.resultsEmitter.subscribe(x => {
             alfrescoSearchComponentFixture.detectChanges();
             expect( element.querySelector('#result_user_0').innerHTML).toBe('John Doe');
@@ -154,93 +149,84 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
             done();
         });
 
-        component.searchTerm = { currentValue: 'searchTerm', previousValue: ''};
+        component.searchTerm = 'searchTerm';
-        component.ngOnChanges({searchTerm: component.searchTerm });
+        component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''} });
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200,
-            contentType: 'json',
-            responseText: result
-        });
     });
 
     it('should display the correct thumbnail for result items', (done) => {
 
+        let searchService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoSearchService);
+        spyOn(searchService, 'getSearchNodesPromise')
+            .and.returnValue(Promise.resolve(result));
+
         component.baseComponentPath = 'http://localhost';
-        spyOn(component.alfrescoThumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg');
+
-        spyOn(component.alfrescoThumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE');
+        let thumbnailService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoThumbnailService);
+        spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg');
+        spyOn(thumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE');
 
         component.resultsEmitter.subscribe(() => {
             alfrescoSearchComponentFixture.detectChanges();
-            let imgEl = element.querySelector('#result_row_0 img');
+            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();
         });
 
-        component.searchTerm = { currentValue: 'searchTerm', previousValue: ''};
+        component.searchTerm = 'searchTerm';
-        component.ngOnChanges({searchTerm: component.searchTerm });
+        component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''} });
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200,
-            contentType: 'json',
-            responseText: result
-        });
     });
 
     it('should display no result if no result are returned', (done) => {
+
+        let searchService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoSearchService);
+        spyOn(searchService, 'getSearchNodesPromise')
+            .and.returnValue(Promise.resolve(noResult));
+
         component.resultsEmitter.subscribe(x => {
             alfrescoSearchComponentFixture.detectChanges();
             expect(element.querySelector('#search_no_result')).not.toBeNull();
             done();
         });
 
-        component.searchTerm =  { currentValue: 'searchTerm', previousValue: ''};
+        component.searchTerm = 'searchTerm';
-        component.ngOnChanges({searchTerm: component.searchTerm});
+        component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200,
-            contentType: 'json',
-            responseText: noResult
-        });
     });
 
     it('should display an error if an error is encountered running the search', (done) => {
+
+        let searchService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoSearchService);
+        spyOn(searchService, 'getSearchNodesPromise')
+            .and.returnValue(Promise.reject(errorJson));
+
         component.errorEmitter.subscribe(() => {
             alfrescoSearchComponentFixture.detectChanges();
             let resultsEl = element.querySelector('[data-automation-id="autocomplete_results"]');
-            let errorEl = element.querySelector('[data-automation-id="autocomplete_error_message"]');
+            let errorEl = <any> element.querySelector('[data-automation-id="autocomplete_error_message"]');
             expect(resultsEl).toBeNull();
             expect(errorEl).not.toBeNull();
             expect(errorEl.innerText).toBe('SEARCH.RESULTS.ERROR');
             done();
         });
 
-        component.searchTerm =  { currentValue: 'searchTerm', previousValue: ''};
+        component.searchTerm = 'searchTerm';
-        component.ngOnChanges({searchTerm: component.searchTerm});
+        component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 500,
-            contentType: 'json',
-            responseText: errorJson
-        });
     });
 
     it('should emit preview when file item clicked', (done) => {
+
+        let searchService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoSearchService);
+        spyOn(searchService, 'getSearchNodesPromise')
+            .and.returnValue(Promise.resolve(result));
+
         component.resultsEmitter.subscribe(x => {
             alfrescoSearchComponentFixture.detectChanges();
-            element.querySelector('#result_row_0').click();
+            (<any> element.querySelector('#result_row_0')).click();
         });
 
-        component.searchTerm =  { currentValue: 'searchTerm', previousValue: ''};
+        component.searchTerm = 'searchTerm';
-        component.ngOnChanges({searchTerm: component.searchTerm});
+        component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200,
-            contentType: 'json',
-            responseText: result
-        });
 
         component.preview.subscribe(e => {
            done();
@@ -248,23 +234,21 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
     });
 
     it('should not emit preview if a non-file item is clicked', (done) => {
+
+        let searchService = alfrescoSearchComponentFixture.debugElement.injector.get(AlfrescoSearchService);
+        spyOn(searchService, 'getSearchNodesPromise')
+            .and.returnValue(Promise.resolve(folderResult));
+
         spyOn(component.preview, 'emit');
         component.resultsEmitter.subscribe(x => {
             alfrescoSearchComponentFixture.detectChanges();
-            element.querySelector('#result_row_0').click();
+            (<any> element.querySelector('#result_row_0')).click();
             expect(component.preview.emit).not.toHaveBeenCalled();
             done();
         });
 
-        component.searchTerm =  { currentValue: 'searchTerm', previousValue: ''};
+        component.searchTerm = 'searchTerm';
-        component.ngOnChanges({searchTerm: component.searchTerm});
+        component.ngOnChanges({searchTerm: { currentValue: 'searchTerm', previousValue: ''}});
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200,
-            contentType: 'json',
-            responseText: folderResult
-        });
     });
 
 });
-*/

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts

@@ -73,8 +73,8 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
     public displaySearchResults(searchTerm) {
         if (searchTerm !== null && searchTerm !== '') {
             this.alfrescoSearchService
-                .getLiveSearchResults(searchTerm)
+                .getSearchNodesPromise(searchTerm)
-                .subscribe(
+                .then(
                     results => {
                         this.results = results.list.entries;
                         this.errorMessage = null;

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

@@ -15,11 +15,10 @@
  * limitations under the License.
  */
 
-/*
+import { SimpleChange } from '@angular/core';
-import { provide, PLATFORM_PIPES } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { it, describe, expect, inject, beforeEachProviders, beforeEach } from '@angular/core/testing';
-import { TestComponentBuilder } from '@angular/compiler/testing';
 import { AlfrescoSearchControlComponent } from './alfresco-search-control.component';
+import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
 import { TranslationMock } from './../assets/translation.service.mock';
 import {
@@ -28,53 +27,67 @@ import {
     AlfrescoAuthenticationService,
     AlfrescoContentService,
     AlfrescoTranslationService,
-    AlfrescoPipeTranslate
+    CoreModule
 } from 'ng2-alfresco-core';
 import { AlfrescoSearchService } from '../services/alfresco-search.service';
 
 
 describe('AlfrescoSearchControlComponent', () => {
 
-    let alfrescoSearchControlComponentFixture, element, component;
+    let alfrescoSearchControlComponentFixture: ComponentFixture<AlfrescoSearchControlComponent>;
+    let component: AlfrescoSearchControlComponent, element: HTMLElement;
 
-    beforeEachProviders(() => {
+    beforeEach(async(() => {
-        return [
+        TestBed.configureTestingModule({
-            { provide: PLATFORM_PIPES, useValue: AlfrescoPipeTranslate, multi: true },
+            imports: [
-            AlfrescoSearchService,
+                CoreModule
-            provide(AlfrescoTranslationService, {useClass: TranslationMock}),
+            ],
-            AlfrescoThumbnailService,
+            declarations: [
-            AlfrescoSettingsService,
+                AlfrescoSearchControlComponent,
-            AlfrescoApiService,
+                AlfrescoSearchAutocompleteComponent
-            AlfrescoAuthenticationService,
+            ],
-            AlfrescoContentService
+            providers: [
-        ];
+                {provide: AlfrescoTranslationService, useClass: TranslationMock},
-    });
+                AlfrescoThumbnailService,
-
+                AlfrescoSettingsService,
-    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                AlfrescoApiService,
-        return tcb
+                AlfrescoAuthenticationService,
-            .createAsync(AlfrescoSearchControlComponent)
+                AlfrescoContentService,
-            .then(fixture => {
+                AlfrescoSearchService
-                alfrescoSearchControlComponentFixture = fixture;
+            ]
-                element = alfrescoSearchControlComponentFixture.nativeElement;
+        }).compileComponents().then(() => {
-                component = alfrescoSearchControlComponentFixture.componentInstance;
+            alfrescoSearchControlComponentFixture = TestBed.createComponent(AlfrescoSearchControlComponent);
-            });
+            component = alfrescoSearchControlComponentFixture.componentInstance;
+            element = alfrescoSearchControlComponentFixture.nativeElement;
+        });
     }));
 
     it('should setup i18n folder', () => {
-        let translation = jasmine.createSpyObj('AlfrescoTranslationService', [
+        let translationService = alfrescoSearchControlComponentFixture.debugElement.injector.get(AlfrescoTranslationService);
-            'addTranslationFolder'
+        spyOn(translationService, 'addTranslationFolder');
-        ]);
+        alfrescoSearchControlComponentFixture.detectChanges();
-
+        expect(translationService.addTranslationFolder)
-        let alfrescoSearchControlComponent = new AlfrescoSearchControlComponent(translation);
+            .toHaveBeenCalledWith('node_modules/ng2-alfresco-search/dist/src');
-        expect(alfrescoSearchControlComponent).toBeDefined();
     });
 
-    it('should emit searchChange when search term changed', () => {
+    it('should emit searchChange when search term input changed', (done) => {
-        alfrescoSearchControlComponentFixture.componentInstance.searchTerm = 'customSearchTerm';
-        alfrescoSearchControlComponentFixture.detectChanges();
         alfrescoSearchControlComponentFixture.componentInstance.searchChange.subscribe(e => {
             expect(e.value).toBe('customSearchTerm');
+            done();
         });
+        alfrescoSearchControlComponentFixture.detectChanges();
+        alfrescoSearchControlComponentFixture.componentInstance.searchTerm = 'customSearchTerm';
+        alfrescoSearchControlComponentFixture.componentInstance
+            .ngOnChanges({'searchTerm': new SimpleChange('', 'customSearchTerm')});
+    });
+
+    it('should emit searchChange when search term changed by user', (done) => {
+        alfrescoSearchControlComponentFixture.componentInstance.searchChange.subscribe(e => {
+            expect(e.value).toBe('customSearchTerm211');
+            done();
+        });
+        alfrescoSearchControlComponentFixture.detectChanges();
+        component.searchControl.setValue('customSearchTerm211', true);
     });
 
     describe('Component rendering', () => {
@@ -124,9 +137,9 @@ describe('AlfrescoSearchControlComponent', () => {
         it('should fire a search when a term has been entered', () => {
             spyOn(component.searchSubmit, 'emit');
             alfrescoSearchControlComponentFixture.detectChanges();
-            let formEl = element.querySelector('form');
+            let formEl: HTMLElement = element.querySelector('form');
             component.searchTerm = 'searchTerm1';
-            component.searchControl.updateValue('searchTerm1');
+            component.searchControl.setValue('searchTerm1', true);
             alfrescoSearchControlComponentFixture.detectChanges();
             formEl.dispatchEvent(new Event('submit'));
 
@@ -140,8 +153,8 @@ describe('AlfrescoSearchControlComponent', () => {
         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 inputEl: HTMLInputElement = <HTMLInputElement> element.querySelector('input[type="text"]');
-            let formEl = element.querySelector('form');
+            let formEl: HTMLElement = element.querySelector('form');
             inputEl.value = '';
             formEl.dispatchEvent(new Event('submit'));
 
@@ -156,7 +169,7 @@ describe('AlfrescoSearchControlComponent', () => {
 
         it('should fire an event when the search box receives focus', () => {
             spyOn(component.expand, 'emit');
-            let inputEl = element.querySelector('input');
+            let inputEl: HTMLElement = element.querySelector('input');
             inputEl.dispatchEvent(new Event('focus'));
             expect(component.expand.emit).toHaveBeenCalledWith({
                 expanded: true
@@ -165,7 +178,7 @@ describe('AlfrescoSearchControlComponent', () => {
 
         it('should fire an event when the search box loses focus', () => {
             spyOn(component.expand, 'emit');
-            let inputEl = element.querySelector('input');
+            let inputEl: HTMLElement = element.querySelector('input');
             inputEl.dispatchEvent(new Event('blur'));
             expect(component.expand.emit).toHaveBeenCalledWith({
                 expanded: false
@@ -176,7 +189,7 @@ describe('AlfrescoSearchControlComponent', () => {
             () => {
                 spyOn(component.expand, 'emit');
                 component.expandable = false;
-                let inputEl = element.querySelector('input');
+                let inputEl: HTMLElement = element.querySelector('input');
                 inputEl.dispatchEvent(new Event('focus'));
                 inputEl.dispatchEvent(new Event('blur'));
                 expect(component.expand.emit).not.toHaveBeenCalled();
@@ -199,4 +212,3 @@ describe('AlfrescoSearchControlComponent', () => {
     });
 
 });
-*/

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { FormControl, Validators } from '@angular/forms';
-import { Component, Input, Output, ElementRef, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, OnInit, OnChanges, SimpleChanges, ElementRef, EventEmitter, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { SearchTermValidator } from './../forms/search-term-validator';
 
@@ -28,7 +28,7 @@ declare let __moduleName: string;
     templateUrl: './alfresco-search-control.component.html',
     styleUrls: ['./alfresco-search-control.component.css']
 })
-export class AlfrescoSearchControlComponent {
+export class AlfrescoSearchControlComponent implements OnInit, OnChanges {
 
     @Input()
     searchTerm = '';
@@ -71,20 +71,31 @@ export class AlfrescoSearchControlComponent {
             this.searchTerm,
             Validators.compose([Validators.required, SearchTermValidator.minAlphanumericChars(3)])
         );
+    }
 
+    ngOnInit(): void {
         this.searchControl.valueChanges.map(value => this.searchControl.valid ? value : '')
-            .debounceTime(400).distinctUntilChanged().subscribe(
+            .debounceTime(400).distinctUntilChanged().subscribe((value: string) => {
-            (value: string) => {
+                this.onSearchTermChange(value);
-                this.autocompleteSearchTerm = value;
-                this.searchValid = this.searchControl.valid;
-                this.searchChange.emit({
-                    value: value,
-                    valid: this.searchValid
-                });
             }
         );
 
-        translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src');
+        this.translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src');
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.hasOwnProperty('searchTerm')) {
+            this.searchControl.setValue(changes['searchTerm'].currentValue, true);
+        }
+    }
+
+    private onSearchTermChange(value: string): void {
+        this.autocompleteSearchTerm = value;
+        this.searchValid = this.searchControl.valid;
+        this.searchChange.emit({
+            value: value,
+            valid: this.searchValid
+        });
     }
 
     getTextFieldClassName(): string {