From ac6bdffa6829561e6ae0ce9970ad82cca1f08db1 Mon Sep 17 00:00:00 2001 From: Vito Date: Wed, 10 Nov 2021 17:49:56 +0000 Subject: [PATCH] [AAE-6224] - fixed form field values when rest dropdown has loaded value (#7355) * [AAE-6224] - fixed form field values when rest dropdown has loaded value * [AAE-6224] - improved update form field value * [AAE-6224] - fixed mock in unit test --- .../dropdown/dropdown-cloud.widget.spec.ts | 101 ++++++++++++------ .../widgets/dropdown/dropdown-cloud.widget.ts | 3 +- 2 files changed, 71 insertions(+), 33 deletions(-) diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts index bc5b621e22..cd0c77c799 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts @@ -151,7 +151,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'dropdown-id', name: 'date-name', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', restUrl: 'fake-rest-url', optionType: 'rest', @@ -186,7 +186,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'dropdown-id', name: 'date-name', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', restUrl: 'fake-rest-url', optionType: 'rest', @@ -224,7 +224,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'dropdown-id', name: 'date-name', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', restUrl: 'fake-rest-url', optionType: 'rest', @@ -254,6 +254,42 @@ describe('DropdownCloudWidgetComponent', () => { done(); }); }); + + it('should update the form values when a preselected value is loaded', (done) => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'dropdown-id', + name: 'date-name', + type: 'dropdown', + readOnly: 'false', + restUrl: 'fake-rest-url', + optionType: 'rest', + value: 'opt1' + }); + + spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of([ + { + id: 'opt1', + name: 'default1_value' + }, + { + id: 2, + name: 'default2_value' + } + ])); + + widget.ngOnInit(); + fixture.detectChanges(); + + openSelect(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + const options = fixture.debugElement.queryAll(By.css('.mat-option-text')); + expect(options[0].nativeElement.innerText).toBe('default1_value'); + expect(widget.field.form.values['dropdown-id']).toEqual({id: 'opt1', name: 'default1_value'}); + done(); + }); + }); }); }); @@ -263,7 +299,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'dropdown-id', name: 'date-name', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', options: fakeOptionList, selectionType: 'multiple', @@ -292,7 +328,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'dropdown-id', name: 'date-name', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', selectionType: 'multiple', options: fakeOptionList @@ -317,12 +353,12 @@ describe('DropdownCloudWidgetComponent', () => { describe('Rest URL options', () => { - const parentDropdown = new FormFieldModel(new FormModel(), { id: 'parentDropdown', type: 'dropdown' }); + const parentDropdown = new FormFieldModel(new FormModel(), { id: 'parentDropdown', type: 'dropdown', validate: () => true }); beforeEach(() => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'child-dropdown-id', name: 'child-dropdown', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', optionType: 'rest', restUrl: 'myFakeDomain.com/cities?country=${parentDropdown}', @@ -335,28 +371,6 @@ describe('DropdownCloudWidgetComponent', () => { fixture.detectChanges(); }); - it('should fetch the options from a rest url for a linked dropdown', async () => { - const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(mockRestDropdownOptions)); - const mockParentDropdown = { id: 'parentDropdown', value: 'mock-value' }; - spyOn(widget.field.form, 'getFormFields').and.returnValue([mockParentDropdown]); - parentDropdown.value = 'UK'; - widget.selectionChangedForField(parentDropdown); - - fixture.detectChanges(); - openSelect('child-dropdown-id'); - fixture.detectChanges(); - await fixture.whenStable(); - - const optOne: any = fixture.debugElement.query(By.css('[id="LO"]')); - const optTwo: any = fixture.debugElement.query(By.css('[id="MA"]')); - - expect(jsonDataSpy).toHaveBeenCalledWith('fake-form-id', 'child-dropdown-id', { parentDropdown: 'mock-value' }); - expect(optOne.context.value).toBe('LO'); - expect(optOne.context.viewValue).toBe('LONDON'); - expect(optTwo.context.value).toBe('MA'); - expect(optTwo.context.viewValue).toBe('MANCHESTER'); - }); - it('should reset the options for a linked dropdown with restUrl when the parent dropdown selection changes to empty', async () => { widget.field.options = mockConditionalEntries[1].options; parentDropdown.value = 'empty'; @@ -373,6 +387,28 @@ describe('DropdownCloudWidgetComponent', () => { expect(defaultOption.context.value).toBe('empty'); expect(defaultOption.context.viewValue).toBe('Choose one...'); }); + + it('should fetch the options from a rest url for a linked dropdown', async () => { + const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(mockRestDropdownOptions)); + const mockParentDropdown = { id: 'parentDropdown', value: 'mock-value', validate: () => true }; + spyOn(widget.field.form, 'getFormFields').and.returnValue([mockParentDropdown]); + parentDropdown.value = 'UK'; + widget.selectionChangedForField(parentDropdown); + + fixture.detectChanges(); + openSelect('child-dropdown-id'); + fixture.detectChanges(); + await fixture.whenStable(); + + const optOne: any = fixture.debugElement.query(By.css('[id="LO"]')); + const optTwo: any = fixture.debugElement.query(By.css('[id="MA"]')); + + expect(jsonDataSpy).toHaveBeenCalledWith('fake-form-id', 'child-dropdown-id', { parentDropdown: 'mock-value' }); + expect(optOne.context.value).toBe('LO'); + expect(optOne.context.viewValue).toBe('LONDON'); + expect(optTwo.context.value).toBe('MA'); + expect(optTwo.context.viewValue).toBe('MANCHESTER'); + }); }); describe('Manual options', () => { @@ -382,7 +418,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'child-dropdown-id', name: 'child-dropdown', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', optionType: 'manual', rule: { @@ -422,6 +458,7 @@ describe('DropdownCloudWidgetComponent', () => { fixture.detectChanges(); openSelect('child-dropdown-id'); + await fixture.whenStable(); fixture.detectChanges(); await fixture.whenStable(); @@ -439,7 +476,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'child-dropdown-id', name: 'child-dropdown', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', optionType: 'manual', rule: { @@ -461,7 +498,7 @@ describe('DropdownCloudWidgetComponent', () => { widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { id: 'child-dropdown-id', name: 'child-dropdown', - type: 'dropdown-cloud', + type: 'dropdown', readOnly: 'false', restUrl: 'mock-url.com/country=${country}', optionType: 'rest', diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts index 1bde1709d6..3d453f109d 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts @@ -90,6 +90,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI .pipe(takeUntil(this.onDestroy$)) .subscribe((result: FormFieldOption[]) => { this.field.options = result; + this.field.updateForm(); }, (err) => this.handleError(err)); } } @@ -107,7 +108,6 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI private loadFieldOptionsForLinkedWidget() { const parentWidgetValue = this.getParentWidgetValue(); this.parentValueChanged(parentWidgetValue); - this.field.updateForm(); } private getParentWidgetValue(): string { @@ -142,6 +142,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI rulesEntries.forEach((ruleEntry: RuleEntry) => { if (ruleEntry.key === value) { this.field.options = ruleEntry.options; + this.field.updateForm(); } }); }