@arquimedes.co/eureka-forms 3.0.51-test → 3.0.52-test

package/dist/FormSteps/DatePickerStep/DatePickerStep.required.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormSteps/DatePickerStep/DatePickerStep.required.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { useForm, FormProvider } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import { IdFormContext } from '../../Contexts/FormContext';
+import FormContext from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import DatePickerStep from './DatePickerStep';
+const STORY_FORM_ID = 'STORY_FORM';
+const requiredDateStep = {
+    id: 'datepicker-step',
+    idSection: 'SECTION_1',
+    stepPath: ['datepicker-step'],
+    type: FormStepTypes.DATEPICKER,
+    label: 'Fecha de nacimiento',
+    description: null,
+    required: true,
+    pickTime: false,
+    size: 4,
+    editable: true,
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: [], nextSection: null },
+    },
+    steps: { 'datepicker-step': { ...requiredDateStep } },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore() {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: { forms: { [STORY_FORM_ID]: defaultRootState } },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ onValid, pickTime, required = true, onReady, }) {
+    const methods = useForm({ mode: 'onTouched' });
+    const step = { ...requiredDateStep, required, pickTime: !!pickTime };
+    useEffect(() => {
+        onReady?.(methods);
+    }, [methods, onReady]);
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsxs("form", { onSubmit: (e) => void methods.handleSubmit(onValid)(e), children: [_jsx(DatePickerStep, { step: step, editable: true }), _jsx("button", { type: "submit", children: "Enviar" })] }) }) }) }) }) }) }));
+}
+describe('DatePickerStep required validation', () => {
+    it('does not leak a defaultValue Date into the form value on mount', () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), onReady: (m) => (methods = m) }));
+        expect(methods?.getValues('datepicker-step') ?? null).toBeNull();
+    });
+    it('blocks submit and shows the obligatorio error when a required date is left empty (handleSubmit)', async () => {
+        const onValid = vi.fn();
+        render(_jsx(Harness, { onValid: onValid }));
+        await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));
+        await waitFor(() => {
+            expect(screen.getByText('Este campo es obligatorio')).toBeInTheDocument();
+        });
+        expect(onValid).not.toHaveBeenCalled();
+    });
+    it('reports invalid via trigger() like the real ColumnForm submit path', async () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), onReady: (m) => (methods = m) }));
+        const valid = await methods.trigger(undefined, { shouldFocus: true });
+        expect(valid).toBe(false);
+    });
+    it('pickTime required: trigger() reports invalid when empty', async () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), pickTime: true, onReady: (m) => (methods = m) }));
+        const valid = await methods.trigger(undefined, { shouldFocus: true });
+        expect(valid).toBe(false);
+    });
+    it('control: a NON-required empty date submits (proves the required flag is the deciding factor)', async () => {
+        const onValid = vi.fn();
+        render(_jsx(Harness, { onValid: onValid, required: false }));
+        await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));
+        await waitFor(() => {
+            expect(onValid).toHaveBeenCalledTimes(1);
+        });
+        expect(screen.queryByText('Este campo es obligatorio')).not.toBeInTheDocument();
+    });
+});

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -170,13 +170,8 @@ function CustomPickerField({ error, required, helperText, size = 'small', labelM
 function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, inputRef, label, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
-    // MUI X v9 no longer forwards `required` to the field-slot label when the field is a Material
-    // TextField (the legacy `slots.field` shape used here), so the required asterisk never renders.
-    // The picker's `label` does propagate to the field via the picker context, so bake the marker
-    // into the label to keep the required indicator visible.
-    const displayLabel = required && typeof label === 'string' ? `${label} *` : label;
     if (pickTime) {
-        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: displayLabel, disabled: disabled, readOnly: readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
+        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },
@@ -236,7 +231,7 @@ orientation: _orientation, ...others }) {
             } }));
     }
     else {
-        return (_jsx(StyledDatePicker, { ...others, label: displayLabel, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },

package/dist/Shared/ErkDatePicker/ErkDatePicker.required.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Shared/ErkDatePicker/ErkDatePicker.required.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ErkDatePicker from './ErkDatePicker';
+/**
+ * Guards the MUI X v9 regression fix: a `required` date picker must never inject a
+ * default value (today's date) into the field. Doing so silently satisfies the
+ * required constraint, so an untouched "required" date behaves as if it were filled.
+ */
+describe('ErkDatePicker required behaviour', () => {
+    it('does not pre-fill today into a required field (no value provided)', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { required: true, label: "Fecha", onChange: vi.fn() }) }));
+        const input = document.querySelector('input');
+        expect(input?.value).toBe('');
+    });
+    it('does not pre-fill today into a required date-time field', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { required: true, pickTime: true, label: "Fecha y hora", onChange: vi.fn() }) }));
+        const input = document.querySelector('input');
+        expect(input?.value).toBe('');
+    });
+    it('renders exactly one required asterisk (no duplicate from a manual marker)', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { required: true, label: "Fecha", value: null, onChange: vi.fn() }) }));
+        const label = document.querySelector('label')?.textContent ?? '';
+        const asterisks = (label.match(/\*/g) ?? []).length;
+        expect(asterisks).toBe(1);
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.51-test",
+  "version":"3.0.52-test",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",