@pie-lib/config-ui 13.0.4-next.31 → 13.0.4-next.34

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

@@ -0,0 +1,263 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } 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,155 @@
+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();
+    });
+  });
+});

package/src/__tests__/settings-panel.test.js

@@ -0,0 +1,187 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Panel } from '../settings/panel';
+import { dropdown, numberField, numberFields, radio, toggle } from '../settings';
+
+describe('Settings Panel', () => {
+  let onChange;
+  let configure;
+  let model;
+  let groups;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    configure = {
+      orientationLabel: 'Orientation',
+      settingsOrientation: true,
+      editChoiceLabel: false,
+    };
+    model = {
+      choiceAreaLayout: 'vertical',
+    };
+
+    groups = ({ configure }) => ({
+      'Group 1': {
+        choiceAreaLayout: configure.settingsOrientation && {
+          type: 'radio',
+          label: configure.orientationLabel,
+          choices: [
+            { label: 'opt1', value: 'opt1' },
+            { label: 'opt2', value: 'opt2' },
+          ],
+        },
+        editChoiceLabel: { type: 'toggle', label: 'Edit choice label', isConfigProperty: true },
+      },
+    });
+  });
+
+  const renderComponent = (extras = {}) => {
+    return render(
+      <Panel
+        model={model}
+        configuration={configure}
+        onChangeModel={onChange}
+        onChangeConfiguration={onChange}
+        groups={groups({ configure })}
+        {...extras}
+      />,
+    );
+  };
+
+  describe('rendering', () => {
+    it('renders settings panel', () => {
+      renderComponent();
+
+      expect(screen.getByText('Group 1')).toBeInTheDocument();
+    });
+
+    it('renders toggle settings', () => {
+      renderComponent();
+
+      // Toggle components render with Switch role in MUI v5
+      const toggles = screen.getAllByRole('switch');
+      expect(toggles.length).toBeGreaterThan(0);
+    });
+
+    it('conditionally renders radio buttons based on configuration', () => {
+      renderComponent();
+
+      // Should render radio when settingsOrientation is true
+      expect(screen.getByText('Orientation')).toBeInTheDocument();
+    });
+
+    it('does not render radio buttons when disabled in configuration', () => {
+      const disabledGroups = groups({
+        configure: {
+          ...configure,
+          settingsOrientation: false,
+        },
+      });
+
+      render(
+        <Panel
+          model={model}
+          configuration={{ ...configure, settingsOrientation: false }}
+          onChangeModel={onChange}
+          onChangeConfiguration={onChange}
+          groups={disabledGroups}
+        />,
+      );
+
+      // Should not render radio when settingsOrientation is false
+      expect(screen.queryByText('Orientation')).not.toBeInTheDocument();
+    });
+  });
+});
+
+// Utility function tests - these are simple unit tests that don't need RTL
+describe('toggle', () => {
+  it('returns a toggle type object', () => {
+    const setting = toggle('Label');
+
+    expect(setting).toEqual({
+      label: 'Label',
+      type: 'toggle',
+      isConfigProperty: false,
+      disabled: false,
+    });
+  });
+});
+
+describe('radio', () => {
+  it('returns a radio type object', () => {
+    const setting = radio('Radio', ['one', 'two']);
+
+    expect(setting).toEqual({
+      label: 'Radio',
+      type: 'radio',
+      isConfigProperty: false,
+      choices: [
+        {
+          label: 'one',
+          value: 'one',
+        },
+        {
+          label: 'two',
+          value: 'two',
+        },
+      ],
+    });
+  });
+});
+
+describe('dropdown', () => {
+  it('returns a dropdown type object', () => {
+    const setting = dropdown('Dropdown', ['one', 'two']);
+
+    expect(setting).toEqual({
+      label: 'Dropdown',
+      type: 'dropdown',
+      isConfigProperty: false,
+      choices: ['one', 'two'],
+    });
+  });
+});
+
+describe('numberField', () => {
+  it('returns a numberField type object', () => {
+    const setting = numberField('Number Field', { max: 12 }, true);
+
+    expect(setting).toEqual({
+      label: 'Number Field',
+      type: 'numberField',
+      isConfigProperty: true,
+      max: 12,
+    });
+  });
+});
+
+describe('numberFields', () => {
+  it('returns a numberFields type object', () => {
+    const setting = numberFields('Number Fields', {
+      one: {
+        label: 'One',
+      },
+      two: {
+        label: 'Two',
+      },
+    });
+
+    expect(setting).toEqual({
+      label: 'Number Fields',
+      type: 'numberFields',
+      fields: {
+        one: {
+          type: 'numberField',
+          label: 'One',
+          isConfigProperty: false,
+        },
+        two: {
+          type: 'numberField',
+          label: 'Two',
+          isConfigProperty: false,
+        },
+      },
+    });
+  });
+});