UNPKG

@tamagui/react-native-web-lite

Version:
709 lines 26.4 kB
var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty; var __copyProps = (to, from, except, desc) => { if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target, mod)); var import_react = require("@testing-library/react"), import_dom_event_testing_library = require("dom-event-testing-library"), import_react2 = __toESM(require("react")), import_test_utils = require("react-dom/test-utils"), import__ = __toESM(require("../index.cjs")), import_jsx_runtime = require("react/jsx-runtime"); function findInput(container) { return container.querySelector("input"); } function findTextArea(container) { return container.querySelector("textarea"); } const testIfDocumentIsFocused = (message, fn) => { document.hasFocus && document.hasFocus() ? test(message, fn) : test.skip(`${message} \u2013 document is not focused`, () => {}); }; function createEvent(type, data = {}) { const event = document.createEvent("CustomEvent"); return event.initCustomEvent(type, !0, !0), data != null && Object.keys(data).forEach(key => { const value = data[key]; key === "timeStamp" && !value || Object.defineProperty(event, key, { value }); }), event; } function createKeyboardEvent(type, { altKey = !1, ctrlKey = !1, isComposing = !1, key = "", keyCode = 0, metaKey = !1, preventDefault = () => {}, shiftKey = !1 } = {}) { return createEvent(type, { altKey, ctrlKey, isComposing, key, keyCode, metaKey, preventDefault, shiftKey }); } function keydown(payload) { return createKeyboardEvent("keydown", payload); } describe("components/TextInput", () => { describe('prop "autoComplete"', () => { test('value "on"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.getAttribute("autoComplete")).toEqual("on"); }), test('value "off"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { autoComplete: "off" })), input = findInput(container); expect(input.getAttribute("autoComplete")).toEqual("off"); }), test("autoCompleteType fallback", () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { autoCompleteType: "off" })), input = findInput(container); expect(input.getAttribute("autoComplete")).toEqual("off"); }); }), describe('prop "autoFocus"', () => { test('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(document.activeElement).not.toBe(input); }), test('value "true"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { autoFocus: !0 })), input = findInput(container); expect(document.activeElement).toBe(input); }); }), describe('prop "clearTextOnFocus"', () => { const defaultValue = "defaultValue"; testIfDocumentIsFocused('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue })), input = findInput(container); input.focus(), expect(input.node.value).toEqual(defaultValue); }), testIfDocumentIsFocused('value "true"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { clearTextOnFocus: !0, defaultValue })), input = findInput(container); input.focus(), expect(input.node.value).toEqual(""); }); }), test('prop "defaultValue"', () => { const defaultValue = "defaultValue", { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue })), input = findInput(container); expect(input.value).toEqual(defaultValue); }), describe('prop "disabled"', () => { test('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.disabled).toEqual(!1); }), test('value "true"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { disabled: !0 })), input = findInput(container); expect(input.disabled).toEqual(!0); }); }), describe('prop "editable"', () => { test('value "true"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.readOnly).toEqual(!1); }), test('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { editable: !1 })), input = findInput(container); expect(input.readOnly).toEqual(!0); }); }), describe('prop "keyboardType"', () => { test("default value", () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "default" })), input = findInput(container); expect(input.type).toEqual("text"); }), test('value "email-address"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "email-address" })), input = findInput(container); expect(input.type).toEqual("email"); }), test('value "decimal-pad"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "decimal-pad" })), input = findInput(container); expect(input.inputMode).toEqual("decimal"); }), test('value "number-pad"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "number-pad" })), input = findInput(container); expect(input.inputMode).toEqual("numeric"); }), test('value "numeric"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "numeric" })), input = findInput(container); expect(input.inputMode).toEqual("numeric"); }), test('value "phone-pad"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "phone-pad" })), input = findInput(container); expect(input.type).toEqual("tel"); }), test('value "url"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { keyboardType: "url" })), input = findInput(container); expect(input.type).toEqual("url"); }); }), test('prop "maxLength"', () => { let { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.getAttribute("maxLength")).toEqual(null), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { maxLength: 10 })), input = findInput(container), expect(input.getAttribute("maxLength")).toEqual("10"); }), describe('prop "multiline"', () => { test('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input).toBeDefined(); }), test('value "true"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { multiline: !0 })), textarea = findTextArea(container); expect(textarea).toBeDefined(); }); }), describe('prop "numberOfLines"', () => { test('without "multiline"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { numberOfLines: 2 })), input = findInput(container), textarea = findTextArea(container); expect(input).toBeDefined(), expect(textarea).toBeNull(); }), test('with "multiline"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { multiline: !0, numberOfLines: 3 })), textarea = findTextArea(container); expect(textarea.getAttribute("rows")).toEqual("3"); }); }), test('prop "onBlur"', () => { const onBlur = jest.fn(), ref = import_react2.default.createRef(); (0, import_test_utils.act)(() => { (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onBlur, ref })); }); const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current), body = (0, import_dom_event_testing_library.createEventTarget)(document.body); (0, import_test_utils.act)(() => { target.focus(), body.focus({ relatedTarget: target.node }); }), expect(onBlur).toHaveBeenCalledTimes(1), expect(import__.default.State.currentlyFocusedField()).toBe(null); }), test.skip('prop "onChange"', () => { const onChange = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onChange })); findInput(container).dispatchEvent(new window.Event("change", { bubbles: !0 })), expect(onChange).toHaveBeenCalledTimes(1); }), test.skip('prop "onChangeText"', () => { const onChangeText = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { 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"', () => { const onFocus = jest.fn(), ref = import_react2.default.createRef(); (0, import_test_utils.act)(() => { (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onFocus, ref })); }); const target = (0, import_dom_event_testing_library.createEventTarget)(ref.current); (0, import_test_utils.act)(() => { target.focus(); }), expect(onFocus).toHaveBeenCalledTimes(1), target.node.focus(), expect(import__.default.State.currentlyFocusedField()).toBe(target.node); }), describe('prop "onKeyPress"', () => { test("arrow key", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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", () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).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"', () => { const onKeyPress = jest.fn(e => { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onKeyPress })); findInput(container).dispatchEvent(keydown({ metaKey: !0, key: "Enter" })), expect(onKeyPress).toHaveBeenCalledTimes(1); }); }), describe('prop "onSelectionChange"', () => { test("is called on select", () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { 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", () => { const onSelectionChange = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { onSelectionChange })); findInput(container).dispatchEvent(new window.Event("input", { bubbles: !0 })), expect(onSelectionChange).toHaveBeenCalledTimes(1); }); }), describe('prop "onSubmitEditing"', () => { test("single-line input", done => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue: "12345", onSubmitEditing })); findInput(container).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", () => { const onSubmitEditing = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { 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", () => { const onSubmitEditing = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue: "12345", multiline: !0, onSubmitEditing })); findTextArea(container).dispatchEvent(keydown({ key: "Enter" })), expect(onSubmitEditing).not.toHaveBeenCalled(); }), test('multi-line input with "blurOnSubmit" triggers "onSubmitEditing"', () => { const onSubmitEditing = jest.fn(), preventDefault = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { 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"', () => { const returnKeyType = "previous", { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { returnKeyType })), input = findInput(container); expect(input.getAttribute("enterkeyhint")).toEqual(returnKeyType); }), test('prop "secureTextEntry"', () => { let { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { secureTextEntry: !0 })); const input = findInput(container); expect(input.getAttribute("type")).toEqual("password"), { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { multiline: !0, secureTextEntry: !0 })); const textarea = findTextArea(container); expect(textarea.getAttribute("type")).toEqual(null); }), describe('prop "selectTextOnFocus"', () => { testIfDocumentIsFocused('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue: "text" })), input = findInput(container); input.focus(), expect(input.selectionEnd).toEqual(4), expect(input.selectionStart).toEqual(4); }); }), describe('prop "selection"', () => { test("set cursor location", () => { const cursorLocation = { start: 3, end: 3 }, { container: defaultContainer } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue: "12345" })), inputDefaultSelection = findInput(defaultContainer); expect(inputDefaultSelection.selectionStart).toEqual(5), expect(inputDefaultSelection.selectionEnd).toEqual(5); const { container: customContainer } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { defaultValue: "12345", selection: cursorLocation })), inputCustomSelection = findInput(customContainer); expect(inputCustomSelection.selectionStart).toEqual(cursorLocation.start), expect(inputCustomSelection.selectionEnd).toEqual(cursorLocation.end); }); }), describe('prop "spellCheck"', () => { test("default value", () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.getAttribute("spellCheck")).toEqual("true"); }), test('inherit from "autoCorrect"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { autoCorrect: !1 })), input = findInput(container); expect(input.getAttribute("spellCheck")).toEqual("false"); }), test('value "false"', () => { const { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { spellCheck: !1 })), input = findInput(container); expect(input.getAttribute("spellCheck")).toEqual("false"); }); }), test('prop "value"', () => { const value = "value", { container } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { value })), input = findInput(container); expect(input.value).toEqual(value); }), describe("imperative methods", () => { test("node.clear()", () => { const ref = import_react2.default.createRef(); (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { ref })), expect(typeof ref.current.clear).toBe("function"); }), test("node.isFocused()", () => { const ref = import_react2.default.createRef(); (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, { ref })), expect(typeof ref.current.isFocused).toBe("function"); }); }); });