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

AAE-1938 - added first stack of visibility tests for form (#5489)

Browse Source 
* AAE-1938 - added first stack of visibility tests for form

* AAE-1938 - fixed unit test after form service changes

* AAE-1938 - rebased with last development

* AAE-1938 - fixed failing e2e

* AAE-1938 - fixed mock definition to match updated service behaviour

* Fixed failing e2e

* AAE-1938 - try to fix cancel uploads
This commit is contained in:
Vito 2020-02-26 14:46:01 +00:00 committed by GitHub
parent 6ef07fe73f
commit 1e67f50346
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 2578 additions and 1930 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demo-shell/src/app/services/in-memory-form.service.ts
View File

@ -70,10 +70,21 @@ export class InMemoryFormService extends FormService {
parseForm(json: any, data?: FormValues, readOnly: boolean = false): FormModel {
if (json) {
const form = new FormModel(json, data, readOnly, this);
const flattenForm = {
...json.formRepresentation,
...json.formRepresentation.formDefinition
};
delete flattenForm.formDefinition;
const formValues: FormValues = {};
(data || []).forEach(variable => {
formValues[variable.name] = variable.value;
});
const form = new FormModel(flattenForm, formValues, readOnly, this);
if (!json.fields) {
form.outcomes = [
new FormOutcomeModel(form, {
new FormOutcomeModel(<any> form, {
id: '$save',
name: FormOutcomeModel.SAVE_ACTION,
isSystem: true

4
e2e/content-services/upload/cancel-upload.e2e.ts
View File

@ -79,7 +79,7 @@ describe('Upload component', async () => {
it('[C272793] Should be able to cancel multiple files upload', async () => {
await uploadToggles.enableMultipleFileUpload();
await browser.executeScript(' setTimeout(() => {document.querySelector("#adf-upload-dialog-cancel-all").click();' +
'document.querySelector("#adf-upload-dialog-cancel").click(); }, 4000)');
'document.querySelector("#adf-upload-dialog-cancel").click(); }, 2500)');
await contentServicesPage.uploadMultipleFile([pngFileModel.location, largeFile.location]);
await expect(await uploadDialog.getTitleText()).toEqual('Upload canceled');
@ -92,7 +92,7 @@ describe('Upload component', async () => {
it('[C315257] Should be able to cancel file in upload queue', async () => {
await uploadToggles.enableMultipleFileUpload();
await browser.executeScript('setTimeout(() => {document.querySelector("button[data-automation-id=\'cancel-upload-queue\']").click();}, 2500)');
await browser.executeScript('setTimeout(() => {document.querySelector("button[data-automation-id=\'cancel-upload-queue\']").click();}, 3000)');
await contentServicesPage.uploadMultipleFile([largeFile.location, pngFileModel.location]);
await uploadDialog.fileIsCancelled(pngFileModel.name);
await uploadDialog.clickOnCloseButton();

2
e2e/resources/forms/custom-date-form.ts
View File

@ -17,6 +17,7 @@
/* tslint:disable */
export const customDateFormAPS1 = `{
"formRepresentation":{
"id": 18977,
"name": "APS1customDateFrom",
"description": "",
@ -120,6 +121,7 @@ export const customDateFormAPS1 = `{
"customFieldsValueInfo": {},
"gridsterForm": false
}
}
}`;
export const customDateFormAPS2 = `{

194
lib/core/form/components/form-renderer.component.spec.ts Normal file
View File

@ -0,0 +1,194 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { FormRendererComponent } from './form-renderer.component';
import { FormBaseModule } from '../form-base.module';
import { formDisplayValueVisibility, formDisplayValueForm, formDisplayValueCombinedVisibility } from './mock/form-renderer.component.mock';
import { TranslationService } from 'core/services';
import { TranslationMock } from 'core/mock';
import { TranslateStore } from '@ngx-translate/core';
import { FormService } from '../services/form.service';
import { setupTestBed } from '../../testing/setup-test-bed';
function typeIntoInput(targetInput: HTMLInputElement, message: string ) {
expect(targetInput).not.toBeNull();
targetInput.value = message;
targetInput.dispatchEvent(new Event('input'));
}
function expectElementToBeHidden(targetElement: HTMLElement): void {
expect(targetElement).not.toBeNull();
expect(targetElement).toBeDefined();
expect(targetElement.hidden).toBe(true);
}
function expectElementToBeVisible(targetElement: HTMLElement): void {
expect(targetElement).not.toBeNull();
expect(targetElement).toBeDefined();
expect(targetElement.hidden).toBe(false);
}
function expectInputElementValueIs(targetElement: HTMLInputElement, value: string): void {
expect(targetElement).not.toBeNull();
expect(targetElement).toBeDefined();
expect(targetElement.value).toBe(value);
}
describe('Form Renderer Component', () => {
let formRendererComponent: FormRendererComponent;
let fixture: ComponentFixture<FormRendererComponent>;
let formService: FormService;
setupTestBed({
imports: [
NoopAnimationsModule,
FormBaseModule
],
providers: [
{ provide: TranslationService, useClass: TranslationMock },
TranslateStore
]
});
beforeEach(() => {
fixture = TestBed.createComponent(FormRendererComponent);
formRendererComponent = fixture.componentInstance;
formService = TestBed.get(FormService);
});
it('Should be able to see Display value widget when visibility condition refers to another field with specific value', async () => {
formRendererComponent.formDefinition = formService.parseForm(formDisplayValueVisibility);
fixture.detectChanges();
await fixture.whenStable();
let displayValueElementContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
const formInputText: HTMLInputElement = fixture.nativeElement.querySelector('#Text0bq3ar');
expectElementToBeHidden(displayValueElementContainer);
typeIntoInput(formInputText, 'DisplayValue');
fixture.detectChanges();
await fixture.whenStable();
displayValueElementContainer = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectElementToBeVisible(displayValueElementContainer);
const displayValueElement: HTMLInputElement = fixture.nativeElement.querySelector('#Displayvalue0g6092');
expectInputElementValueIs(displayValueElement, 'No field selected');
});
it('Should be able to see Display value widget when visibility condition refers to a form variable and a field', async () => {
formRendererComponent.formDefinition = formService.parseForm(formDisplayValueForm);
fixture.detectChanges();
await fixture.whenStable();
let displayValueElementContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-DisplayValueOne-container');
expectElementToBeHidden(displayValueElementContainer);
const formInputText: HTMLInputElement = fixture.nativeElement.querySelector('#Text0howrc');
typeIntoInput(formInputText, 'aaa');
fixture.detectChanges();
await fixture.whenStable();
displayValueElementContainer = fixture.nativeElement.querySelector('#field-DisplayValueOne-container');
expectElementToBeVisible(displayValueElementContainer);
const displayValueElement: HTMLInputElement = fixture.nativeElement.querySelector('#DisplayValueOne');
expectInputElementValueIs(displayValueElement, 'No field selected');
typeIntoInput(formInputText, 'aaab');
fixture.detectChanges();
await fixture.whenStable();
displayValueElementContainer = fixture.nativeElement.querySelector('#field-DisplayValueOne-container');
expectElementToBeHidden(displayValueElementContainer);
});
it('Should be able to see Display value widget when visibility condition refers to another field and form variable', async () => {
formRendererComponent.formDefinition = formService.parseForm(formDisplayValueForm);
fixture.detectChanges();
await fixture.whenStable();
let displayValueElementContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-DisplayValueVariableField-container');
expectElementToBeHidden(displayValueElementContainer);
const formInputText: HTMLInputElement = fixture.nativeElement.querySelector('#TextOne');
typeIntoInput(formInputText, 'aaa');
fixture.detectChanges();
await fixture.whenStable();
displayValueElementContainer = fixture.nativeElement.querySelector('#field-DisplayValueVariableField-container');
expectElementToBeVisible(displayValueElementContainer);
const displayValueElement: HTMLInputElement = fixture.nativeElement.querySelector('#DisplayValueVariableField');
expectInputElementValueIs(displayValueElement, 'No field selected');
typeIntoInput(formInputText, 'aaab');
fixture.detectChanges();
await fixture.whenStable();
displayValueElementContainer = fixture.nativeElement.querySelector('#field-DisplayValueVariableField-container');
expectElementToBeHidden(displayValueElementContainer);
});
it('Should be able to see Display value widget when has multiple visibility conditions and next condition operators', async () => {
formRendererComponent.formDefinition = formService.parseForm(formDisplayValueCombinedVisibility);
fixture.detectChanges();
await fixture.whenStable();
const textInputElement: HTMLInputElement = fixture.nativeElement.querySelector('#Text0bq3ar');
const textTwoInputElement: HTMLInputElement = fixture.nativeElement.querySelector('#TextTwo');
let displayValueHiddenContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectElementToBeVisible(textInputElement);
expectElementToBeVisible(textTwoInputElement);
expectElementToBeHidden(displayValueHiddenContainer);
typeIntoInput(textInputElement, 'aaa');
fixture.detectChanges();
await fixture.whenStable();
displayValueHiddenContainer = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectInputElementValueIs(textInputElement, 'aaa');
expectInputElementValueIs(textTwoInputElement, '');
expectElementToBeVisible(displayValueHiddenContainer);
typeIntoInput(textInputElement, 'bbb');
fixture.detectChanges();
await fixture.whenStable();
displayValueHiddenContainer = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectInputElementValueIs(textInputElement, 'bbb');
expectInputElementValueIs(textTwoInputElement, '');
expectElementToBeHidden(displayValueHiddenContainer);
typeIntoInput(textTwoInputElement, 'aaa');
fixture.detectChanges();
await fixture.whenStable();
displayValueHiddenContainer = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectInputElementValueIs(textInputElement, 'bbb');
expectInputElementValueIs(textTwoInputElement, 'aaa');
expectElementToBeHidden(displayValueHiddenContainer);
typeIntoInput(textInputElement, 'aaa');
fixture.detectChanges();
await fixture.whenStable();
displayValueHiddenContainer = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectInputElementValueIs(textInputElement, 'aaa');
expectInputElementValueIs(textTwoInputElement, 'aaa');
expectElementToBeHidden(displayValueHiddenContainer);
typeIntoInput(textTwoInputElement, 'bbb');
fixture.detectChanges();
await fixture.whenStable();
displayValueHiddenContainer = fixture.nativeElement.querySelector('#field-Displayvalue0g6092-container');
expectInputElementValueIs(textInputElement, 'aaa');
expectInputElementValueIs(textTwoInputElement, 'bbb');
expectElementToBeVisible(displayValueHiddenContainer);
});
});

422
lib/core/form/components/mock/form-renderer.component.mock.ts Normal file
View File

@ -0,0 +1,422 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const formDisplayValueVisibility = {formRepresentation: {
id: 'form-3175b074-53c6-4b5b-92df-246b62108db3',
name: 'displayValueVisibility',
description: '',
version: 0,
standAlone: true,
formDefinition: {
tabs: [],
fields: [
{
id: '65ba00e6-a669-4710-9a97-0a6e19b429d8',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
'1': [
{
id: 'Text0bq3ar',
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: 'Displayvalue0g6092',
name: 'Display value',
type: 'readonly',
value: 'No field selected',
colspan: 1,
visibilityCondition: {
leftType: 'field',
leftValue: 'Text0bq3ar',
operator: '==',
rightValue: 'DisplayValue',
rightType: 'value',
nextConditionOperator: '',
nextCondition: null
},
params: {
existingColspan: 1,
maxColspan: 2,
field: {
id: 'Displayvalue0g6092',
name: 'Display value',
type: 'text'
},
responseVariable: true
}
}
]
}
}
],
outcomes: [],
metadata: {},
variables: []
}
}};
export const formDisplayValueForm = { formRepresentation : {
id: 'form-3dd0f2a3-c20a-4195-a760-1db42ec7dcd4',
name: 'displayValue',
description: '',
version: 0,
formDefinition: {
'tabs': [],
'fields': [
{
'id': 'c54f6956-bcf9-4109-a6c1-1daff773936b',
'name': 'Label',
'type': 'container',
'tab': null,
'numberOfColumns': 2,
'fields': {
'1': [
{
'id': 'DisplayValueColspan',
'name': 'DisplayValueColspan',
'type': 'readonly',
'value': 'No field selected',
'colspan': 2,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2,
'field': {
'id': 'Displayvalue0hwgvb',
'name': 'Display value',
'type': 'text'
}
}
},
{
'id': 'DisplayValueFieldValue',
'name': 'DisplayValueFieldValue',
'type': 'readonly',
'value': 'No field selected',
'colspan': 1,
'visibilityCondition': {
'leftFormFieldId': 'TextOne',
'leftRestResponseId': '',
'operator': '==',
'rightValue': 'aaa',
'rightType': null,
'rightFormFieldId': '',
'rightRestResponseId': '',
'nextConditionOperator': '',
'nextCondition': null
},
'params': {
'existingColspan': 1,
'maxColspan': 2,
'field': {
'id': 'Displayvalue0pjsfi',
'name': 'Display value',
'type': 'text'
}
}
},
{
'id': 'DisplayValueVariableField',
'name': 'DisplayValueVariableField',
'type': 'readonly',
'value': 'No field selected',
'colspan': 1,
'visibilityCondition': {
'leftFormFieldId': '',
'leftRestResponseId': 'bcdfe3af-d635-40ee-b9fd-4f9d3655d77b',
'operator': '==',
'rightValue': '',
'rightType': null,
'rightFormFieldId': 'TextOne',
'rightRestResponseId': '',
'nextConditionOperator': '',
'nextCondition': null
},
'params': {
'existingColspan': 1,
'maxColspan': 2,
'field': {
'id': 'Displayvalue0sss8o',
'name': 'Display value',
'type': 'text'
}
}
},
{
'id': 'DisplayValueFieldVariable',
'name': 'DisplayValueFieldVariable',
'type': 'readonly',
'value': 'No field selected',
'colspan': 1,
'visibilityCondition': {
'leftFormFieldId': 'TextOne',
'leftRestResponseId': '',
'operator': '==',
'rightValue': '',
'rightType': null,
'rightFormFieldId': '',
'rightRestResponseId': 'bcdfe3af-d635-40ee-b9fd-4f9d3655d77b',
'nextConditionOperator': '',
'nextCondition': null
},
'params': {
'existingColspan': 1,
'maxColspan': 2,
'field': {
'id': 'Displayvalue0mkrml',
'name': 'Display value',
'type': 'text'
}
}
},
{
'id': 'DisplayValueOne',
'name': 'DisplayValueOne',
'type': 'readonly',
'value': 'No field selected',
'colspan': 1,
'visibilityCondition': {
'leftFormFieldId': 'Text0howrc',
'leftRestResponseId': '',
'operator': '==',
'rightValue': 'aaa',
'rightType': null,
'rightFormFieldId': '',
'rightRestResponseId': '',
'nextConditionOperator': 'and',
'nextCondition': {
'leftFormFieldId': 'TextTwo',
'leftRestResponseId': '',
'operator': '!=',
'rightValue': 'aaa',
'rightType': null,
'rightFormFieldId': '',
'rightRestResponseId': '',
'nextConditionOperator': '',
'nextCondition': null
}
},
'params': {
'existingColspan': 1,
'maxColspan': 2,
'field': {
'id': 'Displayvalue00ldqe',
'name': 'Display value',
'type': 'text'
}
}
}
],
'2': [
{
'id': 'Text0howrc',
'name': 'Text',
'type': 'text',
'required': false,
'colspan': 1,
'placeholder': null,
'minLength': 0,
'maxLength': 0,
'regexPattern': null,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2
}
},
{
'id': 'TextOne',
'name': 'TextOne',
'type': 'text',
'required': false,
'colspan': 1,
'placeholder': null,
'minLength': 0,
'maxLength': 0,
'regexPattern': null,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2
}
},
{
'id': 'TextTwo',
'name': 'TextTwo',
'type': 'text',
'required': false,
'colspan': 1,
'placeholder': null,
'minLength': 0,
'maxLength': 0,
'regexPattern': null,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2
}
},
{
'id': 'bcdfe3af-d635-40ee-b9fd-4f9d3655d77b',
'name': 'vstring',
'type': 'readonly',
'value': 'Show value of vstring',
'colspan': 1,
'visibilityCondition': null,
'params': {
'existingColspan': 1,
'maxColspan': 2,
'field': {
'id': 'bcdfe3af-d635-40ee-b9fd-4f9d3655d77b',
'name': 'vstring',
'type': 'string'
}
}
}
]
}
}
],
'outcomes': [],
'metadata': {},
'variables': [
{
'id': 'bcdfe3af-d635-40ee-b9fd-4f9d3655d77b',
'name': 'vstring',
'type': 'string',
'value': 'aaa'
}
]
}
}};
export const formDisplayValueCombinedVisibility = {
formRepresentation: {
id: 'form-3175b074-53c6-4b5b-92df-246b62108db3',
name: 'displayValueVisibility',
description: '',
version: 0,
standAlone: true,
formDefinition: {
tabs: [],
fields: [
{
id: '65ba00e6-a669-4710-9a97-0a6e19b429d8',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
'1': [
{
id: 'Text0bq3ar',
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: 'Displayvalue0g6092',
name: 'Display value',
type: 'readonly',
value: 'No field selected',
colspan: 1,
visibilityCondition: {
leftType: 'field',
leftValue: 'Text0bq3ar',
operator: '==',
rightValue: 'aaa',
rightType: 'value',
nextConditionOperator: 'and',
nextCondition: {
leftType: 'field',
leftValue: 'TextTwo',
operator: '!=',
rightValue: 'aaa',
rightType: 'value',
nextConditionOperator: '',
nextCondition: null
}
},
params: {
existingColspan: 1,
maxColspan: 2,
field: {
id: 'Displayvalue0g6092',
name: 'Display value',
type: 'text'
},
responseVariable: true
}
}
]
}
},
{
id: 'b2162507-2204-4fda-a8cb-003dd5d032ef',
name: 'Label',
type: 'container',
tab: null,
numberOfColumns: 2,
fields: {
'1': [
{
id: 'TextTwo',
name: 'TextTwo',
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: []
}
}
};

2
lib/core/form/services/form.service.spec.ts
View File

@ -396,7 +396,7 @@ describe('Form service', () => {
});
it('should parse a Form Definition with tabs', () => {
expect(formModelTabs.formDefinition).toBeDefined();
expect(formModelTabs.formRepresentation.formDefinition).toBeDefined();
const formParsed = service.parseForm(formModelTabs);
expect(formParsed).toBeDefined();
});

15
lib/core/form/services/form.service.ts
View File

@ -102,10 +102,21 @@ export class FormService {
*/
parseForm(json: any, data?: FormValues, readOnly: boolean = false): FormModel {
if (json) {
const form = new FormModel(json, data, readOnly, this);
const flattenForm = {
...json.formRepresentation,
...json.formRepresentation.formDefinition
};
delete flattenForm.formDefinition;
const formValues: FormValues = {};
(data || []).forEach(variable => {
formValues[variable.name] = variable.value;
});
const form = new FormModel(flattenForm, formValues, readOnly);
if (!json.fields) {
form.outcomes = [
new FormOutcomeModel(form, {
new FormOutcomeModel(<any> form, {
id: '$save',
name: FormOutcomeModel.SAVE_ACTION,
isSystem: true

6
lib/core/mock/form/demo-form.mock.ts
View File

@ -18,6 +18,7 @@
export class DemoForm {
easyForm: any = {
'formRepresentation': {
'id': 1001,
'name': 'ISSUE_FORM',
'tabs': [],
@ -363,9 +364,11 @@ export class DemoForm {
'customFieldsValueInfo': {},
'gridsterForm': false,
'globalDateFormat': 'D-M-YYYY'
}
};
formDefinition: any = {
'formRepresentation': {
'id': 3003,
'name': 'demo-01',
'taskId': '7501',
@ -1480,9 +1483,11 @@ export class DemoForm {
],
'gridsterForm': false,
'globalDateFormat': 'D-M-YYYY'
}
};
simpleFormDefinition: any = {
'formRepresentation': {
'id': 1001,
'name': 'SIMPLE_FORM_EXAMPLE',
'description': '',
@ -1763,6 +1768,7 @@ export class DemoForm {
'customFieldsValueInfo': {},
'gridsterForm': false
}
}
};
cloudFormDefinition: any = {

2
lib/core/mock/form/form.service.mock.ts
View File

@ -16,6 +16,7 @@
*/
export const formModelTabs: any = {
formRepresentation: {
id: 16,
name: 'start event',
description: '',
@ -243,4 +244,5 @@ export const formModelTabs: any = {
customFieldsValueInfo: {},
gridsterForm: false
}
}
};