@arquimedes.co/eureka-forms 2.0.32 → 2.0.34-test

package/src/App/AppFunctions.test.ts

@@ -0,0 +1,747 @@
+import { Form } from '../../src/@Types';
+import { FormSelector, FormStep, NestedStepOption } from '../@Types/FormStep';
+import { ValuesStore } from '../States/SiteSlice';
+import StepTypes, {
+    ClassifierOptionTypes,
+    FormTypes,
+    MapperStyleTypes,
+    OptionTypes,
+} from '../constants/FormStepTypes';
+import {
+    addMapperStep,
+    calcInitialSections,
+    calcRecursiveData,
+    calcValuesStore,
+    mapOriginalValue,
+} from './AppFunctions';
+
+//Hacer una prueba para validar que no haya quemado nada!
+
+describe('AppFunctions', function () {
+    describe('calcValuesStore', function () {
+        const baseForm: Form = {
+            firstSection: 'FIRST',
+            sections: {
+                FIRST: {
+                    id: 'FIRST',
+                    name: 'First Section',
+                    nextSection: 'SECOND',
+                    steps: [],
+                },
+            },
+            size: {
+                blockNum: 4,
+                blockSize: 210,
+                spacingSize: 20,
+            },
+            steps: {},
+        };
+
+        test('Empty Values and no Mapper', async () => {
+            const values = calcValuesStore(baseForm);
+            expect(Object.keys(values).length).toBe(2);
+        });
+
+        test('Original values ', async () => {
+            const values = calcValuesStore(baseForm, {
+                idStep: 'value',
+            });
+            expect(Object.keys(values.global).length).toBe(1);
+        });
+
+        test('Step with value', async () => {
+            const values = calcValuesStore(
+                {
+                    ...baseForm,
+                    steps: {
+                        idStep: {
+                            id: 'idStep',
+                            label: 'Step',
+                            description: null,
+                            idSection: 'FIRST',
+                            type: StepTypes.TEXTINPUT,
+                            required: true,
+                            size: 1,
+                        },
+                    },
+                },
+                {
+                    idStep: 'value',
+                }
+            );
+            expect(Object.keys(values.sections['FIRST']).length).toBe(1);
+        });
+
+        test('Step without value', async () => {
+            const values = calcValuesStore({
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: StepTypes.TEXTINPUT,
+                        required: true,
+                        size: 1,
+                    },
+                },
+            });
+            expect(values.sections['FIRST']).toBeUndefined();
+        });
+
+        test('Empty initial Mapper Step', async () => {
+            const values = calcValuesStore({
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: StepTypes.MAPPER,
+                        required: true,
+                        addBtnLabel: 'Add',
+                        rootSteps: [],
+                        steps: {},
+                        style: { type: MapperStyleTypes.PILL },
+                        unitLabel: 'Elemento',
+                    },
+                },
+                sections: {
+                    FIRST: { ...baseForm.sections['FIRST'], steps: ['idStep'] },
+                },
+            });
+            expect(Object.keys(values.sections['FIRST']).length).toBe(1);
+        });
+
+        test('Empty initial Mapper Step postview', async () => {
+            const values = calcValuesStore(
+                {
+                    ...baseForm,
+                    steps: {
+                        idStep: {
+                            id: 'idStep',
+                            label: 'Step',
+                            description: null,
+                            idSection: 'FIRST',
+                            type: StepTypes.MAPPER,
+                            required: true,
+                            addBtnLabel: 'Add',
+                            rootSteps: [],
+                            steps: {},
+                            style: { type: MapperStyleTypes.PILL },
+                            unitLabel: 'Elemento',
+                        },
+                    },
+                    sections: {
+                        FIRST: {
+                            ...baseForm.sections['FIRST'],
+                            steps: ['idStep'],
+                        },
+                    },
+                },
+                {},
+                true
+            );
+            expect(Object.keys(values.sections).length).toBe(0);
+        });
+
+        test('Mapper Step with initial value', async () => {
+            const values = calcValuesStore(
+                {
+                    ...baseForm,
+                    steps: {
+                        idStep: {
+                            id: 'idStep',
+                            label: 'Step',
+                            description: null,
+                            idSection: 'FIRST',
+                            type: StepTypes.MAPPER,
+                            required: true,
+                            addBtnLabel: 'Add',
+                            rootSteps: [],
+                            steps: {},
+                            style: { type: MapperStyleTypes.PILL },
+                            unitLabel: 'Elemento',
+                        },
+                    },
+                    sections: {
+                        FIRST: {
+                            ...baseForm.sections['FIRST'],
+                            steps: ['idStep'],
+                        },
+                    },
+                },
+                {
+                    idStep: [{ value: 'value' }],
+                }
+            );
+            expect(Object.keys(values.sections).length).toBe(1);
+            const originalValue = values.sections['FIRST']['idStep'];
+            expect(originalValue.length).toBe(1);
+
+            const element = originalValue[0];
+            expect(element.ids).toBeDefined();
+            expect(Object.keys(element.ids).length).toBe(0);
+            expect(element.value).toBe('value');
+            expect(element.isOriginal).toBe(true);
+        });
+    });
+
+    describe('addMapperStep', function () {
+        test('Mapper Step with subSteps', async () => {
+            const { element, mappers, steps } = addMapperStep(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.MAPPER,
+                    required: true,
+                    addBtnLabel: 'Add',
+                    rootSteps: ['idSubStep', 'idSubMapperStep'],
+                    steps: {
+                        idSubStep: {
+                            id: 'idSubStep',
+                            label: 'SubStep',
+                            description: null,
+                            idSection: 'FIRST',
+                            type: StepTypes.TEXTINPUT,
+                            required: true,
+                            size: 1,
+                        },
+                        idSubMapperStep: {
+                            id: 'idSubMapperStep',
+                            label: 'SubStep',
+                            description: null,
+                            idSection: 'FIRST',
+                            type: StepTypes.MAPPER,
+                            required: true,
+                            addBtnLabel: 'Add',
+                            rootSteps: [],
+                            steps: {},
+                            style: { type: MapperStyleTypes.PILL },
+                            unitLabel: 'SubElemento',
+                        },
+                    },
+                    style: { type: MapperStyleTypes.PILL },
+                    unitLabel: 'Elemento',
+                },
+                {}
+            );
+            expect(element.ids).toBeDefined();
+            expect(element.isOriginal).toBe(false);
+            expect(Object.keys(element.ids).length).toBe(2);
+            expect(Object.keys(element.originalValues).length).toBe(0);
+            expect(Object.keys(mappers).length).toBe(1);
+            expect(mappers[element.ids['idSubMapperStep']]).toBeDefined();
+            expect(Object.keys(steps).length).toBe(2);
+            for (const id of Object.values(element.ids)) {
+                expect(steps[id]).toBeDefined();
+            }
+        });
+    });
+
+    describe('calcRecursiveData', function () {
+        test('SubSteps without dependencies', async () => {
+            const element = {
+                id: 'idStep',
+                ids: {
+                    idSubStep: 'idSubStep-idElement',
+                },
+                originalValues: {},
+                isOriginal: false,
+            };
+            const newSteps: Record<string, FormStep> = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                },
+            };
+            calcRecursiveData(element, newSteps, {});
+            expect(
+                newSteps['idSubStep-idElement'].dependencies
+            ).toBeUndefined();
+        });
+
+        test('SubSteps with basic dependencies', async () => {
+            const element = {
+                id: 'idStep',
+                ids: {
+                    idSubStep: 'idSubStep-idElement',
+                },
+                originalValues: {},
+                isOriginal: false,
+            };
+            const newSteps: Record<string, FormStep> = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                    dependencies: ['idParentStep'],
+                },
+            };
+            calcRecursiveData(element, newSteps, {});
+
+            expect(newSteps['idSubStep-idElement'].dependencies![0]).toBe(
+                'idParentStep'
+            );
+        });
+
+        test('SubSteps with subStep dependencies', async () => {
+            const element = {
+                id: 'idStep',
+                ids: {
+                    idSubStep: 'idSubStep-idElement',
+                    idSubStep2: 'idSubStep2-idElement',
+                },
+                originalValues: {},
+                isOriginal: false,
+            };
+            const newSteps: Record<string, FormStep> = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                },
+                'idSubStep2-idElement': {
+                    id: 'idSubStep2-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                    dependencies: ['idSubStep'],
+                },
+            };
+            calcRecursiveData(element, newSteps, {});
+
+            expect(
+                newSteps['idSubStep-idElement'].dependencies
+            ).toBeUndefined();
+            expect(newSteps['idSubStep2-idElement'].dependencies![0]).toBe(
+                'idSubStep-idElement'
+            );
+        });
+
+        test('SubSteps with nested steps', async () => {
+            const element = {
+                id: 'idStep',
+                ids: {
+                    idSubStep: 'idSubStep-idElement',
+                    idSubStep2: 'idSubStep2-idElement',
+                },
+                originalValues: {},
+                isOriginal: false,
+            };
+            const newSteps: Record<string, FormStep> = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: '',
+                    idSection: 'FIRST',
+                    type: StepTypes.SELECTOR,
+                    required: true,
+                    size: 1,
+                    options: [
+                        {
+                            type: OptionTypes.NESTED,
+                            label: 'Option',
+                            steps: ['idSubStep2'],
+                            value: 'value',
+                        },
+                    ],
+                    searchable: true,
+                },
+                'idSubStep2-idElement': {
+                    id: 'idSubStep2-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                },
+            };
+            calcRecursiveData(element, newSteps, {});
+
+            expect(
+                newSteps['idSubStep-idElement'].dependencies
+            ).toBeUndefined();
+            expect(
+                (
+                    (newSteps['idSubStep-idElement'] as FormSelector)
+                        .options[0] as NestedStepOption
+                ).steps[0]
+            ).toBe('idSubStep2-idElement');
+        });
+    });
+
+    describe('mapOriginalValue', function () {
+        test('No Value', async () => {
+            const values: ValuesStore = {
+                global: {},
+                sections: {},
+            };
+
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                },
+                undefined,
+                values
+            );
+
+            expect(value).toBeUndefined();
+        });
+
+        test('Mapper Step', async () => {
+            const values: ValuesStore = {
+                global: {},
+                sections: {},
+            };
+
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.MAPPER,
+                    required: true,
+                    addBtnLabel: 'Add',
+                    rootSteps: ['idSubStep'],
+                    steps: {
+                        idSubStep: {
+                            id: 'idSubStep',
+                            label: 'SubStep',
+                            description: null,
+                            idSection: 'FIRST',
+                            type: StepTypes.TEXTINPUT,
+                            required: true,
+                            size: 1,
+                        },
+                    },
+                    style: { type: MapperStyleTypes.PILL },
+                    unitLabel: 'Elemento',
+                },
+                [
+                    {
+                        idSubStep: 'value',
+                    },
+                ],
+                values
+            );
+            expect(value.length).toBe(1);
+            expect(values.sections['FIRST']['idStep']).toBeUndefined();
+            expect(values.sections['FIRST'][value[0].ids['idSubStep']]).toBe(
+                'value'
+            );
+        });
+
+        test('Text Area with editor as string', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTAREA,
+                    required: true,
+                    hasTextEditor: true,
+                },
+                'value',
+                {
+                    global: {},
+                    sections: {},
+                }
+            );
+            expect(value.blocks.length).toBe(1);
+            expect(value.blocks[0].text).toBe('value');
+        });
+
+        test('Text Area with editor as draft', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTAREA,
+                    required: true,
+                    hasTextEditor: true,
+                },
+                {
+                    draft: {
+                        blocks: [
+                            {
+                                key: '0',
+                                text: 'value',
+                                type: 'unstyled',
+                                depth: 0,
+                                inlineStyleRanges: [],
+                                entityRanges: [],
+                                data: {},
+                            },
+                        ],
+                        entityMap: {},
+                    },
+                },
+                {
+                    global: {},
+                    sections: {},
+                }
+            );
+            expect(value.blocks.length).toBe(1);
+            expect(value.blocks[0].text).toBe('value');
+        });
+
+        test('Text Area without editor as string', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTAREA,
+                    required: true,
+                    hasTextEditor: false,
+                },
+                'value',
+                {
+                    global: {},
+                    sections: {},
+                }
+            );
+            expect(value).toBe('value');
+        });
+
+        test('Text Area without editor as draft', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: StepTypes.TEXTAREA,
+                    required: true,
+                    hasTextEditor: false,
+                },
+                {
+                    draft: {
+                        blocks: [
+                            {
+                                key: '0',
+                                text: 'value',
+                                type: 'unstyled',
+                                depth: 0,
+                                inlineStyleRanges: [],
+                                entityRanges: [],
+                                data: {},
+                            },
+                        ],
+                        entityMap: {},
+                    },
+                    text: 'value',
+                },
+                {
+                    global: {},
+                    sections: {},
+                }
+            );
+            expect(value).toBe('value');
+        });
+
+        test('Selector with value as text', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: '',
+                    idSection: 'FIRST',
+                    type: StepTypes.SELECTOR,
+                    required: true,
+                    options: [
+                        {
+                            type: OptionTypes.DEFAULT,
+                            label: 'Option',
+                            value: 'value',
+                        },
+                    ],
+                    searchable: true,
+                    size: 1,
+                },
+                'value',
+                {
+                    global: {},
+                    sections: {},
+                }
+            );
+            expect(value.label).toBe('Option');
+        });
+
+        test('Selector with value as option', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: '',
+                    idSection: 'FIRST',
+                    type: StepTypes.SELECTOR,
+                    required: true,
+                    options: [
+                        {
+                            type: OptionTypes.DEFAULT,
+                            label: 'Option',
+                            value: 'value',
+                        },
+                    ],
+                    searchable: true,
+                    size: 1,
+                },
+                { label: 'Label', value: 'value' },
+                {
+                    global: {},
+                    sections: {},
+                }
+            );
+            expect(value.label).toBe('Label');
+        });
+
+        test('Selector with value as option', async () => {
+            const value = mapOriginalValue(
+                {
+                    id: 'idStep',
+                    label: 'Step',
+                    description: '',
+                    idSection: 'FIRST',
+                    type: StepTypes.CLASSIFIER_SELECTOR,
+                    required: true,
+                    options: {
+                        idClassifier: {
+                            type: ClassifierOptionTypes.NESTED,
+                            idClassifier: '12345',
+                            steps: [],
+                        },
+                    },
+                    idClassifier: '1234',
+                    searchable: true,
+                    size: 1,
+                },
+                '12345',
+                {
+                    global: {},
+                    sections: {},
+                },
+                {
+                    classifiers: {
+                        '1234': {
+                            _id: '1234',
+                            name: 'Parent',
+                            children: ['12345'],
+                        },
+                        '12345': {
+                            _id: '12345',
+                            name: 'Child',
+                            children: [],
+                        },
+                    } as Form['classifiers'],
+                } as Form
+            );
+            expect(value.label).toBe('Child');
+        });
+    });
+
+    describe('calcInitialSections', function () {
+        test('Column with One Section', async () => {
+            const state = calcInitialSections({
+                firstSection: 'FIRST',
+                sections: {
+                    FIRST: {
+                        id: 'FIRST',
+                        name: 'First Section',
+                        nextSection: null,
+                        steps: [],
+                    },
+                } as Form['sections'],
+            } as Form);
+
+            expect(state.previousSections.length).toBe(0);
+            expect(state.nextSections.length).toBe(1);
+            expect(state.idCurrentSection).toBe(null);
+        });
+
+        test('Column with multiple sections', async () => {
+            const state = calcInitialSections({
+                firstSection: 'FIRST',
+                sections: {
+                    FIRST: {
+                        id: 'FIRST',
+                        name: 'First Section',
+                        nextSection: 'SECOND',
+                        steps: [],
+                    },
+                    SECOND: {
+                        id: 'SECOND',
+                        name: 'Second Section',
+                        nextSection: null,
+                        steps: [],
+                    },
+                } as Form['sections'],
+            } as Form);
+
+            expect(state.previousSections.length).toBe(0);
+            expect(state.nextSections.length).toBe(2);
+            expect(state.nextSections[0]).toBe('FIRST');
+            expect(state.nextSections[1]).toBe('SECOND');
+            expect(state.idCurrentSection).toBe(null);
+        });
+
+        test('Stepper Form', async () => {
+            const state = calcInitialSections({
+                type: FormTypes.STEPPER,
+                firstSection: 'FIRST',
+                sections: {
+                    FIRST: {
+                        id: 'FIRST',
+                        name: 'First Section',
+                        nextSection: 'SECOND',
+                        steps: [],
+                    },
+                    SECOND: {
+                        id: 'SECOND',
+                        name: 'Second Section',
+                        nextSection: null,
+                        steps: [],
+                    },
+                } as Form['sections'],
+            } as Form);
+
+            expect(state.previousSections.length).toBe(0);
+            expect(state.nextSections.length).toBe(1);
+            expect(state.nextSections[0]).toBe('SECOND');
+            expect(state.idCurrentSection).toBe('FIRST');
+        });
+    });
+});