From e441ad72efbb410bb43690aff621503626bdc1dc Mon Sep 17 00:00:00 2001 From: Dharan <14145706+dhrn@users.noreply.github.com> Date: Thu, 11 Nov 2021 00:23:08 +0530 Subject: [PATCH] [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 --- .../radio-buttons-cloud.widget.html | 2 +- .../radio-buttons-cloud.widget.spec.ts | 214 +++++++++--------- .../radio-buttons-cloud.widget.ts | 12 + 3 files changed, 119 insertions(+), 109 deletions(-) diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html index 5f4f3aaafb..2bc232e335 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html +++ b/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" > diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts index 98e5c63c71..caeb57e490 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts +++ b/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; 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: '' }); }); @@ -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; - 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 = element.querySelector('#radio-id-opt-1 label'); + option.click(); + + fixture.detectChanges(); + await fixture.whenStable(); + fixture.detectChanges(); + const selectedOption: 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 = 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 = element.querySelector('#radio-id-opt-1 label'); - option.click(); - - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - const selectedOption: 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 = element.querySelector('[class*="mat-radio-checked"]'); - expect(selectedOption.innerText).toBe('opt-name-2'); - expect(radioButtonWidget.field.isValid).toBe(true); - }); + fixture.detectChanges(); + const selectedOption: HTMLElement = element.querySelector('[class*="mat-radio-checked"]'); + expect(selectedOption.innerText).toBe('opt-name-1'); + expect(widget.field.isValid).toBe(true); }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts index 12f7048ef0..6c5e812651 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts +++ b/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; + } }