@arquimedes.co/eureka-forms 2.0.99 → 3.0.1-refactor

package/dist/App/AppFunctions.test.js

@@ -0,0 +1,638 @@
+/* eslint-disable @typescript-eslint/require-await */
+import { describe, expect, test } from 'vitest';
+import { calcRecursiveData } from '../Utils/FormStepFunctions';
+import FormStepTypes, { ClassifierOptionTypes, FormTypes, MapperStyleTypes, OptionTypes, } from '../constants/FormStepTypes';
+import { addMapperStep, calcInitialSections, calcValuesStore, mapOriginalValue } from './AppFunctions';
+const OrgInfo = {
+    idOrganization: '',
+    countryCode: 'CO',
+};
+//Hacer una prueba para validar que no haya quemado nada!
+describe('AppFunctions', function () {
+    describe('calcValuesStore', function () {
+        const baseForm = {
+            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 = await calcValuesStore(OrgInfo, baseForm);
+            expect(Object.keys(values).length).toBe(2);
+        });
+        test('Original values ', async () => {
+            const values = await calcValuesStore(OrgInfo, baseForm, {
+                idStep: 'value',
+            });
+            expect(Object.keys(values.global).length).toBe(1);
+        });
+        test('Step with value', async () => {
+            const values = await calcValuesStore(OrgInfo, {
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.TEXTINPUT,
+                        required: true,
+                        size: 1,
+                    },
+                },
+            }, {
+                idStep: 'value',
+            });
+            expect(Object.keys(values.sections.FIRST).length).toBe(1);
+        });
+        test('Step without value', async () => {
+            const values = await calcValuesStore(OrgInfo, {
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.TEXTINPUT,
+                        required: true,
+                        size: 1,
+                    },
+                },
+            });
+            expect(values.sections.FIRST).toBeUndefined();
+        });
+        test('Empty initial Mapper Step', async () => {
+            const values = await calcValuesStore(OrgInfo, {
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.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 = await calcValuesStore(OrgInfo, {
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.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 = await calcValuesStore(OrgInfo, {
+                ...baseForm,
+                steps: {
+                    idStep: {
+                        id: 'idStep',
+                        label: 'Step',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.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;
+            const elements = originalValue.elements;
+            expect(elements.length).toBe(1);
+            const element = elements[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: FormStepTypes.MAPPER,
+                required: true,
+                addBtnLabel: 'Add',
+                rootSteps: ['idSubStep', 'idSubMapperStep'],
+                steps: {
+                    idSubStep: {
+                        id: 'idSubStep',
+                        label: 'SubStep',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.TEXTINPUT,
+                        required: true,
+                        size: 1,
+                    },
+                    idSubMapperStep: {
+                        id: 'idSubMapperStep',
+                        label: 'SubStep',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.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 = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: FormStepTypes.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 = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: FormStepTypes.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 = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: FormStepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                },
+                'idSubStep2-idElement': {
+                    id: 'idSubStep2-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: FormStepTypes.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 = {
+                'idSubStep-idElement': {
+                    id: 'idSubStep-idElement',
+                    label: 'SubStep',
+                    description: '',
+                    idSection: 'FIRST',
+                    type: FormStepTypes.SELECTOR,
+                    required: true,
+                    size: 1,
+                    options: [
+                        {
+                            type: OptionTypes.NESTED,
+                            label: 'Option',
+                            steps: ['idSubStep2-idElement'],
+                            value: 'value',
+                        },
+                    ],
+                    searchable: true,
+                },
+                'idSubStep2-idElement': {
+                    id: 'idSubStep2-idElement',
+                    label: 'SubStep',
+                    description: null,
+                    idSection: 'FIRST',
+                    type: FormStepTypes.TEXTINPUT,
+                    required: true,
+                    size: 1,
+                },
+            };
+            calcRecursiveData(element, newSteps, {});
+            expect(newSteps['idSubStep-idElement'].dependencies).toBeUndefined();
+            expect(newSteps['idSubStep-idElement'].options[0].steps[0]).toBe('idSubStep2-idElement');
+        });
+    });
+    describe('mapOriginalValue', function () {
+        test('No Value', async () => {
+            const values = {
+                global: {},
+                sections: {},
+            };
+            const value = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: null,
+                idSection: 'FIRST',
+                type: FormStepTypes.TEXTINPUT,
+                required: true,
+                size: 1,
+            }, undefined, values);
+            expect(value).toBeUndefined();
+        });
+        test('Mapper Step', async () => {
+            const values = {
+                global: {},
+                sections: {},
+            };
+            const value = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: null,
+                idSection: 'FIRST',
+                type: FormStepTypes.MAPPER,
+                required: true,
+                addBtnLabel: 'Add',
+                rootSteps: ['idSubStep'],
+                steps: {
+                    idSubStep: {
+                        id: 'idSubStep',
+                        label: 'SubStep',
+                        description: null,
+                        idSection: 'FIRST',
+                        type: FormStepTypes.TEXTINPUT,
+                        required: true,
+                        size: 1,
+                    },
+                },
+                style: { type: MapperStyleTypes.PILL },
+                unitLabel: 'Elemento',
+            }, [
+                {
+                    idSubStep: 'value',
+                },
+            ], values);
+            expect(value.elements.length).toBe(1);
+            expect(values.sections.FIRST.idStep).toBeUndefined();
+            expect(values.sections.FIRST[value.elements[0].ids.idSubStep]).toBe('value');
+        });
+        test('Text Area with editor as string', async () => {
+            const value = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: null,
+                idSection: 'FIRST',
+                type: FormStepTypes.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 = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: null,
+                idSection: 'FIRST',
+                type: FormStepTypes.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 = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: null,
+                idSection: 'FIRST',
+                type: FormStepTypes.TEXTAREA,
+                required: true,
+                hasTextEditor: false,
+            }, 'value', {
+                global: {},
+                sections: {},
+            });
+            expect(value).toBe('value');
+        });
+        test('Text Area without editor as draft', async () => {
+            const value = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: null,
+                idSection: 'FIRST',
+                type: FormStepTypes.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 = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: '',
+                idSection: 'FIRST',
+                type: FormStepTypes.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 = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: '',
+                idSection: 'FIRST',
+                type: FormStepTypes.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 = await mapOriginalValue(OrgInfo, {
+                id: 'idStep',
+                label: 'Step',
+                description: '',
+                idSection: 'FIRST',
+                type: FormStepTypes.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: [],
+                    },
+                },
+            });
+            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: [],
+                    },
+                },
+            });
+            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: [],
+                    },
+                },
+            });
+            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: [],
+                    },
+                },
+            });
+            expect(state.previousSections.length).toBe(0);
+            expect(state.nextSections.length).toBe(1);
+            expect(state.nextSections[0]).toBe('SECOND');
+            expect(state.idCurrentSection).toBe('FIRST');
+        });
+    });
+});

package/dist/App/AppHooks.d.ts

@@ -1,10 +1,10 @@
 import { Form, Organization } from '../@Types';
 import { AppProps } from './App';
 import { Branding } from '../@Types/Branding';
-export declare const useSetupApp: (isEmbedded: boolean, { preview, internal, postview, partial, editable, handleConfirmed, customSteps, valuesData, apiKey, formData, classifiers, ...others }: Omit<AppProps, 'isWidget'>) => {
+export declare const useSetupApp: (isEmbedded: boolean, { preview, internal, postview, partial, editable, handleConfirmed, customSteps, valuesData, apiKey, formData, classifiers, ...others }: Omit<AppProps, "isWidget">) => {
     form: Form | undefined | null;
     organization: Organization | undefined | null;
     branding: Branding | undefined;
     reload: () => void;
 };
-export declare const useLogRocket: (organization: Organization | null | undefined, form: Form | null | undefined, { apiKey, internal, postview, preview, }: Pick<AppProps, 'apiKey' | 'internal' | 'postview' | 'preview'>) => void;
+export declare const useLogRocket: (organization: Organization | null | undefined, form: Form | null | undefined, { apiKey, internal, postview, preview }: Pick<AppProps, "apiKey" | "internal" | "postview" | "preview">) => void;