mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-2009] - Added visibility unit test for form (#5526)
* AAE-2009 - added visibility unit test for form widgets * AAE-2009 - added visibility unit test for form widgets * AAE-2009 - fixed id of mock form * AAE-2009 - fixed linting
This commit is contained in:
Vito
GitHub
@@ -28,7 +28,10 @@ import { formDisplayValueVisibility,
|
|||||||
formRequiredNumberWidget,
|
formRequiredNumberWidget,
|
||||||
colspanForm,
|
colspanForm,
|
||||||
numberNotRequiredForm,
|
numberNotRequiredForm,
|
||||||
numberMinMaxForm } from './mock/form-renderer.component.mock';
|
numberMinMaxForm,
|
||||||
|
textWidgetVisibility,
|
||||||
|
numberWidgetVisibilityForm,
|
||||||
|
radioWidgetVisibiltyForm } from './mock/form-renderer.component.mock';
|
||||||
import { TranslationService } from 'core/services';
|
import { TranslationService } from 'core/services';
|
||||||
import { TranslationMock } from 'core/mock';
|
import { TranslationMock } from 'core/mock';
|
||||||
import { TranslateStore } from '@ngx-translate/core';
|
import { TranslateStore } from '@ngx-translate/core';
|
||||||
@@ -411,5 +414,155 @@ describe('Form Renderer Component', () => {
|
|||||||
expect(formRendererComponent.formDefinition.isValid).toBe(false, 'Form should not be valid without valid field');
|
expect(formRendererComponent.formDefinition.isValid).toBe(false, 'Form should not be valid without valid field');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('[C309664] - Should be able to see Number widget when visibility condition refers to a form variable and a field', async () => {
|
||||||
|
formRendererComponent.formDefinition = formService.parseForm(formNumberTextJson.formRepresentation.formDefinition);
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
const inputText: HTMLInputElement = fixture.nativeElement.querySelector('#Text');
|
||||||
|
expect(inputText).not.toBeNull();
|
||||||
|
let numberFieldValueContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-NumberFieldValue-container');
|
||||||
|
expectElementToBeHidden(numberFieldValueContainer);
|
||||||
|
|
||||||
|
typeIntoInput(inputText, 'aaa');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldValueContainer = fixture.nativeElement.querySelector('#field-NumberFieldValue-container');
|
||||||
|
expectElementToBeVisible(numberFieldValueContainer);
|
||||||
|
|
||||||
|
typeIntoInput(inputText, 'bbb');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldValueContainer = fixture.nativeElement.querySelector('#field-NumberFieldValue-container');
|
||||||
|
expectElementToBeHidden(numberFieldValueContainer);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('[C309665] - Should be able to see Number widget when visibility condition refers to another field and form variable', async () => {
|
||||||
|
formRendererComponent.formDefinition = formService.parseForm(formNumberTextJson.formRepresentation.formDefinition);
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
const inputText: HTMLInputElement = fixture.nativeElement.querySelector('#Text');
|
||||||
|
expect(inputText).not.toBeNull();
|
||||||
|
let numberFieldVariableContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-NumberFieldVariable-container');
|
||||||
|
expectElementToBeHidden(numberFieldVariableContainer);
|
||||||
|
|
||||||
|
typeIntoInput(inputText, 'aaa');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldVariableContainer = fixture.nativeElement.querySelector('#field-NumberFieldVariable-container');
|
||||||
|
expectElementToBeVisible(numberFieldVariableContainer);
|
||||||
|
|
||||||
|
typeIntoInput(inputText, 'bbb');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldVariableContainer = fixture.nativeElement.querySelector('#field-NumberFieldVariable-container');
|
||||||
|
expectElementToBeHidden(numberFieldVariableContainer);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('[C309666] - Should be able to see Number widget when has multiple visibility conditions and next condition operators', async () => {
|
||||||
|
formRendererComponent.formDefinition = formService.parseForm(numberWidgetVisibilityForm.formRepresentation.formDefinition);
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
let numberFieldContainer = fixture.nativeElement.querySelector('#field-Number0wxaur-container');
|
||||||
|
let testOneInput: HTMLInputElement = fixture.nativeElement.querySelector('#Text0hs0gt');
|
||||||
|
let testTwoInput: HTMLInputElement = fixture.nativeElement.querySelector('#Text0cuqet');
|
||||||
|
expect(testOneInput).not.toBeNull();
|
||||||
|
expect(testTwoInput).not.toBeNull();
|
||||||
|
expectElementToBeHidden(numberFieldContainer);
|
||||||
|
|
||||||
|
typeIntoInput(testOneInput, 'aaa');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldContainer = fixture.nativeElement.querySelector('#field-Number0wxaur-container');
|
||||||
|
expectElementToBeVisible(numberFieldContainer);
|
||||||
|
|
||||||
|
typeIntoInput(testOneInput, 'bbb');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldContainer = fixture.nativeElement.querySelector('#field-Number0wxaur-container');
|
||||||
|
expectElementToBeHidden(numberFieldContainer);
|
||||||
|
|
||||||
|
typeIntoInput(testTwoInput, 'aaa');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldContainer = fixture.nativeElement.querySelector('#field-Number0wxaur-container');
|
||||||
|
testOneInput = fixture.nativeElement.querySelector('#Text0hs0gt');
|
||||||
|
expectElementToBeHidden(numberFieldContainer);
|
||||||
|
expectInputElementValueIs(testOneInput, 'bbb');
|
||||||
|
|
||||||
|
typeIntoInput(testOneInput, 'aaa');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
numberFieldContainer = fixture.nativeElement.querySelector('#field-Number0wxaur-container');
|
||||||
|
testOneInput = fixture.nativeElement.querySelector('#Text0hs0gt');
|
||||||
|
testTwoInput = fixture.nativeElement.querySelector('#Text0cuqet');
|
||||||
|
expectInputElementValueIs(testOneInput, 'aaa');
|
||||||
|
expectInputElementValueIs(testTwoInput, 'aaa');
|
||||||
|
expectElementToBeHidden(numberFieldContainer);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Text widget', () => {
|
||||||
|
|
||||||
|
it('[C309669] - Should be able to set visibility conditions for Text widget', async () => {
|
||||||
|
formRendererComponent.formDefinition = formService.parseForm(textWidgetVisibility.formRepresentation.formDefinition);
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
const inputElementTestOne: HTMLInputElement = fixture.nativeElement.querySelector('#textOne');
|
||||||
|
const inputElementTestTwo: HTMLInputElement = fixture.nativeElement.querySelector('#textTwo');
|
||||||
|
expectElementToBeVisible(inputElementTestOne);
|
||||||
|
let elementThreeContainer = fixture.nativeElement.querySelector('#field-textThree-container');
|
||||||
|
const elementTwoContainer = fixture.nativeElement.querySelector('#field-textTwo-container');
|
||||||
|
let elementFourContainer = fixture.nativeElement.querySelector('#field-textFour-container');
|
||||||
|
expectElementToBeHidden(elementThreeContainer);
|
||||||
|
expectElementToBeHidden(elementTwoContainer);
|
||||||
|
expectElementToBeVisible(elementFourContainer);
|
||||||
|
|
||||||
|
typeIntoInput(inputElementTestOne, 'Test');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
let containerInputOne = fixture.nativeElement.querySelector('#field-textOne-container');
|
||||||
|
let containerInputTwo = fixture.nativeElement.querySelector('#field-textTwo-container');
|
||||||
|
elementThreeContainer = fixture.nativeElement.querySelector('#field-textThree-container');
|
||||||
|
elementFourContainer = fixture.nativeElement.querySelector('#field-textFour-container');
|
||||||
|
expectElementToBeVisible(containerInputOne);
|
||||||
|
expectElementToBeVisible(containerInputTwo);
|
||||||
|
expectElementToBeVisible(elementThreeContainer);
|
||||||
|
expectElementToBeHidden(elementFourContainer);
|
||||||
|
|
||||||
|
typeIntoInput(inputElementTestTwo, 'Test');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
containerInputOne = fixture.nativeElement.querySelector('#field-textOne-container');
|
||||||
|
containerInputTwo = fixture.nativeElement.querySelector('#field-textTwo-container');
|
||||||
|
elementThreeContainer = fixture.nativeElement.querySelector('#field-textThree-container');
|
||||||
|
elementFourContainer = fixture.nativeElement.querySelector('#field-textFour-container');
|
||||||
|
expectElementToBeVisible(containerInputOne);
|
||||||
|
expectElementToBeVisible(containerInputTwo);
|
||||||
|
expectElementToBeVisible(elementFourContainer);
|
||||||
|
expectElementToBeHidden(elementThreeContainer);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Radio widget', () => {
|
||||||
|
|
||||||
|
it('[C310352] - Should be able to set visibility conditions for Radio Button widget', async () => {
|
||||||
|
formRendererComponent.formDefinition = formService.parseForm(radioWidgetVisibiltyForm.formRepresentation.formDefinition);
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
const textInputElement = fixture.nativeElement.querySelector('#Text0cee7g');
|
||||||
|
const textInputContainer = fixture.nativeElement.querySelector('#field-Text0cee7g-container');
|
||||||
|
let radioButtonContainer = fixture.nativeElement.querySelector('#field-Radiobuttons03rkbo-container');
|
||||||
|
expectElementToBeVisible(textInputContainer);
|
||||||
|
expectElementToBeHidden(radioButtonContainer);
|
||||||
|
|
||||||
|
typeIntoInput(textInputElement, 'Radio');
|
||||||
|
fixture.detectChanges();
|
||||||
|
await fixture.whenStable();
|
||||||
|
radioButtonContainer = fixture.nativeElement.querySelector('#field-Radiobuttons03rkbo-container');
|
||||||
|
expectElementToBeVisible(radioButtonContainer);
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1026,3 +1026,311 @@ export const numberMinMaxForm = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const textWidgetVisibility = {
|
||||||
|
formRepresentation: {
|
||||||
|
id: 'form-2604b12b-f0b9-4633-9eae-aa24b659f98e',
|
||||||
|
name: 'TextVisibility',
|
||||||
|
description: '',
|
||||||
|
version: 0,
|
||||||
|
formDefinition: {
|
||||||
|
tabs: [],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
id: 'c5fa3358-c6b6-46b1-81cf-c8909150ed4c',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'container',
|
||||||
|
tab: null,
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'textOne',
|
||||||
|
name: 'textOne',
|
||||||
|
type: 'text',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
regexPattern: null,
|
||||||
|
visibilityCondition: {},
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'textTwo',
|
||||||
|
name: 'textTwo',
|
||||||
|
type: 'text',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
regexPattern: null,
|
||||||
|
visibilityCondition: {
|
||||||
|
leftFormFieldId: 'textOne',
|
||||||
|
leftRestResponseId: '',
|
||||||
|
operator: '==',
|
||||||
|
rightValue: 'Test',
|
||||||
|
rightType: null,
|
||||||
|
rightFormFieldId: '',
|
||||||
|
rightRestResponseId: '',
|
||||||
|
nextConditionOperator: ''
|
||||||
|
},
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '7a7734e1-af6c-4ea4-adcb-76725c0544db',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'container',
|
||||||
|
tab: null,
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'textThree',
|
||||||
|
name: 'textThree',
|
||||||
|
type: 'text',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
regexPattern: null,
|
||||||
|
visibilityCondition: {
|
||||||
|
leftFormFieldId: 'textOne',
|
||||||
|
leftRestResponseId: '',
|
||||||
|
operator: '==',
|
||||||
|
rightValue: 'Test',
|
||||||
|
rightType: null,
|
||||||
|
rightFormFieldId: '',
|
||||||
|
rightRestResponseId: '',
|
||||||
|
nextConditionOperator: 'and',
|
||||||
|
nextCondition: {
|
||||||
|
leftFormFieldId: 'textTwo',
|
||||||
|
leftRestResponseId: '',
|
||||||
|
operator: 'empty',
|
||||||
|
rightValue: '',
|
||||||
|
rightType: null,
|
||||||
|
rightFormFieldId: '',
|
||||||
|
rightRestResponseId: '',
|
||||||
|
nextConditionOperator: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'textFour',
|
||||||
|
name: 'textFour',
|
||||||
|
type: 'text',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
regexPattern: null,
|
||||||
|
visibilityCondition: {
|
||||||
|
leftFormFieldId: 'textOne',
|
||||||
|
leftRestResponseId: '',
|
||||||
|
operator: 'empty',
|
||||||
|
rightValue: '',
|
||||||
|
rightType: null,
|
||||||
|
rightFormFieldId: '',
|
||||||
|
rightRestResponseId: '',
|
||||||
|
nextConditionOperator: 'or',
|
||||||
|
nextCondition: {
|
||||||
|
leftFormFieldId: 'textTwo',
|
||||||
|
leftRestResponseId: '',
|
||||||
|
operator: '==',
|
||||||
|
rightValue: '',
|
||||||
|
rightType: null,
|
||||||
|
rightFormFieldId: 'textOne',
|
||||||
|
rightRestResponseId: '',
|
||||||
|
nextConditionOperator: '',
|
||||||
|
nextCondition: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outcomes: [],
|
||||||
|
metadata: {},
|
||||||
|
variables: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const numberWidgetVisibilityForm = {
|
||||||
|
formRepresentation: {
|
||||||
|
id: 'form-22c19b74-c954-43d7-9fbb-6a6d03a4bce0',
|
||||||
|
name: 'numbervisb',
|
||||||
|
description: '',
|
||||||
|
version: 0,
|
||||||
|
standAlone: true,
|
||||||
|
formDefinition: {
|
||||||
|
tabs: [],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
id: '78728404-ebab-4507-8986-c7f64e4b4d2a',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'container',
|
||||||
|
tab: null,
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'Text0hs0gt',
|
||||||
|
name: 'TextOne',
|
||||||
|
type: 'text',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
regexPattern: null,
|
||||||
|
visibilityCondition: null,
|
||||||
|
params: {
|
||||||
|
existingColspan: 1,
|
||||||
|
maxColspan: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Number0wxaur',
|
||||||
|
name: 'Number',
|
||||||
|
type: 'integer',
|
||||||
|
colspan: 2,
|
||||||
|
placeholder: null,
|
||||||
|
minValue: null,
|
||||||
|
maxValue: null,
|
||||||
|
required: false,
|
||||||
|
visibilityCondition: {
|
||||||
|
leftType: 'field',
|
||||||
|
leftValue: 'Text0hs0gt',
|
||||||
|
operator: '==',
|
||||||
|
rightValue: 'aaa',
|
||||||
|
rightType: 'value',
|
||||||
|
nextConditionOperator: 'and',
|
||||||
|
nextCondition: {
|
||||||
|
leftType: 'field',
|
||||||
|
leftValue: 'Text0cuqet',
|
||||||
|
operator: '!=',
|
||||||
|
rightValue: 'aaa',
|
||||||
|
rightType: 'value',
|
||||||
|
nextConditionOperator: '',
|
||||||
|
nextCondition: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
existingColspan: 1,
|
||||||
|
maxColspan: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'Text0cuqet',
|
||||||
|
name: 'TextTwo',
|
||||||
|
type: 'text',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
regexPattern: null,
|
||||||
|
visibilityCondition: null,
|
||||||
|
params: {
|
||||||
|
existingColspan: 1,
|
||||||
|
maxColspan: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outcomes: [],
|
||||||
|
metadata: {},
|
||||||
|
variables: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const radioWidgetVisibiltyForm = {
|
||||||
|
formRepresentation: {
|
||||||
|
id: 'form-e0d77062-9b04-40d6-beed-6b63045f63b4',
|
||||||
|
name: 'RadioVisibility',
|
||||||
|
description: '',
|
||||||
|
version: 0,
|
||||||
|
formDefinition: {
|
||||||
|
tabs: [],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
id: 'dd7c7415-2f00-4a91-a2b9-c4afcd8a4a8a',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'container',
|
||||||
|
tab: null,
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'Text0cee7g',
|
||||||
|
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: 'Radiobuttons03rkbo',
|
||||||
|
name: 'Radio buttons',
|
||||||
|
type: 'radio-buttons',
|
||||||
|
required: false,
|
||||||
|
colspan: 1,
|
||||||
|
optionType: 'manual',
|
||||||
|
options: [
|
||||||
|
{ id: 'option_1', name: 'Option 1' },
|
||||||
|
{ id: 'option_2', name: 'Option 2' }
|
||||||
|
],
|
||||||
|
restUrl: null,
|
||||||
|
restResponsePath: null,
|
||||||
|
restIdProperty: null,
|
||||||
|
restLabelProperty: null,
|
||||||
|
visibilityCondition: {
|
||||||
|
leftFormFieldId: 'Text0cee7g',
|
||||||
|
leftRestResponseId: '',
|
||||||
|
operator: '==',
|
||||||
|
rightValue: 'Radio',
|
||||||
|
rightType: null,
|
||||||
|
rightFormFieldId: '',
|
||||||
|
rightRestResponseId: '',
|
||||||
|
nextConditionOperator: '',
|
||||||
|
nextCondition: null
|
||||||
|
},
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outcomes: [],
|
||||||
|
metadata: {},
|
||||||
|
variables: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user