diff --git a/lib/core/form/components/form-renderer.component.spec.ts b/lib/core/form/components/form-renderer.component.spec.ts index aba7904b03..8e20fe7a40 100644 --- a/lib/core/form/components/form-renderer.component.spec.ts +++ b/lib/core/form/components/form-renderer.component.spec.ts @@ -32,12 +32,16 @@ import { formDisplayValueVisibility, numberWidgetVisibilityForm, radioWidgetVisibiltyForm, customWidgetForm, + formDateVisibility, customWidgetFormWithVisibility } from './mock/form-renderer.component.mock'; import { FormService } from '../services/form.service'; import { CoreTestingModule } from '../../testing'; import { TranslateModule } from '@ngx-translate/core'; import { FormRenderingService } from '../services/form-rendering.service'; import { TextWidgetComponent } from './widgets'; +import moment from 'moment'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; function typeIntoInput(targetInput: HTMLInputElement, message: string ) { expect(targetInput).not.toBeNull('Expected input to set to be valid and not null'); @@ -45,6 +49,11 @@ function typeIntoInput(targetInput: HTMLInputElement, message: string ) { targetInput.dispatchEvent(new Event('input')); } +function typeIntoDate(targetInput: DebugElement, date: { value: moment.Moment} ) { + expect(targetInput).not.toBeNull('Expected input to set to be valid and not null'); + targetInput.triggerEventHandler('dateChange', date); +} + function expectElementToBeHidden(targetElement: HTMLElement): void { expect(targetElement).not.toBeNull(); expect(targetElement).toBeDefined(); @@ -100,6 +109,42 @@ describe('Form Renderer Component', () => { fixture.destroy(); }); + describe('Display Date Widget ', () => { + it('Should be able to see a widget when the visibility condition refers to another fields with specific date', async () => { + formRendererComponent.formDefinition = formService.parseForm(formDateVisibility.formRepresentation.formDefinition); + fixture.detectChanges(); + await fixture.whenStable(); + + const inputDateTestOne = fixture.debugElement.query(By.css('#Date0hwq20')); + let displayTextElementContainer: HTMLInputElement = fixture.nativeElement.querySelector('#field-Text0pqd1u-container'); + expectElementToBeHidden(displayTextElementContainer); + + typeIntoDate(inputDateTestOne, { value: moment('2019-11-19') }); + fixture.detectChanges(); + await fixture.whenStable(); + + displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0pqd1u-container'); + expectElementToBeVisible(displayTextElementContainer); + }); + + it('Should not be able to see a widget when the visibility condition refers to another fields with specific date', async () => { + formRendererComponent.formDefinition = formService.parseForm(formDateVisibility.formRepresentation.formDefinition); + fixture.detectChanges(); + await fixture.whenStable(); + + const inputDateTestOne = fixture.debugElement.query(By.css('#Date0hwq20')); + let displayTextElementContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-Text0uyqd3-container'); + expectElementToBeVisible(displayTextElementContainer); + + typeIntoDate(inputDateTestOne, { value: moment('2019-11-19') }); + fixture.detectChanges(); + await fixture.whenStable(); + + displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0uyqd3-container'); + expectElementToBeHidden(displayTextElementContainer); + }); + }); + describe('Display Value Widget', () => { it('[C309862] - Should be able to see Display value widget when visibility condition refers to another field with specific value', async () => { formRendererComponent.formDefinition = formService.parseForm(formDisplayValueVisibility.formRepresentation.formDefinition); 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 0a31ad4d42..0ac3af0b2d 100644 --- a/lib/core/form/components/mock/form-renderer.component.mock.ts +++ b/lib/core/form/components/mock/form-renderer.component.mock.ts @@ -1470,3 +1470,116 @@ export const customWidgetFormWithVisibility = { } } }; + +export const formDateVisibility = { + formRepresentation: { + id: 'form-f0d926e0-0cb9-46fc-a10e-705547fb0318', + name: 'form', + description: '', + version: 0, + standAlone: true, + formDefinition: { + tabs: [], + fields: [ + { + id: 'be820e5c-ee59-40df-bca2-03a5a1e1e29c', + name: 'Label', + type: 'container', + tab: null, + numberOfColumns: 2, + fields: { + '1': [ + { + id: 'Date0hwq20', + name: 'Date', + type: 'date', + readOnly: false, + required: false, + colspan: 1, + rowspan: 1, + placeholder: null, + minValue: null, + maxValue: null, + visibilityCondition: null, + params: { + existingColspan: 1, + maxColspan: 2 + }, + dateDisplayFormat: 'YYYY-MM-DD' + } + ], + '2': [ + { + id: 'Text0pqd1u', + name: 'Text', + type: 'text', + readOnly: false, + required: false, + colspan: 1, + rowspan: 1, + placeholder: null, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: { + leftType: 'field', + leftValue: 'Date0hwq20', + operator: '==', + rightValue: '2019-11-19', + rightType: 'value', + nextConditionOperator: '', + nextCondition: null + }, + params: { + existingColspan: 1, + maxColspan: 2 + } + } + ] + } + }, + { + id: 'ff5ebab0-99a0-42ca-b2e7-416af9fe713a', + name: 'Label', + type: 'container', + tab: null, + numberOfColumns: 2, + fields: { + '1': [ + { + id: 'Text0uyqd3', + name: 'Text', + type: 'text', + readOnly: false, + required: false, + colspan: 1, + rowspan: 1, + placeholder: null, + minLength: 0, + maxLength: 0, + regexPattern: null, + visibilityCondition: { + leftType: 'field', + leftValue: 'Date0hwq20', + operator: '!=', + rightValue: '2019-11-19', + rightType: 'value', + nextConditionOperator: '', + nextCondition: null + }, + params: { + existingColspan: 1, + maxColspan: 2 + } + } + ], + '2': [] + } + } + ], + outcomes: [], + metadata: {}, + variables: [] + } + } + };