inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-2034] Display disabled radio button in read-only mode (#5500)

Browse Source 
* [AAE-2034] Radio Button displaued in read-only mode

* [AAE-2034] Added tests and disable for all radio group and not every button

* Test disbled property
This commit is contained in:
Baptiste Mahé
2020-02-24 11:19:57 +00:00
committed by GitHub
parent 9219fa249c
commit 53e1940ee7
2 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html
View File

@@ -2,7 +2,7 @@
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id">
<div class="adf-radio-button-container">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" *ngIf="!field.readOnly">
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[id]="field.id + '-' + opt.id"
[name]="field.id"
@@ -14,10 +14,7 @@
{{opt.name}}
</mat-radio-button>
</mat-radio-group>
<display-text-widget *ngIf="field.readOnly" [field]="field"></display-text-widget>
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

49
lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
View File

@@ -154,28 +154,6 @@ describe('RadioButtonsWidgetComponent', () => {
fixture.destroy();
});
describe('and radioButton is readonly', () => {
beforeEach(async(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
id: 'radio-id',
name: 'radio-name',
type: FormFieldTypes.RADIO_BUTTONS,
readOnly: true
});
radioButtonWidget.field.isVisible = true;
const fakeContainer = new ContainerModel(radioButtonWidget.field);
radioButtonWidget.field.form.fields.push(fakeContainer);
fixture.detectChanges();
}));
it('should show radio buttons as text when is readonly', async(() => {
expect(element.querySelector('display-text-widget')).toBeDefined();
}));
});
describe('and radioButton is populated via taskId', () => {
beforeEach(async(() => {
@@ -211,6 +189,33 @@ describe('RadioButtonsWidgetComponent', () => {
expect(element.querySelector('#radio-id-opt-1-input')).toBeNull();
});
}));
describe('and radioButton is readonly', () => {
beforeEach(async(() => {
radioButtonWidget.field.readOnly = true;
fixture.detectChanges();
}));
it('should show radio buttons disabled', async(() => {
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-1"]')).toBeDefined();
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-1"]')).not.toBeNull();
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-2"]')).toBeDefined();
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-2"]')).not.toBeNull();
}));
describe('and a value is selected', () => {
beforeEach(async(() => {
radioButtonWidget.field.value = restOption[0].id;
fixture.detectChanges();
}));
it('should check the selected value', async(() => {
expect(element.querySelector('.mat-radio-checked')).toBe(element.querySelector('mat-radio-button[ng-reflect-id="radio-id-opt-1"]'));
}));
});
});
});
describe('and radioButton is populated via processDefinitionId', () => {