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

package/src/__tests__/langs.test.jsx

@@ -103,13 +103,7 @@ describe('Langs Component', () => {
 
     it('does not call onChange if no onChange prop provided', async () => {
       const user = userEvent.setup();
-      const { container } = render(
-        <Langs
-          uid="1"
-          langs={['en-US', 'es-ES']}
-          selected="en-US"
-        />,
-      );
+      const { container } = render(<Langs uid="1" langs={['en-US', 'es-ES']} selected="en-US" />);
 
       const select = screen.getByRole('combobox');
       await user.click(select);
@@ -130,13 +124,7 @@ describe('Langs Component', () => {
     });
 
     it('generates random uid if not provided', () => {
-      const { container } = render(
-        <Langs
-          onChange={onChange}
-          langs={['en-US', 'es-ES']}
-          selected="en-US"
-        />,
-      );
+      const { container } = render(<Langs onChange={onChange} langs={['en-US', 'es-ES']} selected="en-US" />);
 
       const select = screen.getByRole('combobox');
       expect(select).toBeInTheDocument();
@@ -164,14 +152,7 @@ describe('Langs Component', () => {
       let select = screen.getByRole('combobox');
       expect(select).toHaveTextContent('en-US');
 
-      rerender(
-        <Langs
-          uid="1"
-          onChange={onChange}
-          langs={['en-US', 'es-ES']}
-          selected="es-ES"
-        />,
-      );
+      rerender(<Langs uid="1" onChange={onChange} langs={['en-US', 'es-ES']} selected="es-ES" />);
 
       select = screen.getByRole('combobox');
       expect(select).toHaveTextContent('es-ES');
@@ -184,14 +165,7 @@ describe('Langs Component', () => {
         selected: 'en-US',
       });
 
-      rerender(
-        <Langs
-          uid="1"
-          onChange={onChange}
-          langs={['en-US', 'es-ES', 'fr-FR']}
-          selected="en-US"
-        />,
-      );
+      rerender(<Langs uid="1" onChange={onChange} langs={['en-US', 'es-ES', 'fr-FR']} selected="en-US" />);
 
       const select = screen.getByRole('combobox');
       expect(select).toHaveTextContent('en-US');
@@ -266,9 +240,7 @@ describe('LanguageControls Component', () => {
     });
 
     it('applies custom className', () => {
-      const { container } = render(
-        <LanguageControls {...defaultProps} className="custom-class" />,
-      );
+      const { container } = render(<LanguageControls {...defaultProps} className="custom-class" />);
 
       expect(container.querySelector('.custom-class')).toBeInTheDocument();
     });
@@ -279,13 +251,7 @@ describe('LanguageControls Component', () => {
       const user = userEvent.setup();
       const onActiveLangChange = jest.fn();
 
-      render(
-        <LanguageControls
-          {...defaultProps}
-          activeLang="en-US"
-          onActiveLangChange={onActiveLangChange}
-        />,
-      );
+      render(<LanguageControls {...defaultProps} activeLang="en-US" onActiveLangChange={onActiveLangChange} />);
 
       const selects = screen.getAllByRole('combobox');
       const activeSelect = selects[0];
@@ -300,13 +266,7 @@ describe('LanguageControls Component', () => {
       const user = userEvent.setup();
       const onDefaultLangChange = jest.fn();
 
-      render(
-        <LanguageControls
-          {...defaultProps}
-          defaultLang="en-US"
-          onDefaultLangChange={onDefaultLangChange}
-        />,
-      );
+      render(<LanguageControls {...defaultProps} defaultLang="en-US" onDefaultLangChange={onDefaultLangChange} />);
 
       const selects = screen.getAllByRole('combobox');
       const defaultSelect = selects[1];
@@ -346,12 +306,7 @@ describe('LanguageControls Component', () => {
   describe('props handling', () => {
     it('displays correct language options', async () => {
       const user = userEvent.setup();
-      render(
-        <LanguageControls
-          {...defaultProps}
-          langs={['en-US', 'es-ES', 'fr-FR', 'de-DE']}
-        />,
-      );
+      render(<LanguageControls {...defaultProps} langs={['en-US', 'es-ES', 'fr-FR', 'de-DE']} />);
 
       const selects = screen.getAllByRole('combobox');
       await user.click(selects[0]);
@@ -364,13 +319,7 @@ describe('LanguageControls Component', () => {
 
     it('maintains different active and default languages', async () => {
       const user = userEvent.setup();
-      render(
-        <LanguageControls
-          {...defaultProps}
-          activeLang="es-ES"
-          defaultLang="en-US"
-        />,
-      );
+      render(<LanguageControls {...defaultProps} activeLang="es-ES" defaultLang="en-US" />);
 
       const selects = screen.getAllByRole('combobox');
       expect(selects[0]).toHaveTextContent('es-ES');
@@ -380,44 +329,24 @@ describe('LanguageControls Component', () => {
 
   describe('updates', () => {
     it('updates when activeLang prop changes', () => {
-      const { rerender } = render(
-        <LanguageControls
-          {...defaultProps}
-          activeLang="en-US"
-        />,
-      );
+      const { rerender } = render(<LanguageControls {...defaultProps} activeLang="en-US" />);
 
       let selects = screen.getAllByRole('combobox');
       expect(selects[0]).toHaveTextContent('en-US');
 
-      rerender(
-        <LanguageControls
-          {...defaultProps}
-          activeLang="es-ES"
-        />,
-      );
+      rerender(<LanguageControls {...defaultProps} activeLang="es-ES" />);
 
       selects = screen.getAllByRole('combobox');
       expect(selects[0]).toHaveTextContent('es-ES');
     });
 
     it('updates when defaultLang prop changes', () => {
-      const { rerender } = render(
-        <LanguageControls
-          {...defaultProps}
-          defaultLang="en-US"
-        />,
-      );
+      const { rerender } = render(<LanguageControls {...defaultProps} defaultLang="en-US" />);
 
       let selects = screen.getAllByRole('combobox');
       expect(selects[1]).toHaveTextContent('en-US');
 
-      rerender(
-        <LanguageControls
-          {...defaultProps}
-          defaultLang="fr-FR"
-        />,
-      );
+      rerender(<LanguageControls {...defaultProps} defaultLang="fr-FR" />);
 
       selects = screen.getAllByRole('combobox');
       expect(selects[1]).toHaveTextContent('fr-FR');
@@ -425,19 +354,9 @@ describe('LanguageControls Component', () => {
 
     it('updates when langs prop changes', async () => {
       const user = userEvent.setup();
-      const { rerender } = render(
-        <LanguageControls
-          {...defaultProps}
-          langs={['en-US', 'es-ES']}
-        />,
-      );
+      const { rerender } = render(<LanguageControls {...defaultProps} langs={['en-US', 'es-ES']} />);
 
-      rerender(
-        <LanguageControls
-          {...defaultProps}
-          langs={['en-US', 'es-ES', 'fr-FR']}
-        />,
-      );
+      rerender(<LanguageControls {...defaultProps} langs={['en-US', 'es-ES', 'fr-FR']} />);
 
       const selects = screen.getAllByRole('combobox');
       await user.click(selects[0]);

package/src/__tests__/number-text-field-custom.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 { NumberTextFieldCustom } from '../number-text-field-custom';
 
@@ -21,12 +21,7 @@ describe('NumberTextFieldCustom', () => {
     });
 
     it('renders with custom label', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          label="Custom Label"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} label="Custom Label" />);
       expect(screen.getByLabelText('Custom Label')).toBeInTheDocument();
     });
 
@@ -37,112 +32,59 @@ describe('NumberTextFieldCustom', () => {
     });
 
     it('renders with custom className', () => {
-      const { container } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          className="custom-class"
-        />,
-      );
+      const { container } = render(<NumberTextFieldCustom {...defaultProps} className="custom-class" />);
       expect(container.querySelector('.custom-class')).toBeInTheDocument();
     });
 
     it('renders with custom inputClassName', () => {
-      const { container } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          inputClassName="input-class"
-        />,
-      );
+      const { container } = render(<NumberTextFieldCustom {...defaultProps} inputClassName="input-class" />);
       expect(container.querySelector('.input-class')).toBeInTheDocument();
     });
 
     it('renders as disabled when disabled prop is true', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          disabled={true}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} disabled={true} />);
       const input = screen.getByRole('spinbutton');
       expect(input).toBeDisabled();
     });
 
     it('renders with error styling when error is true', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          error={true}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} error={true} />);
       const input = screen.getByRole('spinbutton');
       expect(input).toHaveAttribute('aria-invalid', 'true');
     });
 
     it('renders helper text when provided', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          helperText="This is a helper text"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} helperText="This is a helper text" />);
       expect(screen.getByText('This is a helper text')).toBeInTheDocument();
     });
 
     it('renders with different variant', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          variant="outlined"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} variant="outlined" />);
       const input = screen.getByRole('spinbutton');
       expect(input).toBeInTheDocument();
     });
 
     it('renders with text alignment', () => {
-      const { container } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          textAlign="left"
-        />,
-      );
+      const { container } = render(<NumberTextFieldCustom {...defaultProps} textAlign="left" />);
       expect(container.querySelector('input')).toBeInTheDocument();
     });
   });
 
   describe('custom values', () => {
     it('accepts custom values array', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          customValues={['small', 'medium', 'large']}
-          value="medium"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} customValues={['small', 'medium', 'large']} value="medium" />);
       const input = screen.getByRole('spinbutton');
       expect(input).toBeInTheDocument();
     });
 
     it('handles empty custom values array', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          customValues={[]}
-          value={5}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} customValues={[]} value={5} />);
       const input = screen.getByRole('spinbutton');
       expect(input).toHaveValue(5);
     });
 
     it('displays custom value when selected', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          customValues={['auto', 'fixed', 'dynamic']}
-          value="fixed"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} customValues={['auto', 'fixed', 'dynamic']} value="fixed" />);
       const input = screen.getByRole('spinbutton');
       expect(input).toBeInTheDocument();
     });
@@ -151,40 +93,20 @@ describe('NumberTextFieldCustom', () => {
   describe('step functionality', () => {
     it('uses default step of 1', () => {
       const onChange = jest.fn();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          onChange={onChange}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} onChange={onChange} />);
       expect(screen.getByRole('spinbutton')).toBeInTheDocument();
     });
 
     it('uses custom step value', () => {
       const onChange = jest.fn();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          step={0.5}
-          onChange={onChange}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} step={0.5} onChange={onChange} />);
       expect(screen.getByRole('spinbutton')).toBeInTheDocument();
     });
 
     it('increments value by step with add button', async () => {
       const user = userEvent.setup();
       const onChange = jest.fn();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          step={2}
-          onChange={onChange}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} step={2} onChange={onChange} />);
 
       const buttons = screen.getAllByRole('button');
       const addButton = buttons.find((btn) => btn.querySelector('[data-testid], svg'));
@@ -197,14 +119,7 @@ describe('NumberTextFieldCustom', () => {
     it('decrements value by step with remove button', async () => {
       const user = userEvent.setup();
       const onChange = jest.fn();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          step={1}
-          onChange={onChange}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} step={1} onChange={onChange} />);
 
       const buttons = screen.getAllByRole('button');
       const removeButton = buttons[0];
@@ -218,14 +133,7 @@ describe('NumberTextFieldCustom', () => {
   describe('min/max constraints', () => {
     it('clamps value to min', async () => {
       const user = userEvent.setup();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={0}
-          min={1}
-          max={10}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={0} min={1} max={10} />);
 
       const input = screen.getByRole('spinbutton');
       fireEvent.blur(input);
@@ -237,14 +145,7 @@ describe('NumberTextFieldCustom', () => {
 
     it('clamps value to max', async () => {
       const user = userEvent.setup();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={15}
-          min={1}
-          max={10}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={15} min={1} max={10} />);
 
       const input = screen.getByRole('spinbutton');
       fireEvent.blur(input);
@@ -255,89 +156,43 @@ describe('NumberTextFieldCustom', () => {
     });
 
     it('handles only min constraint', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          min={3}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} min={3} />);
       expect(screen.getByRole('spinbutton')).toHaveValue(5);
     });
 
     it('handles only max constraint', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          max={10}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} max={10} />);
       expect(screen.getByRole('spinbutton')).toHaveValue(5);
     });
   });
 
   describe('props updates', () => {
     it('updates value when prop changes', () => {
-      const { rerender } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-        />,
-      );
+      const { rerender } = render(<NumberTextFieldCustom {...defaultProps} value={5} />);
 
       let input = screen.getByRole('spinbutton');
       expect(input).toHaveValue(5);
 
-      rerender(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={8}
-        />,
-      );
+      rerender(<NumberTextFieldCustom {...defaultProps} value={8} />);
 
       input = screen.getByRole('spinbutton');
       expect(input).toHaveValue(8);
     });
 
     it('updates when label changes', () => {
-      const { rerender } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          label="Old Label"
-        />,
-      );
+      const { rerender } = render(<NumberTextFieldCustom {...defaultProps} label="Old Label" />);
 
       expect(screen.getByLabelText('Old Label')).toBeInTheDocument();
 
-      rerender(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          label="New Label"
-        />,
-      );
+      rerender(<NumberTextFieldCustom {...defaultProps} label="New Label" />);
 
       expect(screen.getByLabelText('New Label')).toBeInTheDocument();
     });
 
     it('updates constraints when min/max props change', () => {
-      const { rerender } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          min={1}
-          max={10}
-        />,
-      );
-
-      rerender(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          min={1}
-          max={8}
-        />,
-      );
+      const { rerender } = render(<NumberTextFieldCustom {...defaultProps} value={5} min={1} max={10} />);
+
+      rerender(<NumberTextFieldCustom {...defaultProps} value={5} min={1} max={8} />);
 
       expect(screen.getByRole('spinbutton')).toBeInTheDocument();
     });
@@ -345,58 +200,30 @@ describe('NumberTextFieldCustom', () => {
 
   describe('text alignment', () => {
     it('renders with center alignment (default)', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} />);
       expect(screen.getByRole('spinbutton')).toBeInTheDocument();
     });
 
     it('renders with custom left alignment', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          textAlign="left"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} textAlign="left" />);
       expect(screen.getByRole('spinbutton')).toBeInTheDocument();
     });
 
     it('renders with right alignment', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          textAlign="right"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} textAlign="right" />);
       expect(screen.getByRole('spinbutton')).toBeInTheDocument();
     });
   });
 
   describe('type property', () => {
     it('renders as number type by default', () => {
-      const { container } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-        />,
-      );
+      const { container } = render(<NumberTextFieldCustom {...defaultProps} value={5} />);
       const input = container.querySelector('input[type="number"]');
       expect(input).toBeInTheDocument();
     });
 
     it('can render with custom type', () => {
-      const { container } = render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-          type="text"
-        />,
-      );
+      const { container } = render(<NumberTextFieldCustom {...defaultProps} value={5} type="text" />);
       const input = container.querySelector('input');
       expect(input).toBeInTheDocument();
     });
@@ -409,23 +236,13 @@ describe('NumberTextFieldCustom', () => {
     });
 
     it('has proper label association', () => {
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          label="Price"
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} label="Price" />);
       expect(screen.getByLabelText('Price')).toBeInTheDocument();
     });
 
     it('supports keyboard navigation', async () => {
       const user = userEvent.setup();
-      render(
-        <NumberTextFieldCustom
-          {...defaultProps}
-          value={5}
-        />,
-      );
+      render(<NumberTextFieldCustom {...defaultProps} value={5} />);
 
       const input = screen.getByRole('spinbutton');
       input.focus();