unit tests updated

CianciarusoCataldo · Jan 31, 2024 · 90593d0 · 90593d0
1 parent a1ecfc3
commit 90593d0
Show file tree

Hide file tree

Showing 37 changed files with 333 additions and 106 deletions.
diff --git a/docs-gen/components/organisms/DatePicker/mbx-settings.json b/docs-gen/components/organisms/DatePicker/mbx-settings.json
@@ -3,5 +3,11 @@
   "description": "",
   "see": [],
   "examples": [],
-  "extend": { "component": { "type": "organisms", "name": "Calendar" } }
+  "extend": {
+    "component": { "type": "organisms", "name": "Calendar" },
+    "group": {
+      "ClosableComponent": {},
+      "ComponentWithCallback": { "type": "number" }
+    }
+  }
 }
diff --git a/src/components/atoms/Counter/index.ts b/src/components/atoms/Counter/index.ts
@@ -2,11 +2,7 @@ import "./styles.css";
 
 import { CounterComponent } from "../../../types";
 
-import {
-  buildMbxReactiveComponent,
-  buildMobrixUiReactiveComponent,
-  parseCommonProps,
-} from "../../../tools";
+import { buildMbxReactiveComponent } from "../../../tools";
 
 /**
  *
@@ -44,6 +40,7 @@ import {
  * @copyright 2023 Cataldo Cianciaruso
  */
 const Counter: CounterComponent = ({
+  /* istanbul ignore next */
   onChange = () => {},
   value: inputValue,
   placeholder,
@@ -59,7 +56,7 @@ const Counter: CounterComponent = ({
       wrapper: "input",
       name: "counterbox",
       inputValue,
-      defaultValue: undefined,
+      defaultValue: 0,
       props: (value, setValue) => ({
         additionalProps: {
           ...additionalProps,
@@ -71,9 +68,9 @@ const Counter: CounterComponent = ({
           max,
           min,
           onChange: (e) => {
-            if (!readOnly) {
-              onChange(Number(e.target.value));
-              setValue(Number(e.target.value));
+            if (!readOnly && !parsedCommonProps.disabled) {
+              onChange(e.target.value);
+              setValue(e.target.value);
             }
           },
         },

diff --git a/src/components/atoms/Input/index.ts b/src/components/atoms/Input/index.ts
@@ -38,6 +38,7 @@ import { buildMbxReactiveComponent } from "../../../tools";
  * @copyright 2023 Cataldo Cianciaruso
  */
 const Input: InputComponent = ({
+  /* istanbul ignore next */
   onChange = () => {},
   value: inputValue,
   placeholder,
@@ -65,11 +66,14 @@ const Input: InputComponent = ({
           type: "text",
           value,
           placeholder,
-          disabled: commonProps.disabled,
-          readOnly: readOnly || commonProps.disabled,
+          disabled: parsedCommonProps.disabled,
+          readOnly: readOnly || parsedCommonProps.disabled,
           onChange: (e) => {
-            const newValue = e.target.value ? e.target.value : "";
-            setValue(newValue);
+            if (!readOnly && !parsedCommonProps.disabled) {
+              const newValue = e.target.value ? e.target.value : "";
+              onChange(newValue);
+              setValue(newValue);
+            }
           },
         },
       }),

diff --git a/src/components/atoms/Rater/component.tsx b/src/components/atoms/Rater/component.tsx
@@ -9,6 +9,7 @@ const RaterComponent: MobrixUiReactiveComponent<number, RaterProps> = ({
   type = "star",
   max,
   readonly,
+  /* istanbul ignore next */
   onChange = () => {},
   value: actualValue,
   setValue,
@@ -58,7 +59,7 @@ const RaterComponent: MobrixUiReactiveComponent<number, RaterProps> = ({
         })}
       >
         {ICONS[type][iconToShow]}
-      </IconButton>,
+      </IconButton>
     );
   }
 

diff --git a/src/components/atoms/Slider/index.ts b/src/components/atoms/Slider/index.ts
@@ -39,12 +39,13 @@ import { buildMbxReactiveComponent } from "../../../tools";
  * @copyright 2023 Cataldo Cianciaruso
  */
 const Slider: SliderComponent = ({
+  /* istanbul ignore next */
   onChange = () => {},
   value: inputValue,
   min,
   max,
   readOnly,
-  additionalProps = {},
+  additionalProps,
   ...commonProps
 }) =>
   buildMbxReactiveComponent<number>(commonProps, (parsedProps) => ({
@@ -54,14 +55,12 @@ const Slider: SliderComponent = ({
     defaultValue: 0,
     wrapper: "input",
     props: (value, setValue) => {
-      const callback =
-        parsedProps.disabled && !readOnly
-          ? (e: any) => {
-              onChange(e.target.value);
-              setValue(e.target.value);
-            }
-          : () => {};
-
+      const callback = (e: any) => {
+        if (parsedProps.disabled && !readOnly) {
+          onChange(e.target.value);
+          setValue(e.target.value);
+        }
+      };
       return {
         additionalProps: {
           ...additionalProps,

diff --git a/src/components/molecules/DismissableCard/component.tsx b/src/components/molecules/DismissableCard/component.tsx
@@ -21,6 +21,7 @@ const DismissableCardComponent: MobrixUiReactiveComponent<
   footer,
   header,
   dark,
+  /* istanbul ignore next */
   onClose = () => {},
   alwaysVisible,
   disabled,

diff --git a/src/components/molecules/FormField/component.tsx b/src/components/molecules/FormField/component.tsx
@@ -12,7 +12,8 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
 > = ({
   value,
   setValue,
-  type,
+  type = "text",
+  /* istanbul ignore next */
   onChange = (newvalue: any) => {},
   placeholder,
   required,
@@ -26,13 +27,14 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
   animated,
   disabled,
 }) => {
-  const [error, setError] = useState(false);
+  const isError = (required && !value) || !validate(value);
+  const [error, setError] = useState(isError);
   const [animate, setAnimated] = useState(false);
 
   useEffect(() => {
-    if (validate(value) && !required) {
+    if (validate(value) && !required && !value) {
       setError(false);
-    } else if (required && !value) {
+    } else if ((required && !value) || !validate(value)) {
       setError(true);
     }
   }, [required]);
@@ -53,7 +55,7 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
         dark={!dark}
       >
         {header}
-      </Container>,
+      </Container>
     );
   }
 
@@ -68,7 +70,8 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
       additionalProps={{
         "data-mbx-class": "form-field-component",
         "data-mbx-form-field-error": error,
-        ...(animate && {
+        .../* istanbul ignore next */
+        (animate && {
           ...{
             "data-mbx-animation": "shake",
           },
@@ -80,6 +83,7 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
       dark={dark}
       background={background}
       onKeyDown={(e) => {
+        /* istanbul ignore next */
         if (e.code === "Enter" && error) {
           setAnimated(true);
           setTimeout(() => {
@@ -90,17 +94,17 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
       onChange={(newValue) => {
         const formattedValue = fieldFormatters[type].format(newValue);
 
-        if (!validate(formattedValue) || (required && !formattedValue)) {
+        if (!validate(formattedValue) || (required && !newValue)) {
           setError(true);
-        } else if (error) {
+        } else {
           setError(false);
         }
 
         onChange(formattedValue);
 
         setValue(formattedValue);
       }}
-    />,
+    />
   );
 
   components.push(
@@ -115,7 +119,7 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
       key="form_field_error_box"
     >
       {errorLabel}
-    </Container>,
+    </Container>
   );
 
   return components;

diff --git a/src/components/molecules/FormField/utils.ts b/src/components/molecules/FormField/utils.ts
@@ -11,7 +11,7 @@ import {
 /* istanbul ignore next */
 export const valueFormatters = {
   text: (value: any) => {
-    const result = String(value);
+    const result = value ? String(value) : "";
     if (result.length < 1) {
       return "";
     } else {

diff --git a/src/components/molecules/Modal/component.tsx b/src/components/molecules/Modal/component.tsx
@@ -24,8 +24,6 @@ const modalComponent: MoBrixUiComponent<ModalProps, BuilderComponent> = ({
   const onFocusLostCallback = () => {
     if (!hide) {
       onFocusLost();
-      console.log("onFocusLost");
-
       closeOutside && onClose();
     }
   };

diff --git a/src/components/molecules/Modal/index.ts b/src/components/molecules/Modal/index.ts
@@ -42,6 +42,7 @@ const Modal: ModalComponent = ({
   children,
   closeOutside,
   additionalProps = {},
+  /* istanbul ignore next */
   onClose = () => {},
   hide,
   ...commonProps
@@ -50,6 +51,7 @@ const Modal: ModalComponent = ({
 
   const onCloseCallback = () => {
     setValue("ease-out");
+    /* istanbul ignore next */
     setTimeout(() => {
       setValue("");
       onClose();

diff --git a/src/components/molecules/Table/component.tsx b/src/components/molecules/Table/component.tsx
@@ -53,6 +53,9 @@ const tableComponent: MoBrixUiComponent<TableProps, JSX.Element> = ({
                 key={`element_${rowIndex}_${index}`}
                 align="center"
                 onClick={() => onClick(rowIndex, index)}
+                {...{
+                  "data-mbx-test": `cell_${rowIndex}_${index}`,
+                }}
                 {...wrappers[rowIndex].cellProps}
                 {...propsCallback(rowIndex, index)}
               >

diff --git a/src/components/organisms/Calendar/component.tsx b/src/components/organisms/Calendar/component.tsx
@@ -164,6 +164,9 @@ const CalendarComponent: MobrixUiReactiveComponent<
               : {};
 
           return {
+            ...(basicMatrix[row - 1][column] > 0 && {
+              "data-mbx-calendar-day": basicMatrix[row - 1][column],
+            }),
             "data-mbx-calendar-today":
               fromToday &&
               basicMatrix[row - 1][column] === todayDate.dayOfTheMonth &&

diff --git a/src/components/organisms/DatePicker/components.tsx b/src/components/organisms/DatePicker/components.tsx
@@ -21,7 +21,6 @@ const DatePickerInternalComponent: MobrixUiReactiveComponent<
   CalendarDate,
   DatePickerProps & { today: CalendarDate & { dayOfTheMonth: number } }
 > = ({
-  onChange,
   setValue,
   today: todayDate,
   value,
@@ -35,7 +34,9 @@ const DatePickerInternalComponent: MobrixUiReactiveComponent<
   onViewChange,
   animated,
   disabled,
-  calendarProps = {},
+  calendarProps,
+  onChange,
+  onClose,
   ...commonProps
 }) => {
   const [isVisible, setVisible] = React.useState<boolean>(false);
@@ -56,7 +57,10 @@ const DatePickerInternalComponent: MobrixUiReactiveComponent<
       : todayDate.dayOfTheMonth;
 
   /* istanbul ignore next */
-  const calendarFocusCallback = () => !commonProps.hide && setVisible(false);
+  const onCloseCallback = () => {
+    onClose();
+    setVisible(false);
+  };
 
   const DateLabel = ({ children }) => (
     <Label
@@ -76,6 +80,9 @@ const DatePickerInternalComponent: MobrixUiReactiveComponent<
       <DateLabel>{String(year)}</DateLabel>
     </div>,
     <IconButton
+      additionalProps={{
+        "data-mbx-test": "calendar-button",
+      }}
       disabled={disabled}
       dark={commonProps.dark}
       onClick={() => setVisible(true)}
@@ -88,7 +95,7 @@ const DatePickerInternalComponent: MobrixUiReactiveComponent<
       hide={!isVisible}
       key="date_picker_modal"
       animated={animated}
-      onClose={() => setVisible(false)}
+      onClose={onCloseCallback}
       additionalProps={{
         "data-mbx-class": "date-picker-modal",
       }}
@@ -105,7 +112,7 @@ const DatePickerInternalComponent: MobrixUiReactiveComponent<
         dayLabel={dayLabel}
         value={{ day, month, year }}
         onChange={(date) => {
-          onChange && onChange(date);
+          onChange(date);
           setValue(date);
         }}
         dark={commonProps.dark}

diff --git a/src/components/organisms/DatePicker/index.ts b/src/components/organisms/DatePicker/index.ts
@@ -38,7 +38,10 @@ import { buildMbxReactiveComponent } from "../../../tools";
  * @copyright 2023 Cataldo Cianciaruso
  */
 const DatePicker: DatePickerComponent = ({
-  onChange,
+  /* istanbul ignore next */
+  onClose = () => {},
+  /* istanbul ignore next */
+  onChange = () => {},
   value: inputValue,
   months,
   days,
@@ -48,8 +51,10 @@ const DatePicker: DatePickerComponent = ({
   fromToday,
   dayLabel,
   onViewChange,
-  calendarProps,
+  calendarProps = {},
   additionalProps,
+  labelClassName,
+  labelProps,
   ...commonProps
 }) => {
   const todayDate = today();
@@ -72,6 +77,7 @@ const DatePicker: DatePickerComponent = ({
         dayLabel,
         onViewChange,
         calendarProps,
+        onClose,
         ...props,
       }),
     inputValue,