@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/OTPInput/OtpInput.spec.cjs

@@ -0,0 +1,638 @@
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.cjs");
+var import_Button = require("../../Button/index.cjs");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_vitest.describe)("OTPInput", () => {
+  (0, import_vitest.describe)("basic rendering", () => {
+    (0, import_vitest.it)("should render with default props", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(6);
+    });
+    (0, import_vitest.it)("should render with custom length", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        length: 6
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(6);
+    });
+    (0, import_vitest.it)("should render with label", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        label: "Enter OTP"
+      }));
+      const labelElement = result.container.querySelector('[role="label"]') || Array.from(result.container.querySelectorAll("*")).find(el => el.textContent?.includes("Enter OTP"));
+      (0, import_vitest.expect)(labelElement).toBeTruthy();
+    });
+    (0, import_vitest.it)("should render with helper text", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        helperText: "Enter the code sent to your phone"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Enter the code sent to your phone")).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("input behavior", () => {
+    (0, import_vitest.it)("should move focus to next input on entry", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        inputs[0].focus();
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      (0, import_vitest.expect)(document.activeElement).toBe(inputs[1]);
+    });
+    (0, import_vitest.it)("should move focus to previous input on backspace", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        inputs[1].focus();
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.keyDown(inputs[1], {
+          key: "Backspace"
+        });
+      });
+      (0, import_vitest.expect)(inputs.length).toBeGreaterThan(0);
+      (0, import_vitest.expect)(inputs[0]).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle paste-like input by filling all digits", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[1], {
+          target: {
+            value: "2"
+          }
+        });
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[2], {
+          target: {
+            value: "3"
+          }
+        });
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[3], {
+          target: {
+            value: "4"
+          }
+        });
+      });
+      await (0, import_react.waitFor)(() => {
+        const updatedInputs = result.container.querySelectorAll("input");
+        (0, import_vitest.expect)(updatedInputs[0]?.value).toBe("1");
+        (0, import_vitest.expect)(updatedInputs[1]?.value).toBe("2");
+        (0, import_vitest.expect)(updatedInputs[2]?.value).toBe("3");
+        (0, import_vitest.expect)(updatedInputs[3]?.value).toBe("4");
+      });
+    });
+    (0, import_vitest.it)("should only accept numeric input when type is number", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        type: "numeric"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "a"
+          }
+        });
+      });
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "5"
+          }
+        });
+      });
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("5");
+    });
+  });
+  (0, import_vitest.describe)("value handling", () => {
+    (0, import_vitest.it)("should handle initial value", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "1234"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("1");
+      (0, import_vitest.expect)(inputs[1]?.value).toBe("2");
+      (0, import_vitest.expect)(inputs[2]?.value).toBe("3");
+      (0, import_vitest.expect)(inputs[3]?.value).toBe("4");
+    });
+    (0, import_vitest.it)("should handle partial value", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "12"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("1");
+      (0, import_vitest.expect)(inputs[1]?.value).toBe("2");
+      (0, import_vitest.expect)(inputs[2]?.value).toBe("");
+      (0, import_vitest.expect)(inputs[3]?.value).toBe("");
+    });
+    (0, import_vitest.it)("should handle onChange callback", async () => {
+      const onChange = import_vitest.vi.fn();
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        onChange
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      (0, import_vitest.expect)(onChange).toHaveBeenCalledWith("1");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[1], {
+          target: {
+            value: "2"
+          }
+        });
+      });
+      (0, import_vitest.expect)(onChange).toHaveBeenCalledWith("12");
+    });
+    (0, import_vitest.it)("should handle onComplete callback", async () => {
+      const onComplete = import_vitest.vi.fn();
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        length: 4,
+        onComplete
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[1], {
+          target: {
+            value: "2"
+          }
+        });
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[2], {
+          target: {
+            value: "3"
+          }
+        });
+      });
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[3], {
+          target: {
+            value: "4"
+          }
+        });
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onComplete).toHaveBeenCalledWith("1234");
+      });
+    });
+    (0, import_vitest.it)("should clear value with clearable prop", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "1234",
+        clearable: true
+      }));
+      const clearButton = result.container.querySelector('[aria-label="Clear"]');
+      (0, import_vitest.expect)(clearButton).toBeTruthy();
+      if (clearButton) {
+        await (0, import_react.act)(async () => {
+          import_react.fireEvent.click(clearButton);
+        });
+      }
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("");
+      (0, import_vitest.expect)(inputs[1]?.value).toBe("");
+      (0, import_vitest.expect)(inputs[2]?.value).toBe("");
+      (0, import_vitest.expect)(inputs[3]?.value).toBe("");
+    });
+  });
+  (0, import_vitest.describe)("styling and theming", () => {
+    (0, import_vitest.it)("should apply custom separator", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        separator: "-"
+      }));
+      const separators = Array.from(result.container.querySelectorAll("*")).filter(el => el.textContent === "-");
+      (0, import_vitest.expect)(separators.length).toBeGreaterThan(0);
+    });
+  });
+  (0, import_vitest.describe)("form integration", () => {
+    (0, import_vitest.describe)("with form context", () => {
+      (0, import_vitest.it)("should handle value prop", () => {
+        const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+          formOptions: {
+            defaultValues: {
+              otp: ""
+            }
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+            name: "otp",
+            value: "5678"
+          })
+        }));
+        const inputs = result.container.querySelectorAll("input");
+        (0, import_vitest.expect)(inputs[0]?.value).toBe("5");
+        (0, import_vitest.expect)(inputs[1]?.value).toBe("6");
+        (0, import_vitest.expect)(inputs[2]?.value).toBe("7");
+        (0, import_vitest.expect)(inputs[3]?.value).toBe("8");
+      });
+      (0, import_vitest.it)("should update form value", async () => {
+        const onSubmit = import_vitest.vi.fn();
+        const FormExample = () => {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+            formOptions: {
+              defaultValues: {
+                otp: ""
+              }
+            },
+            onSubmit: async value => {
+              await onSubmit(value);
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+              name: "otp"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              action: "submit",
+              children: "Submit"
+            })]
+          });
+        };
+        const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {}));
+        const inputs = result.container.querySelectorAll("input");
+        await (0, import_react.act)(async () => {
+          import_react.fireEvent.change(inputs[0], {
+            target: {
+              value: "1"
+            }
+          });
+          import_react.fireEvent.change(inputs[1], {
+            target: {
+              value: "2"
+            }
+          });
+          import_react.fireEvent.change(inputs[2], {
+            target: {
+              value: "3"
+            }
+          });
+          import_react.fireEvent.change(inputs[3], {
+            target: {
+              value: "4"
+            }
+          });
+        });
+        const submitButton = result.getSubmitButton();
+        if (submitButton) {
+          await (0, import_react.act)(async () => {
+            import_react.fireEvent.click(submitButton);
+          });
+        }
+        await (0, import_react.waitFor)(() => {
+          (0, import_vitest.expect)(onSubmit).toHaveBeenCalledWith({
+            otp: "1234"
+          });
+        });
+      });
+      (0, import_vitest.it)("should handle partial input and submit", async () => {
+        const onSubmit = import_vitest.vi.fn();
+        const FormExample = () => {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+            formOptions: {
+              defaultValues: {
+                otp: "1234"
+              }
+            },
+            onSubmit: async value => {
+              await onSubmit(value);
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+              name: "otp"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              action: "submit",
+              children: "Submit"
+            })]
+          });
+        };
+        const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {}));
+        const inputs = result.container.querySelectorAll("input");
+        await (0, import_react.act)(async () => {
+          import_react.fireEvent.change(inputs[4], {
+            target: {
+              value: "5"
+            }
+          });
+          import_react.fireEvent.change(inputs[5], {
+            target: {
+              value: "6"
+            }
+          });
+        });
+        const submitButton = result.getSubmitButton();
+        if (submitButton) {
+          await (0, import_react.act)(async () => {
+            import_react.fireEvent.click(submitButton);
+          });
+        }
+        await (0, import_react.waitFor)(() => {
+          (0, import_vitest.expect)(onSubmit).toHaveBeenCalledWith({
+            otp: "123456"
+          });
+        });
+      });
+    });
+    (0, import_vitest.describe)("with useForm hook", () => {
+      (0, import_vitest.it)("should work with useForm", async () => {
+        const onSubmitMock = import_vitest.vi.fn();
+        const TestComponent = () => {
+          const form = (0, import_react_form.useForm)({
+            defaultValues: {
+              verificationCode: "654321"
+            },
+            onSubmit: async ({
+              value
+            }) => {
+              onSubmitMock(value);
+            }
+          });
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+            form,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+              label: "Verification Code",
+              name: "verificationCode",
+              length: 6
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              action: "submit",
+              children: "Verify"
+            })]
+          });
+        };
+        const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+        const submitButton = result.getSubmitButton();
+        (0, import_vitest.expect)(submitButton?.textContent).toContain("Verify");
+        if (submitButton) {
+          await (0, import_react.act)(async () => {
+            import_react.fireEvent.click(submitButton);
+          });
+        }
+        await (0, import_react.waitFor)(() => {
+          (0, import_vitest.expect)(onSubmitMock).toHaveBeenCalledWith({
+            verificationCode: "654321"
+          });
+        });
+      });
+    });
+  });
+  (0, import_vitest.describe)("field integration", () => {
+    (0, import_vitest.it)("should handle field with no errors", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_test_utils.TestProviders, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+          name: "otp"
+        })
+      }));
+      const errorElement = result.container.querySelector('[role="alert"]');
+      (0, import_vitest.expect)(errorElement).toBeFalsy();
+    });
+    (0, import_vitest.it)("should handle field with errors", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_test_utils.TestProviders, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+          name: "otp",
+          error: "Invalid OTP"
+        })
+      }));
+      const errorEl = result.findTextElement("Invalid OTP");
+      (0, import_vitest.expect)(errorEl !== void 0 || result.container.querySelectorAll("input").length > 0).toBe(true);
+    });
+  });
+  (0, import_vitest.describe)("input types", () => {
+    (0, import_vitest.it)("should accept alphanumeric characters when type is alphanumeric", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        type: "alphanumeric"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "A"
+          }
+        });
+      });
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("A");
+    });
+  });
+  (0, import_vitest.describe)("accessibility", () => {
+    (0, import_vitest.it)("should have proper ARIA attributes", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        label: "Verification Code",
+        required: true
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBeGreaterThan(0);
+      const withRequired = Array.from(inputs).filter(input => input.getAttribute("aria-required") === "true" || input.hasAttribute("required"));
+      (0, import_vitest.expect)(withRequired.length).toBeGreaterThanOrEqual(0);
+    });
+    (0, import_vitest.it)("should handle keyboard navigation", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        inputs[0].focus();
+        import_react.fireEvent.keyDown(inputs[0], {
+          key: "Tab"
+        });
+      });
+      await (0, import_react.act)(async () => {
+        inputs[1].focus();
+        import_react.fireEvent.keyDown(inputs[1], {
+          key: "ArrowLeft"
+        });
+      });
+      (0, import_vitest.expect)(inputs.length).toBeGreaterThan(0);
+      (0, import_vitest.expect)(document.activeElement === inputs[0] || document.activeElement === inputs[1]).toBe(true);
+    });
+  });
+  (0, import_vitest.describe)("edge cases", () => {
+    (0, import_vitest.it)("should handle very long initial value", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        value: "123456789",
+        length: 4
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("1");
+      (0, import_vitest.expect)(inputs[1]?.value).toBe("2");
+      (0, import_vitest.expect)(inputs[2]?.value).toBe("3");
+      (0, import_vitest.expect)(inputs[3]?.value).toBe("4");
+    });
+    (0, import_vitest.it)("should handle empty onChange", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+      });
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("1");
+    });
+    (0, import_vitest.it)("should handle rapid input changes", async () => {
+      const onChange = import_vitest.vi.fn();
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        onChange
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "1"
+          }
+        });
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "2"
+          }
+        });
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "3"
+          }
+        });
+      });
+      (0, import_vitest.expect)(onChange).toHaveBeenCalled();
+    });
+    (0, import_vitest.it)("should handle special characters", async () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        type: "alphanumeric"
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        import_react.fireEvent.change(inputs[0], {
+          target: {
+            value: "@"
+          }
+        });
+      });
+      (0, import_vitest.expect)(inputs[0]?.value).toBe("");
+    });
+  });
+  (0, import_vitest.describe)("disabled state", () => {
+    (0, import_vitest.it)("should handle disabled prop", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        disabled: true
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      inputs.forEach(input => {
+        const isDisabled = input.hasAttribute("disabled") || input.getAttribute("aria-disabled") === "true";
+        (0, import_vitest.expect)(isDisabled).toBeTruthy();
+      });
+    });
+  });
+  (0, import_vitest.describe)("form validation", () => {
+    (0, import_vitest.it)("should show error state", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        error: "Code is required"
+      }));
+      const errorElement = Array.from(result.container.querySelectorAll("*")).find(el => el.textContent?.includes("Code is required"));
+      (0, import_vitest.expect)(errorElement).toBeTruthy();
+    });
+    (0, import_vitest.it)("should show required indicator", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        label: "Code",
+        required: true
+      }));
+      const labelElement = Array.from(result.container.querySelectorAll("*")).find(el => el.textContent?.includes("Code") && el.textContent?.includes("*"));
+      (0, import_vitest.expect)(labelElement).toBeTruthy();
+    });
+  });
+  (0, import_vitest.describe)("performance", () => {
+    (0, import_vitest.it)("should handle large length efficiently", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        length: 10
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(10);
+    });
+    (0, import_vitest.it)("should debounce onChange calls", async () => {
+      const onChange = import_vitest.vi.fn();
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+        name: "otp",
+        onChange
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      await (0, import_react.act)(async () => {
+        for (let i = 0; i < 10; i++) {
+          import_react.fireEvent.change(inputs[0], {
+            target: {
+              value: String(i)
+            }
+          });
+        }
+      });
+      (0, import_vitest.expect)(onChange.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+  (0, import_vitest.describe)("responsive behavior", () => {
+    (0, import_vitest.it)("should render all digits in small container", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          width: 220
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.OTPInput, {
+          name: "otp",
+          length: 6
+        })
+      }));
+      const inputs = result.container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(6);
+    });
+  });
+});