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

package/src/__tests__/checkbox.test.jsx

@@ -12,51 +12,26 @@ describe('Checkbox Component', () => {
 
   describe('Rendering', () => {
     it('should render checkbox with label', () => {
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Accept terms" 
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Accept terms" />);
 
       expect(screen.getByText('Accept terms')).toBeInTheDocument();
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
     });
 
     it('should render checkbox in checked state', () => {
-      render(
-        <Checkbox 
-          checked={true} 
-          onChange={onChange} 
-          label="Accept terms" 
-        />,
-      );
+      render(<Checkbox checked={true} onChange={onChange} label="Accept terms" />);
 
       expect(screen.getByRole('checkbox')).toBeChecked();
     });
 
     it('should render checkbox in unchecked state', () => {
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Accept terms" 
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Accept terms" />);
 
       expect(screen.getByRole('checkbox')).not.toBeChecked();
     });
 
     it('should render mini checkbox with reduced styling', () => {
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Mini" 
-          mini={true}
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Mini" mini={true} />);
 
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
       expect(screen.getByText('Mini')).toBeInTheDocument();
@@ -66,13 +41,7 @@ describe('Checkbox Component', () => {
   describe('User interaction', () => {
     it('should call onChange when checkbox is clicked', async () => {
       const user = userEvent.setup();
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Accept" 
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Accept" />);
 
       const checkbox = screen.getByRole('checkbox');
       await user.click(checkbox);
@@ -82,13 +51,7 @@ describe('Checkbox Component', () => {
 
     it('should call onChange when label is clicked', async () => {
       const user = userEvent.setup();
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Click label" 
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Click label" />);
 
       const label = screen.getByText('Click label');
       await user.click(label);
@@ -99,27 +62,13 @@ describe('Checkbox Component', () => {
 
   describe('Props', () => {
     it('should handle value prop', () => {
-      render(
-        <Checkbox 
-          checked={true} 
-          onChange={onChange} 
-          label="With value"
-          value="option1"
-        />,
-      );
+      render(<Checkbox checked={true} onChange={onChange} label="With value" value="option1" />);
 
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
     });
 
     it('should display error styling when error is true', () => {
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Error state"
-          error={true}
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Error state" error={true} />);
 
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
       expect(screen.getByText('Error state')).toBeInTheDocument();
@@ -128,37 +77,19 @@ describe('Checkbox Component', () => {
 
   describe('Default props', () => {
     it('should have mini default to false', () => {
-      const { container } = render(
-        <Checkbox 
-          checked={true} 
-          onChange={onChange} 
-          label="Test"
-        />,
-      );
+      const { container } = render(<Checkbox checked={true} onChange={onChange} label="Test" />);
 
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
     });
 
     it('should have error default to false', () => {
-      const { container } = render(
-        <Checkbox 
-          checked={true} 
-          onChange={onChange} 
-          label="Test"
-        />,
-      );
+      const { container } = render(<Checkbox checked={true} onChange={onChange} label="Test" />);
 
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
     });
 
     it('should have value default to empty string', () => {
-      render(
-        <Checkbox 
-          checked={true} 
-          onChange={onChange} 
-          label="Test"
-        />,
-      );
+      render(<Checkbox checked={true} onChange={onChange} label="Test" />);
 
       expect(screen.getByRole('checkbox')).toBeInTheDocument();
     });
@@ -166,26 +97,14 @@ describe('Checkbox Component', () => {
 
   describe('Accessibility', () => {
     it('should have proper label association', () => {
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Accessible label"
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Accessible label" />);
 
       expect(screen.getByLabelText('Accessible label')).toBeInTheDocument();
     });
 
     it('should be keyboard accessible', async () => {
       const user = userEvent.setup();
-      render(
-        <Checkbox 
-          checked={false} 
-          onChange={onChange} 
-          label="Keyboard test"
-        />,
-      );
+      render(<Checkbox checked={false} onChange={onChange} label="Keyboard test" />);
 
       const checkbox = screen.getByRole('checkbox');
       checkbox.focus();
@@ -203,16 +122,8 @@ describe('Checkbox Component', () => {
 
       render(
         <>
-          <Checkbox 
-            checked={true} 
-            onChange={onChange1} 
-            label="Option 1"
-          />
-          <Checkbox 
-            checked={false} 
-            onChange={onChange2} 
-            label="Option 2"
-          />
+          <Checkbox checked={true} onChange={onChange1} label="Option 1" />
+          <Checkbox checked={false} onChange={onChange2} label="Option 2" />
         </>,
       );
 
@@ -227,16 +138,8 @@ describe('Checkbox Component', () => {
 
       render(
         <>
-          <Checkbox 
-            checked={true} 
-            onChange={onChange1} 
-            label="Option 1"
-          />
-          <Checkbox 
-            checked={false} 
-            onChange={onChange2} 
-            label="Option 2"
-          />
+          <Checkbox checked={true} onChange={onChange1} label="Option 1" />
+          <Checkbox checked={false} onChange={onChange2} label="Option 2" />
         </>,
       );
 

package/src/__tests__/form-section.test.jsx

@@ -147,10 +147,7 @@ describe('FormSection Component', () => {
 
     it('should apply labelExtraStyle to the label', () => {
       const { container } = render(
-        <FormSection 
-          label="Styled Label" 
-          labelExtraStyle={{ color: 'red', fontWeight: 'bold' }}
-        >
+        <FormSection label="Styled Label" labelExtraStyle={{ color: 'red', fontWeight: 'bold' }}>
           <div>Content</div>
         </FormSection>,
       );
@@ -168,10 +165,7 @@ describe('FormSection Component', () => {
       };
 
       const { container } = render(
-        <FormSection 
-          label="Multi-styled" 
-          labelExtraStyle={extraStyle}
-        >
+        <FormSection label="Multi-styled" labelExtraStyle={extraStyle}>
           <div>Content</div>
         </FormSection>,
       );

package/src/__tests__/help.test.jsx

@@ -14,10 +14,10 @@ describe('HelpButton', () => {
     const user = userEvent.setup();
     const onClick = jest.fn();
     render(<HelpButton onClick={onClick} />);
-    
+
     const button = screen.getByRole('button');
     await user.click(button);
-    
+
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
@@ -66,10 +66,10 @@ describe('HelpDialog', () => {
     const user = userEvent.setup();
     const onClose = jest.fn();
     render(<HelpDialog {...defaultProps} onClose={onClose} />);
-    
+
     const okButton = screen.getByRole('button', { name: /OK/i });
     await user.click(okButton);
-    
+
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
@@ -77,7 +77,7 @@ describe('HelpDialog', () => {
     const user = userEvent.setup();
     const onClose = jest.fn();
     render(<HelpDialog {...defaultProps} onClose={onClose} />);
-    
+
     // Simulate backdrop click by calling onClose (MUI Dialog prop)
     const dialog = screen.getByRole('dialog', { hidden: true });
     expect(dialog).toBeInTheDocument();
@@ -96,7 +96,7 @@ describe('HelpDialog', () => {
         {content.map((line, i) => (
           <div key={i}>{line}</div>
         ))}
-      </HelpDialog>
+      </HelpDialog>,
     );
     expect(screen.getByText('Line 1')).toBeInTheDocument();
     expect(screen.getByText('Line 2')).toBeInTheDocument();
@@ -123,10 +123,10 @@ describe('Help Component', () => {
   it('opens dialog when help button is clicked', async () => {
     const user = userEvent.setup();
     render(<Help {...defaultProps} />);
-    
+
     const button = screen.getByRole('button');
     await user.click(button);
-    
+
     expect(screen.getByText('Help Title')).toBeInTheDocument();
     expect(screen.getByText('Help content')).toBeInTheDocument();
   });
@@ -134,13 +134,13 @@ describe('Help Component', () => {
   it('closes dialog when OK button is clicked', async () => {
     const user = userEvent.setup();
     render(<Help {...defaultProps} />);
-    
+
     const helpButton = screen.getByRole('button', { name: '' });
     await user.click(helpButton);
-    
+
     const okButton = screen.getByRole('button', { name: /OK/i });
     await user.click(okButton);
-    
+
     await waitFor(() => {
       expect(screen.queryByText('Help Title')).not.toBeInTheDocument();
     });
@@ -155,29 +155,29 @@ describe('Help Component', () => {
   it('displays children prop', async () => {
     const user = userEvent.setup();
     render(<Help {...defaultProps} children="Custom help content" />);
-    
+
     const button = screen.getByRole('button');
     await user.click(button);
-    
+
     expect(screen.getByText('Custom help content')).toBeInTheDocument();
   });
 
   it('can open and close dialog multiple times', async () => {
     const user = userEvent.setup();
     render(<Help {...defaultProps} />);
-    
+
     const helpButton = screen.getByRole('button', { name: '' });
-    
+
     await user.click(helpButton);
     expect(screen.getByText('Help Title')).toBeInTheDocument();
-    
+
     let okButton = screen.getByRole('button', { name: /OK/i });
     await user.click(okButton);
-    
+
     await waitFor(() => {
       expect(screen.queryByText('Help Title')).not.toBeInTheDocument();
     });
-    
+
     await user.click(helpButton);
     expect(screen.getByText('Help Title')).toBeInTheDocument();
   });

package/src/__tests__/input.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Input from '../input';
 
@@ -12,9 +12,7 @@ describe('Input Component', () => {
 
   describe('Rendering', () => {
     it('should render input without label', () => {
-      const { container } = render(
-        <Input type="text" value="test" onChange={onChange} />,
-      );
+      const { container } = render(<Input type="text" value="test" onChange={onChange} />);
 
       const input = container.querySelector('input');
       expect(input).toBeInTheDocument();
@@ -22,9 +20,7 @@ describe('Input Component', () => {
     });
 
     it('should render input with label', () => {
-      render(
-        <Input type="text" label="Email" value="test@example.com" onChange={onChange} />,
-      );
+      render(<Input type="text" label="Email" value="test@example.com" onChange={onChange} />);
 
       expect(screen.getByText('Email')).toBeInTheDocument();
       const input = screen.getByDisplayValue('test@example.com');
@@ -32,49 +28,35 @@ describe('Input Component', () => {
     });
 
     it('should render input with different types', () => {
-      const { container: numberContainer } = render(
-        <Input type="number" value={123} onChange={onChange} />,
-      );
+      const { container: numberContainer } = render(<Input type="number" value={123} onChange={onChange} />);
       expect(numberContainer.querySelector('input[type="number"]')).toBeInTheDocument();
 
-      const { container: emailContainer } = render(
-        <Input type="email" value="test@example.com" onChange={onChange} />,
-      );
+      const { container: emailContainer } = render(<Input type="email" value="test@example.com" onChange={onChange} />);
       expect(emailContainer.querySelector('input[type="email"]')).toBeInTheDocument();
 
-      const { container: passwordContainer } = render(
-        <Input type="password" value="secret" onChange={onChange} />,
-      );
+      const { container: passwordContainer } = render(<Input type="password" value="secret" onChange={onChange} />);
       expect(passwordContainer.querySelector('input[type="password"]')).toBeInTheDocument();
     });
   });
 
   describe('Value handling', () => {
     it('should handle string values', () => {
-      const { container } = render(
-        <Input type="text" value="hello" onChange={onChange} />,
-      );
+      const { container } = render(<Input type="text" value="hello" onChange={onChange} />);
       expect(container.querySelector('input').value).toBe('hello');
     });
 
     it('should handle number values', () => {
-      const { container } = render(
-        <Input type="number" value={42} onChange={onChange} />,
-      );
+      const { container } = render(<Input type="number" value={42} onChange={onChange} />);
       expect(container.querySelector('input').value).toBe('42');
     });
 
     it('should handle empty values', () => {
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} />,
-      );
+      const { container } = render(<Input type="text" value="" onChange={onChange} />);
       expect(container.querySelector('input').value).toBe('');
     });
 
     it('should update when prop changes', () => {
-      const { container, rerender } = render(
-        <Input type="text" value="initial" onChange={onChange} />,
-      );
+      const { container, rerender } = render(<Input type="text" value="initial" onChange={onChange} />);
       expect(container.querySelector('input').value).toBe('initial');
 
       rerender(<Input type="text" value="updated" onChange={onChange} />);
@@ -85,9 +67,7 @@ describe('Input Component', () => {
   describe('onChange behavior', () => {
     it('should call onChange on input change', async () => {
       const user = userEvent.setup();
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} />,
-      );
+      const { container } = render(<Input type="text" value="" onChange={onChange} />);
 
       const input = container.querySelector('input');
       await user.type(input, 'hello');
@@ -98,10 +78,8 @@ describe('Input Component', () => {
     it('should handle custom error function', async () => {
       const user = userEvent.setup();
       const customError = jest.fn((value) => value.length < 3);
-      
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} error={customError} />,
-      );
+
+      const { container } = render(<Input type="text" value="" onChange={onChange} error={customError} />);
 
       const input = container.querySelector('input');
       await user.type(input, 'ab');
@@ -114,10 +92,8 @@ describe('Input Component', () => {
     it('should display error state when validation fails', async () => {
       const user = userEvent.setup();
       const customError = jest.fn(() => true);
-      
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} error={customError} />,
-      );
+
+      const { container } = render(<Input type="text" value="" onChange={onChange} error={customError} />);
 
       const input = container.querySelector('input');
       await user.type(input, 'test');
@@ -128,10 +104,8 @@ describe('Input Component', () => {
     it('should clear error state when validation passes', async () => {
       const user = userEvent.setup();
       const customError = jest.fn((value) => !value);
-      
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} error={customError} />,
-      );
+
+      const { container } = render(<Input type="text" value="" onChange={onChange} error={customError} />);
 
       const input = container.querySelector('input');
       await user.type(input, 'test');
@@ -143,18 +117,14 @@ describe('Input Component', () => {
 
   describe('Props spreading', () => {
     it('should handle disabled state', () => {
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} disabled />,
-      );
+      const { container } = render(<Input type="text" value="" onChange={onChange} disabled />);
 
       const input = container.querySelector('input');
       expect(input).toBeDisabled();
     });
 
     it('should handle readonly state', () => {
-      const { container } = render(
-        <Input type="text" value="readonly" onChange={onChange} readOnly />,
-      );
+      const { container } = render(<Input type="text" value="readonly" onChange={onChange} readOnly />);
 
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('readonly');
@@ -163,27 +133,21 @@ describe('Input Component', () => {
 
   describe('Default props', () => {
     it('should use default type of text', () => {
-      const { container } = render(
-        <Input value="" onChange={onChange} />,
-      );
+      const { container } = render(<Input value="" onChange={onChange} />);
 
       const input = container.querySelector('input');
       expect(input.type).toBe('text');
     });
 
     it('should use default error function that validates number type', () => {
-      const { container } = render(
-        <Input type="number" value="" onChange={onChange} />,
-      );
+      const { container } = render(<Input type="number" value="" onChange={onChange} />);
 
       const input = container.querySelector('input');
       expect(input).toBeInTheDocument();
     });
 
     it('should have noModelUpdateOnError default to false', () => {
-      const { container } = render(
-        <Input type="text" value="" onChange={onChange} />,
-      );
+      const { container } = render(<Input type="text" value="" onChange={onChange} />);
 
       const input = container.querySelector('input');
       expect(input).toBeInTheDocument();