@imposium-hub/components 2.16.0 → 3.0.0-1

package/src/components/text-field/TextField.test.tsx

@@ -1,988 +0,0 @@
-import React from 'react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, fireEvent, screen } from '../../test/utils';
-import TextField from './TextField';
-
-describe('TextField', () => {
-    const defaultProps = {
-        onChange: vi.fn(),
-        label: 'Test Text Field'
-    };
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-    });
-
-    describe('Rendering', () => {
-        it('renders without crashing', () => {
-            render(<TextField {...defaultProps} />);
-            const input = screen.getByRole('textbox');
-            expect(input).toBeDefined();
-        });
-
-        it('displays the correct value', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    value='test value'
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.value).toBe('test value');
-        });
-
-        it('displays placeholder when provided', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    placeholder='Enter text'
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.placeholder).toBe('Enter text');
-        });
-
-        it('sets disabled state correctly', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    disabled
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.disabled).toBe(true);
-        });
-
-        it('sets readOnly attribute when readOnly prop is true', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    readOnly
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.readOnly).toBe(true);
-        });
-
-        it('applies maxLength attribute when provided', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    maxLength={50}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.maxLength).toBe(50);
-        });
-
-        it('focuses input on mount when focusOnMount is true', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    focusOnMount
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(document.activeElement).toBe(input);
-        });
-    });
-
-    describe('Basic Interactions', () => {
-        it('calls onChange when value changes in uncontrolled mode', () => {
-            const onChange = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: 'new text' } });
-
-            expect(onChange).toHaveBeenCalledWith('new text');
-        });
-
-        it('calls onFocus when input receives focus', () => {
-            const onFocus = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    onFocus={onFocus}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.focus(input);
-
-            expect(onFocus).toHaveBeenCalled();
-        });
-
-        it('calls onBlur when input loses focus', () => {
-            const onBlur = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    onBlur={onBlur}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.blur(input);
-
-            expect(onBlur).toHaveBeenCalled();
-        });
-    });
-
-    describe('Pattern Validation', () => {
-        it('prevents input that does not match pattern', () => {
-            const onChange = vi.fn();
-            const numberPattern = /^\d*$/;
-            render(
-                <TextField
-                    {...defaultProps}
-                    onChange={onChange}
-                    pattern={numberPattern}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: 'abc123' } });
-
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('allows input that matches pattern', () => {
-            const onChange = vi.fn();
-            const numberPattern = /^\d*$/;
-            render(
-                <TextField
-                    {...defaultProps}
-                    onChange={onChange}
-                    pattern={numberPattern}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: '123' } });
-
-            expect(onChange).toHaveBeenCalledWith('123');
-        });
-    });
-
-    describe('Controlled Mode', () => {
-        it('renders edit button in controlled mode', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='test'
-                    onSubmit={vi.fn()}
-                />
-            );
-            const button = container.querySelector('[data-tooltip-content="Edit"]');
-            expect(button).toBeDefined();
-            expect(button?.getAttribute('data-tooltip-content')).toBe('Edit');
-        });
-    });
-
-    describe('Submittable Mode', () => {
-        it('renders submit button in submittable mode', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    doSubmit={vi.fn()}
-                />
-            );
-            const button = container.querySelector('[data-tooltip-content="Confirm"]');
-            expect(button).toBeDefined();
-            expect(button?.getAttribute('data-tooltip-content')).toBe('Confirm');
-        });
-
-        it('renders search icon when submittableType is search', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    submittableType='search'
-                    doSubmit={vi.fn()}
-                />
-            );
-            const button = container.querySelector('[data-tooltip-content="Search"]');
-            expect(button).toBeDefined();
-            expect(button?.getAttribute('data-tooltip-content')).toBe('Search');
-        });
-    });
-
-    describe('Loading State', () => {
-        it('disables input when loading is true', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    loading
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.disabled).toBe(true);
-        });
-    });
-
-    describe('Constructor Validation', () => {
-        it('throws error when both controlled and submittable are true', () => {
-            expect(() => {
-                render(
-                    <TextField
-                        {...defaultProps}
-                        controlled
-                        submittable
-                    />
-                );
-            }).toThrow('Actionable TextField(s) must be one of either: controlled or submittable.');
-        });
-    });
-
-    describe('Controlled Mode', () => {
-        it('renders in controlled mode with edit button', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='test value'
-                />
-            );
-
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            expect(editButton).toBeDefined();
-        });
-
-        it('toggles editing state when edit button is clicked', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='test value'
-                />
-            );
-
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(editButton);
-
-            // Should now show check icon instead of edit icon
-            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
-            expect(checkButton).toBeDefined();
-        });
-
-        it('calls onSubmit when editing is completed with changed value', () => {
-            const onSubmit = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='original'
-                    onSubmit={onSubmit}
-                />
-            );
-
-            // Start editing
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(editButton);
-
-            // Change value
-            const input = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: 'modified' } });
-
-            // Complete editing
-            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(checkButton);
-
-            expect(onSubmit).toHaveBeenCalledWith('modified');
-        });
-
-        it('does not call onSubmit when editing is completed without changes', () => {
-            const onSubmit = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='unchanged'
-                    onSubmit={onSubmit}
-                />
-            );
-
-            // Start editing
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(editButton);
-
-            // Complete editing without changes
-            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(checkButton);
-
-            expect(onSubmit).not.toHaveBeenCalled();
-        });
-
-        it('calls onSubmit with null when empty value is submitted', () => {
-            const onSubmit = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='original'
-                    onSubmit={onSubmit}
-                />
-            );
-
-            // Start editing
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(editButton);
-
-            // Clear value
-            const input = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: '' } });
-
-            // Complete editing
-            const checkButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(checkButton);
-
-            expect(onSubmit).toHaveBeenCalledWith(null);
-        });
-    });
-
-    describe('Submittable Mode', () => {
-        it('renders submittable mode with search icon', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    submittableType='search'
-                />
-            );
-
-            const submitButton = container.querySelector('[data-tooltip-content="Search"]');
-            expect(submitButton).toBeDefined();
-        });
-
-        it('renders submittable mode with check icon', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    submittableType='check'
-                />
-            );
-
-            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
-            expect(submitButton).toBeDefined();
-        });
-
-        it('renders submittable mode with add icon', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    submittableType='add'
-                />
-            );
-
-            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
-            expect(submitButton).toBeDefined();
-        });
-
-        it('calls doSubmit when submit button is clicked with value', () => {
-            const doSubmit = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    doSubmit={doSubmit}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: 'test submission' } });
-
-            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
-            fireEvent.click(submitButton);
-
-            expect(doSubmit).toHaveBeenCalledWith('test submission');
-        });
-
-        it('clears value after submission when submittableType is add', () => {
-            const doSubmit = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    submittableType='add'
-                    doSubmit={doSubmit}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: 'test value' } });
-
-            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
-            fireEvent.click(submitButton);
-
-            expect(input.value).toBe('');
-        });
-
-        it('shows clear button when value exists', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    value='some value'
-                />
-            );
-
-            const clearButton = container.querySelector('[data-tooltip-content="Clear"]');
-            expect(clearButton).toBeDefined();
-        });
-
-        it('calls doSubmit with empty string when clear button is clicked', () => {
-            const doSubmit = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    value='some value'
-                    doSubmit={doSubmit}
-                />
-            );
-
-            const clearButton = container.querySelector('[data-tooltip-content="Clear"]');
-            fireEvent.click(clearButton);
-
-            expect(doSubmit).toHaveBeenCalledWith('');
-        });
-    });
-
-    describe('Copy Functionality', () => {
-        it('shows copy button when showCopy is true', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    showCopy
-                    value='copyable text'
-                />
-            );
-
-            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
-            expect(copyButton).toBeDefined();
-        });
-
-        it('calls onNotification when copy succeeds', async () => {
-            const onNotification = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    showCopy
-                    value='copyable text'
-                    onNotification={onNotification}
-                />
-            );
-
-            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
-            fireEvent.click(copyButton);
-
-            // Wait for clipboard operation
-            await new Promise((resolve) => setTimeout(resolve, 0));
-
-            expect(onNotification).toHaveBeenCalledWith('Copied to clipboard!');
-        });
-
-        it('calls onError when copy fails', async () => {
-            // Mock clipboard to fail
-            const originalClipboard = navigator.clipboard;
-            Object.defineProperty(navigator, 'clipboard', {
-                value: {
-                    writeText: vi.fn().mockRejectedValue(new Error('Copy failed'))
-                },
-                writable: true,
-                configurable: true
-            });
-
-            const onError = vi.fn();
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    showCopy
-                    value='copyable text'
-                    onError={onError}
-                />
-            );
-
-            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
-            fireEvent.click(copyButton);
-
-            // Wait for clipboard operation
-            await new Promise((resolve) => setTimeout(resolve, 0));
-
-            expect(onError).toHaveBeenCalledWith('Error copying to clipboard.');
-
-            // Restore clipboard
-            Object.defineProperty(navigator, 'clipboard', {
-                value: originalClipboard,
-                writable: true,
-                configurable: true
-            });
-        });
-    });
-
-    describe('Pattern Validation', () => {
-        it('prevents input that does not match pattern', () => {
-            const onChange = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    pattern={/^\d+$/} // Only digits
-                    onChange={onChange}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: 'abc123' } });
-
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('allows input that matches pattern', () => {
-            const onChange = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    pattern={/^\d+$/} // Only digits
-                    onChange={onChange}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: '123' } });
-
-            expect(onChange).toHaveBeenCalledWith('123');
-        });
-
-        it('converts empty string to null for regular input', () => {
-            const onChange = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    onChange={onChange}
-                    value='initial'
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.change(input, { target: { value: '' } });
-
-            expect(onChange).toHaveBeenCalledWith(null);
-        });
-    });
-
-    describe('Button Visibility', () => {
-        it('hides all buttons when hideButtons is true', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    showCopy
-                    hideButtons
-                    value='test'
-                />
-            );
-
-            const submitButton = container.querySelector('[data-tooltip-content="Confirm"]');
-            const copyButton = container.querySelector('[data-tooltip-content*="Copy"]');
-
-            expect(submitButton).toBeNull();
-            expect(copyButton).toBeNull();
-        });
-
-        it('renders custom buttons array', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    buttons={[<button key='custom'>Custom</button>]}
-                />
-            );
-
-            const button = screen.getByText('Custom');
-            expect(button).toBeDefined();
-        });
-
-        it('renders single custom button', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    buttons={<button key='custom'>Single</button>}
-                />
-            );
-
-            const button = screen.getByText('Single');
-            expect(button).toBeDefined();
-        });
-    });
-
-    describe('Suggestions/Autocomplete', () => {
-        it('renders with suggestions and autocomplete functionality', () => {
-            const suggestions = ['apple', 'banana', 'cherry'];
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    suggestions={suggestions}
-                />
-            );
-
-            // Should render ReactTextareaAutocomplete (mocked as 'input' string)
-            const textContent = container.textContent;
-            expect(textContent).toContain('input');
-        });
-
-        it('handles suggestion click in submittable mode', () => {
-            const doSubmit = vi.fn();
-            const suggestions = ['apple', 'banana', 'cherry'];
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    suggestions={suggestions}
-                    doSubmit={doSubmit}
-                />
-            );
-
-            // Test that it renders with suggestions
-            expect(container.textContent).toContain('input');
-        });
-
-        it('handles Enter key in submittable mode with suggestions', () => {
-            const doSubmit = vi.fn();
-            const suggestions = ['apple', 'banana', 'cherry'];
-            render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    suggestions={suggestions}
-                    doSubmit={doSubmit}
-                />
-            );
-
-            // Test that component renders without errors
-            expect(doSubmit).toBeDefined();
-        });
-    });
-
-    describe('Keyboard Shortcuts', () => {
-        it('binds hotkeys on focus in submittable mode', () => {
-            const doSubmit = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    doSubmit={doSubmit}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-
-            // Test that focus event was handled
-            expect(input).toBeDefined();
-        });
-
-        it('unbinds hotkeys on blur in submittable mode', () => {
-            const doSubmit = vi.fn();
-            const onBlur = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    doSubmit={doSubmit}
-                    onBlur={onBlur}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-            fireEvent.blur(input);
-
-            expect(onBlur).toHaveBeenCalled();
-        });
-
-        it('binds hotkeys on focus in controlled mode', () => {
-            const onSubmit = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='original'
-                    onSubmit={onSubmit}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-
-            // Test that focus event was handled
-            expect(input).toBeDefined();
-        });
-
-        it('unbinds hotkeys on blur in controlled mode', () => {
-            const onBlur = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='original'
-                    onBlur={onBlur}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-            fireEvent.blur(input);
-
-            expect(onBlur).toHaveBeenCalled();
-        });
-    });
-
-    describe('Lifecycle Methods', () => {
-        it('handles componentWillUnmount for submittable mode', () => {
-            const { unmount } = render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                />
-            );
-
-            // Focus to bind hotkeys
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-
-            // Unmount should clean up hotkey bindings
-            unmount();
-        });
-
-        it('handles componentWillUnmount for controlled mode', () => {
-            const { unmount } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                />
-            );
-
-            // Focus to bind hotkeys
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-
-            // Unmount should clean up hotkey bindings
-            unmount();
-        });
-
-        it('handles componentDidUpdate for controlled mode', () => {
-            const { rerender } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='initial'
-                />
-            );
-
-            // Update component to trigger componentDidUpdate
-            rerender(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='updated'
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.value).toBe('updated');
-        });
-    });
-
-    describe('Edge Cases', () => {
-        it('handles null submittableType gracefully', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    submittableType={null}
-                />
-            );
-
-            // Should still render without crashing
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input).toBeDefined();
-        });
-
-        it('handles empty suggestions array', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    suggestions={[]}
-                />
-            );
-
-            // Should render ReactTextareaAutocomplete (mocked as 'input' string) even with empty suggestions
-            expect(container.textContent).toContain('input');
-        });
-
-        it('handles disabled state in controlled mode', () => {
-            render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    disabled
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.disabled).toBe(true);
-        });
-
-        it('handles blur event with hotkey cleanup', () => {
-            const onBlur = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    submittable
-                    onBlur={onBlur}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            fireEvent.focus(input);
-            fireEvent.blur(input);
-
-            expect(onBlur).toHaveBeenCalled();
-        });
-
-        it('handles focus event with hotkey binding', () => {
-            const onFocus = vi.fn();
-            render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    onFocus={onFocus}
-                />
-            );
-
-            const input = screen.getByRole('textbox');
-            fireEvent.focus(input);
-
-            expect(onFocus).toHaveBeenCalled();
-        });
-
-        it('handles setEditing method', () => {
-            const { container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='test'
-                />
-            );
-
-            // Start editing by clicking edit button
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(editButton);
-
-            // Should be in editing mode
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.disabled).toBe(false);
-        });
-
-        it('handles getValue method for different modes', () => {
-            const { rerender } = render(
-                <TextField
-                    {...defaultProps}
-                    value='test'
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.value).toBe('test');
-
-            // Test controlled mode
-            rerender(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='controlled test'
-                />
-            );
-
-            const controlledInput: HTMLInputElement = screen.getByRole('textbox');
-            expect(controlledInput.value).toBe('controlled test');
-        });
-    });
-
-    describe('Component Updates', () => {
-        it('updates internal value when props.value changes', () => {
-            const { rerender } = render(
-                <TextField
-                    {...defaultProps}
-                    value='initial'
-                />
-            );
-
-            rerender(
-                <TextField
-                    {...defaultProps}
-                    value='updated'
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.value).toBe('updated');
-        });
-
-        it('updates internal value when controlled mode value changes', () => {
-            const { rerender } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='initial'
-                />
-            );
-
-            rerender(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='updated'
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.value).toBe('updated');
-        });
-
-        it('clears internal value when editing ends and value is empty', () => {
-            const { rerender, container } = render(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value='initial'
-                />
-            );
-
-            // Start editing
-            const editButton = container.querySelector('[data-tooltip-content="Edit"]');
-            fireEvent.click(editButton);
-
-            // Update props to empty value and stop editing
-            rerender(
-                <TextField
-                    {...defaultProps}
-                    controlled
-                    value=''
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('textbox');
-            expect(input.value).toBe('');
-        });
-    });
-});