inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-11653] Automate part of ADF Form Widgets (#8035)

Browse Source 
* [AAE-11653] Automate part of ADF Form Widgets

* [AAE-11653] visibility condition unit test for readonly text widget
This commit is contained in:
Tomasz Gnyp 2022-12-10 03:39:30 +01:00 committed by GitHub
parent a84a89e8ec
commit d89e3c8065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 738 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
lib/core/src/lib/form/components/form-renderer.component.spec.ts
View File

@ -34,7 +34,12 @@ import {
radioWidgetVisibiltyForm,
customWidgetForm,
formDateVisibility,
customWidgetFormWithVisibility
customWidgetFormWithVisibility,
amountWidgetFormVisibilityMock,
checkboxWidgetFormVisibilityMock,
dateWidgetFormVisibilityMock,
multilineWidgetFormVisibilityMock,
displayTextWidgetFormVisibilityMock
} from './mock/form-renderer.component.mock';
import { FormService } from '../services/form.service';
import { CoreTestingModule } from '../../testing';
@ -143,6 +148,24 @@ describe('Form Renderer Component', () => {
displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0uyqd3-container');
expectElementToBeHidden(displayTextElementContainer);
});
it('[C310336] - Should be able to set visibility conditions for Date widget', async () => {
formRendererComponent.formDefinition = formService.parseForm(dateWidgetFormVisibilityMock.formRepresentation.formDefinition);
fixture.detectChanges();
await fixture.whenStable();
const textInputElement = fixture.nativeElement.querySelector('#Text5asd0a');
const textInputContainer = fixture.nativeElement.querySelector('#field-Text5asd0a-container');
let dateContainer = fixture.nativeElement.querySelector('#field-Date8wbe3d-container');
expectElementToBeVisible(textInputContainer);
expectElementToBeHidden(dateContainer);
typeIntoInput(textInputElement, 'Date');
fixture.detectChanges();
await fixture.whenStable();
dateContainer = fixture.nativeElement.querySelector('#field-Date8wbe3d-container');
expectElementToBeVisible(dateContainer);
});
});
describe('Display Value Widget', () => {
@ -682,4 +705,132 @@ describe('Form Renderer Component', () => {
expect(rulesManager.destroy).toHaveBeenCalled();
});
});
describe('Amount widget', () => {
it('[C309694] - Should be possible to set the visibility conditions with Form fields for Amount Widget', async () => {
formRendererComponent.formDefinition = formService.parseForm(amountWidgetFormVisibilityMock.formRepresentation.formDefinition);
fixture.detectChanges();
await fixture.whenStable();
const textInputElement = fixture.nativeElement.querySelector('#Text0id3ic');
const textInputContainer = fixture.nativeElement.querySelector('#field-Text0id3ic-container');
const numberInputElement = fixture.nativeElement.querySelector('#Number0yggl7');
const numberInputContainer = fixture.nativeElement.querySelector('#field-Number0yggl7-container');
let amountContainer = fixture.nativeElement.querySelector('#field-Amount0kceqc-container');
expectElementToBeVisible(textInputContainer);
expectElementToBeVisible(numberInputContainer);
expectElementToBeHidden(amountContainer);
typeIntoInput(textInputElement, 'text1');
typeIntoInput(numberInputElement, '77');
fixture.detectChanges();
await fixture.whenStable();
amountContainer = fixture.nativeElement.querySelector('#field-Amount0kceqc-container');
expectElementToBeVisible(amountContainer);
});
});
describe('Checkbox widget', () => {
it('[C315208] - Should be possible to set the visibility conditions with Form fields for Checkbox Widget', async () => {
formRendererComponent.formDefinition = formService.parseForm(checkboxWidgetFormVisibilityMock.formRepresentation.formDefinition);
fixture.detectChanges();
await fixture.whenStable();
const firstCheckboxInputElement = fixture.nativeElement.querySelector('#Checkbox0pr51m-input');
const firstCheckboxInputContainer = fixture.nativeElement.querySelector('#field-Checkbox0pr51m-container');
const secondCheckboxInputElement = fixture.nativeElement.querySelector('#Checkbox0fp0zf-input');
const secondCheckboxInputContainer = fixture.nativeElement.querySelector('#field-Checkbox0fp0zf-container');
let visibilityCheckboxContainer = fixture.nativeElement.querySelector('#field-Checkbox0lb7ze-container');
expectElementToBeVisible(firstCheckboxInputContainer);
expectElementToBeVisible(secondCheckboxInputContainer);
expectElementToBeHidden(visibilityCheckboxContainer);
firstCheckboxInputElement.click();
fixture.detectChanges();
await fixture.whenStable();
expectElementToBeHidden(visibilityCheckboxContainer);
secondCheckboxInputElement.click();
fixture.detectChanges();
await fixture.whenStable();
visibilityCheckboxContainer = fixture.nativeElement.querySelector('#field-Checkbox0lb7ze-container');
expectElementToBeVisible(visibilityCheckboxContainer);
});
});
describe('Multiline widget', () => {
it('[C309670] - Should be able to set the Visibility Conditions of the Multiline Text Widget', async () => {
formRendererComponent.formDefinition = formService.parseForm(multilineWidgetFormVisibilityMock.formRepresentation.formDefinition);
fixture.detectChanges();
await fixture.whenStable();
const textInputElement = fixture.nativeElement.querySelector('#Text');
const textInputContainer = fixture.nativeElement.querySelector('#field-Text-container');
let multilineContainer = fixture.nativeElement.querySelector('#field-MultilineTextId-container');
expectElementToBeVisible(textInputContainer);
expectElementToBeVisible(multilineContainer);
typeIntoInput(textInputElement, 'textwrong');
fixture.detectChanges();
await fixture.whenStable();
multilineContainer = fixture.nativeElement.querySelector('#field-MultilineTextId-container');
expectElementToBeHidden(multilineContainer);
typeIntoInput(textInputElement, 'text');
fixture.detectChanges();
await fixture.whenStable();
multilineContainer = fixture.nativeElement.querySelector('#field-MultilineTextId-container');
expectElementToBeVisible(multilineContainer);
});
});
describe('Display Text (readonly) widget', () => {
it('[C309868] - Should be able to see Display text widget when visibility condition refers to another field with specific value', async () => {
formRendererComponent.formDefinition = formService.parseForm(displayTextWidgetFormVisibilityMock.formRepresentation.formDefinition);
fixture.detectChanges();
await fixture.whenStable();
const textInputElement = fixture.nativeElement.querySelector('#Text0tzu53');
const textInputContainer = fixture.nativeElement.querySelector('#field-Text0tzu53-container');
let displayTextContainer = fixture.nativeElement.querySelector('#field-Displaytext0q4w02-container');
expectElementToBeVisible(textInputContainer);
expectElementToBeHidden(displayTextContainer);
typeIntoInput(textInputElement, 'aaa-value');
fixture.detectChanges();
await fixture.whenStable();
displayTextContainer = fixture.nativeElement.querySelector('#field-Displaytext0q4w02-container');
expectElementToBeVisible(displayTextContainer);
typeIntoInput(textInputElement, 'bbb');
fixture.detectChanges();
await fixture.whenStable();
displayTextContainer = fixture.nativeElement.querySelector('#field-Displaytext0q4w02-container');
expectElementToBeHidden(displayTextContainer);
});
it('[C309870] - Should be able to see Display text widget when visibility condition refers to another field and form variable', async () => {
formRendererComponent.formDefinition = formService.parseForm(displayTextWidgetFormVisibilityMock.formRepresentation.formDefinition);
fixture.detectChanges();
await fixture.whenStable();
const textInputElement = fixture.nativeElement.querySelector('#Text0tzu53');
const textInputContainer = fixture.nativeElement.querySelector('#field-Text0tzu53-container');
let displayTextContainer = fixture.nativeElement.querySelector('#field-Displaytext8bac2e-container');
expectElementToBeVisible(textInputContainer);
expectElementToBeHidden(displayTextContainer);
typeIntoInput(textInputElement, 'aaa-variable');
fixture.detectChanges();
await fixture.whenStable();
displayTextContainer = fixture.nativeElement.querySelector('#field-Displaytext8bac2e-container');
expectElementToBeVisible(displayTextContainer);
typeIntoInput(textInputElement, 'bbb');
fixture.detectChanges();
await fixture.whenStable();
displayTextContainer = fixture.nativeElement.querySelector('#field-Displaytext8bac2e-container');
expectElementToBeHidden(displayTextContainer);
});
});
});

464
lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts
View File

@ -1583,3 +1583,467 @@ export const formDateVisibility = {
}
}
};
export const amountWidgetFormVisibilityMock = {
formRepresentation: {
id: 'form-48577532-6d9d-485e-9fe6-b8b9b005f53b',
name: 'amountVisibility',
description: '',
version: 0,
formDefinition: {
tabs: [],
fields: [
{
id: 'ce32844c-20b2-4361-88b5-a56f28219aef',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [],
2: [
{
id: 'Text0id3ic',
name: 'Text',
type: 'text',
required: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
regexPattern: null,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
]
}
},
{
id: 'd8b8c021-1920-4f81-af28-fd5d0c31395b',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [
{
id: 'Amount0kceqc',
name: 'Amount',
type: 'amount',
required: false,
colspan: 1,
placeholder: '123',
minValue: null,
maxValue: null,
visibilityCondition: {
leftFormFieldId: 'Text0id3ic',
leftRestResponseId: '',
operator: '==',
rightValue: 'text1',
rightType: null,
rightFormFieldId: '',
rightRestResponseId: '',
nextConditionOperator: 'and',
nextCondition: {
leftFormFieldId: 'Number0yggl7',
leftRestResponseId: '',
operator: '!empty',
rightValue: '',
rightType: null,
rightFormFieldId: '',
rightRestResponseId: '',
nextConditionOperator: ''
}
},
params: {
existingColspan: 1,
maxColspan: 2
},
enableFractions: false,
currency: '$'
}
],
2: [
{
id: 'Number0yggl7',
name: 'Number',
type: 'integer',
colspan: 1,
placeholder: null,
minValue: null,
maxValue: null,
required: false,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
]
}
}
],
outcomes: [],
metadata: {},
variables: []
}
}
};
export const checkboxWidgetFormVisibilityMock = {
formRepresentation: {
id: 'form-a6af80b9-d200-4a00-b17a-b1309691493d',
name: 'regresion',
description: '',
version: 0,
standAlone: true,
formDefinition: {
tabs: [],
fields: [
{
id: '09913af9-f91a-4ba5-ae4c-8e6ff3e21b6f',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [
{
id: 'Checkbox0pr51m',
name: 'Checkbox1',
type: 'boolean',
readOnly: false,
required: true,
colspan: 1,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
],
2: [
{
id: 'Checkbox0fp0zf',
name: 'Checkbox2',
type: 'boolean',
readOnly: false,
required: false,
colspan: 1,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
]
}
},
{
id: '45086850-c83d-4bfc-bd94-eccd9634c4ce',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [
{
id: 'Checkbox0lb7ze',
name: 'Checkbox',
type: 'boolean',
readOnly: false,
required: false,
colspan: 1,
visibilityCondition: {
leftType: 'field',
leftValue: 'Checkbox0pr51m',
operator: '==',
rightValue: 'Checkbox0fp0zf',
rightType: 'field',
nextConditionOperator: '',
nextCondition: null
},
params: {
existingColspan: 1,
maxColspan: 2
}
}
],
2: []
}
}
],
outcomes: [],
metadata: {},
variables: []
}
}
};
export const dateWidgetFormVisibilityMock = {
formRepresentation: {
id: 'form-7376baca-c855-473f-9d1f-508ceac9e8e5',
name: 'DateVisibility',
description: '',
version: 0,
formDefinition: {
tabs: [],
fields: [
{
id: 'f8b5b91f-77b9-48dc-8316-f084db369012',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [
{
id: 'Text5asd0a',
name: 'Text',
type: 'text',
required: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
regexPattern: null,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
],
2: [
{
id: 'Date8wbe3d',
name: 'Date',
type: 'date',
required: false,
colspan: 1,
placeholder: null,
minValue: null,
maxValue: null,
visibilityCondition: {
leftFormFieldId: 'Text5asd0a',
leftRestResponseId: '',
operator: '==',
rightValue: 'Date',
rightType: null,
rightFormFieldId: '',
rightRestResponseId: '',
nextConditionOperator: '',
nextCondition: null
},
params: {
existingColspan: 1,
maxColspan: 2
},
dateDisplayFormat: 'D-M-YYYY'
}
]
}
}
],
outcomes: [],
metadata: {},
variables: []
}
}
};
export const multilineWidgetFormVisibilityMock = {
formRepresentation: {
id: 'form-af31c6e7-8cd1-4737-8555-43ed7ecf82bb',
name: 'Mulktilinetextwidget',
description: 'Multi Line Text Widget Description',
version: 0,
formDefinition: {
tabs: [],
fields: [
{
id: 'a99d8eca-bff1-432c-bbd5-cccb60b54a82',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [
{
id: 'MultilineTextId',
name: 'Multi Line Label',
type: 'multi-line-text',
colspan: 2,
placeholder: 'Some Placeholder Text',
minLength: 2,
maxLength: 10,
regexPattern: '[a-z]+[0-9]',
required: true,
visibilityCondition: {
leftFormFieldId: 'Text',
leftRestResponseId: '',
operator: '==',
rightValue: 'text',
rightType: null,
rightFormFieldId: '',
rightRestResponseId: '',
nextConditionOperator: 'or',
nextCondition: {
leftFormFieldId: 'Text',
leftRestResponseId: '',
operator: '==',
rightValue: 'text1',
rightType: null,
rightFormFieldId: '',
rightRestResponseId: '',
nextConditionOperator: 'or',
nextCondition: {
leftFormFieldId: 'Text',
leftRestResponseId: '',
operator: 'empty',
rightValue: '',
rightType: null,
rightFormFieldId: '',
rightRestResponseId: '',
nextConditionOperator: '',
nextCondition: null
}
}
},
params: {
existingColspan: 1,
maxColspan: 2
}
},
{
id: 'Text',
name: 'Text',
type: 'text',
required: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
regexPattern: null,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
],
2: []
}
}
],
outcomes: [],
metadata: {},
variables: [
{
id: '946ed79c-c7cf-4373-b741-4e9d8d8b7f36',
name: 'name',
type: 'string',
value: 'stringValue'
}
]
}
}
};
export const displayTextWidgetFormVisibilityMock = {
formRepresentation: {
id: 'form-620756a5-64ce-4c3a-8aa2-81dabc9a88b6',
name: 'displayTextForm',
description: '',
version: 0,
standAlone: true,
formDefinition: {
tabs: [],
fields: [
{
id: '45269202-5f2a-438e-b14c-fe13eb4b2aa1',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
1: [
{
id: 'Text0tzu53',
name: 'Text',
type: 'text',
required: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
regexPattern: null,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
}
}
],
2: [
{
id: 'Displaytext0q4w02',
name: 'Display text',
type: 'readonly-text',
value: 'Display text as part of the form',
colspan: 1,
visibilityCondition: {
leftType: 'field',
leftValue: 'Text0tzu53',
operator: '==',
rightValue: 'aaa-value',
rightType: 'value',
nextConditionOperator: '',
nextCondition: null
},
params: {
existingColspan: 1,
maxColspan: 2
}
}
],
3: [
{
id: 'Displaytext8bac2e',
name: 'Display text',
type: 'readonly-text',
value: 'Display text as part of the form',
colspan: 1,
visibilityCondition: {
leftType: 'field',
leftValue: 'Text0tzu53',
operator: '==',
rightValue: 'variable',
rightType: 'variable',
nextConditionOperator: ''
},
params: {
existingColspan: 1,
maxColspan: 2
}
}
]
}
}
],
outcomes: [],
metadata: {},
variables: [
{
id: '8a8537a6-cfca-45d3-bd42-80ffc48a26f8',
name: 'variable',
type: 'string',
value: 'aaa-variable'
}
]
}
}
};

94
lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
View File

@ -134,6 +134,33 @@ describe('AmountWidgetComponent - rendering', () => {
element = fixture.nativeElement;
});
it('[C289915] - Should be able to display different currency icons', () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'TestAmount1',
name: 'Test Amount',
type: 'amount',
currency: '$'
});
fixture.detectChanges();
let widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('$');
widget.field.currency = '£';
widget.ngOnInit();
fixture.detectChanges();
widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('£');
widget.field.currency = '€';
widget.ngOnInit();
fixture.detectChanges();
widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('€');
});
it('[C309692] - Should be possible to set the General Properties for Amount Widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'TestAmount1',
@ -181,6 +208,73 @@ describe('AmountWidgetComponent - rendering', () => {
expect(errorWidget.textContent).toBe('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
});
it('[C309693] - Should be possible to set the Advanced Properties for Amount Widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'TestAmount1',
name: 'Test Amount',
type: 'amount',
required: true,
colspan: 2,
placeholder: 'Check Placeholder Text',
minValue: 10,
maxValue: 90,
visibilityCondition: null,
params: {
existingColspan: 1,
maxColspan: 2
},
enableFractions: true,
currency: '£'
});
fixture.detectChanges();
await fixture.whenStable();
const widgetLabel = fixture.nativeElement.querySelector('label.adf-label');
expect(widgetLabel.textContent).toBe('Test Amount*');
const widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
expect(widgetPrefix.textContent.trim()).toBe('£');
expect(widget.field.isValid).toBe(false);
const widgetById: HTMLInputElement = fixture.nativeElement.querySelector('#TestAmount1');
expect(widgetById).toBeDefined();
expect(widgetById).not.toBeNull();
widgetById.value = '8';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget field is valid');
let errorMessage: HTMLElement = fixture.nativeElement.querySelector('.adf-error-text');
expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.NOT_LESS_THAN');
widgetById.value = '99';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget field is valid');
errorMessage = fixture.nativeElement.querySelector('.adf-error-text');
expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.NOT_GREATER_THAN');
widgetById.value = '80';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(true, 'amount widget field is invalid');
widgetById.value = '80.67';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(true, 'amount widget field is invalid');
widgetById.value = 'incorrect format';
widgetById.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBe(false, 'amount widget field is valid');
errorMessage = fixture.nativeElement.querySelector('.adf-error-text');
expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
});
it('should display tooltip when tooltip is set', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'TestAmount1',

33
lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts
View File

@ -45,6 +45,16 @@ describe('DateWidgetComponent', () => {
widget = fixture.componentInstance;
});
it('[C310333] - should be able to set a placeholder', () => {
widget.field = new FormFieldModel(null, {
id: 'date-id',
name: 'date-name',
placeholder: 'My Placeholder'
});
expect(widget.field.placeholder).toBe('My Placeholder');
});
it('should setup min value for date picker', () => {
const minValue = '13-03-1982';
widget.field = new FormFieldModel(null, {
@ -153,7 +163,7 @@ describe('DateWidgetComponent', () => {
expect(dateElement.value).toContain('9-9-9999');
});
it('should show the correct format type', () => {
it('[C310335] - Should be able to change display format for Date widget', () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@ -166,11 +176,24 @@ describe('DateWidgetComponent', () => {
fixture.detectChanges();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
let dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999');
widget.field.value = '5-6-2019 00:00';
widget.field.dateDisplayFormat = 'D-M-YYYY HH:mm';
fixture.detectChanges();
dateElement = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('5-6-2019 00:00');
widget.field.value = '05.06.2019';
widget.field.dateDisplayFormat = 'DD.MM.YYYY';
fixture.detectChanges();
dateElement = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('05.06.2019');
});
it('should disable date button when is readonly', () => {