Just a whole lot of crap

tests/tui/components/common/ErrorBoundary.test.js

@@ -0,0 +1,194 @@
+const React = require("react");
+const ErrorBoundary = require("../../../../src/tui/components/common/ErrorBoundary");
+
+// Mock component that throws an error
+const ThrowError = ({ shouldThrow = false, message = "Test error" }) => {
+	if (shouldThrow) {
+		throw new Error(message);
+	}
+	return React.createElement("div", {}, "No error");
+};
+
+describe("ErrorBoundary Component", () => {
+	// Suppress console.error for these tests
+	beforeEach(() => {
+		jest.spyOn(console, "error").mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	test("component can be created with default props", () => {
+		const component = React.createElement(
+			ErrorBoundary,
+			{},
+			React.createElement("div", {}, "Child content")
+		);
+		expect(component).toBeDefined();
+		expect(component.type).toBe(ErrorBoundary);
+	});
+
+	test("component renders children when no error occurs", () => {
+		const childContent = React.createElement("div", {}, "Test content");
+		const component = React.createElement(ErrorBoundary, {}, childContent);
+
+		expect(component.props.children).toBe(childContent);
+	});
+
+	test("component accepts onError callback", () => {
+		const mockOnError = jest.fn();
+		const component = React.createElement(
+			ErrorBoundary,
+			{ onError: mockOnError },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.onError).toBe(mockOnError);
+	});
+
+	test("component accepts onRetry callback", () => {
+		const mockOnRetry = jest.fn();
+		const component = React.createElement(
+			ErrorBoundary,
+			{ onRetry: mockOnRetry },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.onRetry).toBe(mockOnRetry);
+	});
+
+	test("component accepts onReset callback", () => {
+		const mockOnReset = jest.fn();
+		const component = React.createElement(
+			ErrorBoundary,
+			{ onReset: mockOnReset },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.onReset).toBe(mockOnReset);
+	});
+
+	test("component accepts onExit callback", () => {
+		const mockOnExit = jest.fn();
+		const component = React.createElement(
+			ErrorBoundary,
+			{ onExit: mockOnExit },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.onExit).toBe(mockOnExit);
+	});
+
+	test("component accepts maxRetries prop", () => {
+		const component = React.createElement(
+			ErrorBoundary,
+			{ maxRetries: 5 },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.maxRetries).toBe(5);
+	});
+
+	test("component accepts showDetails prop", () => {
+		const component = React.createElement(
+			ErrorBoundary,
+			{ showDetails: false },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.showDetails).toBe(false);
+	});
+
+	test("component accepts title prop", () => {
+		const component = React.createElement(
+			ErrorBoundary,
+			{ title: "Custom Error Title" },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.title).toBe("Custom Error Title");
+	});
+
+	test("component accepts custom fallback function", () => {
+		const mockFallback = jest.fn(() =>
+			React.createElement("div", {}, "Custom error")
+		);
+		const component = React.createElement(
+			ErrorBoundary,
+			{ fallback: mockFallback },
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component.props.fallback).toBe(mockFallback);
+	});
+
+	test("component accepts all expected props", () => {
+		const fullProps = {
+			onError: jest.fn(),
+			onRetry: jest.fn(),
+			onReset: jest.fn(),
+			onExit: jest.fn(),
+			maxRetries: 3,
+			showDetails: true,
+			title: "Test Error",
+			fallback: jest.fn(),
+		};
+
+		const component = React.createElement(
+			ErrorBoundary,
+			fullProps,
+			React.createElement("div", {}, "Child")
+		);
+
+		expect(component).toBeDefined();
+		expect(component.props).toMatchObject(fullProps);
+	});
+
+	test("component is a class component", () => {
+		expect(typeof ErrorBoundary).toBe("function");
+		expect(ErrorBoundary.prototype.render).toBeDefined();
+		expect(ErrorBoundary.prototype.componentDidCatch).toBeDefined();
+	});
+
+	test("component has getDerivedStateFromError static method", () => {
+		expect(typeof ErrorBoundary.getDerivedStateFromError).toBe("function");
+	});
+
+	test("getDerivedStateFromError returns correct state", () => {
+		const error = new Error("Test error");
+		const newState = ErrorBoundary.getDerivedStateFromError(error);
+
+		expect(newState).toEqual({ hasError: true });
+	});
+
+	test("component handles multiple children", () => {
+		const child1 = React.createElement("div", {}, "Child 1");
+		const child2 = React.createElement("div", {}, "Child 2");
+		const component = React.createElement(ErrorBoundary, {}, child1, child2);
+
+		expect(component.props.children).toEqual([child1, child2]);
+	});
+
+	test("component has correct default behavior", () => {
+		const component = React.createElement(
+			ErrorBoundary,
+			{},
+			React.createElement("div", {}, "Test")
+		);
+
+		// Check that component can be created without required props
+		expect(component).toBeDefined();
+		expect(component.type).toBe(ErrorBoundary);
+	});
+
+	test("component type is correct", () => {
+		const component = React.createElement(
+			ErrorBoundary,
+			{},
+			React.createElement("div", {}, "Child")
+		);
+		expect(typeof ErrorBoundary).toBe("function");
+		expect(component.type).toBe(ErrorBoundary);
+	});
+});

tests/tui/components/common/ErrorDisplay.test.js

@@ -0,0 +1,113 @@
+const React = require("react");
+const ErrorDisplay = require("../../../../src/tui/components/common/ErrorDisplay.jsx");
+
+describe("ErrorDisplay Component", () => {
+	it("should create ErrorDisplay component without crashing", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error message",
+		});
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(ErrorDisplay);
+		expect(component.props.error).toBe("Test error message");
+	});
+
+	it("should accept custom title prop", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			title: "Custom Error Title",
+		});
+
+		expect(component.props.title).toBe("Custom Error Title");
+	});
+
+	it("should handle error objects with message property", () => {
+		const error = new Error("Object error message");
+		const component = React.createElement(ErrorDisplay, {
+			error: error,
+		});
+
+		expect(component.props.error).toBe(error);
+		expect(component.props.error.message).toBe("Object error message");
+	});
+
+	it("should handle error objects with name and code", () => {
+		const error = {
+			name: "ValidationError",
+			code: "INVALID_INPUT",
+			message: "Invalid input provided",
+		};
+		const component = React.createElement(ErrorDisplay, {
+			error: error,
+		});
+
+		expect(component.props.error.name).toBe("ValidationError");
+		expect(component.props.error.message).toBe("Invalid input provided");
+	});
+
+	it("should accept compact mode prop", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			compact: true,
+		});
+
+		expect(component.props.compact).toBe(true);
+	});
+
+	it("should accept onRetry callback", () => {
+		const mockRetry = jest.fn();
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			onRetry: mockRetry,
+		});
+
+		expect(component.props.onRetry).toBe(mockRetry);
+	});
+
+	it("should accept onDismiss callback", () => {
+		const mockDismiss = jest.fn();
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			onDismiss: mockDismiss,
+		});
+
+		expect(component.props.onDismiss).toBe(mockDismiss);
+	});
+
+	it("should accept showRetry prop", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			showRetry: false,
+		});
+
+		expect(component.props.showRetry).toBe(false);
+	});
+
+	it("should accept showDismiss prop", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			showDismiss: false,
+		});
+
+		expect(component.props.showDismiss).toBe(false);
+	});
+
+	it("should accept custom retry and dismiss text", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: "Test error",
+			retryText: "Custom retry text",
+			dismissText: "Custom dismiss text",
+		});
+
+		expect(component.props.retryText).toBe("Custom retry text");
+		expect(component.props.dismissText).toBe("Custom dismiss text");
+	});
+
+	it("should handle null error gracefully", () => {
+		const component = React.createElement(ErrorDisplay, {
+			error: null,
+		});
+
+		expect(component.props.error).toBe(null);
+	});
+});

tests/tui/components/common/FormInput.test.js

@@ -0,0 +1,172 @@
+const React = require("react");
+const {
+	FormInput,
+	SimpleFormInput,
+} = require("../../../../src/tui/components/common/FormInput.jsx");
+
+describe("FormInput Component", () => {
+	it("should create FormInput component with basic props", () => {
+		const component = React.createElement(FormInput, {
+			label: "Test Label",
+			value: "test value",
+		});
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(FormInput);
+		expect(component.props.label).toBe("Test Label");
+		expect(component.props.value).toBe("test value");
+	});
+
+	it("should accept required prop", () => {
+		const component = React.createElement(FormInput, {
+			label: "Required Field",
+			required: true,
+		});
+
+		expect(component.props.required).toBe(true);
+	});
+
+	it("should accept help text", () => {
+		const component = React.createElement(FormInput, {
+			label: "Test Field",
+			helpText: "This is help text",
+		});
+
+		expect(component.props.helpText).toBe("This is help text");
+	});
+
+	it("should accept validation function", () => {
+		const mockValidation = jest.fn();
+		const component = React.createElement(FormInput, {
+			label: "Validated Field",
+			validation: mockValidation,
+		});
+
+		expect(component.props.validation).toBe(mockValidation);
+	});
+
+	it("should accept input type", () => {
+		const component = React.createElement(FormInput, {
+			label: "Email Field",
+			type: "email",
+		});
+
+		expect(component.props.type).toBe("email");
+	});
+
+	it("should accept maxLength prop", () => {
+		const component = React.createElement(FormInput, {
+			label: "Short Text",
+			maxLength: 10,
+		});
+
+		expect(component.props.maxLength).toBe(10);
+	});
+
+	it("should accept disabled prop", () => {
+		const component = React.createElement(FormInput, {
+			label: "Disabled Field",
+			disabled: true,
+		});
+
+		expect(component.props.disabled).toBe(true);
+	});
+
+	it("should accept showError prop", () => {
+		const component = React.createElement(FormInput, {
+			label: "No Error Display",
+			showError: false,
+		});
+
+		expect(component.props.showError).toBe(false);
+	});
+
+	it("should accept select type with options", () => {
+		const options = [
+			{ label: "Option 1", value: "opt1" },
+			{ label: "Option 2", value: "opt2" },
+		];
+
+		const component = React.createElement(FormInput, {
+			label: "Select Field",
+			type: "select",
+			options: options,
+		});
+
+		expect(component.props.type).toBe("select");
+		expect(component.props.options).toBe(options);
+	});
+
+	it("should accept callback functions", () => {
+		const mockOnChange = jest.fn();
+		const mockOnSubmit = jest.fn();
+		const mockOnFocus = jest.fn();
+		const mockOnBlur = jest.fn();
+
+		const component = React.createElement(FormInput, {
+			label: "Callback Field",
+			onChange: mockOnChange,
+			onSubmit: mockOnSubmit,
+			onFocus: mockOnFocus,
+			onBlur: mockOnBlur,
+		});
+
+		expect(component.props.onChange).toBe(mockOnChange);
+		expect(component.props.onSubmit).toBe(mockOnSubmit);
+		expect(component.props.onFocus).toBe(mockOnFocus);
+		expect(component.props.onBlur).toBe(mockOnBlur);
+	});
+
+	it("should accept placeholder and mask", () => {
+		const component = React.createElement(FormInput, {
+			label: "Masked Field",
+			placeholder: "Enter value",
+			mask: "***",
+		});
+
+		expect(component.props.placeholder).toBe("Enter value");
+		expect(component.props.mask).toBe("***");
+	});
+});
+
+describe("SimpleFormInput Component", () => {
+	it("should create SimpleFormInput component", () => {
+		const component = React.createElement(SimpleFormInput, {
+			label: "Simple Field",
+			value: "simple value",
+		});
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(SimpleFormInput);
+		expect(component.props.label).toBe("Simple Field");
+		expect(component.props.value).toBe("simple value");
+	});
+
+	it("should accept onChange callback", () => {
+		const mockOnChange = jest.fn();
+		const component = React.createElement(SimpleFormInput, {
+			label: "Simple Field",
+			onChange: mockOnChange,
+		});
+
+		expect(component.props.onChange).toBe(mockOnChange);
+	});
+
+	it("should accept required prop", () => {
+		const component = React.createElement(SimpleFormInput, {
+			label: "Required Simple",
+			required: true,
+		});
+
+		expect(component.props.required).toBe(true);
+	});
+
+	it("should accept placeholder", () => {
+		const component = React.createElement(SimpleFormInput, {
+			label: "Simple Field",
+			placeholder: "Enter text",
+		});
+
+		expect(component.props.placeholder).toBe("Enter text");
+	});
+});

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

@@ -0,0 +1,166 @@
+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);
+	});
+});

tests/tui/components/common/LoadingIndicator.test.js

@@ -0,0 +1,97 @@
+const React = require("react");
+const {
+	LoadingIndicator,
+	LoadingOverlay,
+} = require("../../../../src/tui/components/common/LoadingIndicator.jsx");
+
+describe("LoadingIndicator Component", () => {
+	it("should create LoadingIndicator component with default props", () => {
+		const component = React.createElement(LoadingIndicator);
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(LoadingIndicator);
+	});
+
+	it("should accept custom loading text", () => {
+		const component = React.createElement(LoadingIndicator, {
+			text: "Custom loading message",
+		});
+
+		expect(component.props.text).toBe("Custom loading message");
+	});
+
+	it("should accept showSpinner prop", () => {
+		const component = React.createElement(LoadingIndicator, {
+			showSpinner: false,
+		});
+
+		expect(component.props.showSpinner).toBe(false);
+	});
+
+	it("should accept progress props", () => {
+		const component = React.createElement(LoadingIndicator, {
+			showProgress: true,
+			progress: 50,
+			progressMax: 100,
+		});
+
+		expect(component.props.showProgress).toBe(true);
+		expect(component.props.progress).toBe(50);
+		expect(component.props.progressMax).toBe(100);
+	});
+
+	it("should accept compact mode prop", () => {
+		const component = React.createElement(LoadingIndicator, {
+			compact: true,
+		});
+
+		expect(component.props.compact).toBe(true);
+	});
+
+	it("should accept centered prop", () => {
+		const component = React.createElement(LoadingIndicator, {
+			centered: true,
+		});
+
+		expect(component.props.centered).toBe(true);
+	});
+
+	it("should accept color and type props", () => {
+		const component = React.createElement(LoadingIndicator, {
+			color: "green",
+			type: "dots2",
+		});
+
+		expect(component.props.color).toBe("green");
+		expect(component.props.type).toBe("dots2");
+	});
+});
+
+describe("LoadingOverlay Component", () => {
+	it("should create LoadingOverlay component", () => {
+		const component = React.createElement(LoadingOverlay);
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(LoadingOverlay);
+	});
+
+	it("should accept custom text prop", () => {
+		const component = React.createElement(LoadingOverlay, {
+			text: "Processing data...",
+		});
+
+		expect(component.props.text).toBe("Processing data...");
+	});
+
+	it("should accept progress props", () => {
+		const component = React.createElement(LoadingOverlay, {
+			showProgress: true,
+			progress: 75,
+			progressMax: 100,
+		});
+
+		expect(component.props.showProgress).toBe(true);
+		expect(component.props.progress).toBe(75);
+		expect(component.props.progressMax).toBe(100);
+	});
+});

tests/tui/components/common/MenuList.test.js

@@ -0,0 +1,177 @@
+const React = require("react");
+const MenuList = require("../../../../src/tui/components/common/MenuList");
+
+describe("MenuList Component", () => {
+	test("component can be created with default props", () => {
+		const component = React.createElement(MenuList, {});
+		expect(component).toBeDefined();
+		expect(component.type).toBe(MenuList);
+	});
+
+	test("component accepts items array", () => {
+		const items = ["Option 1", "Option 2", "Option 3"];
+		const component = React.createElement(MenuList, { items });
+
+		expect(component.props.items).toEqual(items);
+	});
+
+	test("component accepts string items", () => {
+		const items = ["Home", "Settings", "Exit"];
+		const component = React.createElement(MenuList, { items });
+
+		expect(component.props.items).toEqual(items);
+	});
+
+	test("component accepts object items with labels", () => {
+		const items = [
+			{ label: "Home", shortcut: "h" },
+			{ label: "Settings", shortcut: "s" },
+			{ label: "Exit", shortcut: "q" },
+		];
+		const component = React.createElement(MenuList, { items });
+
+		expect(component.props.items).toEqual(items);
+	});
+
+	test("component accepts object items with different properties", () => {
+		const items = [
+			{ title: "Home", shortcut: "h", description: "Go to home screen" },
+			{ name: "Settings", shortcut: "s", description: "Configure app" },
+			{ label: "Exit", shortcut: "q", description: "Quit application" },
+		];
+		const component = React.createElement(MenuList, { items });
+
+		expect(component.props.items).toEqual(items);
+	});
+
+	test("component accepts selectedIndex prop", () => {
+		const component = React.createElement(MenuList, {
+			selectedIndex: 2,
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.selectedIndex).toBe(2);
+	});
+
+	test("component accepts onSelect callback", () => {
+		const mockOnSelect = jest.fn();
+		const component = React.createElement(MenuList, {
+			onSelect: mockOnSelect,
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.onSelect).toBe(mockOnSelect);
+	});
+
+	test("component accepts onHighlight callback", () => {
+		const mockOnHighlight = jest.fn();
+		const component = React.createElement(MenuList, {
+			onHighlight: mockOnHighlight,
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.onHighlight).toBe(mockOnHighlight);
+	});
+
+	test("component accepts showShortcuts prop", () => {
+		const component = React.createElement(MenuList, {
+			showShortcuts: false,
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.showShortcuts).toBe(false);
+	});
+
+	test("component accepts color customization props", () => {
+		const component = React.createElement(MenuList, {
+			highlightColor: "green",
+			normalColor: "cyan",
+			shortcutColor: "yellow",
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.highlightColor).toBe("green");
+		expect(component.props.normalColor).toBe("cyan");
+		expect(component.props.shortcutColor).toBe("yellow");
+	});
+
+	test("component accepts prefix customization", () => {
+		const component = React.createElement(MenuList, {
+			prefix: "→ ",
+			normalPrefix: "   ",
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.prefix).toBe("→ ");
+		expect(component.props.normalPrefix).toBe("   ");
+	});
+
+	test("component accepts disabled prop", () => {
+		const component = React.createElement(MenuList, {
+			disabled: true,
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.disabled).toBe(true);
+	});
+
+	test("component accepts width prop", () => {
+		const component = React.createElement(MenuList, {
+			width: 50,
+			items: ["A", "B", "C"],
+		});
+
+		expect(component.props.width).toBe(50);
+	});
+
+	test("component handles empty items array", () => {
+		const component = React.createElement(MenuList, { items: [] });
+		expect(component.props.items).toEqual([]);
+	});
+
+	test("component handles undefined items", () => {
+		const component = React.createElement(MenuList, { items: undefined });
+		expect(component.props.items).toBeUndefined();
+	});
+
+	test("component accepts all expected props", () => {
+		const fullProps = {
+			items: [
+				{ label: "Home", shortcut: "h", description: "Go home" },
+				{ label: "Settings", shortcut: "s", description: "Configure" },
+			],
+			selectedIndex: 1,
+			onSelect: jest.fn(),
+			onHighlight: jest.fn(),
+			showShortcuts: true,
+			highlightColor: "blue",
+			normalColor: "white",
+			shortcutColor: "gray",
+			prefix: "► ",
+			normalPrefix: "  ",
+			disabled: false,
+			width: 60,
+		};
+
+		const component = React.createElement(MenuList, fullProps);
+		expect(component).toBeDefined();
+		expect(component.props).toMatchObject(fullProps);
+	});
+
+	test("component has correct default values", () => {
+		const component = React.createElement(MenuList, {});
+
+		// Check that defaults are applied correctly in the component
+		expect(component.props.items).toBeUndefined(); // Will use default in component
+		expect(component.props.selectedIndex).toBeUndefined(); // Will use default in component
+		expect(component.props.showShortcuts).toBeUndefined(); // Will use default in component
+		expect(component.props.highlightColor).toBeUndefined(); // Will use default in component
+		expect(component.props.disabled).toBeUndefined(); // Will use default in component
+	});
+
+	test("component type is correct", () => {
+		const component = React.createElement(MenuList, { items: ["A", "B"] });
+		expect(typeof MenuList).toBe("function");
+		expect(component.type).toBe(MenuList);
+	});
+});

tests/tui/components/common/Pagination.test.js

@@ -0,0 +1,110 @@
+const React = require("react");
+const {
+	Pagination,
+	SimplePagination,
+} = require("../../../../src/tui/components/common/Pagination.jsx");
+
+describe("Pagination Component", () => {
+	it("should create Pagination component with default props", () => {
+		const component = React.createElement(Pagination);
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(Pagination);
+	});
+
+	it("should accept pagination props", () => {
+		const mockOnPageChange = jest.fn();
+		const component = React.createElement(Pagination, {
+			currentPage: 2,
+			totalPages: 5,
+			totalItems: 50,
+			itemsPerPage: 10,
+			onPageChange: mockOnPageChange,
+		});
+
+		expect(component.props.currentPage).toBe(2);
+		expect(component.props.totalPages).toBe(5);
+		expect(component.props.totalItems).toBe(50);
+		expect(component.props.itemsPerPage).toBe(10);
+		expect(component.props.onPageChange).toBe(mockOnPageChange);
+	});
+
+	it("should accept display options", () => {
+		const component = React.createElement(Pagination, {
+			showItemCount: false,
+			showPageNumbers: false,
+			showNavigation: false,
+			compact: true,
+		});
+
+		expect(component.props.showItemCount).toBe(false);
+		expect(component.props.showPageNumbers).toBe(false);
+		expect(component.props.showNavigation).toBe(false);
+		expect(component.props.compact).toBe(true);
+	});
+
+	it("should accept disabled prop", () => {
+		const component = React.createElement(Pagination, {
+			disabled: true,
+		});
+
+		expect(component.props.disabled).toBe(true);
+	});
+
+	it("should handle edge cases with props", () => {
+		const component = React.createElement(Pagination, {
+			currentPage: 0,
+			totalPages: 1,
+			totalItems: 5,
+			itemsPerPage: 10,
+		});
+
+		expect(component.props.currentPage).toBe(0);
+		expect(component.props.totalPages).toBe(1);
+		expect(component.props.totalItems).toBe(5);
+	});
+
+	it("should accept onPageChange callback", () => {
+		const mockCallback = jest.fn();
+		const component = React.createElement(Pagination, {
+			onPageChange: mockCallback,
+		});
+
+		expect(component.props.onPageChange).toBe(mockCallback);
+	});
+});
+
+describe("SimplePagination Component", () => {
+	it("should create SimplePagination component", () => {
+		const component = React.createElement(SimplePagination, {
+			currentPage: 1,
+			totalPages: 5,
+		});
+
+		expect(component).toBeDefined();
+		expect(component.type).toBe(SimplePagination);
+		expect(component.props.currentPage).toBe(1);
+		expect(component.props.totalPages).toBe(5);
+	});
+
+	it("should accept onPageChange callback", () => {
+		const mockCallback = jest.fn();
+		const component = React.createElement(SimplePagination, {
+			currentPage: 0,
+			totalPages: 3,
+			onPageChange: mockCallback,
+		});
+
+		expect(component.props.onPageChange).toBe(mockCallback);
+	});
+
+	it("should accept disabled prop", () => {
+		const component = React.createElement(SimplePagination, {
+			currentPage: 1,
+			totalPages: 5,
+			disabled: true,
+		});
+
+		expect(component.props.disabled).toBe(true);
+	});
+});