[AAE-6354] [FE] radio button rest preselct from mapping (#7359)

* [AAE-6354] [FE] radio button rest preselct from mapping

* * revert

* * minor changes

* [ci:force] force test

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html

@@ -10,7 +10,7 @@
                 [id]="field.id + '-' + opt.id"
                 [name]="field.id"
                 [value]="opt.id"
-                [checked]="field.value === opt.id"
+                [checked]="isChecked(opt)"
                 (change)="onOptionClick(opt.id)"
                 color="primary"
                 class="adf-radio-button" *ngFor="let opt of field.options" >

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts

@@ -16,38 +16,42 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { MatRadioModule } from '@angular/material/radio';
 import { TranslateModule } from '@ngx-translate/core';
-import { AlfrescoApiService, CoreTestingModule, FormFieldModel, FormFieldOption, FormFieldTypes, FormModel, FormService, setupTestBed } from 'core';
-import { FormCloudService } from 'process-services-cloud';
-import { Observable } from 'rxjs';
+import { FormFieldModel, FormFieldOption, FormFieldTypes, FormModel, setupTestBed } from '@alfresco/adf-core';
+import { FormCloudService } from '../../../services/form-cloud.service';
 import { RadioButtonsCloudWidgetComponent } from './radio-buttons-cloud.widget';
+import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
+import { of } from 'rxjs';
 
 describe('RadioButtonsCloudWidgetComponent', () => {
-
-    let formService: FormService;
-    let formCloudService: FormCloudService;
+    let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
     let widget: RadioButtonsCloudWidgetComponent;
-    let alfrescoApiService: AlfrescoApiService;
+    let formCloudService: FormCloudService;
+    let element: HTMLElement;
+    const restOption: FormFieldOption[] = [
+        {
+            id: 'opt-1',
+            name: 'opt-name-1'
+        },
+        {
+            id: 'opt-2',
+            name: 'opt-name-2'
+        }
+    ];
 
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
-            CoreTestingModule,
-            MatRadioModule,
-            FormsModule,
-            MatIconModule
+            ProcessServiceCloudTestingModule
         ]
     });
 
     beforeEach(() => {
-        alfrescoApiService = TestBed.inject(AlfrescoApiService);
-
-        formService = new FormService(null, alfrescoApiService, null);
-        formCloudService = new FormCloudService(alfrescoApiService, null);
-        widget = new RadioButtonsCloudWidgetComponent(formService, formCloudService, null);
+        formCloudService = TestBed.inject(FormCloudService);
+        spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(restOption));
+        fixture = TestBed.createComponent(RadioButtonsCloudWidgetComponent);
+        widget = fixture.componentInstance;
+        element = fixture.nativeElement;
         widget.field = new FormFieldModel(new FormModel(), { restUrl: '<url>' });
     });
 
@@ -66,10 +70,6 @@ describe('RadioButtonsCloudWidgetComponent', () => {
         const field = widget.field;
         spyOn(field, 'updateForm').and.stub();
 
-        spyOn(formCloudService, 'getRestWidgetData').and.returnValue(new Observable((observer) => {
-            observer.next(null);
-            observer.complete();
-        }));
         widget.ngOnInit();
         expect(field.updateForm).toHaveBeenCalled();
     });
@@ -81,97 +81,95 @@ describe('RadioButtonsCloudWidgetComponent', () => {
         expect(widget.field.value).toEqual('fake-opt');
     });
 
-    describe('when template is ready', () => {
-        let radioButtonWidget: RadioButtonsCloudWidgetComponent;
-        let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
-        let element: HTMLElement;
-        const restOption: FormFieldOption[] = [
-            {
-                id: 'opt-1',
-                name: 'opt-name-1'
-            },
-            {
-                id: 'opt-2',
-                name: 'opt-name-2'
-            }];
+    it('should show radio buttons as text when is readonly', async () => {
+        widget.field = new FormFieldModel(new FormModel({}), {
+            id: 'radio-id',
+            name: 'radio-name',
+            type: FormFieldTypes.RADIO_BUTTONS,
+            readOnly: true
+        });
+        fixture.detectChanges();
+        await fixture.whenStable();
+        fixture.detectChanges();
+        expect(element.querySelector('display-text-widget')).toBeDefined();
+    });
 
-        beforeEach(() => {
-            fixture = TestBed.createComponent(RadioButtonsCloudWidgetComponent);
-            radioButtonWidget = fixture.componentInstance;
-            element = fixture.nativeElement;
+    it('should be able to set label property for Radio Button widget', () => {
+        widget.field = new FormFieldModel(new FormModel({}), {
+            id: 'radio-id',
+            name: 'radio-name-label',
+            type: FormFieldTypes.RADIO_BUTTONS,
+            readOnly: true
+        });
+        fixture.detectChanges();
+        expect(element.querySelector('label').innerText).toBe('radio-name-label');
+    });
+
+    it('should be able to set a Radio Button widget as required', async () => {
+        widget.field = new FormFieldModel(new FormModel({}), {
+            id: 'radio-id',
+            name: 'radio-name-label',
+            type: FormFieldTypes.RADIO_BUTTONS,
+            readOnly: false,
+            required: true,
+            optionType: 'manual',
+            options: restOption,
+            restUrl: null
         });
 
-        it('should show radio buttons as text when is readonly', async () => {
-            radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
-                id: 'radio-id',
-                name: 'radio-name',
-                type: FormFieldTypes.RADIO_BUTTONS,
-                readOnly: true
-            });
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            expect(element.querySelector('display-text-widget')).toBeDefined();
+        fixture.detectChanges();
+        await fixture.whenStable();
+        fixture.detectChanges();
+        const widgetLabel = element.querySelector('label');
+        expect(widgetLabel.innerText).toBe('radio-name-label*');
+        expect(widget.field.isValid).toBe(false);
+
+        const option: HTMLElement = <HTMLElement> element.querySelector('#radio-id-opt-1 label');
+        option.click();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+        fixture.detectChanges();
+        const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
+        expect(selectedOption.innerText).toBe('opt-name-1');
+        expect(widget.field.isValid).toBe(true);
+    });
+
+    it('should be able to set a Radio Button widget as required', () => {
+        widget.field = new FormFieldModel(new FormModel({}), {
+            id: 'radio-id',
+            name: 'radio-name-label',
+            type: FormFieldTypes.RADIO_BUTTONS,
+            readOnly: false,
+            required: true,
+            optionType: 'manual',
+            options: restOption,
+            restUrl: null,
+            value: 'opt-name-2'
         });
 
-        it('should be able to set label property for Radio Button widget', () => {
-            radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
-                id: 'radio-id',
-                name: 'radio-name-label',
-                type: FormFieldTypes.RADIO_BUTTONS,
-                readOnly: true
-            });
-            fixture.detectChanges();
-            expect(element.querySelector('label').innerText).toBe('radio-name-label');
+        fixture.detectChanges();
+        const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
+        expect(selectedOption.innerText).toBe('opt-name-2');
+        expect(widget.field.isValid).toBe(true);
+    });
+
+    it('should be able to set a Radio Button widget when rest option enabled', () => {
+        widget.field = new FormFieldModel(new FormModel({}), {
+            id: 'radio-id',
+            name: 'radio-name-label',
+            type: FormFieldTypes.RADIO_BUTTONS,
+            readOnly: false,
+            required: false,
+            optionType: 'rest',
+            options: [],
+            restUrl: 'http://mocky.com/mocky-12344',
+            value: { id: 'opt-1' }
         });
 
-        it('should be able to set a Radio Button widget as required', async () => {
-            radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
-                id: 'radio-id',
-                name: 'radio-name-label',
-                type: FormFieldTypes.RADIO_BUTTONS,
-                readOnly: false,
-                required: true,
-                optionType: 'manual',
-                options: restOption,
-                restUrl: null
-            });
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            const widgetLabel = element.querySelector('label');
-            expect(widgetLabel.innerText).toBe('radio-name-label*');
-            expect(radioButtonWidget.field.isValid).toBe(false);
-
-            const option: HTMLElement = <HTMLElement> element.querySelector('#radio-id-opt-1 label');
-            option.click();
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
-            expect(selectedOption.innerText).toBe('opt-name-1');
-            expect(radioButtonWidget.field.isValid).toBe(true);
-        });
-
-        it('should be able to set a Radio Button widget as required', () => {
-            radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
-                id: 'radio-id',
-                name: 'radio-name-label',
-                type: FormFieldTypes.RADIO_BUTTONS,
-                readOnly: false,
-                required: true,
-                optionType: 'manual',
-                options: restOption,
-                restUrl: null,
-                value: 'opt-name-2'
-            });
-
-            fixture.detectChanges();
-            const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
-            expect(selectedOption.innerText).toBe('opt-name-2');
-            expect(radioButtonWidget.field.isValid).toBe(true);
-        });
+        fixture.detectChanges();
+        const selectedOption: HTMLElement = <HTMLElement> element.querySelector('[class*="mat-radio-checked"]');
+        expect(selectedOption.innerText).toBe('opt-name-1');
+        expect(widget.field.isValid).toBe(true);
     });
 });

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts

@@ -75,4 +75,16 @@ export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements
         this.logService.error(error);
     }
 
+    isChecked(option: FormFieldOption): boolean {
+        if (this.field.value && typeof this.field.value === 'object') {
+            let id = 'id';
+            let name = 'name';
+            if (this.field.restUrl) {
+                id = this.field.restIdProperty ?? 'id';
+                name = this.field.restLabelProperty ?? 'name';
+            }
+            return this.field.value[id] === option.id || this.field.value[name] === option.name;
+        }
+        return this.field.value === option.id;
+    }
 }