Merge pull request #918 from Alfresco/dev-valbano-898

Fix visibility check for radio buttons

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

@@ -1,5 +1,5 @@
 <div class="radio-buttons-widget"
-     [class.radio-buttons-widget__invalid]="!field.isValid" [id]="field.id">
+     [class.radio-buttons-widget__invalid]="!field.isValid" [id]="field.id" *ngIf="field?.isVisible">
     <label class="radio-buttons-widget__label" [attr.for]="field.id">{{field.name}}</label>
     <div *ngFor="let opt of field.options">
         <label [id]="opt.id" [attr.for]="field.id + '-' + opt.id" class="mdl-radio mdl-js-radio">
@@ -10,7 +10,7 @@
                    [attr.name]="field.id"
                    [attr.value]="opt.id"
                    [disabled]="field.readOnly"
-                   (click)="field.value = opt.id">
+                   (click)="onOptionClick(opt.id)">
             <span class="mdl-radio__label">{{opt.name}}</span>
         </label>
     </div>

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

@@ -20,6 +20,9 @@ import { FormService } from '../../../services/form.service';
 import { RadioButtonsWidget } from './radio-buttons.widget';
 import { FormModel } from './../core/form.model';
 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';
 
 describe('RadioButtonsWidget', () => {
 
@@ -29,7 +32,7 @@ describe('RadioButtonsWidget', () => {
     beforeEach(() => {
         formService = new FormService(null, null);
         widget = new RadioButtonsWidget(formService);
-        widget.field = new FormFieldModel(new FormModel(), { restUrl: '<url>' });
+        widget.field = new FormFieldModel(new FormModel(), {restUrl: '<url>'});
     });
 
     it('should request field values from service', () => {
@@ -92,4 +95,110 @@ describe('RadioButtonsWidget', () => {
         expect(console.error).toHaveBeenCalledWith('Err');
     });
 
+    it('should update the field value when an option is selected', () => {
+        spyOn(widget, 'checkVisibility').and.stub();
+        widget.onOptionClick('fake-opt');
+
+        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;
+
+        beforeEach(async(() => {
+            componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
+            window['componentHandler'] = componentHandler;
+            TestBed.configureTestingModule({
+                imports: [CoreModule],
+                declarations: [RadioButtonsWidget],
+                providers: [FormService, EcmModelService]
+            }).compileComponents().then(() => {
+                fixture = TestBed.createComponent(RadioButtonsWidget);
+                radioButtonWidget = fixture.componentInstance;
+                element = fixture.nativeElement;
+            });
+        }));
+
+        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;
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+            TestBed.resetTestingModule();
+        });
+
+        it('should show visible radio buttons', () => {
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    expect(element.querySelector('#radio-id')).toBeDefined();
+                    expect(element.querySelector('#opt-1')).toBeDefined();
+                    expect(element.querySelector('#radio-id-opt-1')).toBeDefined();
+                    expect(element.querySelector('#opt-2')).toBeDefined();
+                    expect(element.querySelector('#radio-id-opt-2')).toBeDefined();
+                });
+        });
+
+        it('should not show invisible radio buttons', () => {
+            radioButtonWidget.field.isVisible = false;
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    expect(element.querySelector('#radio-id')).toBeNull();
+                    expect(element.querySelector('#opt-1')).toBeNull();
+                    expect(element.querySelector('#opt-2')).toBeNull();
+                });
+        });
+
+        it('should hide radio button when it becomes not visible', () => {
+            radioButtonWidget.checkVisibility(null);
+            radioButtonWidget.fieldChanged.subscribe((res) => {
+                radioButtonWidget.field.isVisible = false;
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(element.querySelector('#radio-id')).toBeNull();
+                        expect(element.querySelector('#opt-1')).toBeNull();
+                        expect(element.querySelector('#opt-2')).toBeNull();
+                    });
+            });
+        });
+
+        it('should show radio button when it becomes visible', () => {
+            radioButtonWidget.field.isVisible = false;
+            fixture.detectChanges();
+            radioButtonWidget.checkVisibility(null);
+            radioButtonWidget.fieldChanged.subscribe((res) => {
+                radioButtonWidget.field.isVisible = true;
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(element.querySelector('#radio-id')).toBeDefined();
+                        expect(element.querySelector('#opt-1')).toBeDefined();
+                        expect(element.querySelector('#radio-id-opt-1')).toBeDefined();
+                        expect(element.querySelector('#opt-2')).toBeDefined();
+                        expect(element.querySelector('#radio-id-opt-2')).toBeDefined();
+                    });
+            });
+        });
+    });
+
 });

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

@@ -49,6 +49,11 @@ export class RadioButtonsWidget extends WidgetComponent implements OnInit {
         }
     }
 
+    onOptionClick(optionSelected: any) {
+        this.field.value = optionSelected;
+        this.checkVisibility(this.field);
+    }
+
     handleError(error: any) {
         console.error(error);
     }