mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACA-3235] FE - Should not include invisible fields in payload on Start/Save adf-form. (#5681)
* [ACA-3235] FE - Should not include invisible fields in payload on Start/Save adf-form. * * Added unit test to the recent changes
This commit is contained in:
siva kumar
GitHub
@@ -26,6 +26,7 @@ import { FormBaseModule } from '../../form-base.module';
|
||||
import { TranslationService } from '../../../services/translation.service';
|
||||
import { TranslationMock } from '../../../mock/translation.service.mock';
|
||||
import { TranslateStore } from '@ngx-translate/core';
|
||||
import { formWithOneVisibleAndOneInvisibleFieldMock, formWithOneVisibleAndOneInvisibleTabMock } from '../mock/form-renderer.component.mock';
|
||||
|
||||
describe('FormFieldComponent', () => {
|
||||
|
||||
@@ -152,6 +153,78 @@ describe('FormFieldComponent', () => {
|
||||
expect(fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').hidden).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Should remove invisible field value from the form values', (done) => {
|
||||
const fakeFormWithField = new FormModel(formWithOneVisibleAndOneInvisibleFieldMock);
|
||||
const mockNameFiled = fakeFormWithField.getFormFields().find((field) => field.id === 'mockname');
|
||||
const mockMobileFiled = fakeFormWithField.getFormFields().find((field) => field.id === 'mockmobilenumber');
|
||||
|
||||
expect(mockNameFiled.name).toBe('Mock Name', 'Visibile field');
|
||||
expect(mockMobileFiled.name).toBe('Mock Mobile Number', 'Invisible field');
|
||||
|
||||
component.field = mockNameFiled;
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.field.form.values).toEqual({ mockname: 'Mock value' });
|
||||
expect(component.field.form.values[mockNameFiled.id]).toBeDefined();
|
||||
expect(component.field.form.values[mockMobileFiled.id]).not.toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('Should remove invisible tab fields value from the form values', (done) => {
|
||||
const fakeFormWithTab = new FormModel(formWithOneVisibleAndOneInvisibleTabMock);
|
||||
|
||||
const tabOneNameField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockname');
|
||||
const tabOneMobileField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockmobilenumber');
|
||||
|
||||
const tabTwoAddressField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockaddress');
|
||||
const tabTwoEmailField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockemail');
|
||||
|
||||
expect(tabOneNameField.name).toBe('Mock Name', 'Visibile field');
|
||||
expect(tabOneMobileField.name).toBe('Mock Mobile Number', 'Invisible field');
|
||||
|
||||
expect(tabTwoEmailField.name).toBe('Mock Email', 'Invisible field');
|
||||
expect(tabTwoAddressField.name).toBe('Mock Address', 'Invisible field');
|
||||
|
||||
component.field = tabOneNameField;
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.field.form.values).toEqual({ mockname: null });
|
||||
expect(component.field.form.values[tabOneNameField.id]).toBeDefined();
|
||||
expect(component.field.form.values[tabOneMobileField.id]).not.toBeDefined();
|
||||
expect(component.field.form.values[tabTwoAddressField.id]).not.toBeDefined();
|
||||
expect(component.field.form.values[tabTwoEmailField.id]).not.toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('Should add tab invisible fields value to the form values if the tab get visible', (done) => {
|
||||
const fakeFormWithTab = new FormModel(formWithOneVisibleAndOneInvisibleTabMock);
|
||||
|
||||
const tabOneNameField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockname');
|
||||
const tabOneMobileField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockmobilenumber');
|
||||
|
||||
const tabTwoAddressField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockaddress');
|
||||
const tabTwoEmailField = fakeFormWithTab.getFormFields().find((field) => field.id === 'mockemail');
|
||||
|
||||
expect(tabOneNameField.name).toBe('Mock Name', 'Visibile field');
|
||||
expect(tabOneMobileField.name).toBe('Mock Mobile Number', 'Invisible field');
|
||||
|
||||
expect(tabTwoEmailField.name).toBe('Mock Email', 'Invisible field');
|
||||
expect(tabTwoAddressField.name).toBe('Mock Address', 'Invisible field');
|
||||
|
||||
component.field = tabOneNameField;
|
||||
component.field.value = 'test';
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.field.form.values).toEqual({ mockname: 'test', mockmobilenumber: null, mockemail: null, mockaddress: null });
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('[C213878] - Should fields be correctly rendered when filled with process variables', async () => {
|
||||
const field = new FormFieldModel(form, {
|
||||
fieldType: 'HyperlinkRepresentation',
|
||||
|
||||
@@ -98,6 +98,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
|
||||
instance.fieldChanged.subscribe((field) => {
|
||||
if (field && this.field.form) {
|
||||
this.visibilityService.refreshVisibility(field.form);
|
||||
this.visibilityService.removeInvisibleFormValues(field.form);
|
||||
field.form.onFormFieldChanged(field);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1334,3 +1334,441 @@ export const radioWidgetVisibiltyForm = {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const formWithOneVisibleAndOneInvisibleFieldMock = {
|
||||
tabs: [],
|
||||
fields: [
|
||||
{
|
||||
fieldType: 'ContainerRepresentation',
|
||||
id: '1588915084743',
|
||||
name: 'Label',
|
||||
type: 'container',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: null,
|
||||
className: null,
|
||||
dateDisplayFormat: null,
|
||||
layout: null,
|
||||
sizeX: 2,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null,
|
||||
numberOfColumns: 2,
|
||||
fields: {
|
||||
'1': [
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'mockname',
|
||||
name: 'Mock Name',
|
||||
type: 'text',
|
||||
value: 'Mock value',
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: null,
|
||||
className: null,
|
||||
params: {
|
||||
existingColspan: 1,
|
||||
maxColspan: 2
|
||||
},
|
||||
dateDisplayFormat: null,
|
||||
layout: {
|
||||
row: -1,
|
||||
column: -1,
|
||||
colspan: 1
|
||||
},
|
||||
sizeX: 1,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null
|
||||
}
|
||||
],
|
||||
'2': [
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'mockmobilenumber',
|
||||
name: 'Mock Mobile Number',
|
||||
type: 'text',
|
||||
value: 'Mock invisible value',
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
isVisible: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: null,
|
||||
className: null,
|
||||
params: {
|
||||
existingColspan: 1,
|
||||
maxColspan: 1
|
||||
},
|
||||
dateDisplayFormat: null,
|
||||
layout: {
|
||||
row: -1,
|
||||
column: -1,
|
||||
colspan: 1
|
||||
},
|
||||
sizeX: 1,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: {
|
||||
leftFormFieldId: 'mockname',
|
||||
leftRestResponseId: null,
|
||||
operator: '==',
|
||||
rightValue: 'test',
|
||||
rightType: null,
|
||||
rightFormFieldId: '',
|
||||
rightRestResponseId: '',
|
||||
nextConditionOperator: '',
|
||||
nextCondition: null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
outcomes: [],
|
||||
javascriptEvents: [],
|
||||
className: '',
|
||||
style: '',
|
||||
customFieldTemplates: {},
|
||||
metadata: {},
|
||||
variables: [],
|
||||
customFieldsValueInfo: {},
|
||||
gridsterForm: false
|
||||
};
|
||||
|
||||
export const formWithOneVisibleAndOneInvisibleTabMock = {
|
||||
tabs: [
|
||||
{
|
||||
id: 'tab1',
|
||||
title: 'TabOne',
|
||||
visibilityCondition: null
|
||||
},
|
||||
{
|
||||
id: 'tab2',
|
||||
title: 'TabTwo',
|
||||
visibilityCondition: {
|
||||
leftFormFieldId: 'mockname',
|
||||
leftRestResponseId: null,
|
||||
operator: '==',
|
||||
rightValue: 'test',
|
||||
rightType: null,
|
||||
rightFormFieldId: '',
|
||||
rightRestResponseId: '',
|
||||
nextConditionOperator: '',
|
||||
nextCondition: null
|
||||
}
|
||||
}
|
||||
],
|
||||
fields: [
|
||||
{
|
||||
fieldType: 'ContainerRepresentation',
|
||||
id: '1588931207573',
|
||||
name: 'Label',
|
||||
type: 'container',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: 'tab2',
|
||||
className: null,
|
||||
dateDisplayFormat: null,
|
||||
layout: null,
|
||||
sizeX: 2,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null,
|
||||
numberOfColumns: 2,
|
||||
fields: {
|
||||
'1': [
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'mockaddress',
|
||||
name: 'Mock Address',
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: 'tab2',
|
||||
className: null,
|
||||
params: {
|
||||
existingColspan: 1,
|
||||
maxColspan: 2
|
||||
},
|
||||
dateDisplayFormat: null,
|
||||
layout: {
|
||||
row: -1,
|
||||
column: -1,
|
||||
colspan: 1
|
||||
},
|
||||
sizeX: 1,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null
|
||||
}
|
||||
],
|
||||
'2': [
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'mockemail',
|
||||
name: 'Mock Email',
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: 'tab2',
|
||||
className: null,
|
||||
params: {
|
||||
existingColspan: 1,
|
||||
maxColspan: 1
|
||||
},
|
||||
dateDisplayFormat: null,
|
||||
layout: {
|
||||
row: -1,
|
||||
column: -1,
|
||||
colspan: 1
|
||||
},
|
||||
sizeX: 1,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
fieldType: 'ContainerRepresentation',
|
||||
id: '1588915084743',
|
||||
name: 'Label',
|
||||
type: 'container',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: 'tab1',
|
||||
className: null,
|
||||
dateDisplayFormat: null,
|
||||
layout: null,
|
||||
sizeX: 2,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null,
|
||||
numberOfColumns: 2,
|
||||
fields: {
|
||||
'1': [
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'mockname',
|
||||
name: 'Mock Name',
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: 'tab1',
|
||||
className: null,
|
||||
params: {
|
||||
existingColspan: 1,
|
||||
maxColspan: 2
|
||||
},
|
||||
dateDisplayFormat: null,
|
||||
layout: {
|
||||
row: -1,
|
||||
column: -1,
|
||||
colspan: 1
|
||||
},
|
||||
sizeX: 1,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: null
|
||||
}
|
||||
],
|
||||
'2': [
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'mockmobilenumber',
|
||||
name: 'Mock Mobile Number',
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: false,
|
||||
readOnly: false,
|
||||
overrideId: false,
|
||||
colspan: 1,
|
||||
placeholder: null,
|
||||
minLength: 0,
|
||||
maxLength: 0,
|
||||
minValue: null,
|
||||
maxValue: null,
|
||||
regexPattern: null,
|
||||
optionType: null,
|
||||
hasEmptyValue: null,
|
||||
options: null,
|
||||
restUrl: null,
|
||||
restResponsePath: null,
|
||||
restIdProperty: null,
|
||||
restLabelProperty: null,
|
||||
tab: 'tab1',
|
||||
className: null,
|
||||
params: {
|
||||
existingColspan: 1,
|
||||
maxColspan: 1
|
||||
},
|
||||
dateDisplayFormat: null,
|
||||
layout: {
|
||||
row: -1,
|
||||
column: -1,
|
||||
colspan: 1
|
||||
},
|
||||
sizeX: 1,
|
||||
sizeY: 1,
|
||||
row: -1,
|
||||
col: -1,
|
||||
visibilityCondition: {
|
||||
leftFormFieldId: 'mockname',
|
||||
leftRestResponseId: null,
|
||||
operator: '==',
|
||||
rightValue: 'test',
|
||||
rightType: null,
|
||||
rightFormFieldId: '',
|
||||
rightRestResponseId: '',
|
||||
nextConditionOperator: '',
|
||||
nextCondition: null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
outcomes: [],
|
||||
javascriptEvents: [],
|
||||
className: '',
|
||||
style: '',
|
||||
customFieldTemplates: {},
|
||||
metadata: {},
|
||||
variables: [],
|
||||
customFieldsValueInfo: {},
|
||||
gridsterForm: false
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user