@pie-lib/config-ui 13.0.3 → 13.0.4-next.0

package/src/__tests__/alert-dialog.test.jsx

@@ -1,183 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import AlertDialog from '../alert-dialog';
-
-describe('AlertDialog Component', () => {
-  const onClose = jest.fn();
-  const onConfirm = jest.fn();
-
-  beforeEach(() => {
-    onClose.mockClear();
-    onConfirm.mockClear();
-  });
-
-  describe('Rendering when open', () => {
-    it('should render dialog when open is true', () => {
-      render(<AlertDialog open={true} title="Confirm" text="Are you sure?" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText('Confirm')).toBeInTheDocument();
-      expect(screen.getByText('Are you sure?')).toBeInTheDocument();
-    });
-
-    it('should not render dialog when open is false', () => {
-      const { container } = render(
-        <AlertDialog open={false} title="Confirm" text="Are you sure?" onClose={onClose} onConfirm={onConfirm} />,
-      );
-
-      const dialogs = container.querySelectorAll('[role="dialog"]');
-      expect(dialogs.length).toBe(0);
-    });
-  });
-
-  describe('Title and Text', () => {
-    it('should handle both title and text', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Important"
-          text="This is an important message"
-          onClose={onClose}
-          onConfirm={onConfirm}
-        />,
-      );
-
-      expect(screen.getByText('Important')).toBeInTheDocument();
-      expect(screen.getByText('This is an important message')).toBeInTheDocument();
-    });
-
-    it('should handle text as object', () => {
-      const textObj = <div>Rich text content</div>;
-      render(<AlertDialog open={true} title="Rich Content" text={textObj} onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText('Rich text content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Buttons', () => {
-    it('should render close button when onClose is provided', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'CANCEL' })).toBeInTheDocument();
-    });
-
-    it('should render confirm button when onConfirm is provided', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
-    });
-
-    it('should have default button text', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'CANCEL' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
-    });
-  });
-
-  describe('User interactions', () => {
-    it('should call onClose when close button is clicked', async () => {
-      const user = userEvent.setup();
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      const closeButton = screen.getByRole('button', { name: 'CANCEL' });
-      await user.click(closeButton);
-
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('should call onConfirm when confirm button is clicked', async () => {
-      const user = userEvent.setup();
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      const confirmButton = screen.getByRole('button', { name: 'OK' });
-      await user.click(confirmButton);
-
-      expect(onConfirm).toHaveBeenCalled();
-    });
-  });
-
-  describe('Focus management', () => {
-    it('should have autoFocus on confirm button by default', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      const confirmButton = screen.getByRole('button', { name: 'OK' });
-      expect(confirmButton).toBeInTheDocument();
-    });
-
-    it('should disable auto focus when disableAutoFocus is true', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Dialog"
-          text="Content"
-          onClose={onClose}
-          onConfirm={onConfirm}
-          disableAutoFocus={true}
-        />,
-      );
-
-      expect(screen.getByText('Dialog')).toBeInTheDocument();
-    });
-
-    it('should disable enforce focus when disableEnforceFocus is true', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Dialog"
-          text="Content"
-          onClose={onClose}
-          onConfirm={onConfirm}
-          disableEnforceFocus={true}
-        />,
-      );
-
-      expect(screen.getByText('Dialog')).toBeInTheDocument();
-    });
-
-    it('should disable restore focus when disableRestoreFocus is true', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Dialog"
-          text="Content"
-          onClose={onClose}
-          onConfirm={onConfirm}
-          disableRestoreFocus={true}
-        />,
-      );
-
-      expect(screen.getByText('Dialog')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('should handle very long title', () => {
-      const longTitle = 'This is a very long title that should wrap properly in the dialog';
-      render(<AlertDialog open={true} title={longTitle} text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText(longTitle)).toBeInTheDocument();
-    });
-
-    it('should handle very long text', () => {
-      const longText = 'This is a very long text that should wrap properly in the dialog. '.repeat(10);
-      render(<AlertDialog open={true} title="Dialog" text={longText} onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText(new RegExp(longText.slice(0, 50)))).toBeInTheDocument();
-    });
-
-    it('should handle only close callback', () => {
-      render(<AlertDialog open={true} title="Close Only" text="Content" onClose={onClose} />);
-
-      expect(screen.getByRole('button', { name: 'CANCEL' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'OK' })).not.toBeInTheDocument();
-    });
-
-    it('should handle only confirm callback', () => {
-      render(<AlertDialog open={true} title="Confirm Only" text="Content" onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'CANCEL' })).not.toBeInTheDocument();
-    });
-  });
-});

package/src/__tests__/checkbox.test.jsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Checkbox from '../checkbox';
-
-describe('Checkbox Component', () => {
-  const onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('Rendering', () => {
-    it('should render checkbox with label', () => {
-      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" />);
-
-      expect(screen.getByRole('checkbox')).toBeChecked();
-    });
-
-    it('should render checkbox in unchecked state', () => {
-      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} />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-      expect(screen.getByText('Mini')).toBeInTheDocument();
-    });
-  });
-
-  describe('User interaction', () => {
-    it('should call onChange when checkbox is clicked', async () => {
-      const user = userEvent.setup();
-      render(<Checkbox checked={false} onChange={onChange} label="Accept" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      await user.click(checkbox);
-
-      expect(onChange).toHaveBeenCalled();
-    });
-
-    it('should call onChange when label is clicked', async () => {
-      const user = userEvent.setup();
-      render(<Checkbox checked={false} onChange={onChange} label="Click label" />);
-
-      const label = screen.getByText('Click label');
-      await user.click(label);
-
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-
-  describe('Props', () => {
-    it('should handle value prop', () => {
-      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} />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-      expect(screen.getByText('Error state')).toBeInTheDocument();
-    });
-  });
-
-  describe('Default props', () => {
-    it('should have mini default to false', () => {
-      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" />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-
-    it('should have value default to empty string', () => {
-      render(<Checkbox checked={true} onChange={onChange} label="Test" />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper label association', () => {
-      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" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      checkbox.focus();
-      expect(checkbox).toHaveFocus();
-
-      await user.keyboard(' ');
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-
-  describe('Multiple checkboxes', () => {
-    it('should render multiple independent checkboxes', () => {
-      const onChange1 = jest.fn();
-      const onChange2 = jest.fn();
-
-      render(
-        <>
-          <Checkbox checked={true} onChange={onChange1} label="Option 1" />
-          <Checkbox checked={false} onChange={onChange2} label="Option 2" />
-        </>,
-      );
-
-      expect(screen.getByLabelText('Option 1')).toBeChecked();
-      expect(screen.getByLabelText('Option 2')).not.toBeChecked();
-    });
-
-    it('should handle independent onChange callbacks', async () => {
-      const user = userEvent.setup();
-      const onChange1 = jest.fn();
-      const onChange2 = jest.fn();
-
-      render(
-        <>
-          <Checkbox checked={true} onChange={onChange1} label="Option 1" />
-          <Checkbox checked={false} onChange={onChange2} label="Option 2" />
-        </>,
-      );
-
-      await user.click(screen.getByLabelText('Option 2'));
-
-      expect(onChange2).toHaveBeenCalled();
-      expect(onChange1).not.toHaveBeenCalled();
-    });
-  });
-});

package/src/__tests__/choice-utils.test.js

@@ -1,12 +0,0 @@
-import { firstAvailableIndex } from '../choice-utils';
-
-describe('firstAvailableIndex', () => {
-  const assert = (values, index, expected) => {
-    it(`[${values.join(',')}], ${index} ==> ${expected}`, () => {
-      expect(firstAvailableIndex(['0'], 0)).toEqual('1');
-    });
-  };
-  assert(['0'], 0, '1');
-  assert(['0', '1', '2'], 0, '3');
-  assert(['0', '1', '2'], 100, '100');
-});

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

@@ -1,328 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import FormSection from '../form-section';
-
-describe('FormSection Component', () => {
-  describe('Rendering', () => {
-    it('should render with label and children', () => {
-      render(
-        <FormSection label="Settings">
-          <div>Child content</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('Settings')).toBeInTheDocument();
-      expect(screen.getByText('Child content')).toBeInTheDocument();
-    });
-
-    it('should render label as subtitle1 typography', () => {
-      const { container } = render(
-        <FormSection label="Configuration">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      const typography = container.querySelector('[class*="MuiTypography"]');
-      expect(typography).toBeInTheDocument();
-    });
-
-    it('should render with custom className', () => {
-      const { container } = render(
-        <FormSection label="Custom" className="custom-class">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(container.querySelector('.custom-class')).toBeInTheDocument();
-    });
-
-    it('should render multiple children', () => {
-      render(
-        <FormSection label="Multiple Children">
-          <div>First child</div>
-          <div>Second child</div>
-          <div>Third child</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('First child')).toBeInTheDocument();
-      expect(screen.getByText('Second child')).toBeInTheDocument();
-      expect(screen.getByText('Third child')).toBeInTheDocument();
-    });
-
-    it('should render with single child', () => {
-      render(
-        <FormSection label="Single Child">
-          <input type="text" placeholder="Input" />
-        </FormSection>,
-      );
-
-      expect(screen.getByPlaceholderText('Input')).toBeInTheDocument();
-    });
-
-    it('should render with complex child components', () => {
-      render(
-        <FormSection label="Complex">
-          <div>
-            <label>Name:</label>
-            <input type="text" placeholder="Enter name" />
-          </div>
-          <div>
-            <label>Email:</label>
-            <input type="email" placeholder="Enter email" />
-          </div>
-        </FormSection>,
-      );
-
-      expect(screen.getByPlaceholderText('Enter name')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument();
-    });
-  });
-
-  describe('Labels', () => {
-    it('should display different labels', () => {
-      const { rerender } = render(
-        <FormSection label="First Label">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('First Label')).toBeInTheDocument();
-
-      rerender(
-        <FormSection label="Second Label">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('Second Label')).toBeInTheDocument();
-      expect(screen.queryByText('First Label')).not.toBeInTheDocument();
-    });
-
-    it('should handle empty label', () => {
-      const { container } = render(
-        <FormSection label="">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(container.querySelector('[class*="MuiTypography"]')).toBeInTheDocument();
-      expect(screen.getByText('Content')).toBeInTheDocument();
-    });
-
-    it('should handle long labels', () => {
-      const longLabel = 'This is a very long label that should wrap properly within the form section';
-      render(
-        <FormSection label={longLabel}>
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText(longLabel)).toBeInTheDocument();
-    });
-
-    it('should handle special characters in labels', () => {
-      const specialLabel = 'Settings & Configuration < Advanced > Test @ #1';
-      render(
-        <FormSection label={specialLabel}>
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText(specialLabel)).toBeInTheDocument();
-    });
-  });
-
-  describe('Styling and Layout', () => {
-    it('should apply default spacing', () => {
-      const { container } = render(
-        <FormSection label="Spaced">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      const formSection = container.querySelector('[class*="MuiBox"], div');
-      expect(formSection).toBeInTheDocument();
-    });
-
-    it('should apply labelExtraStyle to the label', () => {
-      const { container } = render(
-        <FormSection label="Styled Label" labelExtraStyle={{ color: 'red', fontWeight: 'bold' }}>
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      const typography = container.querySelector('[class*="MuiTypography"]');
-      expect(typography).toHaveStyle('color: red');
-      expect(typography).toHaveStyle('fontWeight: bold');
-    });
-
-    it('should apply multiple labelExtraStyle properties', () => {
-      const extraStyle = {
-        fontSize: '18px',
-        margin: '10px',
-        padding: '5px',
-      };
-
-      const { container } = render(
-        <FormSection label="Multi-styled" labelExtraStyle={extraStyle}>
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      const typography = container.querySelector('[class*="MuiTypography"]');
-      expect(typography).toHaveStyle('fontSize: 18px');
-      expect(typography).toHaveStyle('margin: 10px');
-      expect(typography).toHaveStyle('padding: 5px');
-    });
-
-    it('should handle no labelExtraStyle', () => {
-      const { container } = render(
-        <FormSection label="No Extra Style">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(container.querySelector('[class*="MuiTypography"]')).toBeInTheDocument();
-    });
-  });
-
-  describe('CSS classes', () => {
-    it('should support multiple custom classes', () => {
-      const { container } = render(
-        <FormSection label="Test" className="class1 class2 class3">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      const element = container.querySelector('.class1.class2.class3');
-      expect(element).toBeInTheDocument();
-    });
-
-    it('should work without custom className', () => {
-      const { container } = render(
-        <FormSection label="Test">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('Content variations', () => {
-    it('should render form inputs as children', () => {
-      render(
-        <FormSection label="Form Inputs">
-          <input type="text" placeholder="Text input" />
-          <input type="number" placeholder="Number input" />
-          <textarea placeholder="Text area"></textarea>
-        </FormSection>,
-      );
-
-      expect(screen.getByPlaceholderText('Text input')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Number input')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Text area')).toBeInTheDocument();
-    });
-
-    it('should render lists as children', () => {
-      render(
-        <FormSection label="Options">
-          <ul>
-            <li>Option 1</li>
-            <li>Option 2</li>
-            <li>Option 3</li>
-          </ul>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-      expect(screen.getByText('Option 2')).toBeInTheDocument();
-      expect(screen.getByText('Option 3')).toBeInTheDocument();
-    });
-
-    it('should render buttons as children', () => {
-      render(
-        <FormSection label="Actions">
-          <button>Save</button>
-          <button>Cancel</button>
-        </FormSection>,
-      );
-
-      expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-    });
-
-    it('should render nested form sections', () => {
-      render(
-        <FormSection label="Outer">
-          <FormSection label="Inner">
-            <div>Nested content</div>
-          </FormSection>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('Outer')).toBeInTheDocument();
-      expect(screen.getByText('Inner')).toBeInTheDocument();
-      expect(screen.getByText('Nested content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('should render with conditional children', () => {
-      const showContent = true;
-
-      render(
-        <FormSection label="Conditional">
-          {showContent && <div>Visible</div>}
-          {!showContent && <div>Hidden</div>}
-        </FormSection>,
-      );
-
-      expect(screen.getByText('Visible')).toBeInTheDocument();
-      expect(screen.queryByText('Hidden')).not.toBeInTheDocument();
-    });
-
-    it('should update when children change', () => {
-      const { rerender } = render(
-        <FormSection label="Dynamic">
-          <div>Initial content</div>
-        </FormSection>,
-      );
-
-      expect(screen.getByText('Initial content')).toBeInTheDocument();
-
-      rerender(
-        <FormSection label="Dynamic">
-          <div>Updated content</div>
-        </FormSection>,
-      );
-
-      expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
-      expect(screen.getByText('Updated content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper heading hierarchy', () => {
-      const { container } = render(
-        <FormSection label="Accessible Section">
-          <div>Content</div>
-        </FormSection>,
-      );
-
-      const typography = container.querySelector('[class*="MuiTypography"]');
-      expect(typography).toBeInTheDocument();
-    });
-
-    it('should be properly semantically structured', () => {
-      const { container } = render(
-        <FormSection label="Semantic">
-          <input type="text" />
-        </FormSection>,
-      );
-
-      expect(container.querySelector('div')).toBeInTheDocument();
-    });
-  });
-});