@tamagui/react-native-web-lite
Version:
React Native for Web
533 lines (532 loc) • 25.6 kB
JavaScript
;
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