@tamagui/react-native-web-lite
Version:
React Native for Web
423 lines (422 loc) • 24.4 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_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("..")), 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");
});
});
});
//# sourceMappingURL=index-test.js.map