inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Fix visibility check for radio buttons
This commit is contained in:
Eugenio Romano 2016-10-24 12:47:49 +01:00 committed by GitHub
commit 1442a116e7
3 changed files with 117 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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();
});
});
});
});
});

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

@ -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);
}