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

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 { toggle, radio, dropdown, numberField, numberFields } 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,
+        },
+      },
+    });
+  });
+});

package/src/__tests__/settings.test.jsx

@@ -0,0 +1,515 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Toggle from '../settings/toggle';
+import DisplaySize from '../settings/display-size';
+import SettingsRadioLabel from '../settings/settings-radio-label';
+import { Panel } from '../settings/panel';
+
+describe('Settings Components', () => {
+  describe('Toggle', () => {
+    it('renders toggle with label', () => {
+      const toggle = jest.fn();
+      render(<Toggle label="Enable Feature" checked={false} toggle={toggle} />);
+
+      expect(screen.getByText('Enable Feature')).toBeInTheDocument();
+    });
+  });
+
+  describe('DisplaySize', () => {
+    const defaultProps = {
+      size: { width: 500, height: 400 },
+      label: 'Display Size',
+      onChange: jest.fn(),
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders label and input fields', () => {
+      render(<DisplaySize {...defaultProps} />);
+
+      expect(screen.getByText('Display Size')).toBeInTheDocument();
+      expect(screen.getByLabelText('Width')).toBeInTheDocument();
+      expect(screen.getByLabelText('Height')).toBeInTheDocument();
+    });
+
+    it('displays width and height values', () => {
+      render(<DisplaySize {...defaultProps} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      const heightInput = screen.getByLabelText('Height');
+
+      expect(widthInput).toHaveValue(500);
+      expect(heightInput).toHaveValue(400);
+    });
+
+    it('calls onChange when width changes', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      await user.clear(widthInput);
+      await user.type(widthInput, '600');
+      fireEvent.blur(widthInput);
+
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ width: 600 }));
+    });
+
+    it('calls onChange when height changes', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const heightInput = screen.getByLabelText('Height');
+      await user.clear(heightInput);
+      await user.type(heightInput, '500');
+      fireEvent.blur(heightInput);
+
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ height: 500 }));
+    });
+
+    it('maintains other dimension when one changes', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      await user.clear(widthInput);
+      await user.type(widthInput, '700');
+      fireEvent.blur(widthInput);
+
+      expect(onChange).toHaveBeenCalledWith({
+        width: 700,
+        height: 400,
+      });
+    });
+
+    it('enforces min value constraint', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      await user.clear(widthInput);
+      await user.type(widthInput, '100');
+      fireEvent.blur(widthInput);
+
+      // Should clamp to minimum 150
+      expect(widthInput).toHaveValue(150);
+    });
+
+    it('enforces max value constraint', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      await user.clear(widthInput);
+      await user.type(widthInput, '2000');
+      fireEvent.blur(widthInput);
+
+      // Should clamp to maximum 1000
+      expect(widthInput).toHaveValue(1000);
+    });
+
+    it('updates when size prop changes', () => {
+      const { rerender } = render(<DisplaySize {...defaultProps} />);
+
+      let widthInput = screen.getByLabelText('Width');
+      expect(widthInput).toHaveValue(500);
+
+      rerender(
+        <DisplaySize {...defaultProps} size={{ width: 800, height: 600 }} />
+      );
+
+      widthInput = screen.getByLabelText('Width');
+      expect(widthInput).toHaveValue(800);
+    });
+
+    it('handles boundary values at minimum', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      const heightInput = screen.getByLabelText('Height');
+
+      await user.clear(widthInput);
+      await user.type(widthInput, '150');
+      fireEvent.blur(widthInput);
+
+      await user.clear(heightInput);
+      await user.type(heightInput, '150');
+      fireEvent.blur(heightInput);
+
+      expect(widthInput).toHaveValue(150);
+      expect(heightInput).toHaveValue(150);
+    });
+
+    it('handles boundary values at maximum', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      const heightInput = screen.getByLabelText('Height');
+
+      await user.clear(widthInput);
+      await user.type(widthInput, '1000');
+      fireEvent.blur(widthInput);
+
+      await user.clear(heightInput);
+      await user.type(heightInput, '1000');
+      fireEvent.blur(heightInput);
+
+      expect(widthInput).toHaveValue(1000);
+      expect(heightInput).toHaveValue(1000);
+    });
+
+    it('handles decimal input values', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      await user.clear(widthInput);
+      await user.type(widthInput, '500.5');
+      fireEvent.blur(widthInput);
+
+      expect(widthInput).toBeInTheDocument();
+    });
+
+    it('handles empty input and resets to min', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+      await user.clear(widthInput);
+      fireEvent.blur(widthInput);
+
+      // Should reset to minimum value
+      expect(widthInput).toHaveValue(150);
+    });
+
+    it('handles rapid width and height changes', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const widthInput = screen.getByLabelText('Width');
+
+      await user.clear(widthInput);
+      await user.type(widthInput, '6');
+      await user.type(widthInput, '0');
+      await user.type(widthInput, '0');
+      fireEvent.blur(widthInput);
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('clamps height at both boundaries', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(<DisplaySize {...defaultProps} onChange={onChange} />);
+
+      const heightInput = screen.getByLabelText('Height');
+
+      // Test below min
+      await user.clear(heightInput);
+      await user.type(heightInput, '50');
+      fireEvent.blur(heightInput);
+      expect(heightInput).toHaveValue(150);
+
+      // Test above max
+      await user.clear(heightInput);
+      await user.type(heightInput, '2500');
+      fireEvent.blur(heightInput);
+      expect(heightInput).toHaveValue(1000);
+    });
+
+    it('displays custom label text', () => {
+      render(
+        <DisplaySize
+          size={{ width: 500, height: 400 }}
+          label="Custom Size Settings"
+          onChange={jest.fn()}
+        />
+      );
+
+      expect(screen.getByText('Custom Size Settings')).toBeInTheDocument();
+    });
+
+    it('renders with variant outlined', () => {
+      const { container } = render(<DisplaySize {...defaultProps} />);
+
+      const inputs = container.querySelectorAll('input');
+      expect(inputs.length).toBe(2);
+    });
+  });
+
+  describe('SettingsRadioLabel', () => {
+    it('renders radio label', () => {
+      const onChange = jest.fn();
+      render(
+        <SettingsRadioLabel
+          label="Option 1"
+          value="option1"
+          checked={false}
+          onChange={onChange}
+        />
+      );
+
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByRole('radio')).toBeInTheDocument();
+    });
+
+    it('renders checked state', () => {
+      const onChange = jest.fn();
+      render(
+        <SettingsRadioLabel
+          label="Option 1"
+          value="option1"
+          checked={true}
+          onChange={onChange}
+        />
+      );
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeChecked();
+    });
+
+    it('renders unchecked state', () => {
+      const onChange = jest.fn();
+      render(
+        <SettingsRadioLabel
+          label="Option 1"
+          value="option1"
+          checked={false}
+          onChange={onChange}
+        />
+      );
+
+      const radio = screen.getByRole('radio');
+      expect(radio).not.toBeChecked();
+    });
+
+    it('calls onChange when radio is clicked', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      render(
+        <SettingsRadioLabel
+          label="Option 1"
+          value="option1"
+          checked={false}
+          onChange={onChange}
+        />
+      );
+
+      const radio = screen.getByRole('radio');
+      await user.click(radio);
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('displays label text correctly', () => {
+      const onChange = jest.fn();
+      const labelText = 'Custom Option Label';
+      render(
+        <SettingsRadioLabel
+          label={labelText}
+          value="custom"
+          checked={false}
+          onChange={onChange}
+        />
+      );
+
+      expect(screen.getByText(labelText)).toBeInTheDocument();
+    });
+  });
+
+  describe('Panel', () => {
+    const defaultProps = {
+      model: { toggleSetting: true, numberValue: 5 },
+      configuration: { configValue: 'test' },
+      groups: {
+        'General Settings': {
+          toggleSetting: {
+            type: 'toggle',
+            label: 'Enable Feature',
+          },
+        },
+      },
+      onChangeModel: jest.fn(),
+      onChangeConfiguration: jest.fn(),
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders panel with group label', () => {
+      render(<Panel {...defaultProps} />);
+      expect(screen.getByText('General Settings')).toBeInTheDocument();
+    });
+
+    it('renders empty when groups is undefined', () => {
+      const { container } = render(
+        <Panel
+          {...defaultProps}
+          groups={undefined}
+        />
+      );
+      expect(container.firstChild.children.length).toBe(0);
+    });
+
+    it('renders empty when groups is empty', () => {
+      const { container } = render(
+        <Panel
+          {...defaultProps}
+          groups={{}}
+        />
+      );
+      expect(container.firstChild.children.length).toBe(0);
+    });
+
+    it('calls onChangeModel when model changes', async () => {
+      const user = userEvent.setup();
+      const onChangeModel = jest.fn();
+      const { container } = render(
+        <Panel
+          {...defaultProps}
+          onChangeModel={onChangeModel}
+        />
+      );
+
+      const switchElement = container.querySelector('input[type="checkbox"]');
+      await user.click(switchElement);
+
+      expect(onChangeModel).toHaveBeenCalled();
+    });
+
+    it('calls onChangeConfiguration when configuration changes', async () => {
+      const user = userEvent.setup();
+      const onChangeConfiguration = jest.fn();
+      const { container } = render(
+        <Panel
+          {...defaultProps}
+          groups={{
+            'Config Group': {
+              configValue: {
+                type: 'toggle',
+                label: 'Config Toggle',
+                isConfigProperty: true,
+              },
+            },
+          }}
+          onChangeConfiguration={onChangeConfiguration}
+        />
+      );
+
+      const switchElement = container.querySelector('input[type="checkbox"]');
+      await user.click(switchElement);
+
+      expect(onChangeConfiguration).toHaveBeenCalled();
+    });
+
+    it('renders with modal when provided', () => {
+      const modal = <div data-testid="test-modal">Modal Content</div>;
+      render(
+        <Panel
+          {...defaultProps}
+          modal={modal}
+        />
+      );
+
+      expect(screen.getByTestId('test-modal')).toBeInTheDocument();
+      expect(screen.getByText('Modal Content')).toBeInTheDocument();
+    });
+
+    it('renders multiple groups', () => {
+      render(
+        <Panel
+          {...defaultProps}
+          groups={{
+            'Group One': {
+              setting1: {
+                type: 'toggle',
+                label: 'Setting One',
+              },
+            },
+            'Group Two': {
+              setting2: {
+                type: 'toggle',
+                label: 'Setting Two',
+              },
+            },
+          }}
+          model={{ setting1: true, setting2: false }}
+        />
+      );
+
+      expect(screen.getByText('Group One')).toBeInTheDocument();
+      expect(screen.getByText('Group Two')).toBeInTheDocument();
+    });
+
+    it('uses default callbacks when not provided', () => {
+      const { container } = render(
+        <Panel
+          model={{ test: true }}
+          groups={{
+            'Test Group': {
+              test: { type: 'toggle', label: 'Test' },
+            },
+          }}
+        />
+      );
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('filters out empty groups', () => {
+      const { container } = render(
+        <Panel
+          {...defaultProps}
+          groups={{
+            'Empty Group': {},
+            'General Settings': {
+              toggleSetting: {
+                type: 'toggle',
+                label: 'Enable Feature',
+              },
+            },
+          }}
+          model={{ toggleSetting: true }}
+        />
+      );
+
+      expect(screen.getByText('General Settings')).toBeInTheDocument();
+      expect(screen.queryByText('Empty Group')).not.toBeInTheDocument();
+    });
+
+    it('renders with null model', () => {
+      const { container } = render(
+        <Panel
+          model={null}
+          configuration={{}}
+          groups={{
+            'General Settings': {
+              toggleSetting: {
+                type: 'toggle',
+                label: 'Enable Feature',
+              },
+            },
+          }}
+          onChangeModel={jest.fn()}
+        />
+      );
+
+      expect(screen.getByText('General Settings')).toBeInTheDocument();
+    });
+  });
+});