@pie-lib/config-ui 11.30.3-next.2 → 11.30.3-next.205

package/src/__tests__/number-text-field.test.jsx

@@ -1,148 +1,341 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { NumberTextField } from '../number-text-field';
-import TextField from '@material-ui/core/TextField';
 
 describe('NumberTextField', () => {
-  describe('render', () => {
-    let value = 1;
-    let onChange, component, textField, onBlur;
-    let min = 1;
-    let max = 10;
-
-    describe('TextField', () => {
-      beforeEach(() => {
-        onChange = jest.fn();
-        onBlur = jest.fn();
-        component = shallow(
-          <NumberTextField value={value} min={min} max={max} classes={{}} onChange={onChange} onBlur={onBlur} />,
-        );
-        textField = component.find(TextField);
-      });
+  const defaultProps = {
+    value: 1,
+    min: 1,
+    max: 10,
+    classes: {},
+    onChange: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-      it('should render mui TextField', () => {
-        expect(textField.length).toEqual(1);
-      });
+  describe('rendering', () => {
+    it('renders TextField with correct value', () => {
+      render(<NumberTextField {...defaultProps} />);
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(1);
+    });
 
-      describe('props', () => {
-        let props;
+    it('renders with custom label', () => {
+      render(<NumberTextField {...defaultProps} label="Custom Label" />);
+      expect(screen.getByLabelText('Custom Label')).toBeInTheDocument();
+    });
 
-        beforeEach(() => {
-          props = textField.props();
-        });
+    it('renders with suffix', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} suffix="px" />,
+      );
+      expect(screen.getByText('px')).toBeInTheDocument();
+    });
 
-        it('should contain value', () => {
-          expect(props.value).toEqual(value);
-        });
-      });
+    it('renders without suffix when not provided', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} />,
+      );
+      const input = screen.getByRole('spinbutton');
+      expect(input).toBeInTheDocument();
+    });
 
-      describe('logic', () => {
-        describe('clamp', () => {
-          const assertClamp = (input, expected) => {
-            it(`${input} => ${expected}`, () => {
-              const result = component.instance().clamp(input);
-              expect(result).toEqual(expected);
-            });
-          };
+    it('renders as disabled when disabled prop is true', () => {
+      render(<NumberTextField {...defaultProps} disabled={true} />);
+      const input = screen.getByRole('spinbutton');
+      expect(input).toBeDisabled();
+    });
 
-          assertClamp('foo', 1);
-          assertClamp(1, 1);
-          assertClamp(2, 2);
-          assertClamp(0, 1);
-          assertClamp(-1, 1);
-          assertClamp(10, 10);
-          assertClamp(11, 10);
-        });
+    it('renders as enabled when disabled prop is false', () => {
+      render(<NumberTextField {...defaultProps} disabled={false} />);
+      const input = screen.getByRole('spinbutton');
+      expect(input).not.toBeDisabled();
+    });
 
-        describe('onBlur', () => {
-          const event = (value) => ({
-            target: { value },
-          });
+    it('renders with custom variant', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} variant="outlined" />,
+      );
+      expect(container.querySelector('input')).toBeInTheDocument();
+    });
 
-          describe('called with valid string representation of int', () => {
-            it('should be called with parsed int', () => {
-              const e = event('1');
+    it('renders with disableUnderline variant', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} disableUnderline={true} />,
+      );
+      expect(container.querySelector('input')).toBeInTheDocument();
+    });
 
-              textField.simulate('change', e);
+    it('renders with custom className', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} className="custom-class" />,
+      );
+      expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
 
-              expect(component.state('value')).toEqual('1');
+    it('renders with custom inputClassName', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} inputClassName="input-class" />,
+      );
+      expect(container.querySelector('.input-class')).toBeInTheDocument();
+    });
 
-              e.target.value = '100';
+    it('renders with ShrinkLabel InputLabelProps', () => {
+      render(<NumberTextField {...defaultProps} label="Shrink Label" />);
+      expect(screen.getByLabelText('Shrink Label')).toBeInTheDocument();
+    });
 
-              textField.simulate('change', e);
+    it('renders with margin normal', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} />,
+      );
+      expect(container.querySelector('input')).toBeInTheDocument();
+    });
+  });
 
-              expect(component.state('value')).toEqual('100');
+  describe('onChange callback', () => {
+    it('calls onChange with clamped value on blur', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
 
-              const beforeMax = (max - 1).toString();
-              e.target.value = beforeMax;
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '15');
+      fireEvent.blur(input);
 
-              textField.simulate('blur', e);
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith(expect.anything(), 10);
+      });
+    });
 
-              expect(component.state('value')).toEqual(beforeMax);
-            });
-          });
+    it('calls onChange on Enter key press', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
 
-          describe('called with invalid string representation of int', () => {
-            it('should be called with min value', () => {
-              const e = event('aa');
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '5');
+      await user.keyboard('{Enter}');
 
-              textField.simulate('change', e);
+      expect(input).toHaveValue(5);
+    });
 
-              expect(component.state('value')).toEqual('aa');
+    it('calls onChange during typing (unvalidated)', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
 
-              textField.simulate('blur', e);
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '7');
 
-              expect(component.state('value')).toEqual(min.toString());
-            });
-          });
+      // onChange should be called at least once during typing
+      expect(input).toHaveValue(7);
+    });
 
-          describe('called with empty string', () => {
-            it('should be called with min value', () => {
-              const e = event('');
+    it('does not call onChange when value does not change on blur', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} value={5} onChange={onChange} />);
 
-              textField.simulate('change', e);
+      const input = screen.getByRole('spinbutton');
+      fireEvent.blur(input);
 
-              expect(component.state('value')).toEqual('');
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
 
-              textField.simulate('blur', e);
+  describe('range constraints', () => {
+    it('handles only min constraint', async () => {
+      const user = userEvent.setup();
+      const { container } = render(
+        <NumberTextField
+          value={5}
+          min={3}
+          onChange={jest.fn()}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(5);
+    });
+
+    it('handles only max constraint', async () => {
+      const user = userEvent.setup();
+      const { container } = render(
+        <NumberTextField
+          value={5}
+          max={10}
+          onChange={jest.fn()}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(5);
+    });
 
-              expect(component.state('value')).toEqual(min.toString());
-            });
-          });
+    it('handles no constraints', () => {
+      const { container } = render(
+        <NumberTextField
+          value={100}
+          onChange={jest.fn()}
+        />,
+      );
 
-          describe('string int less than min', () => {
-            const value = (min - 1).toString();
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(100);
+    });
+  });
 
-            it('should be called with value of min', () => {
-              const e = event(value);
+  describe('keyboard interactions', () => {
+    it('handles Enter key to blur', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
 
-              textField.simulate('change', e);
+      const input = screen.getByRole('spinbutton');
+      input.focus();
+      await user.type(input, '{Enter}');
 
-              expect(component.state('value')).toEqual(value);
+      expect(input).not.toHaveFocus();
+    });
 
-              textField.simulate('blur', e);
+    it('allows typing numbers', async () => {
+      const user = userEvent.setup();
+      render(<NumberTextField {...defaultProps} />);
 
-              expect(component.state('value')).toEqual(min.toString());
-            });
-          });
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '42');
 
-          describe('string int exceeds max', () => {
-            const value = (max + 1).toString();
+      expect(input).toHaveValue(42);
+    });
+
+    it('allows negative sign', async () => {
+      const user = userEvent.setup();
+      render(<NumberTextField {...defaultProps} min={-100} value={0} />);
+
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '-5');
+
+      expect(input).toHaveValue(-5);
+    });
+  });
 
-            it('should be called with value of max', () => {
-              const e = event(value);
+  describe('props updates', () => {
+    it('updates value when prop changes', () => {
+      const { rerender } = render(
+        <NumberTextField {...defaultProps} value={5} />,
+      );
 
-              textField.simulate('change', e);
+      let input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(5);
 
-              expect(component.state('value')).toEqual(value);
+      rerender(<NumberTextField {...defaultProps} value={8} />);
 
-              textField.simulate('blur', e);
+      input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(8);
+    });
 
-              expect(component.state('value')).toEqual(max.toString());
-            });
-          });
-        });
+    it('updates constraints when min/max props change', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      const { rerender } = render(
+        <NumberTextField
+          value={5}
+          min={1}
+          max={10}
+          onChange={onChange}
+        />,
+      );
+
+      rerender(
+        <NumberTextField
+          value={5}
+          min={1}
+          max={8}
+          onChange={onChange}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '15');
+      fireEvent.blur(input);
+
+      await waitFor(() => {
+        expect(input).toHaveValue(8); // Clamped to new max
       });
     });
+
+    it('re-clamps value when constraints become more restrictive', () => {
+      const onChange = jest.fn();
+      const { rerender } = render(
+        <NumberTextField
+          value={8}
+          min={1}
+          max={10}
+          onChange={onChange}
+        />,
+      );
+
+      rerender(
+        <NumberTextField
+          value={8}
+          min={1}
+          max={5}
+          onChange={onChange}
+        />,
+      );
+
+      // Component should re-clamp the value
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+    });
+  });
+
+  describe('fallback number logic', () => {
+    it('defaults to 0 when no min or max is provided', () => {
+      render(
+        <NumberTextField
+          value={undefined}
+          onChange={jest.fn()}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(0);
+    });
+
+    it('defaults to max when only max is provided', () => {
+      render(
+        <NumberTextField
+          value={undefined}
+          max={15}
+          onChange={jest.fn()}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(15);
+    });
+
+    it('defaults to min when only min is provided', () => {
+      render(
+        <NumberTextField
+          value={undefined}
+          min={5}
+          onChange={jest.fn()}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(5);
+    });
   });
 });