From 359022de6511347024c50a47af33fd8063456ef2 Mon Sep 17 00:00:00 2001 From: Vito Date: Tue, 3 Mar 2020 16:59:01 +0000 Subject: [PATCH] [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 --- .../form-renderer.component.spec.ts | 155 ++++++++- .../mock/form-renderer.component.mock.ts | 308 ++++++++++++++++++ 2 files changed, 462 insertions(+), 1 deletion(-) diff --git a/lib/core/form/components/form-renderer.component.spec.ts b/lib/core/form/components/form-renderer.component.spec.ts index ec06864ac0..816576b255 100644 --- a/lib/core/form/components/form-renderer.component.spec.ts +++ b/lib/core/form/components/form-renderer.component.spec.ts @@ -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); + }); + }); }); diff --git a/lib/core/form/components/mock/form-renderer.component.mock.ts b/lib/core/form/components/mock/form-renderer.component.mock.ts index f6642501e8..6191bf385b 100644 --- a/lib/core/form/components/mock/form-renderer.component.mock.ts +++ b/lib/core/form/components/mock/form-renderer.component.mock.ts @@ -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: [] + } + } +};