UNPKG

@tamagui/react-native-web-lite

Version:
533 lines (532 loc) 25.6 kB
"use strict"; 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_jsx_runtime = require("react/jsx-runtime"), 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("..")); 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.getAttribute("autoComplete")).toEqual("on"); }), test('value "off"', function() { var { 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", function() { var { 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"', function() { test('value "false"', function() { var { 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"', function() { var { 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"', function() { var defaultValue = "defaultValue"; testIfDocumentIsFocused('value "false"', function() { var { 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"', function() { var { 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"', function() { var 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"', function() { test('value "false"', function() { var { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.disabled).toEqual(!1); }), test('value "true"', function() { var { 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"', function() { test('value "true"', function() { var { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input.readOnly).toEqual(!1); }), test('value "false"', function() { var { 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"', function() { test("default value", function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { test('value "false"', function() { var { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, {})), input = findInput(container); expect(input).toBeDefined(); }), test('value "true"', function() { var { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { multiline: !0 })), textarea = findTextArea(container); expect(textarea).toBeDefined(); }); }), describe('prop "numberOfLines"', function() { test('without "multiline"', function() { var { 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"', function() { var { 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"', function() { var onBlur = jest.fn(), ref = /* @__PURE__ */ import_react2.default.createRef(); (0, import_test_utils.act)(function() { (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { onBlur, ref })); }); var 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)(function() { target.focus(), body.focus({ relatedTarget: target.node }); }), expect(onBlur).toHaveBeenCalledTimes(1), expect(import__.default.State.currentlyFocusedField()).toBe(null); }), test.skip('prop "onChange"', function() { var onChange = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (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"', function() { var onFocus = jest.fn(), ref = /* @__PURE__ */ import_react2.default.createRef(); (0, import_test_utils.act)(function() { (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { onFocus, ref })); }); var target = (0, import_dom_event_testing_library.createEventTarget)(ref.current); (0, import_test_utils.act)(function() { target.focus(); }), expect(onFocus).toHaveBeenCalledTimes(1), target.node.focus(), expect(import__.default.State.currentlyFocusedField()).toBe(target.node); }), describe('prop "onKeyPress"', function() { test("arrow key", function() { var onKeyPress = jest.fn(function(e) { e.persist(); }), { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (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", function() { var onSelectionChange = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (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", function() { var onSubmitEditing = jest.fn(), { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { 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 } = (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"', function() { var 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"', function() { var { container } = (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { secureTextEntry: !0 })), 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 })); var textarea = findTextArea(container); expect(textarea.getAttribute("type")).toEqual(null); }), describe('prop "selectTextOnFocus"', function() { testIfDocumentIsFocused('value "false"', function() { var { 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"', function() { test("set cursor location", function() { var 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); var { 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"', function() { test("default value", function() { var { 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"', function() { var { 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"', function() { var { 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"', function() { var 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", function() { test("node.clear()", function() { var ref = /* @__PURE__ */ 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()", function() { var ref = /* @__PURE__ */ import_react2.default.createRef(); (0, import_react.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.default, { ref })), expect(typeof ref.current.isFocused).toBe("function"); }); }); }); //# sourceMappingURL=index-test.js.map