From 7a91807269dd1762f0cbbfb4d33466653d740499 Mon Sep 17 00:00:00 2001 From: Vito Albano Date: Mon, 24 Oct 2016 12:11:31 +0100 Subject: [PATCH] Fix visibility check for radio buttons --- .../radio-buttons/radio-buttons.widget.html | 4 +- .../radio-buttons.widget.spec.ts | 111 +++++++++++++++++- .../radio-buttons/radio-buttons.widget.ts | 5 + 3 files changed, 117 insertions(+), 3 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html index 6d34868a29..ea4bf5924f 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html @@ -1,5 +1,5 @@
+ [class.radio-buttons-widget__invalid]="!field.isValid" [id]="field.id" *ngIf="field?.isVisible">
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.spec.ts index dfe9bc75ee..8397b2a373 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.spec.ts +++ b/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: '' }); + widget.field = new FormFieldModel(new FormModel(), {restUrl: ''}); }); 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; + 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(); + }); + }); + }); + }); + }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts index 0a30b3ffde..bf5d6e8830 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts +++ b/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); }