#636 unit tests and code improvements

fixes #696

ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts

@@ -23,4 +23,14 @@ export class GroupModel {
     name: string;
     status: string;
 
+    constructor(json?: any) {
+        if (json) {
+            this.externalId = json.externalId;
+            this.groups = json.groups;
+            this.id = json.id;
+            this.name = json.name;
+            this.status = json.status;
+        }
+    }
+
 }

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html

@@ -10,7 +10,7 @@
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
 </div>
 
-<div class="functional-group-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible">
+<div class="functional-group-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible && groups.length > 0">
     <ul>
         <li *ngFor="let item of groups"
             class="mdl-menu__item"

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.spec.ts

@@ -0,0 +1,176 @@
+/*!
+ * @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 { it, describe, expect, beforeEach } from '@angular/core/testing';
+import { Observable } from 'rxjs/Rx';
+import { FunctionalGroupWidget } from './functional-group.widget';
+import { FormService } from '../../../services/form.service';
+import { FormModel } from '../core/form.model';
+import { FormFieldModel } from '../core/form-field.model';
+import { GroupModel } from '../core/group.model';
+
+describe('FunctionalGroupWidget', () => {
+
+    let formService: FormService;
+    let widget: FunctionalGroupWidget;
+
+    beforeEach(() => {
+        formService = new FormService(null, null);
+        widget = new FunctionalGroupWidget(formService);
+        widget.field = new FormFieldModel(new FormModel());
+    });
+
+    it('should setup text from underlying field on init', () => {
+        let group = new GroupModel({ name: 'group-1'});
+        widget.field.value = group;
+        widget.ngOnInit();
+        expect(widget.value).toBe(group.name);
+    });
+
+    it('should not setup text on init', () => {
+        widget.field.value = null;
+        widget.ngOnInit();
+        expect(widget.value).toBeUndefined();
+    });
+
+    it('should flush value on blur', (done) => {
+        spyOn(widget, 'flushValue').and.stub();
+        widget.onBlur();
+
+        setTimeout(() => {
+            expect(widget.flushValue).toHaveBeenCalled();
+            done();
+        }, 200);
+    });
+
+    it('should prevent default behaviour on option item click', () => {
+        let event = jasmine.createSpyObj('event', ['preventDefault']);
+        widget.onItemClick(null, event);
+        expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should update values on item click', () => {
+        let item = new GroupModel({ name: 'group-1' });
+
+        widget.onItemClick(item, null);
+        expect(widget.field.value).toBe(item);
+        expect(widget.value).toBe(item.name);
+    });
+
+    it('should hide popup on flush', () => {
+        widget.popupVisible = true;
+        widget.flushValue();
+        expect(widget.popupVisible).toBeFalsy();
+    });
+
+    it('should update form on value flush', () => {
+        spyOn(widget.field, 'updateForm').and.callThrough();
+        widget.flushValue();
+        expect(widget.field.updateForm).toHaveBeenCalled();
+    });
+
+    it('should flush selected value', () => {
+        let groups: GroupModel[] = [
+            new GroupModel({ id: '1', name: 'group 1' }),
+            new GroupModel({ id: '2', name: 'group 2' })
+        ];
+
+        widget.groups = groups;
+        widget.value = 'group 2';
+        widget.flushValue();
+
+        expect(widget.value).toBe(groups[1].name);
+        expect(widget.field.value).toBe(groups[1]);
+    });
+
+    it('should be case insensitive when flushing value', () => {
+        let groups: GroupModel[] = [
+            new GroupModel({ id: '1', name: 'group 1' }),
+            new GroupModel({ id: '2', name: 'gRoUp 2' })
+        ];
+
+        widget.groups = groups;
+        widget.value = 'GROUP 2';
+        widget.flushValue();
+
+        expect(widget.value).toBe(groups[1].name);
+        expect(widget.field.value).toBe(groups[1]);
+    });
+
+    it('should hide popup on key up', () => {
+        widget.popupVisible = true;
+        widget.onKeyUp(null);
+        expect(widget.popupVisible).toBeFalsy();
+    });
+
+    it('should fetch groups and show popup on key up', () => {
+        let groups: GroupModel[] = [
+            new GroupModel(),
+            new GroupModel()
+        ];
+        spyOn(formService, 'getWorkflowGroups').and.returnValue(
+            Observable.create(observer => {
+                observer.next(groups);
+                observer.complete();
+            })
+        );
+
+        widget.value = 'group';
+        widget.onKeyUp(null);
+
+        expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group');
+        expect(widget.groups).toBe(groups);
+        expect(widget.popupVisible).toBeTruthy();
+    });
+
+    it('should hide popup when fetching empty group list', () => {
+        spyOn(formService, 'getWorkflowGroups').and.returnValue(
+            Observable.create(observer => {
+                observer.next(null);
+                observer.complete();
+            })
+        );
+
+        widget.value = 'group';
+        widget.onKeyUp(null);
+
+        expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group');
+        expect(widget.groups.length).toBe(0);
+        expect(widget.popupVisible).toBeFalsy();
+    });
+
+    it('should not fetch groups when value is missing', () => {
+        spyOn(formService, 'getWorkflowGroups').and.stub();
+
+        widget.value = null;
+        widget.onKeyUp(null);
+
+        expect(formService.getWorkflowGroups).not.toHaveBeenCalled();
+        expect(widget.popupVisible).toBeFalsy();
+    });
+
+    it('should not fetch groups when value violates constraints', () => {
+        spyOn(formService, 'getWorkflowGroups').and.stub();
+
+        widget.minTermLength = 4;
+        widget.value = '123';
+        widget.onKeyUp(null);
+
+        expect(formService.getWorkflowGroups).not.toHaveBeenCalled();
+        expect(widget.popupVisible).toBeFalsy();
+    });
+});

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts

@@ -59,7 +59,6 @@ export class FunctionalGroupWidget extends WidgetComponent implements OnInit {
         } else {
             this.popupVisible = false;
         }
-
     }
 
     onBlur() {

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html

@@ -11,9 +11,9 @@
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
 </div>
 
-<div class="typeahead-autocomplete mdl-shadow--2dp" *ngIf="popupVisible">
+<div class="typeahead-autocomplete mdl-shadow--2dp" *ngIf="options.length > 0 && popupVisible">
     <ul>
-        <li *ngFor="let item of getOptions()"
+        <li *ngFor="let item of options"
             class="mdl-menu__item"
             (click)="onItemClick(item, $event)">
             {{item.name}}

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts

@@ -72,6 +72,9 @@ describe('TypeaheadWidget', () => {
     });
 
     it('should show popup on key up', () => {
+
+        spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
+
         widget.minTermLength = 1;
         widget.value = 'some value';
 
@@ -80,6 +83,15 @@ describe('TypeaheadWidget', () => {
         expect(widget.popupVisible).toBeTruthy();
     });
 
+    it('should require items to show popup', () => {
+        widget.minTermLength = 1;
+        widget.value = 'some value';
+
+        widget.popupVisible = false;
+        widget.onKeyUp(null);
+        expect(widget.popupVisible).toBeFalsy();
+    });
+
     it('should require value to show popup', () => {
         widget.minTermLength = 1;
         widget.value = '';
@@ -90,6 +102,8 @@ describe('TypeaheadWidget', () => {
     });
 
     it('should require value to be of min length to show popup', () => {
+        spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
+
         widget.minTermLength = 3;
         widget.value = 'v';
 

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts

@@ -34,6 +34,7 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
     popupVisible: boolean = false;
     minTermLength: number = 1;
     value: string;
+    options: FormFieldOption[] = [];
 
     constructor(private formService: FormService) {
         super();
@@ -72,7 +73,12 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
     }
 
     onKeyUp(event: KeyboardEvent) {
-        this.popupVisible = !!(this.value && this.value.length >= this.minTermLength);
+        if (this.value && this.value.length >= this.minTermLength) {
+            this.options = this.getOptions();
+            this.popupVisible = this.options.length > 0;
+        } else {
+            this.popupVisible = false;
+        }
     }
 
     onBlur() {