@pie-lib/config-ui 12.1.1-next.2 → 12.1.1-next.4

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { NumberTextField } from '../number-text-field';
 
@@ -29,16 +29,12 @@ describe('NumberTextField', () => {
     });
 
     it('renders with suffix', () => {
-      const { container } = render(
-        <NumberTextField {...defaultProps} suffix="px" />,
-      );
+      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 { container } = render(<NumberTextField {...defaultProps} />);
       const input = screen.getByRole('spinbutton');
       expect(input).toBeInTheDocument();
     });
@@ -56,30 +52,22 @@ describe('NumberTextField', () => {
     });
 
     it('renders with custom variant', () => {
-      const { container } = render(
-        <NumberTextField {...defaultProps} variant="outlined" />,
-      );
+      const { container } = render(<NumberTextField {...defaultProps} variant="outlined" />);
       expect(container.querySelector('input')).toBeInTheDocument();
     });
 
     it('renders with disableUnderline variant', () => {
-      const { container } = render(
-        <NumberTextField {...defaultProps} disableUnderline={true} />,
-      );
+      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" />,
-      );
+      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" />,
-      );
+      const { container } = render(<NumberTextField {...defaultProps} inputClassName="input-class" />);
       expect(container.querySelector('.input-class')).toBeInTheDocument();
     });
 
@@ -89,9 +77,7 @@ describe('NumberTextField', () => {
     });
 
     it('renders with margin normal', () => {
-      const { container } = render(
-        <NumberTextField {...defaultProps} />,
-      );
+      const { container } = render(<NumberTextField {...defaultProps} />);
       expect(container.querySelector('input')).toBeInTheDocument();
     });
   });
@@ -153,13 +139,7 @@ describe('NumberTextField', () => {
   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 { container } = render(<NumberTextField value={5} min={3} onChange={jest.fn()} />);
 
       const input = screen.getByRole('spinbutton');
       expect(input).toHaveValue(5);
@@ -167,25 +147,14 @@ describe('NumberTextField', () => {
 
     it('handles only max constraint', async () => {
       const user = userEvent.setup();
-      const { container } = render(
-        <NumberTextField
-          value={5}
-          max={10}
-          onChange={jest.fn()}
-        />,
-      );
+      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 { container } = render(<NumberTextField value={100} onChange={jest.fn()} />);
 
       const input = screen.getByRole('spinbutton');
       expect(input).toHaveValue(100);
@@ -230,9 +199,7 @@ describe('NumberTextField', () => {
 
   describe('props updates', () => {
     it('updates value when prop changes', () => {
-      const { rerender } = render(
-        <NumberTextField {...defaultProps} value={5} />,
-      );
+      const { rerender } = render(<NumberTextField {...defaultProps} value={5} />);
 
       let input = screen.getByRole('spinbutton');
       expect(input).toHaveValue(5);
@@ -246,23 +213,9 @@ describe('NumberTextField', () => {
     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 { 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);
@@ -276,23 +229,9 @@ describe('NumberTextField', () => {
 
     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}
-        />,
-      );
+      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();
@@ -301,38 +240,21 @@ describe('NumberTextField', () => {
 
   describe('fallback number logic', () => {
     it('defaults to 0 when no min or max is provided', () => {
-      render(
-        <NumberTextField
-          value={undefined}
-          onChange={jest.fn()}
-        />,
-      );
+      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()}
-        />,
-      );
+      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()}
-        />,
-      );
+      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

@@ -12,41 +12,20 @@ describe('RadioWithLabel Component', () => {
 
   describe('Rendering', () => {
     it('should render radio button with label', () => {
-      render(
-        <RadioWithLabel 
-          label="Option 1" 
-          value="option1" 
-          checked={false}
-          onChange={onChange}
-        />,
-      );
+      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}
-        />,
-      );
+      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}
-        />,
-      );
+      render(<RadioWithLabel label="Unselected" value="unselected" checked={false} onChange={onChange} />);
 
       expect(screen.getByRole('radio')).not.toBeChecked();
     });
@@ -55,14 +34,7 @@ describe('RadioWithLabel Component', () => {
   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}
-        />,
-      );
+      render(<RadioWithLabel label="Option" value="option" checked={false} onChange={onChange} />);
 
       const radio = screen.getByRole('radio');
       await user.click(radio);
@@ -72,14 +44,7 @@ describe('RadioWithLabel Component', () => {
 
     it('should call onChange when label is clicked', async () => {
       const user = userEvent.setup();
-      render(
-        <RadioWithLabel 
-          label="Click me" 
-          value="test" 
-          checked={false}
-          onChange={onChange}
-        />,
-      );
+      render(<RadioWithLabel label="Click me" value="test" checked={false} onChange={onChange} />);
 
       const label = screen.getByText('Click me');
       await user.click(label);
@@ -91,21 +56,11 @@ describe('RadioWithLabel Component', () => {
   describe('Props', () => {
     it('should accept different value types', () => {
       const { container: stringContainer } = render(
-        <RadioWithLabel 
-          label="String value" 
-          value="string" 
-          checked={false}
-          onChange={onChange}
-        />,
+        <RadioWithLabel label="String value" value="string" checked={false} onChange={onChange} />,
       );
 
       const { container: numberContainer } = render(
-        <RadioWithLabel 
-          label="Number value" 
-          value={123} 
-          checked={false}
-          onChange={onChange}
-        />,
+        <RadioWithLabel label="Number value" value={123} checked={false} onChange={onChange} />,
       );
 
       expect(stringContainer.querySelector('input[type="radio"]')).toBeInTheDocument();
@@ -115,18 +70,8 @@ describe('RadioWithLabel Component', () => {
     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}
-          />
+          <RadioWithLabel label="Label A" value="a" checked={false} onChange={onChange} />
+          <RadioWithLabel label="Label B" value="b" checked={false} onChange={onChange} />
         </>,
       );
 
@@ -139,24 +84,9 @@ describe('RadioWithLabel Component', () => {
     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}
-          />
+          <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} />
         </>,
       );
 
@@ -175,29 +105,14 @@ describe('RadioWithLabel Component', () => {
 
       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}
-          />
+          <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();
@@ -215,12 +130,7 @@ describe('RadioWithLabel Component', () => {
   describe('Styling', () => {
     it('should render with correct styling classes', () => {
       const { container } = render(
-        <RadioWithLabel 
-          label="Styled" 
-          value="styled" 
-          checked={false}
-          onChange={onChange}
-        />,
+        <RadioWithLabel label="Styled" value="styled" checked={false} onChange={onChange} />,
       );
 
       expect(container.querySelector('[class*="MuiFormControlLabel"]')).toBeInTheDocument();
@@ -230,28 +140,14 @@ describe('RadioWithLabel Component', () => {
 
   describe('Edge cases', () => {
     it('should handle empty string label', () => {
-      render(
-        <RadioWithLabel 
-          label="" 
-          value="empty" 
-          checked={false}
-          onChange={onChange}
-        />,
-      );
+      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}
-        />,
-      );
+      render(<RadioWithLabel label={longLabel} value="long" checked={false} onChange={onChange} />);
 
       expect(screen.getByText(longLabel)).toBeInTheDocument();
     });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Panel } from '../settings/panel';
-import { toggle, radio, dropdown, numberField, numberFields } from '../settings';
+import { dropdown, numberField, numberFields, radio, toggle } from '../settings';
 
 describe('Settings Panel', () => {
   let onChange;

package/src/__tests__/settings.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Toggle from '../settings/toggle';
 import DisplaySize from '../settings/display-size';
@@ -121,9 +121,7 @@ describe('Settings Components', () => {
       let widthInput = screen.getByLabelText('Width');
       expect(widthInput).toHaveValue(500);
 
-      rerender(
-        <DisplaySize {...defaultProps} size={{ width: 800, height: 600 }} />
-      );
+      rerender(<DisplaySize {...defaultProps} size={{ width: 800, height: 600 }} />);
 
       widthInput = screen.getByLabelText('Width');
       expect(widthInput).toHaveValue(800);
@@ -232,13 +230,7 @@ describe('Settings Components', () => {
     });
 
     it('displays custom label text', () => {
-      render(
-        <DisplaySize
-          size={{ width: 500, height: 400 }}
-          label="Custom Size Settings"
-          onChange={jest.fn()}
-        />
-      );
+      render(<DisplaySize size={{ width: 500, height: 400 }} label="Custom Size Settings" onChange={jest.fn()} />);
 
       expect(screen.getByText('Custom Size Settings')).toBeInTheDocument();
     });
@@ -254,14 +246,7 @@ describe('Settings Components', () => {
   describe('SettingsRadioLabel', () => {
     it('renders radio label', () => {
       const onChange = jest.fn();
-      render(
-        <SettingsRadioLabel
-          label="Option 1"
-          value="option1"
-          checked={false}
-          onChange={onChange}
-        />
-      );
+      render(<SettingsRadioLabel label="Option 1" value="option1" checked={false} onChange={onChange} />);
 
       expect(screen.getByText('Option 1')).toBeInTheDocument();
       expect(screen.getByRole('radio')).toBeInTheDocument();
@@ -269,14 +254,7 @@ describe('Settings Components', () => {
 
     it('renders checked state', () => {
       const onChange = jest.fn();
-      render(
-        <SettingsRadioLabel
-          label="Option 1"
-          value="option1"
-          checked={true}
-          onChange={onChange}
-        />
-      );
+      render(<SettingsRadioLabel label="Option 1" value="option1" checked={true} onChange={onChange} />);
 
       const radio = screen.getByRole('radio');
       expect(radio).toBeChecked();
@@ -284,14 +262,7 @@ describe('Settings Components', () => {
 
     it('renders unchecked state', () => {
       const onChange = jest.fn();
-      render(
-        <SettingsRadioLabel
-          label="Option 1"
-          value="option1"
-          checked={false}
-          onChange={onChange}
-        />
-      );
+      render(<SettingsRadioLabel label="Option 1" value="option1" checked={false} onChange={onChange} />);
 
       const radio = screen.getByRole('radio');
       expect(radio).not.toBeChecked();
@@ -300,14 +271,7 @@ describe('Settings Components', () => {
     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}
-        />
-      );
+      render(<SettingsRadioLabel label="Option 1" value="option1" checked={false} onChange={onChange} />);
 
       const radio = screen.getByRole('radio');
       await user.click(radio);
@@ -318,14 +282,7 @@ describe('Settings Components', () => {
     it('displays label text correctly', () => {
       const onChange = jest.fn();
       const labelText = 'Custom Option Label';
-      render(
-        <SettingsRadioLabel
-          label={labelText}
-          value="custom"
-          checked={false}
-          onChange={onChange}
-        />
-      );
+      render(<SettingsRadioLabel label={labelText} value="custom" checked={false} onChange={onChange} />);
 
       expect(screen.getByText(labelText)).toBeInTheDocument();
     });
@@ -357,34 +314,19 @@ describe('Settings Components', () => {
     });
 
     it('renders empty when groups is undefined', () => {
-      const { container } = render(
-        <Panel
-          {...defaultProps}
-          groups={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={{}}
-        />
-      );
+      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 { container } = render(<Panel {...defaultProps} onChangeModel={onChangeModel} />);
 
       const switchElement = container.querySelector('input[type="checkbox"]');
       await user.click(switchElement);
@@ -408,7 +350,7 @@ describe('Settings Components', () => {
             },
           }}
           onChangeConfiguration={onChangeConfiguration}
-        />
+        />,
       );
 
       const switchElement = container.querySelector('input[type="checkbox"]');
@@ -419,12 +361,7 @@ describe('Settings Components', () => {
 
     it('renders with modal when provided', () => {
       const modal = <div data-testid="test-modal">Modal Content</div>;
-      render(
-        <Panel
-          {...defaultProps}
-          modal={modal}
-        />
-      );
+      render(<Panel {...defaultProps} modal={modal} />);
 
       expect(screen.getByTestId('test-modal')).toBeInTheDocument();
       expect(screen.getByText('Modal Content')).toBeInTheDocument();
@@ -449,7 +386,7 @@ describe('Settings Components', () => {
             },
           }}
           model={{ setting1: true, setting2: false }}
-        />
+        />,
       );
 
       expect(screen.getByText('Group One')).toBeInTheDocument();
@@ -465,7 +402,7 @@ describe('Settings Components', () => {
               test: { type: 'toggle', label: 'Test' },
             },
           }}
-        />
+        />,
       );
 
       expect(container.firstChild).toBeInTheDocument();
@@ -485,7 +422,7 @@ describe('Settings Components', () => {
             },
           }}
           model={{ toggleSetting: true }}
-        />
+        />,
       );
 
       expect(screen.getByText('General Settings')).toBeInTheDocument();
@@ -506,7 +443,7 @@ describe('Settings Components', () => {
             },
           }}
           onChangeModel={jest.fn()}
-        />
+        />,
       );
 
       expect(screen.getByText('General Settings')).toBeInTheDocument();

package/src/__tests__/tabs.test.jsx

@@ -81,7 +81,6 @@ describe('Tabs Component', () => {
     expect(rootDiv).toBeInTheDocument();
   });
 
-
   it('handles tabs without title prop gracefully', () => {
     render(
       <Tabs>
@@ -178,16 +177,12 @@ describe('Tabs Component', () => {
   it('handles long tab titles', () => {
     render(
       <Tabs>
-        <div title="This is a very long tab title that should still render correctly">
-          Content 1
-        </div>
+        <div title="This is a very long tab title that should still render correctly">Content 1</div>
         <div title="Short">Content 2</div>
       </Tabs>,
     );
 
-    expect(
-      screen.getByText('This is a very long tab title that should still render correctly'),
-    ).toBeInTheDocument();
+    expect(screen.getByText('This is a very long tab title that should still render correctly')).toBeInTheDocument();
     expect(screen.getByText('Short')).toBeInTheDocument();
   });
 });