Add test for dropdown widget

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

@@ -23,15 +23,21 @@ import { FormFieldModel } from './../core/form-field.model';
 import { CoreModule } from 'ng2-alfresco-core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { EcmModelService } from '../../../services/ecm-model.service';
+import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { FormFieldTypes } from '../core/form-field-types';
+import { FormFieldOption } from './../core/form-field-option';
+import { ContainerModel } from '../core/container.model';
 
 describe('RadioButtonsWidget', () => {
 
     let formService: FormService;
     let widget: RadioButtonsWidget;
+    let visibilityService: WidgetVisibilityService;
 
     beforeEach(() => {
         formService = new FormService(null, null);
-        widget = new RadioButtonsWidget(formService);
+        visibilityService = new WidgetVisibilityService(null, null, null);
+        widget = new RadioButtonsWidget(formService, visibilityService);
         widget.field = new FormFieldModel(new FormModel(), { restUrl: '<url>' });
     });
 
@@ -57,18 +63,40 @@ describe('RadioButtonsWidget', () => {
     });
 
     it('should update form on values fetched', () => {
-        let form = widget.field;
+        const taskId = '<form-id>';
-        spyOn(form, 'updateForm').and.stub();
+        const fieldId = '<field-id>';
+
+        let form = new FormModel({
+            taskId: taskId
+        });
+
+        widget.field = new FormFieldModel(form, {
+            id: fieldId,
+            restUrl: '<url>'
+        });
+        let field = widget.field;
+        spyOn(field, 'updateForm').and.stub();
 
         spyOn(formService, 'getRestFieldValues').and.returnValue(Observable.create(observer => {
             observer.next(null);
             observer.complete();
         }));
         widget.ngOnInit();
-        expect(form.updateForm).toHaveBeenCalled();
+        expect(field.updateForm).toHaveBeenCalled();
     });
 
     it('should require field with rest URL to fetch data', () => {
+        const taskId = '<form-id>';
+        const fieldId = '<field-id>';
+
+        let form = new FormModel({
+            taskId: taskId
+        });
+
+        widget.field = new FormFieldModel(form, {
+            id: fieldId,
+            restUrl: '<url>'
+        });
         spyOn(formService, 'getRestFieldValues').and.returnValue(Observable.create(observer => {
             observer.next(null);
             observer.complete();
@@ -102,19 +130,17 @@ describe('RadioButtonsWidget', () => {
         expect(widget.field.value).toEqual('fake-opt');
     });
 
-    it('should emit field change event when option is clicked', (done) => {
-        widget.fieldChanged.subscribe((field) => {
-            expect(field.value).toEqual('fake-opt');
-            done();
-        });
-        widget.onOptionClick('fake-opt');
-    });
-
     describe('when template is ready', () => {
         let radioButtonWidget: RadioButtonsWidget;
         let fixture: ComponentFixture<RadioButtonsWidget>;
         let element: HTMLElement;
         let componentHandler;
+        let stubFormService: FormService;
+        let stubVisibilityService: WidgetVisibilityService;
+        let restOption: FormFieldOption[] = [{ id: 'opt-1', name: 'opt-name-1' }, {
+            id: 'opt-2',
+            name: 'opt-name-2'
+        }];
 
         beforeEach(async(() => {
             componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
@@ -122,7 +148,7 @@ describe('RadioButtonsWidget', () => {
             TestBed.configureTestingModule({
                 imports: [CoreModule],
                 declarations: [RadioButtonsWidget],
-                providers: [FormService, EcmModelService]
+                providers: [FormService, EcmModelService, WidgetVisibilityService]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(RadioButtonsWidget);
                 radioButtonWidget = fixture.componentInstance;
@@ -130,32 +156,35 @@ describe('RadioButtonsWidget', () => {
             });
         }));
 
-        beforeEach(() => {
-            radioButtonWidget.field = new FormFieldModel(new FormModel(), {
-                id: 'radio-id',
-                name: 'radio-name',
-                type: 'radio-buttons'
-            });
-            radioButtonWidget.field.options = [{id: 'opt-1', name: 'opt-name-1'}, {id: 'opt-2', name: 'opt-name-2'}];
-            radioButtonWidget.field.isVisible = true;
-            fixture.detectChanges();
-        });
-
         afterEach(() => {
             fixture.destroy();
             TestBed.resetTestingModule();
         });
 
-        it('should show visible radio buttons', async(() => {
+        describe('and radioButton is populated via taskId', () => {
-            fixture.detectChanges();
+
-            fixture.whenStable()
+            beforeEach(async(() => {
-                .then(() => {
+                stubFormService = fixture.debugElement.injector.get(FormService);
-                    expect(element.querySelector('#radio-id')).toBeDefined();
+                stubVisibilityService = fixture.debugElement.injector.get(WidgetVisibilityService);
-                    expect(element.querySelector('#opt-1')).toBeDefined();
+                spyOn(stubFormService, 'getRestFieldValues').and.returnValue(Observable.of(restOption));
-                    expect(element.querySelector('#radio-id-opt-1')).toBeDefined();
+                radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
-                    expect(element.querySelector('#opt-2')).toBeDefined();
+                    id: 'radio-id',
-                    expect(element.querySelector('#radio-id-opt-2')).toBeDefined();
+                    name: 'radio-name',
+                    type: FormFieldTypes.RADIO_BUTTONS,
+                    restUrl: 'rest-url'
                 });
+                radioButtonWidget.field.isVisible = true;
+                let fakeContainer = new ContainerModel(radioButtonWidget.field);
+                radioButtonWidget.field.form.fields.push(fakeContainer);
+                fixture.detectChanges();
+            }));
+
+            it('should show visible radio buttons', async(() => {
+                expect(element.querySelector('#radio-id')).toBeDefined();
+                expect(element.querySelector('#opt-1')).not.toBeNull();
+                expect(element.querySelector('#radio-id-opt-1')).not.toBeNull();
+                expect(element.querySelector('#opt-2')).not.toBeNull();
+                expect(element.querySelector('#radio-id-opt-2')).not.toBeNull();
             }));
 
             it('should not show invisible radio buttons', async(() => {
@@ -169,37 +198,43 @@ describe('RadioButtonsWidget', () => {
                     });
             }));
 
-        it('should hide radio button when it becomes not visible', async(() => {
+            it('should evaluate visibility on option click', async(() => {
-            radioButtonWidget.fieldChanged.subscribe((res) => {
+                spyOn(stubVisibilityService, 'evaluateVisibility').and.returnValue(false);
-                radioButtonWidget.field.isVisible = false;
+                let option: HTMLElement = <HTMLElement>element.querySelector('#opt-1');
+                expect(element.querySelector('#radio-id')).not.toBeNull();
+                expect(option).not.toBeNull();
+                option.click();
                 fixture.detectChanges();
                 fixture.whenStable()
                     .then(() => {
                         expect(element.querySelector('#radio-id')).toBeNull();
                         expect(element.querySelector('#opt-1')).toBeNull();
-                        expect(element.querySelector('#opt-2')).toBeNull();
                     });
-            });
-            radioButtonWidget.checkVisibility(null);
             }));
+        });
 
-        it('should show radio button when it becomes visible', async(() => {
+        describe('and radioButton is populated via processDefinitionId', () => {
-            radioButtonWidget.field.isVisible = false;
+
-            fixture.detectChanges();
+            beforeEach(async(() => {
-            radioButtonWidget.fieldChanged.subscribe((res) => {
+                radioButtonWidget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'proc-id' }), {
+                    id: 'radio-id',
+                    name: 'radio-name',
+                    type: FormFieldTypes.RADIO_BUTTONS,
+                    restUrl: 'rest-url'
+                });
+                stubFormService = fixture.debugElement.injector.get(FormService);
+                spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(Observable.of(restOption));
                 radioButtonWidget.field.isVisible = true;
                 fixture.detectChanges();
-                fixture.whenStable()
+            }));
-                    .then(() => {
+
+            it('should show visible radio buttons', async(() => {
                 expect(element.querySelector('#radio-id')).toBeDefined();
-                        expect(element.querySelector('#opt-1')).toBeDefined();
+                expect(element.querySelector('#opt-1')).not.toBeNull();
-                        expect(element.querySelector('#radio-id-opt-1')).toBeDefined();
+                expect(element.querySelector('#radio-id-opt-1')).not.toBeNull();
-                        expect(element.querySelector('#opt-2')).toBeDefined();
+                expect(element.querySelector('#opt-2')).not.toBeNull();
-                        expect(element.querySelector('#radio-id-opt-2')).toBeDefined();
+                expect(element.querySelector('#radio-id-opt-2')).not.toBeNull();
-                    });
-            });
-            radioButtonWidget.checkVisibility(null);
             }));
         });
-
+    });
 });

ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts

@@ -19,6 +19,7 @@ import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
 import { FormService } from '../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
+import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 
 @Component({
     moduleId: module.id,
@@ -28,16 +29,17 @@ import { FormFieldOption } from './../core/form-field-option';
 })
 export class RadioButtonsWidget extends WidgetComponent implements OnInit {
 
-    constructor(private formService: FormService) {
+    constructor(private formService: FormService,
+                private visibilityService: WidgetVisibilityService) {
         super();
     }
 
     ngOnInit() {
         if (this.field && this.field.restUrl) {
-            if (this.field.form.processDefinitionId) {
+            if (this.field.form.taskId) {
-                this.getOptionsByProcessDefinitionId();
-            } else {
                 this.getOptionsByTaskId();
+            } else {
+                this.getOptionsByProcessDefinitionId();
             }
         }
     }
@@ -74,7 +76,11 @@ export class RadioButtonsWidget extends WidgetComponent implements OnInit {
 
     onOptionClick(optionSelected: any) {
         this.field.value = optionSelected;
-        this.checkVisibility(this.field);
+        this.checkVisibility();
+    }
+
+    checkVisibility() {
+        this.visibilityService.refreshVisibility(this.field.form);
     }
 
     handleError(error: any) {