@pie-lib/config-ui 13.1.0-beta.7 → 14.0.0-next.35

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

@@ -1,263 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

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