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,
|
||||
colspanForm,
|
||||
numberNotRequiredForm,
|
||||
numberMinMaxForm } from './mock/form-renderer.component.mock';
|
||||
numberMinMaxForm,
|
||||
textWidgetVisibility,
|
||||
numberWidgetVisibilityForm,
|
||||
radioWidgetVisibiltyForm } from './mock/form-renderer.component.mock';
|
||||
import { TranslationService } from 'core/services';
|
||||
import { TranslationMock } from 'core/mock';
|
||||
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');
|
||||
});
|
||||
|
||||
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