PriceUpdaterAppv2/tests/tui/components/common/InputField.test.js

const React = require("react");
const InputField = require("../../../../src/tui/components/common/InputField");

describe("InputField Component", () => {
	test("component can be created with default props", () => {
		const component = React.createElement(InputField, {});
		expect(component).toBeDefined();
		expect(component.type).toBe(InputField);
	});

	test("component accepts basic props", () => {
		const props = {
			label: "Username",
			value: "testuser",
			placeholder: "Enter username",
		};

		const component = React.createElement(InputField, props);
		expect(component.props.label).toBe("Username");
		expect(component.props.value).toBe("testuser");
		expect(component.props.placeholder).toBe("Enter username");
	});

	test("component accepts onChange callback", () => {
		const mockOnChange = jest.fn();
		const component = React.createElement(InputField, {
			onChange: mockOnChange,
		});

		expect(component.props.onChange).toBe(mockOnChange);
	});

	test("component accepts onSubmit callback", () => {
		const mockOnSubmit = jest.fn();
		const component = React.createElement(InputField, {
			onSubmit: mockOnSubmit,
		});

		expect(component.props.onSubmit).toBe(mockOnSubmit);
	});

	test("component accepts validation function", () => {
		const mockValidation = jest.fn(() => true);
		const component = React.createElement(InputField, {
			validation: mockValidation,
		});

		expect(component.props.validation).toBe(mockValidation);
	});

	test("component accepts required prop", () => {
		const component = React.createElement(InputField, {
			required: true,
		});

		expect(component.props.required).toBe(true);
	});

	test("component accepts disabled prop", () => {
		const component = React.createElement(InputField, {
			disabled: true,
		});

		expect(component.props.disabled).toBe(true);
	});

	test("component accepts showError prop", () => {
		const component = React.createElement(InputField, {
			showError: false,
		});

		expect(component.props.showError).toBe(false);
	});

	test("component accepts focus prop", () => {
		const component = React.createElement(InputField, {
			focus: true,
		});

		expect(component.props.focus).toBe(true);
	});

	test("component accepts width prop", () => {
		const component = React.createElement(InputField, {
			width: 50,
		});

		expect(component.props.width).toBe(50);
	});

	test("component accepts mask prop", () => {
		const component = React.createElement(InputField, {
			mask: "*",
		});

		expect(component.props.mask).toBe("*");
	});

	test("component handles validation function that returns boolean", () => {
		const validation = (value) => value.length > 3;
		const component = React.createElement(InputField, {
			validation: validation,
		});

		expect(typeof component.props.validation).toBe("function");
		expect(component.props.validation("test")).toBe(true);
		expect(component.props.validation("ab")).toBe(false);
	});

	test("component handles validation function that returns object", () => {
		const validation = (value) => ({
			isValid: value.includes("@"),
			message: "Must contain @ symbol",
		});

		const component = React.createElement(InputField, {
			validation: validation,
		});

		const result = component.props.validation("test@example.com");
		expect(result.isValid).toBe(true);

		const result2 = component.props.validation("invalid");
		expect(result2.isValid).toBe(false);
		expect(result2.message).toBe("Must contain @ symbol");
	});

	test("component accepts all expected props", () => {
		const fullProps = {
			label: "Email",
			value: "test@example.com",
			onChange: jest.fn(),
			onSubmit: jest.fn(),
			placeholder: "Enter email",
			validation: jest.fn(() => true),
			showError: true,
			disabled: false,
			mask: undefined,
			focus: false,
			width: 40,
			required: true,
		};

		const component = React.createElement(InputField, fullProps);
		expect(component).toBeDefined();
		expect(component.props).toMatchObject(fullProps);
	});

	test("component has correct default values", () => {
		const component = React.createElement(InputField, {});

		// Check that defaults are applied correctly
		expect(component.props.value).toBeUndefined(); // Will use default in component
		expect(component.props.placeholder).toBeUndefined(); // Will use default in component
		expect(component.props.showError).toBeUndefined(); // Will use default in component
		expect(component.props.disabled).toBeUndefined(); // Will use default in component
		expect(component.props.required).toBeUndefined(); // Will use default in component
		expect(component.props.focus).toBeUndefined(); // Will use default in component
	});

	test("component type is correct", () => {
		const component = React.createElement(InputField, {});
		expect(typeof InputField).toBe("function");
		expect(component.type).toBe(InputField);
	});
});