From 296b9ecaa262a04b1b059f1855915c7e412b8039 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 7 Sep 2016 12:56:21 +0100 Subject: [PATCH] #636 unit tests and code improvements fixes #696 --- .../components/widgets/core/group.model.ts | 10 + .../functional-group.widget.html | 2 +- .../functional-group.widget.spec.ts | 176 ++++++++++++++++++ .../functional-group.widget.ts | 1 - .../widgets/typeahead/typeahead.widget.html | 4 +- .../typeahead/typeahead.widget.spec.ts | 14 ++ .../widgets/typeahead/typeahead.widget.ts | 8 +- 7 files changed, 210 insertions(+), 5 deletions(-) create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.spec.ts diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts index de701aec0a..bf14a9d2a7 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts +++ b/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; + } + } + } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html index 7a9bf8f2a5..5562b58d6e 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html @@ -10,7 +10,7 @@ -
+
  • { + + 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(); + }); +}); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts index 37a40337b0..7725e841c6 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts +++ b/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() { diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html index ab43e475a6..332465da94 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html @@ -11,9 +11,9 @@
-
+
    -
  • {{item.name}} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts index b0705fc9b1..5dbfdd09eb 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts +++ b/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'; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts index 8ed39cc2ef..d58ccf6f83 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts +++ b/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() {