ferns-ui 1.7.0 → 1.8.0

package/src/TextArea.test.tsx

@@ -0,0 +1,271 @@
+import {userEvent} from "@testing-library/react-native";
+import React from "react";
+
+import {TextArea} from "./TextArea";
+import {renderWithTheme} from "./test-utils";
+
+describe("TextArea", () => {
+  let mockOnChange: jest.Mock;
+
+  beforeEach(() => {
+    mockOnChange = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("basic functionality", () => {
+    it("should render as multiline text field", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="test content" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("test content");
+      expect(input.props.multiline).toBe(true);
+      expect(input.props.value).toBe("test content");
+    });
+
+    it("should render with title", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea title="Description" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByText("Description")).toBeTruthy();
+    });
+
+    it("should render with placeholder", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <TextArea placeholder="Enter description" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByPlaceholderText("Enter description")).toBeTruthy();
+    });
+
+    it("should render helper text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea helperText="Maximum 500 characters" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByText("Maximum 500 characters")).toBeTruthy();
+    });
+
+    it("should render error text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea errorText="This field is required" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByText("This field is required")).toBeTruthy();
+    });
+
+    it("should support grow behavior", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea grow value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.multiline).toBe(true);
+    });
+
+    it("should be disabled when disabled prop is true", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea disabled value="test" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("test");
+      expect(input.props.readOnly).toBe(true);
+    });
+
+    it("should always have text type", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.keyboardType).toBe("default");
+    });
+  });
+
+  describe("user interactions", () => {
+    it("should call onChange when text is entered", async () => {
+      const user = userEvent.setup();
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("");
+      await user.type(input, "hello world");
+
+      expect(mockOnChange).toHaveBeenCalled();
+      expect(mockOnChange.mock.calls.length).toBeGreaterThan(0);
+    });
+
+    it("should handle multiline text input", async () => {
+      const user = userEvent.setup();
+      const multilineText = "Line 1\nLine 2\nLine 3";
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("");
+      await user.type(input, multilineText);
+
+      expect(mockOnChange).toHaveBeenCalled();
+      expect(mockOnChange.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("accessibility", () => {
+    it("should have correct accessibility properties", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.accessibilityHint).toBe("Enter text here");
+      expect(input.props["aria-label"]).toBe("Text input field");
+    });
+
+    it("should indicate disabled state in accessibility", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea disabled value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.accessibilityState.disabled).toBe(true);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle empty value", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.value).toBe("");
+    });
+
+    it("should handle undefined value", () => {
+      const {root} = renderWithTheme(
+        <TextArea value={undefined} onChange={mockOnChange} />
+      );
+      
+      expect(root).toBeTruthy();
+    });
+
+    it("should handle long text values", () => {
+      const longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(50);
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value={longText} onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue(longText);
+      expect(input.props.value).toBe(longText);
+    });
+
+    it("should handle text with line breaks", () => {
+      const textWithBreaks = "First line\nSecond line\n\nFourth line";
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea value={textWithBreaks} onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue(textWithBreaks);
+      expect(input.props.value).toBe(textWithBreaks);
+    });
+  });
+
+  describe("props inheritance", () => {
+    it("should inherit all TextField props except multiline and type", () => {
+      const mockOnFocus = jest.fn();
+      const mockOnBlur = jest.fn();
+      
+      const {getByDisplayValue} = renderWithTheme(
+        <TextArea 
+          value="test" 
+          onChange={mockOnChange}
+          onFocus={mockOnFocus}
+          onBlur={mockOnBlur}
+          placeholder="Test placeholder"
+          disabled={false}
+          rows={5}
+        />
+      );
+      
+      const input = getByDisplayValue("test");
+      expect(input.props.numberOfLines).toBe(5);
+      expect(input.props.onFocus).toBeTruthy();
+      expect(input.props.onBlur).toBeTruthy();
+    });
+
+    it("should support inputRef", () => {
+      const mockInputRef = jest.fn();
+      renderWithTheme(
+        <TextArea inputRef={mockInputRef} value="" onChange={mockOnChange} />
+      );
+      
+      expect(mockInputRef).toHaveBeenCalled();
+    });
+  });
+
+  describe("snapshots", () => {
+    it("should match snapshot with default props", () => {
+      const component = renderWithTheme(
+        <TextArea value="test content" onChange={mockOnChange} />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with all props", () => {
+      const component = renderWithTheme(
+        <TextArea
+          title="Description"
+          placeholder="Enter description"
+          helperText="Maximum 500 characters"
+          value="test content"
+          onChange={mockOnChange}
+          disabled={false}
+          grow={true}
+          rows={5}
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot when disabled", () => {
+      const component = renderWithTheme(
+        <TextArea
+          title="Disabled TextArea"
+          value="disabled content"
+          onChange={mockOnChange}
+          disabled={true}
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with error state", () => {
+      const component = renderWithTheme(
+        <TextArea
+          title="Error TextArea"
+          value=""
+          onChange={mockOnChange}
+          errorText="This field is required"
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with multiline content", () => {
+      const component = renderWithTheme(
+        <TextArea
+          title="Multiline Content"
+          value="Line 1\nLine 2\nLine 3"
+          onChange={mockOnChange}
+          rows={4}
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/TextField.test.tsx

@@ -0,0 +1,442 @@
+import {act, userEvent} from "@testing-library/react-native";
+import React from "react";
+
+import {TextField} from "./TextField";
+import {renderWithTheme} from "./test-utils";
+
+
+
+describe("TextField", () => {
+  let mockOnChange: jest.Mock;
+  let mockOnFocus: jest.Mock;
+  let mockOnBlur: jest.Mock;
+  let mockOnEnter: jest.Mock;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mockOnChange = jest.fn();
+    mockOnFocus = jest.fn();
+    mockOnBlur = jest.fn();
+    mockOnEnter = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  describe("basic rendering", () => {
+    it("should render with default props", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="test value" onChange={mockOnChange} />
+      );
+      
+      expect(getByDisplayValue("test value").props.value).toBe("test value");
+    });
+
+    it("should render with title", () => {
+      const {getByText} = renderWithTheme(
+        <TextField title="Test Title" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByText("Test Title")).toBeTruthy();
+    });
+
+    it("should render with placeholder", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <TextField placeholder="Enter text" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByPlaceholderText("Enter text")).toBeTruthy();
+    });
+
+    it("should render helper text", () => {
+      const {getByText} = renderWithTheme(
+        <TextField helperText="This is helper text" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByText("This is helper text")).toBeTruthy();
+    });
+
+    it("should render error text", () => {
+      const {getByText} = renderWithTheme(
+        <TextField errorText="This is an error" value="" onChange={mockOnChange} />
+      );
+      
+      expect(getByText("This is an error")).toBeTruthy();
+    });
+  });
+
+  describe("user interactions", () => {
+    it("should call onChange when text is entered", async () => {
+      const user = userEvent.setup();
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="" onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("");
+      await user.type(input, "hello");
+
+      expect(mockOnChange).toHaveBeenCalled();
+      expect(mockOnChange.mock.calls.length).toBeGreaterThan(0);
+    });
+
+    it("should call onFocus when input is focused", async () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="" onChange={mockOnChange} onFocus={mockOnFocus} />
+      );
+
+      const input = getByDisplayValue("");
+      expect(input.props.onFocus).toBeTruthy();
+    });
+
+    it("should call onBlur when input loses focus", async () => {
+      const user = userEvent.setup();
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="test" onChange={mockOnChange} onBlur={mockOnBlur} />
+      );
+
+      const input = getByDisplayValue("test");
+      await user.press(input);
+      await act(async () => {
+        input.props.onBlur();
+      });
+
+      expect(mockOnBlur).toHaveBeenCalledTimes(1);
+      expect(mockOnBlur.mock.calls[0][0]).toBe("test");
+    });
+
+    it("should call onEnter when enter key is pressed", async () => {
+      const user = userEvent.setup();
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="" onChange={mockOnChange} onEnter={mockOnEnter} />
+      );
+
+      const input = getByDisplayValue("");
+      await act(async () => {
+        input.props.onSubmitEditing();
+      });
+
+      expect(mockOnEnter).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("field types", () => {
+    it("should render email type with correct keyboard", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="email" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.keyboardType).toBe("email-address");
+    });
+
+    it("should render password type with secure text entry", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="password" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.secureTextEntry).toBe(true);
+    });
+
+    it("should render url type with correct keyboard", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="url" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.keyboardType === "url" || input.props.keyboardType === "default").toBe(true);
+    });
+
+    it("should render phoneNumber type with number keyboard", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="phoneNumber" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.keyboardType).toBe("number-pad");
+    });
+
+    it("should render search type with default keyboard", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="search" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.keyboardType).toBe("default");
+    });
+  });
+
+  describe("multiline behavior", () => {
+    it("should render as multiline when multiline prop is true", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField multiline value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.multiline).toBe(true);
+    });
+
+    it("should set number of lines when rows prop is provided", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField multiline rows={5} value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.numberOfLines).toBe(5);
+    });
+
+    it("should handle grow behavior with multiline", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField multiline grow value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.multiline).toBe(true);
+    });
+  });
+
+  describe("disabled state", () => {
+    it("should be read-only when disabled", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField disabled value="test" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("test");
+      expect(input.props.readOnly).toBe(true);
+    });
+
+    it("should not call onFocus when disabled", async () => {
+      const user = userEvent.setup();
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField disabled value="" onChange={mockOnChange} onFocus={mockOnFocus} />
+      );
+
+      const input = getByDisplayValue("");
+      expect(input.props.readOnly).toBe(true);
+    });
+
+    it("should not call onBlur when disabled", async () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField disabled value="test" onChange={mockOnChange} onBlur={mockOnBlur} />
+      );
+
+      const input = getByDisplayValue("test");
+      await act(async () => {
+        input.props.onBlur();
+      });
+
+      expect(mockOnBlur).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("icon functionality", () => {
+    it("should render icon when iconName is provided", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField iconName="check" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input).toBeTruthy();
+    });
+
+    it("should call onIconClick when icon is pressed", async () => {
+      const mockOnIconClick = jest.fn();
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField iconName="check" onIconClick={mockOnIconClick} value="" onChange={mockOnChange} />
+      );
+
+      const input = getByDisplayValue("");
+      expect(input).toBeTruthy();
+    });
+  });
+
+  describe("accessibility", () => {
+    it("should have correct accessibility properties", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.accessibilityHint).toBe("Enter text here");
+      expect(input.props["aria-label"]).toBe("Text input field");
+    });
+
+    it("should indicate disabled state in accessibility", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField disabled value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.accessibilityState.disabled).toBe(true);
+    });
+  });
+
+  describe("auto-complete and text content", () => {
+    it("should set autoComplete property", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField autoComplete="username" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input).toBeTruthy();
+    });
+
+    it("should handle text content type for email", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="email" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.textContentType).toBe("emailAddress");
+    });
+
+    it("should handle text content type for password", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField type="password" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.textContentType).toBe("password");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle empty value", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.value).toBe("");
+    });
+
+    it("should handle undefined value", () => {
+      const {root} = renderWithTheme(
+        <TextField value={undefined} onChange={mockOnChange} />
+      );
+      
+      expect(root).toBeTruthy();
+    });
+
+    it("should handle long text values", () => {
+      const longText = "a".repeat(1000);
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value={longText} onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue(longText);
+      expect(input.props.value).toBe(longText);
+    });
+
+    it("should handle special characters", () => {
+      const specialText = "!@#$%^&*()_+-=[]{}|;':\",./<>?";
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField value={specialText} onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue(specialText);
+      expect(input.props.value).toBe(specialText);
+    });
+  });
+
+  describe("return key behavior", () => {
+    it("should set return key type", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField returnKeyType="done" value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.enterKeyHint).toBe("done");
+    });
+
+    it("should handle blur on submit", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <TextField blurOnSubmit={false} value="" onChange={mockOnChange} />
+      );
+      
+      const input = getByDisplayValue("");
+      expect(input.props.blurOnSubmit).toBe(false);
+    });
+  });
+
+  describe("input ref", () => {
+    it("should call inputRef with the input reference", () => {
+      const mockInputRef = jest.fn();
+      renderWithTheme(
+        <TextField inputRef={mockInputRef} value="" onChange={mockOnChange} />
+      );
+      
+      expect(mockInputRef).toHaveBeenCalled();
+    });
+  });
+
+  describe("snapshots", () => {
+    it("should match snapshot with default props", () => {
+      const component = renderWithTheme(
+        <TextField value="test value" onChange={mockOnChange} />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with all props", () => {
+      const component = renderWithTheme(
+        <TextField
+          title="Test Title"
+          placeholder="Enter text"
+          helperText="Helper text"
+          errorText="Error text"
+          iconName="check"
+          onIconClick={jest.fn()}
+          value="test value"
+          onChange={mockOnChange}
+          onFocus={mockOnFocus}
+          onBlur={mockOnBlur}
+          onEnter={mockOnEnter}
+          disabled={false}
+          multiline={false}
+          type="text"
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot when disabled", () => {
+      const component = renderWithTheme(
+        <TextField
+          title="Disabled Field"
+          value="disabled value"
+          onChange={mockOnChange}
+          disabled={true}
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with multiline", () => {
+      const component = renderWithTheme(
+        <TextField
+          title="Multiline Field"
+          value="line 1\nline 2"
+          onChange={mockOnChange}
+          multiline={true}
+          rows={3}
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot with error state", () => {
+      const component = renderWithTheme(
+        <TextField
+          title="Error Field"
+          value=""
+          onChange={mockOnChange}
+          errorText="This field is required"
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+});