add test for people search component

ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.html

@@ -1,17 +1,17 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-    <input class="mdl-textfield__input" type="text" id="userSearchText"
+    <input class="mdl-textfield__input" type="text" id="userSearchText" [value]=""
            [formControl]="searchUser"/>
     <label class="mdl-textfield__label" for="userSearchText">Search user</label>
 </div>
 <ul class='mdl-list'>
     <li class="mdl-list__item fix-element-user-list" *ngFor="let user of userList">
         <span class="mdl-list__item-primary-content mdl-button mdl-js-button mdl-js-ripple-effect"
-              (click)="onRowClick(user)">
+              (click)="onRowClick(user)" id="user-{{user.id}}">
             <i class="material-icons md-light">face</i>
             {{ user.firstName }} - {{ user.lastName }}
         </span>
     </li>
-    <div *ngIf="userList?.length === 0">
+    <div *ngIf="userList?.length === 0" id="no-user-found">
         No user found to involve
     </div>
 </ul>

ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts

@@ -0,0 +1,137 @@
+/*!
+ * @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.
+ */
+
+import {
+    CoreModule,
+    AlfrescoTranslationService
+} from 'ng2-alfresco-core';
+import { ActivitiPeopleSearch } from './activiti-people-search.component';
+import { TranslationMock } from '../assets/translation.service.mock';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { User } from '../models/user.model';
+import { Observable } from 'rxjs/Observable';
+
+declare let jasmine: any;
+
+const fakeUser: User = new User({
+    id: '1',
+    firstName: 'fake-name',
+    lastName: 'fake-last',
+    email: 'fake@mail.com'
+});
+
+const fakeSecondUser: User = new User({
+    id: '2',
+    firstName: 'fake-involve-name',
+    lastName: 'fake-involve-last',
+    email: 'fake-involve@mail.com'
+});
+
+describe('Activiti People Search', () => {
+
+    let activitiPeopleSearchComponent: ActivitiPeopleSearch;
+    let fixture: ComponentFixture<ActivitiPeopleSearch>;
+    let element: HTMLElement;
+    let componentHandler;
+    let userArray = [fakeUser, fakeSecondUser];
+    let searchInput;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [CoreModule],
+            declarations: [ActivitiPeopleSearch],
+            providers: [
+                {provide: AlfrescoTranslationService, useClass: TranslationMock}]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(ActivitiPeopleSearch);
+            activitiPeopleSearchComponent = fixture.componentInstance;
+            element = fixture.nativeElement;
+            componentHandler = jasmine.createSpyObj('componentHandler', [
+                'upgradeAllRegistered'
+            ]);
+
+            window['componentHandler'] = componentHandler;
+            activitiPeopleSearchComponent.results = Observable.of([]);
+            fixture.detectChanges();
+        });
+    }));
+
+    it('should show input search text', () => {
+        expect(element.querySelector('#userSearchText')).toBeDefined();
+        expect(element.querySelector('#userSearchText')).not.toBeNull();
+    });
+
+    it('should show no user found to involve message', () => {
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#no-user-found')).not.toBeNull();
+                expect(element.querySelector('#no-user-found').textContent).toContain('No user found to involve');
+            });
+    });
+
+    it('should show user which can be involved ', (done) => {
+        activitiPeopleSearchComponent.onSearch.subscribe(() => {
+            activitiPeopleSearchComponent.results = Observable.of(userArray);
+            activitiPeopleSearchComponent.ngOnInit();
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    expect(element.querySelector('#user-1')).not.toBeNull();
+                    expect(element.querySelector('#user-1').textContent)
+                        .toContain('fake-name - fake-last');
+                    expect(element.querySelector('#user-2')).not.toBeNull();
+                    expect(element.querySelector('#user-2').textContent)
+                        .toContain('fake-involve-name - fake-involve-last');
+                    done();
+                });
+        });
+        searchInput = element.querySelector('#userSearchText');
+        searchInput.value = 'fake-search';
+        activitiPeopleSearchComponent.searchUser.markAsDirty();
+        searchInput.dispatchEvent(new Event('input'));
+    });
+
+    it('should send an event when an user is clicked', async(() => {
+        activitiPeopleSearchComponent.onModalRowClicked.subscribe((user) => {
+            expect(user).toBeDefined();
+            expect(user.firstName).toBe('fake-name');
+        });
+        activitiPeopleSearchComponent.results = Observable.of(userArray);
+        activitiPeopleSearchComponent.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                let userToSelect = <HTMLElement> element.querySelector('#user-1');
+                userToSelect.click();
+            });
+    }));
+
+    it('should remove clicked user', async(() => {
+        activitiPeopleSearchComponent.results = Observable.of(userArray);
+        activitiPeopleSearchComponent.ngOnInit();
+        fixture.detectChanges();
+        let userToSelect = <HTMLElement> element.querySelector('#user-1');
+        userToSelect.click();
+
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#user-1')).toBeNull();
+            });
+    }));
+});

ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts

@@ -19,6 +19,7 @@ import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit } from '@
 import { FormControl } from '@angular/forms';
 import { User } from '../models/user.model';
 import { Observable } from 'rxjs/Observable';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 declare let componentHandler: any;
 
@@ -40,11 +41,15 @@ export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
     @Output()
     onModalRowClicked: EventEmitter<any> = new EventEmitter();
 
-    private searchUser: FormControl = new FormControl();
+    searchUser: FormControl = new FormControl();
 
     userList: User[] = [];
 
-    constructor() {
+    constructor(private translate: AlfrescoTranslationService) {
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-activiti-tasklist/src');
+        }
+
         this.searchUser
             .valueChanges
             .debounceTime(200)
@@ -65,11 +70,12 @@ export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
 
     setupMaterialComponents(handler?: any): boolean {
         // workaround for MDL issues with dynamic components
+        let isUpgraded: boolean = false;
         if (handler) {
             handler.upgradeAllRegistered();
-            return true;
+            isUpgraded = true;
         }
-        return false;
+        return isUpgraded;
     }
 
     onRowClick(userClicked: User) {

ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.spec.ts

@@ -68,11 +68,6 @@ describe('Activiti People Component', () => {
         });
     }));
 
-    afterAll(() => {
-        fixture.destroy();
-        TestBed.resetTestingModule();
-    });
-
     it('should show people component title', () => {
         expect(element.querySelector('#people-title')).toBeDefined();
         expect(element.querySelector('#people-title')).not.toBeNull();

ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.ts

@@ -48,7 +48,6 @@ export class ActivitiPeople {
      */
     constructor(private translate: AlfrescoTranslationService,
                 private peopleService: ActivitiPeopleService) {
-
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-tasklist/src');
         }