PromucFlow_constructor/app/client/src/widgets/JSONFormWidget/helper.test.ts
ashit-rath 32fee08c5c
feat: JSON Form widget (#8472)
* initial layout

* updated parser to support nested array

* array field rendering

* changes

* ts fix

* minor revert FormWidget

* modified schema structure

* select and switch fields

* added checkbox field

* added RadioGroupField

* partial DateField and defaults, typing refactoring

* added label and field type change

* minor ts changes

* changes

* modified widget/utils for nested panelConfig, modified schema to object approach

* array/object label support

* hide field configuration when children not present

* added tooltip

* field visibility option

* disabled state

* upgraded tslib, form initial values

* custom field configuration - add/hide/edit

* field configuration - label change

* return input when field configuration reaches max depth

* minor changes

* form - scroll, fixedfooter, enitity defn and other minior changes

* form title

* unregister on unmount

* fixes

* zero state

* fix field padding

* patched updating form values, removed linting warnings

* configured action buttons

* minor fix

* minor change

* property pane - sort fields in field configuration

* refactor include all properties

* checkbox properties

* date properties

* refactor typings and radio group properties

* switch, multselect, select, array, object properties

* minor changes

* default value

* ts fixes

* checkbox field properties implementation

* date field prop implementation

* switch field

* select field and fix deep nested meta properties

* multiselect implementation

* minor change

* input field implementation

* fix position jump on field type change

* initial accordian

* field state property and auto-complete of JSONFormComputeControl

* merge fixes

* renamed FormBuilder to JSONForm

* source data validation minor change

* custom field default value fix

* Editable keys for custom field

* minor fixes

* replaced useFieldArray with custom logic, added widget icon

* array and object accordian with border/background styling

* minor change

* disabled states for array and objects

* default value minor fix

* form level styles

* modified logic for isDisabled for array and object, added disabledWhenInvalid, exposed isValid to fieldState for text input, removed useDisableChildren

* added isValid for all field types

* fixed reset to default values

* debounce form values update

* minor change

* minor change

* fix crash - source data change multi-select to array, fix crash - change of options

* fix positioning

* detect date type in source data

* fix crash - when object is passed to regex input field

* fixed default sourceData path for fields

* accodion keep children mounted on collapse

* jest test for schemaParser

* widget/helper and useRegisterFieldInvalid test

* tests for property config helper and generatePanelPropertyConfig

* fix input field validation not appearing

* fix date field type detection

* rename data -> formData

* handle null/undefined field value change in sourceData

* added null/undefined as valid values for defaultValue text field

* auto detect email field

* set formData default value on initial load

* switch field inline positioning

* field margin fix for row direction

* select full width

* fiex date field default value - out of range

* fix any field type to array

* array default value logic change

* base cypress test changes

* initial json form render cy test

* key sanitization

* fix fieldState update logic

* required design, object/array background color, accordion changes, fix - add new custom field

* minor change

* cypress tests

* fix date formatted value, field state cypress test

* cypress - field properties test and fixes

* rename test file

* fix accessort change to blank value, cypress tests

* fix array field default value for modified accessor

* minor fix

* added animate loading

* fix empty state, add new custom field

* test data fix

* fix warnings

* fix timePrecision visibility

* button styling

* ported input v2

* fix jest tests

* fix cypress tests

* perf changes

* perf improvement

* added comments

* multiselect changes

* input field perf refactor

* array field, object field refactor performance

* checkbox field refactor

* refectored date, radio, select and switch

* fixes

* test fixes

* fixes

* minor fix

* rename field renderer

* remove tracked fieldRenderer field

* cypress test fixes

* cypress changes

* array default value fixes

* arrayfield passedDefaultValue

* auto enabled JS mode for few properties, reverted swith and date property controls

* cypress changes

* added widget sniping mode and fixed object passedDefaultValue

* multiselect v2

* select v2

* fix jest tests

* test fixes

* field limit

* rename field type dropdown texts

* field type changes fixes

* jest fixes

* loading state submit button

* default source data for new widget

* modify limit message

* multiseelct default value changes and cypress fix

* select default value

* keep default value intact on field type change

* TextTable cypress text fix

* review changes

* fixed footer changes

* collapse styles section by default

* fixed footer changes

* form modes

* custom field key rentention

* fixed footer fix in view mode

* non ascii characters

* fix meta merge in dataTreeWidget

* minor fixes

* rename useRegisterFieldInvalid.ts -> useRegisterFieldValidity.ts

* modified dependency injection into evaluated values

* refactored fixedfooter logic

* minor change

* accessor update

* minor change

* fixes

* QA fixes date field, scroll content

* fix phone number field, removed visiblity option from array item

* fix sourceData autocomplete

* reset logic

* fix multiselect reset

* form values hydration on widget drag

* code review changes

* reverted order of merge dataTreeWidget

* fixes

* added button titles, fixed hydration issue

* default value fixes

* upgraded react hook form, modified array-level/field-level default value logic

* fixed select validation

* added icon entity explorer, modified icon align control

* modify accessor validation for mongo db _id

* update email field regex

* review changes

* explicitly handle empty source data validation
2022-03-24 12:43:25 +05:30

687 lines
18 KiB
TypeScript

import {
ARRAY_ITEM_KEY,
DataType,
FieldType,
ROOT_SCHEMA_KEY,
Schema,
SchemaItem,
} from "./constants";
import {
convertSchemaItemToFormData,
countFields,
mergeAllObjectsInAnArray,
schemaItemDefaultValue,
validateOptions,
} from "./helper";
describe(".schemaItemDefaultValue", () => {
it("returns array default value when sub array fields don't have default value", () => {
const schemaItem = ({
accessor: "education",
identifier: "education",
originalIdentifier: "education",
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
defaultValue: [
{
college: "String field",
graduationDate: "10/12/2021",
},
],
children: {
__array_item__: {
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
defaultValue: undefined,
children: {
college: {
label: "College",
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.TEXT_INPUT,
accessor: "college",
identifier: "college",
originalIdentifier: "college",
},
graduationDate: {
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.DATEPICKER,
accessor: "graduationDate",
identifier: "graduationDate",
originalIdentifier: "graduationDate",
},
},
},
},
} as unknown) as SchemaItem;
const expectedDefaultValue = [
{
college: "String field",
graduationDate: "10/12/2021",
},
];
const result = schemaItemDefaultValue(schemaItem, "identifier");
expect(result).toEqual(expectedDefaultValue);
});
it("returns array default value when sub array fields don't have default value with accessor keys", () => {
const schemaItem = ({
accessor: "education 1",
identifier: "education",
originalIdentifier: "education",
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
defaultValue: [
{
college: "String field",
graduationDate: "10/12/2021",
},
],
children: {
__array_item__: {
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
defaultValue: undefined,
children: {
college: {
label: "College",
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.TEXT_INPUT,
accessor: "graduating college",
identifier: "college",
originalIdentifier: "college",
},
graduationDate: {
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.DATEPICKER,
accessor: "graduation date",
identifier: "graduationDate",
originalIdentifier: "graduationDate",
},
},
},
},
} as unknown) as SchemaItem;
const expectedDefaultValue = [
{
"graduating college": "String field",
"graduation date": "10/12/2021",
},
];
const result = schemaItemDefaultValue(schemaItem, "accessor");
expect(result).toEqual(expectedDefaultValue);
});
it("returns merged default value when sub array fields have default value", () => {
const schemaItem = ({
name: "education",
accessor: "education",
identifier: "education",
originalIdentifier: "education",
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
defaultValue: [
{
college: "String field",
graduationDate: "10/12/2021",
},
],
children: {
__array_item__: {
accessor: ARRAY_ITEM_KEY,
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
defaultValue: {
college: "String field",
graduationDate: "10/12/2021",
},
children: {
college: {
label: "College",
children: {},
dataType: DataType.STRING,
defaultValue: "Some college name",
fieldType: FieldType.TEXT_INPUT,
accessor: "college",
identifier: "college",
originalIdentifier: "college",
},
graduationDate: {
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.DATEPICKER,
accessor: "graduationDate",
identifier: "graduationDate",
originalIdentifier: "graduationDate",
},
},
},
},
} as unknown) as SchemaItem;
const expectedDefaultValue = [
{
college: "String field",
graduationDate: "10/12/2021",
},
];
const result = schemaItemDefaultValue(schemaItem, "identifier");
expect(result).toEqual(expectedDefaultValue);
});
it("returns merged default value when array field has default value more than one item", () => {
const schemaItem = ({
name: "education",
accessor: "education",
identifier: "education",
originalIdentifier: "education",
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
defaultValue: [
{
college: "String field 1",
graduationDate: "10/12/2021",
},
{
college: "String field 2",
graduationDate: "30/12/2021",
},
],
children: {
__array_item__: {
accessor: ARRAY_ITEM_KEY,
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
defaultValue: {
college: "String field",
graduationDate: "10/12/2021",
},
children: {
college: {
label: "College",
children: {},
dataType: DataType.STRING,
defaultValue: "Some college name",
fieldType: FieldType.TEXT_INPUT,
accessor: "college",
identifier: "college",
originalIdentifier: "college",
},
graduationDate: {
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.DATEPICKER,
accessor: "graduationDate",
identifier: "graduationDate",
originalIdentifier: "graduationDate",
},
},
},
},
} as unknown) as SchemaItem;
const expectedDefaultValue = [
{
college: "String field 1",
graduationDate: "10/12/2021",
},
{
college: "String field 2",
graduationDate: "30/12/2021",
},
];
const result = schemaItemDefaultValue(schemaItem, "identifier");
expect(result).toEqual(expectedDefaultValue);
});
it("returns only sub array fields default value, when array level default value is empty", () => {
const schemaItem = ({
accessor: "education",
identifier: "education",
originalIdentifier: "education",
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
defaultValue: undefined,
children: {
__array_item__: {
accessor: ARRAY_ITEM_KEY,
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
defaultValue: undefined,
children: {
college: {
label: "College",
children: {},
dataType: DataType.STRING,
defaultValue: "Some college name",
fieldType: FieldType.TEXT_INPUT,
accessor: "college",
identifier: "college",
originalIdentifier: "college",
},
graduationDate: {
children: {},
dataType: DataType.STRING,
defaultValue: "10/10/2001",
fieldType: FieldType.DATEPICKER,
accessor: "graduationDate",
identifier: "graduationDate",
originalIdentifier: "graduationDate",
},
},
},
},
} as unknown) as SchemaItem;
const expectedDefaultValue = [
{
college: "Some college name",
graduationDate: "10/10/2001",
},
];
const result = schemaItemDefaultValue(schemaItem, "identifier");
expect(result).toEqual(expectedDefaultValue);
});
it("returns valid default value when non compliant keys in default value is present", () => {
const schemaItem = ({
accessor: "education",
identifier: "education",
originalIdentifier: "education",
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
defaultValue: [
{
"graduating college": "Some college name",
"graduation date": "10/10/2001",
},
],
children: {
__array_item__: {
accessor: ARRAY_ITEM_KEY,
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
defaultValue: undefined,
children: {
graduating_college: {
label: "College",
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.TEXT_INPUT,
accessor: "college",
identifier: "graduating_college",
originalIdentifier: "graduating college",
},
graduation_date: {
children: {},
dataType: DataType.STRING,
defaultValue: undefined,
fieldType: FieldType.DATEPICKER,
accessor: "newDate",
identifier: "graduation_date",
originalIdentifier: "graduation date",
},
},
},
},
} as unknown) as SchemaItem;
const expectedDefaultValue = [
{
college: "Some college name",
newDate: "10/10/2001",
},
];
const result = schemaItemDefaultValue(schemaItem, "identifier");
expect(result).toEqual(expectedDefaultValue);
});
});
describe(".validateOptions", () => {
it("returns values passed for valid values", () => {
const inputAndExpectedOutput = [
[[""], true],
[[0], true],
[[true], true],
[[false], true],
[[{}, ""], false],
[[{}, null], false],
[[{}, undefined], false],
[[{}, NaN], false],
[["test", null], false],
[["test", undefined], false],
[["test", NaN], false],
[["", null], false],
[["", undefined], false],
[["", NaN], false],
[[0, null], false],
[[0, undefined], false],
[[0, NaN], false],
[[1, null], false],
[[1, undefined], false],
[[1, NaN], false],
[[{ label: "", value: "" }], true],
[[{ label: "", value: "" }, { label: "" }], false],
[{ label: "", value: "" }, false],
["label", false],
[1, false],
[null, false],
[undefined, false],
[NaN, false],
[["one", "two"], true],
[[1, 2], true],
];
inputAndExpectedOutput.forEach(([input, expectedOutput]) => {
const result = validateOptions(input);
expect(result).toEqual(expectedOutput);
});
});
});
describe(".mergeAllObjectsInAnArray", () => {
it("returns merged array", () => {
const input = [
{
number: 10,
text: "text",
obj: {
arr: {
number: 10,
text: "text",
arr: ["a", "b"],
obj: {
a: 10,
c: 20,
},
},
},
},
{
number1: 10,
text2: "text",
obj: {
arr: {
number: 10,
text: "text",
arr: ["a", "b"],
obj1: {
a: 10,
c: 20,
},
},
},
},
];
const expectedOutput = {
number: 10,
text: "text",
number1: 10,
text2: "text",
obj: {
arr: {
number: 10,
text: "text",
arr: ["a", "b"],
obj: {
a: 10,
c: 20,
},
obj1: {
a: 10,
c: 20,
},
},
},
};
const result = mergeAllObjectsInAnArray(input);
expect(result).toEqual(expectedOutput);
});
});
describe(".countFields", () => {
it("return number of fields in an object", () => {
const inputAndExpectedOutput = [
{ input: { foo: { bar: 10 } }, expectedOutput: 2 },
{ input: { foo: { bar: 10 }, arr: ["1", "2", "3"] }, expectedOutput: 3 },
{
input: {
foo: { bar: 10 },
arr: ["1", "2", "3"],
arr1: [{ a: 10 }, { c: 10, d: { e: 20, k: ["a", "b"] } }],
},
expectedOutput: 14,
},
{
input: {
number: 10,
text: "text",
arr: {
number: 10,
text: "text",
obj: {
arr: {
number: 10,
text: "text",
arr: ["a", "b"],
obj: {
a: 10,
c: 20,
},
},
},
},
arr2: ["1", "2"],
arr1: [
{
number: 10,
text: "text",
obj: {
arr: {
number: 10,
text: "text",
arr: ["a", "b"],
obj: {
a: 10,
c: 20,
},
},
},
},
{
number1: 10,
text2: "text",
obj: {
arr: {
number: 10,
text: "text",
arr: ["a", "b"],
obj1: {
a: 10,
c: 20,
},
},
},
},
],
},
expectedOutput: 45,
},
];
inputAndExpectedOutput.forEach(({ expectedOutput, input }) => {
const result = countFields(input);
expect(result).toEqual(expectedOutput);
});
});
});
describe(".convertSchemaItemToFormData", () => {
const schema = ({
__root_schema__: {
children: {
customField1: {
children: {},
dataType: DataType.STRING,
fieldType: FieldType.TEXT_INPUT,
accessor: "gender",
identifier: "customField1",
originalIdentifier: "customField1",
},
array: {
children: {
__array_item__: {
children: {
name: {
dataType: DataType.STRING,
fieldType: FieldType.TEXT_INPUT,
accessor: "firstName",
identifier: "name",
originalIdentifier: "name",
},
},
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
accessor: ARRAY_ITEM_KEY,
identifier: ARRAY_ITEM_KEY,
originalIdentifier: ARRAY_ITEM_KEY,
},
},
dataType: DataType.ARRAY,
fieldType: FieldType.ARRAY,
accessor: "students",
identifier: "array",
originalIdentifier: "array",
},
},
dataType: DataType.OBJECT,
fieldType: FieldType.OBJECT,
accessor: "",
identifier: "",
originalIdentifier: "",
},
} as unknown) as Schema;
it("replaces data with accessor keys to identifier keys", () => {
const formData = {
gender: "male",
students: [{ firstName: "test1" }, { firstName: "test2" }],
};
const expectedOutput = {
customField1: "male",
array: [{ name: "test1" }, { name: "test2" }],
};
const result = convertSchemaItemToFormData(
schema[ROOT_SCHEMA_KEY],
formData,
{ fromId: "accessor", toId: "identifier" },
);
expect(result).toEqual(expectedOutput);
});
it("replaces data with identifier keys to accessor keys", () => {
const formData = {
customField1: "male",
customField2: "demo",
array: [{ name: "test1" }, { name: "test2" }],
};
const expectedOutput = {
gender: "male",
students: [{ firstName: "test1" }, { firstName: "test2" }],
};
const result = convertSchemaItemToFormData(
schema[ROOT_SCHEMA_KEY],
formData,
{ fromId: "identifier", toId: "accessor" },
);
expect(result).toEqual(expectedOutput);
});
it("replaces data with identifier keys to accessor keys when keys are missing", () => {
const formData = {
customField1: "male",
customField2: "demo",
};
const expectedOutput = {
gender: "male",
};
const result = convertSchemaItemToFormData(
schema[ROOT_SCHEMA_KEY],
formData,
{ fromId: "identifier", toId: "accessor" },
);
expect(result).toEqual(expectedOutput);
});
it("replaces data with identifier keys to accessor keys when keys are undefined", () => {
const formData = {
customField1: "male",
customField2: "demo",
array: [{ name: "test1" }, { name: undefined }],
};
const expectedOutput = {
gender: "male",
students: [{ firstName: "test1" }, { firstName: undefined }],
};
const result = convertSchemaItemToFormData(
schema[ROOT_SCHEMA_KEY],
formData,
{ fromId: "identifier", toId: "accessor" },
);
expect(result).toEqual(expectedOutput);
});
});