@pie-lib/config-ui 12.0.0-beta.5 → 12.1.0-next.0

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

@@ -0,0 +1,341 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NumberTextField } from '../number-text-field';
+
+describe('NumberTextField', () => {
+  const defaultProps = {
+    value: 1,
+    min: 1,
+    max: 10,
+    classes: {},
+    onChange: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders TextField with correct value', () => {
+      render(<NumberTextField {...defaultProps} />);
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(1);
+    });
+
+    it('renders with custom label', () => {
+      render(<NumberTextField {...defaultProps} label="Custom Label" />);
+      expect(screen.getByLabelText('Custom Label')).toBeInTheDocument();
+    });
+
+    it('renders with suffix', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} suffix="px" />,
+      );
+      expect(screen.getByText('px')).toBeInTheDocument();
+    });
+
+    it('renders without suffix when not provided', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} />,
+      );
+      const input = screen.getByRole('spinbutton');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<NumberTextField {...defaultProps} disabled={true} />);
+      const input = screen.getByRole('spinbutton');
+      expect(input).toBeDisabled();
+    });
+
+    it('renders as enabled when disabled prop is false', () => {
+      render(<NumberTextField {...defaultProps} disabled={false} />);
+      const input = screen.getByRole('spinbutton');
+      expect(input).not.toBeDisabled();
+    });
+
+    it('renders with custom variant', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} variant="outlined" />,
+      );
+      expect(container.querySelector('input')).toBeInTheDocument();
+    });
+
+    it('renders with disableUnderline variant', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} disableUnderline={true} />,
+      );
+      expect(container.querySelector('input')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} className="custom-class" />,
+      );
+      expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
+
+    it('renders with custom inputClassName', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} inputClassName="input-class" />,
+      );
+      expect(container.querySelector('.input-class')).toBeInTheDocument();
+    });
+
+    it('renders with ShrinkLabel InputLabelProps', () => {
+      render(<NumberTextField {...defaultProps} label="Shrink Label" />);
+      expect(screen.getByLabelText('Shrink Label')).toBeInTheDocument();
+    });
+
+    it('renders with margin normal', () => {
+      const { container } = render(
+        <NumberTextField {...defaultProps} />,
+      );
+      expect(container.querySelector('input')).toBeInTheDocument();
+    });
+  });
+
+  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 input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '15');
+      fireEvent.blur(input);
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith(expect.anything(), 10);
+      });
+    });
+
+    it('calls onChange on Enter key press', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
+
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '5');
+      await user.keyboard('{Enter}');
+
+      expect(input).toHaveValue(5);
+    });
+
+    it('calls onChange during typing (unvalidated)', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
+
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '7');
+
+      // onChange should be called at least once during typing
+      expect(input).toHaveValue(7);
+    });
+
+    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} />);
+
+      const input = screen.getByRole('spinbutton');
+      fireEvent.blur(input);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  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);
+    });
+
+    it('handles no constraints', () => {
+      const { container } = render(
+        <NumberTextField
+          value={100}
+          onChange={jest.fn()}
+        />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(100);
+    });
+  });
+
+  describe('keyboard interactions', () => {
+    it('handles Enter key to blur', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<NumberTextField {...defaultProps} onChange={onChange} />);
+
+      const input = screen.getByRole('spinbutton');
+      input.focus();
+      await user.type(input, '{Enter}');
+
+      expect(input).not.toHaveFocus();
+    });
+
+    it('allows typing numbers', async () => {
+      const user = userEvent.setup();
+      render(<NumberTextField {...defaultProps} />);
+
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '42');
+
+      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);
+    });
+  });
+
+  describe('props updates', () => {
+    it('updates value when prop changes', () => {
+      const { rerender } = render(
+        <NumberTextField {...defaultProps} value={5} />,
+      );
+
+      let input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(5);
+
+      rerender(<NumberTextField {...defaultProps} value={8} />);
+
+      input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(8);
+    });
+
+    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);
+    });
+  });
+});

package/src/__tests__/radio-with-label.test.jsx

@@ -0,0 +1,259 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import RadioWithLabel from '../radio-with-label';
+
+describe('RadioWithLabel Component', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('Rendering', () => {
+    it('should render radio button with label', () => {
+      render(
+        <RadioWithLabel 
+          label="Option 1" 
+          value="option1" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('should render checked radio button', () => {
+      render(
+        <RadioWithLabel 
+          label="Selected" 
+          value="selected" 
+          checked={true}
+          onChange={onChange}
+        />,
+      );
+
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+
+    it('should render unchecked radio button', () => {
+      render(
+        <RadioWithLabel 
+          label="Unselected" 
+          value="unselected" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+  });
+
+  describe('User interaction', () => {
+    it('should call onChange when radio button is clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <RadioWithLabel 
+          label="Option" 
+          value="option" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      const radio = screen.getByRole('radio');
+      await user.click(radio);
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should call onChange when label is clicked', async () => {
+      const user = userEvent.setup();
+      render(
+        <RadioWithLabel 
+          label="Click me" 
+          value="test" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      const label = screen.getByText('Click me');
+      await user.click(label);
+
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('Props', () => {
+    it('should accept different value types', () => {
+      const { container: stringContainer } = render(
+        <RadioWithLabel 
+          label="String value" 
+          value="string" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      const { container: numberContainer } = render(
+        <RadioWithLabel 
+          label="Number value" 
+          value={123} 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      expect(stringContainer.querySelector('input[type="radio"]')).toBeInTheDocument();
+      expect(numberContainer.querySelector('input[type="radio"]')).toBeInTheDocument();
+    });
+
+    it('should display different labels', () => {
+      render(
+        <>
+          <RadioWithLabel 
+            label="Label A" 
+            value="a" 
+            checked={false}
+            onChange={onChange}
+          />
+          <RadioWithLabel 
+            label="Label B" 
+            value="b" 
+            checked={false}
+            onChange={onChange}
+          />
+        </>,
+      );
+
+      expect(screen.getByText('Label A')).toBeInTheDocument();
+      expect(screen.getByText('Label B')).toBeInTheDocument();
+    });
+  });
+
+  describe('Radio button group behavior', () => {
+    it('should allow multiple radio buttons to be rendered', () => {
+      render(
+        <>
+          <RadioWithLabel 
+            label="Option 1" 
+            value="opt1" 
+            checked={true}
+            onChange={onChange}
+          />
+          <RadioWithLabel 
+            label="Option 2" 
+            value="opt2" 
+            checked={false}
+            onChange={onChange}
+          />
+          <RadioWithLabel 
+            label="Option 3" 
+            value="opt3" 
+            checked={false}
+            onChange={onChange}
+          />
+        </>,
+      );
+
+      const radios = screen.getAllByRole('radio');
+      expect(radios).toHaveLength(3);
+      expect(radios[0]).toBeChecked();
+      expect(radios[1]).not.toBeChecked();
+      expect(radios[2]).not.toBeChecked();
+    });
+
+    it('should handle independent onChange callbacks for multiple radios', async () => {
+      const user = userEvent.setup();
+      const onChange1 = jest.fn();
+      const onChange2 = jest.fn();
+      const onChange3 = jest.fn();
+
+      render(
+        <>
+          <RadioWithLabel 
+            label="Option 1" 
+            value="opt1" 
+            checked={true}
+            onChange={onChange1}
+          />
+          <RadioWithLabel 
+            label="Option 2" 
+            value="opt2" 
+            checked={false}
+            onChange={onChange2}
+          />
+          <RadioWithLabel 
+            label="Option 3" 
+            value="opt3" 
+            checked={false}
+            onChange={onChange3}
+          />
+        </>,
+      );
+
+      const radios = screen.getAllByRole('radio');
+      
+      await user.click(radios[1]);
+      expect(onChange2).toHaveBeenCalled();
+      expect(onChange1).not.toHaveBeenCalled();
+      expect(onChange3).not.toHaveBeenCalled();
+
+      onChange2.mockClear();
+
+      await user.click(radios[2]);
+      expect(onChange3).toHaveBeenCalled();
+      expect(onChange1).not.toHaveBeenCalled();
+      expect(onChange2).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should render with correct styling classes', () => {
+      const { container } = render(
+        <RadioWithLabel 
+          label="Styled" 
+          value="styled" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      expect(container.querySelector('[class*="MuiFormControlLabel"]')).toBeInTheDocument();
+      expect(container.querySelector('[class*="MuiRadio"]')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty string label', () => {
+      render(
+        <RadioWithLabel 
+          label="" 
+          value="empty" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('should handle long labels', () => {
+      const longLabel = 'This is a very long label that should wrap properly and not break the layout';
+      render(
+        <RadioWithLabel 
+          label={longLabel} 
+          value="long" 
+          checked={false}
+          onChange={onChange}
+        />,
+      );
+
+      expect(screen.getByText(longLabel)).toBeInTheDocument();
+    });
+  });
+});