@tamagui/react-native-web-lite/dist/esm/TextInput/__tests__/index-test.js

React Native for Web

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 "..";
import { jsx } from "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 } = render(/* @__PURE__ */ jsx(TextInput, {})), input = findInput(container);
      expect(input.getAttribute("autoComplete")).toEqual("on");
    }), test('value "off"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { autoComplete: "off" })), input = findInput(container);
      expect(input.getAttribute("autoComplete")).toEqual("off");
    }), test("autoCompleteType fallback", () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { autoCompleteType: "off" })), input = findInput(container);
      expect(input.getAttribute("autoComplete")).toEqual("off");
    });
  }), describe('prop "autoFocus"', () => {
    test('value "false"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, {})), input = findInput(container);
      expect(document.activeElement).not.toBe(input);
    }), test('value "true"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { autoFocus: !0 })), input = findInput(container);
      expect(document.activeElement).toBe(input);
    });
  }), describe('prop "clearTextOnFocus"', () => {
    const defaultValue = "defaultValue";
    testIfDocumentIsFocused('value "false"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { defaultValue })), input = findInput(container);
      input.focus(), expect(input.node.value).toEqual(defaultValue);
    }), testIfDocumentIsFocused('value "true"', () => {
      const { container } = render(
        /* @__PURE__ */ jsx(TextInput, { clearTextOnFocus: !0, defaultValue })
      ), input = findInput(container);
      input.focus(), expect(input.node.value).toEqual("");
    });
  }), test('prop "defaultValue"', () => {
    const defaultValue = "defaultValue", { container } = render(/* @__PURE__ */ jsx(TextInput, { defaultValue })), input = findInput(container);
    expect(input.value).toEqual(defaultValue);
  }), describe('prop "disabled"', () => {
    test('value "false"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, {})), input = findInput(container);
      expect(input.disabled).toEqual(!1);
    }), test('value "true"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { disabled: !0 })), input = findInput(container);
      expect(input.disabled).toEqual(!0);
    });
  }), describe('prop "editable"', () => {
    test('value "true"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, {})), input = findInput(container);
      expect(input.readOnly).toEqual(!1);
    }), test('value "false"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { editable: !1 })), input = findInput(container);
      expect(input.readOnly).toEqual(!0);
    });
  }), describe('prop "keyboardType"', () => {
    test("default value", () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "default" })), input = findInput(container);
      expect(input.type).toEqual("text");
    }), test('value "email-address"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "email-address" })), input = findInput(container);
      expect(input.type).toEqual("email");
    }), test('value "decimal-pad"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "decimal-pad" })), input = findInput(container);
      expect(input.inputMode).toEqual("decimal");
    }), test('value "number-pad"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "number-pad" })), input = findInput(container);
      expect(input.inputMode).toEqual("numeric");
    }), test('value "numeric"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "numeric" })), input = findInput(container);
      expect(input.inputMode).toEqual("numeric");
    }), test('value "phone-pad"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "phone-pad" })), input = findInput(container);
      expect(input.type).toEqual("tel");
    }), test('value "url"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { keyboardType: "url" })), input = findInput(container);
      expect(input.type).toEqual("url");
    });
  }), test('prop "maxLength"', () => {
    let { 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"', () => {
    test('value "false"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, {})), input = findInput(container);
      expect(input).toBeDefined();
    }), test('value "true"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { multiline: !0 })), textarea = findTextArea(container);
      expect(textarea).toBeDefined();
    });
  }), describe('prop "numberOfLines"', () => {
    test('without "multiline"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { numberOfLines: 2 })), input = findInput(container), textarea = findTextArea(container);
      expect(input).toBeDefined(), expect(textarea).toBeNull();
    }), test('with "multiline"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { multiline: !0, numberOfLines: 3 })), textarea = findTextArea(container);
      expect(textarea.getAttribute("rows")).toEqual("3");
    });
  }), test('prop "onBlur"', () => {
    const onBlur = jest.fn(), ref = React.createRef();
    act(() => {
      render(/* @__PURE__ */ jsx(TextInput, { onBlur, ref }));
    });
    const target = createEventTarget(ref.current), body = createEventTarget(document.body);
    act(() => {
      target.focus(), body.focus({ relatedTarget: target.node });
    }), expect(onBlur).toHaveBeenCalledTimes(1), expect(TextInput.State.currentlyFocusedField()).toBe(null);
  }), test.skip('prop "onChange"', () => {
    const onChange = jest.fn(), { container } = render(/* @__PURE__ */ jsx(TextInput, { onChange }));
    findInput(container).dispatchEvent(new window.Event("change", { bubbles: !0 })), expect(onChange).toHaveBeenCalledTimes(1);
  }), test.skip('prop "onChangeText"', () => {
    const 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"', () => {
    const onFocus = jest.fn(), ref = React.createRef();
    act(() => {
      render(/* @__PURE__ */ jsx(TextInput, { onFocus, ref }));
    });
    const target = createEventTarget(ref.current);
    act(() => {
      target.focus();
    }), expect(onFocus).toHaveBeenCalledTimes(1), target.node.focus(), expect(TextInput.State.currentlyFocusedField()).toBe(target.node);
  }), describe('prop "onKeyPress"', () => {
    test("arrow key", () => {
      const onKeyPress = jest.fn((e) => {
        e.persist();
      }), { container } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { 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 } = render(/* @__PURE__ */ jsx(TextInput, { onKeyPress }));
      findInput(container).dispatchEvent(
        keydown({
          metaKey: !0,
          key: "Enter"
        })
      ), expect(onKeyPress).toHaveBeenCalledTimes(1);
    });
  }), describe('prop "onSelectionChange"', () => {
    test("is called on select", () => {
      const { 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", () => {
      const onSelectionChange = jest.fn(), { container } = render(/* @__PURE__ */ jsx(TextInput, { onSelectionChange }));
      findInput(container).dispatchEvent(new window.Event("input", { bubbles: !0 })), expect(onSelectionChange).toHaveBeenCalledTimes(1);
    });
  }), describe('prop "onSubmitEditing"', () => {
    test("single-line input", (done) => {
      const { container } = render(
        /* @__PURE__ */ jsx(TextInput, { 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 } = 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", () => {
      const onSubmitEditing = jest.fn(), { container } = render(
        /* @__PURE__ */ jsx(TextInput, { 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 } = 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"', () => {
    const returnKeyType = "previous", { container } = render(/* @__PURE__ */ jsx(TextInput, { returnKeyType })), input = findInput(container);
    expect(input.getAttribute("enterkeyhint")).toEqual(returnKeyType);
  }), test('prop "secureTextEntry"', () => {
    let { container } = render(/* @__PURE__ */ jsx(TextInput, { secureTextEntry: !0 }));
    const input = findInput(container);
    expect(input.getAttribute("type")).toEqual("password"), { container } = render(/* @__PURE__ */ jsx(TextInput, { multiline: !0, secureTextEntry: !0 }));
    const textarea = findTextArea(container);
    expect(textarea.getAttribute("type")).toEqual(null);
  }), describe('prop "selectTextOnFocus"', () => {
    testIfDocumentIsFocused('value "false"', () => {
      const { 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"', () => {
    test("set cursor location", () => {
      const 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);
      const { 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"', () => {
    test("default value", () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, {})), input = findInput(container);
      expect(input.getAttribute("spellCheck")).toEqual("true");
    }), test('inherit from "autoCorrect"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { autoCorrect: !1 })), input = findInput(container);
      expect(input.getAttribute("spellCheck")).toEqual("false");
    }), test('value "false"', () => {
      const { container } = render(/* @__PURE__ */ jsx(TextInput, { spellCheck: !1 })), input = findInput(container);
      expect(input.getAttribute("spellCheck")).toEqual("false");
    });
  }), test('prop "value"', () => {
    const value = "value", { container } = render(/* @__PURE__ */ jsx(TextInput, { value })), input = findInput(container);
    expect(input.value).toEqual(value);
  }), describe("imperative methods", () => {
    test("node.clear()", () => {
      const ref = React.createRef();
      render(/* @__PURE__ */ jsx(TextInput, { ref })), expect(typeof ref.current.clear).toBe("function");
    }), test("node.isFocused()", () => {
      const ref = React.createRef();
      render(/* @__PURE__ */ jsx(TextInput, { ref })), expect(typeof ref.current.isFocused).toBe("function");
    });
  });
});
//# sourceMappingURL=index-test.js.map