@tamagui/react-native-web-lite 1.112.5

package/dist/esm/TextInput/__tests__/index-test.native.js

@@ -0,0 +1,703 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { createEventTarget } from "dom-event-testing-library";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import TextInput from "..";
+function findInput(container) {
+  return container.querySelector("input");
+}
+function findTextArea(container) {
+  return container.querySelector("textarea");
+}
+var testIfDocumentIsFocused = function (message, fn) {
+  document.hasFocus && document.hasFocus() ? test(message, fn) : test.skip(`${message} \u2013 document is not focused`, function () {});
+};
+function createEvent(type) {
+  var data = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {},
+    event = document.createEvent("CustomEvent");
+  return event.initCustomEvent(type, !0, !0), data != null && Object.keys(data).forEach(function (key) {
+    var value = data[key];
+    key === "timeStamp" && !value || Object.defineProperty(event, key, {
+      value
+    });
+  }), event;
+}
+function createKeyboardEvent(type) {
+  var {
+    altKey = !1,
+    ctrlKey = !1,
+    isComposing = !1,
+    key = "",
+    keyCode = 0,
+    metaKey = !1,
+    preventDefault = function () {},
+    shiftKey = !1
+  } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  return createEvent(type, {
+    altKey,
+    ctrlKey,
+    isComposing,
+    key,
+    keyCode,
+    metaKey,
+    preventDefault,
+    shiftKey
+  });
+}
+function keydown(payload) {
+  return createKeyboardEvent("keydown", payload);
+}
+describe("components/TextInput", function () {
+  describe('prop "autoComplete"', function () {
+    test('value "on"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {})),
+        input = findInput(container);
+      expect(input.getAttribute("autoComplete")).toEqual("on");
+    }), test('value "off"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          autoComplete: "off"
+        })),
+        input = findInput(container);
+      expect(input.getAttribute("autoComplete")).toEqual("off");
+    }), test("autoCompleteType fallback", function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          autoCompleteType: "off"
+        })),
+        input = findInput(container);
+      expect(input.getAttribute("autoComplete")).toEqual("off");
+    });
+  }), describe('prop "autoFocus"', function () {
+    test('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {})),
+        input = findInput(container);
+      expect(document.activeElement).not.toBe(input);
+    }), test('value "true"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          autoFocus: !0
+        })),
+        input = findInput(container);
+      expect(document.activeElement).toBe(input);
+    });
+  }), describe('prop "clearTextOnFocus"', function () {
+    var defaultValue = "defaultValue";
+    testIfDocumentIsFocused('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue
+        })),
+        input = findInput(container);
+      input.focus(), expect(input.node.value).toEqual(defaultValue);
+    }), testIfDocumentIsFocused('value "true"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          clearTextOnFocus: !0,
+          defaultValue
+        })),
+        input = findInput(container);
+      input.focus(), expect(input.node.value).toEqual("");
+    });
+  }), test('prop "defaultValue"', function () {
+    var defaultValue = "defaultValue",
+      {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {
+        defaultValue
+      })),
+      input = findInput(container);
+    expect(input.value).toEqual(defaultValue);
+  }), describe('prop "disabled"', function () {
+    test('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {})),
+        input = findInput(container);
+      expect(input.disabled).toEqual(!1);
+    }), test('value "true"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          disabled: !0
+        })),
+        input = findInput(container);
+      expect(input.disabled).toEqual(!0);
+    });
+  }), describe('prop "editable"', function () {
+    test('value "true"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {})),
+        input = findInput(container);
+      expect(input.readOnly).toEqual(!1);
+    }), test('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          editable: !1
+        })),
+        input = findInput(container);
+      expect(input.readOnly).toEqual(!0);
+    });
+  }), describe('prop "keyboardType"', function () {
+    test("default value", function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "default"
+        })),
+        input = findInput(container);
+      expect(input.type).toEqual("text");
+    }), test('value "email-address"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "email-address"
+        })),
+        input = findInput(container);
+      expect(input.type).toEqual("email");
+    }), test('value "decimal-pad"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "decimal-pad"
+        })),
+        input = findInput(container);
+      expect(input.inputMode).toEqual("decimal");
+    }), test('value "number-pad"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "number-pad"
+        })),
+        input = findInput(container);
+      expect(input.inputMode).toEqual("numeric");
+    }), test('value "numeric"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "numeric"
+        })),
+        input = findInput(container);
+      expect(input.inputMode).toEqual("numeric");
+    }), test('value "phone-pad"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "phone-pad"
+        })),
+        input = findInput(container);
+      expect(input.type).toEqual("tel");
+    }), test('value "url"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          keyboardType: "url"
+        })),
+        input = findInput(container);
+      expect(input.type).toEqual("url");
+    });
+  }), test('prop "maxLength"', function () {
+    var {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {})),
+      input = findInput(container);
+    expect(input.getAttribute("maxLength")).toEqual(null), {
+      container
+    } = render(/* @__PURE__ */_jsx(TextInput, {
+      maxLength: 10
+    })), input = findInput(container), expect(input.getAttribute("maxLength")).toEqual("10");
+  }), describe('prop "multiline"', function () {
+    test('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {})),
+        input = findInput(container);
+      expect(input).toBeDefined();
+    }), test('value "true"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          multiline: !0
+        })),
+        textarea = findTextArea(container);
+      expect(textarea).toBeDefined();
+    });
+  }), describe('prop "numberOfLines"', function () {
+    test('without "multiline"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          numberOfLines: 2
+        })),
+        input = findInput(container),
+        textarea = findTextArea(container);
+      expect(input).toBeDefined(), expect(textarea).toBeNull();
+    }), test('with "multiline"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          multiline: !0,
+          numberOfLines: 3
+        })),
+        textarea = findTextArea(container);
+      expect(textarea.getAttribute("rows")).toEqual("3");
+    });
+  }), test('prop "onBlur"', function () {
+    var onBlur = jest.fn(),
+      ref = /* @__PURE__ */React.createRef();
+    act(function () {
+      render(/* @__PURE__ */_jsx(TextInput, {
+        onBlur,
+        ref
+      }));
+    });
+    var target = createEventTarget(ref.current),
+      body = createEventTarget(document.body);
+    act(function () {
+      target.focus(), body.focus({
+        relatedTarget: target.node
+      });
+    }), expect(onBlur).toHaveBeenCalledTimes(1), expect(TextInput.State.currentlyFocusedField()).toBe(null);
+  }), test.skip('prop "onChange"', function () {
+    var onChange = jest.fn(),
+      {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {
+        onChange
+      })),
+      input = findInput(container);
+    input.dispatchEvent(new window.Event("change", {
+      bubbles: !0
+    })), expect(onChange).toHaveBeenCalledTimes(1);
+  }), test.skip('prop "onChangeText"', function () {
+    var onChangeText = jest.fn(),
+      {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {
+        onChangeText
+      })),
+      input = findInput(container);
+    input.dispatchEvent(keydown({
+      key: "a"
+    })), input.dispatchEvent(new window.Event("change", {
+      bubbles: !0
+    })), expect(onChangeText).toHaveBeenCalledTimes(1), expect(onChangeText).toBeCalledWith("a");
+  }), test('prop "onFocus"', function () {
+    var onFocus = jest.fn(),
+      ref = /* @__PURE__ */React.createRef();
+    act(function () {
+      render(/* @__PURE__ */_jsx(TextInput, {
+        onFocus,
+        ref
+      }));
+    });
+    var target = createEventTarget(ref.current);
+    act(function () {
+      target.focus();
+    }), expect(onFocus).toHaveBeenCalledTimes(1), target.node.focus(), expect(TextInput.State.currentlyFocusedField()).toBe(target.node);
+  }), describe('prop "onKeyPress"', function () {
+    test("arrow key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "ArrowLeft"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: "ArrowLeft",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("backspace key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "Backspace"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: "Backspace",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("enter key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "Enter"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: "Enter",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("escape key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "Escape"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: "Escape",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("space key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: " "
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: " ",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("tab key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "Tab"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: "Tab",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("text key", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "a"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !1,
+          ctrlKey: !1,
+          key: "a",
+          metaKey: !1,
+          shiftKey: !1,
+          target: expect.anything()
+        })
+      }));
+    }), test("modifier keys are included", function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        altKey: !0,
+        ctrlKey: !0,
+        metaKey: !0,
+        shiftKey: !0,
+        key: " "
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1), expect(onKeyPress).toBeCalledWith(expect.objectContaining({
+        nativeEvent: expect.objectContaining({
+          altKey: !0,
+          ctrlKey: !0,
+          key: " ",
+          metaKey: !0,
+          shiftKey: !0,
+          target: expect.anything()
+        })
+      }));
+    }), test('meta key + Enter calls "onKeyPress"', function () {
+      var onKeyPress = jest.fn(function (e) {
+          e.persist();
+        }),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onKeyPress
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        metaKey: !0,
+        key: "Enter"
+      })), expect(onKeyPress).toHaveBeenCalledTimes(1);
+    });
+  }), describe('prop "onSelectionChange"', function () {
+    test("is called on select", function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "12345",
+          onSelectionChange
+        })),
+        input = findInput(container);
+      input.selectionStart = 0, input.selectionEnd = 3, input.dispatchEvent(new window.Event("select", {}));
+      function onSelectionChange(e) {
+        expect(e.nativeEvent.selection.end).toEqual(3), expect(e.nativeEvent.selection.start).toEqual(0);
+      }
+    }), test.skip("is called on change", function () {
+      var onSelectionChange = jest.fn(),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          onSelectionChange
+        })),
+        input = findInput(container);
+      input.dispatchEvent(new window.Event("input", {
+        bubbles: !0
+      })), expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    });
+  }), describe('prop "onSubmitEditing"', function () {
+    test("single-line input", function (done) {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "12345",
+          onSubmitEditing
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "Enter"
+      }));
+      function onSubmitEditing(e) {
+        expect(e.nativeEvent.target).toBeDefined(), expect(e.nativeEvent.text).toBe("12345"), done();
+      }
+    }), test("single-line input while composing", function () {
+      var onSubmitEditing = jest.fn(),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "12345",
+          onSubmitEditing
+        })),
+        input = findInput(container);
+      input.dispatchEvent(keydown({
+        key: "Enter",
+        isComposing: !0,
+        keyCode: 13
+      })), input.dispatchEvent(keydown({
+        key: "Enter",
+        isComposing: !1,
+        keyCode: 229
+      })), expect(onSubmitEditing).not.toHaveBeenCalled();
+    }), test("multi-line input", function () {
+      var onSubmitEditing = jest.fn(),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "12345",
+          multiline: !0,
+          onSubmitEditing
+        })),
+        textarea = findTextArea(container);
+      textarea.dispatchEvent(keydown({
+        key: "Enter"
+      })), expect(onSubmitEditing).not.toHaveBeenCalled();
+    }), test('multi-line input with "blurOnSubmit" triggers "onSubmitEditing"', function () {
+      var onSubmitEditing = jest.fn(),
+        preventDefault = jest.fn(),
+        {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          blurOnSubmit: !0,
+          defaultValue: "12345",
+          multiline: !0,
+          onSubmitEditing
+        })),
+        textarea = findTextArea(container);
+      textarea.dispatchEvent(keydown({
+        key: "Enter",
+        preventDefault,
+        shiftKey: !0
+      })), expect(onSubmitEditing).not.toHaveBeenCalledWith(expect.objectContaining({
+        shiftKey: !0
+      })), expect(preventDefault).not.toHaveBeenCalled(), textarea.dispatchEvent(keydown({
+        key: "Enter",
+        preventDefault
+      })), expect(onSubmitEditing).toHaveBeenCalledTimes(1), expect(preventDefault).toHaveBeenCalledTimes(1);
+    });
+  }), test('prop "returnKeyType"', function () {
+    var returnKeyType = "previous",
+      {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {
+        returnKeyType
+      })),
+      input = findInput(container);
+    expect(input.getAttribute("enterkeyhint")).toEqual(returnKeyType);
+  }), test('prop "secureTextEntry"', function () {
+    var {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {
+        secureTextEntry: !0
+      })),
+      input = findInput(container);
+    expect(input.getAttribute("type")).toEqual("password"), {
+      container
+    } = render(/* @__PURE__ */_jsx(TextInput, {
+      multiline: !0,
+      secureTextEntry: !0
+    }));
+    var textarea = findTextArea(container);
+    expect(textarea.getAttribute("type")).toEqual(null);
+  }), describe('prop "selectTextOnFocus"', function () {
+    testIfDocumentIsFocused('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "text"
+        })),
+        input = findInput(container);
+      input.focus(), expect(input.selectionEnd).toEqual(4), expect(input.selectionStart).toEqual(4);
+    });
+  }), describe('prop "selection"', function () {
+    test("set cursor location", function () {
+      var cursorLocation = {
+          start: 3,
+          end: 3
+        },
+        {
+          container: defaultContainer
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "12345"
+        })),
+        inputDefaultSelection = findInput(defaultContainer);
+      expect(inputDefaultSelection.selectionStart).toEqual(5), expect(inputDefaultSelection.selectionEnd).toEqual(5);
+      var {
+          container: customContainer
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          defaultValue: "12345",
+          selection: cursorLocation
+        })),
+        inputCustomSelection = findInput(customContainer);
+      expect(inputCustomSelection.selectionStart).toEqual(cursorLocation.start), expect(inputCustomSelection.selectionEnd).toEqual(cursorLocation.end);
+    });
+  }), describe('prop "spellCheck"', function () {
+    test("default value", function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {})),
+        input = findInput(container);
+      expect(input.getAttribute("spellCheck")).toEqual("true");
+    }), test('inherit from "autoCorrect"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          autoCorrect: !1
+        })),
+        input = findInput(container);
+      expect(input.getAttribute("spellCheck")).toEqual("false");
+    }), test('value "false"', function () {
+      var {
+          container
+        } = render(/* @__PURE__ */_jsx(TextInput, {
+          spellCheck: !1
+        })),
+        input = findInput(container);
+      expect(input.getAttribute("spellCheck")).toEqual("false");
+    });
+  }), test('prop "value"', function () {
+    var value = "value",
+      {
+        container
+      } = render(/* @__PURE__ */_jsx(TextInput, {
+        value
+      })),
+      input = findInput(container);
+    expect(input.value).toEqual(value);
+  }), describe("imperative methods", function () {
+    test("node.clear()", function () {
+      var ref = /* @__PURE__ */React.createRef();
+      render(/* @__PURE__ */_jsx(TextInput, {
+        ref
+      })), expect(typeof ref.current.clear).toBe("function");
+    }), test("node.isFocused()", function () {
+      var ref = /* @__PURE__ */React.createRef();
+      render(/* @__PURE__ */_jsx(TextInput, {
+        ref
+      })), expect(typeof ref.current.isFocused).toBe("function");
+    });
+  });
+});
+//# sourceMappingURL=index-test.native.js.map