@pie-lib/config-ui 13.1.0-beta.7 → 14.0.0-next.35

package/src/__tests__/settings.test.jsx

@@ -1,452 +0,0 @@
-import React from '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';
-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();
-    });
-  });
-});

package/src/__tests__/tabs.test.jsx

@@ -1,188 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Tabs } from '../tabs';
-
-describe('Tabs Component', () => {
-  it('renders tabs with correct titles', () => {
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        <div title="Tab 2">Content 2</div>
-        <div title="Tab 3">Content 3</div>
-      </Tabs>,
-    );
-
-    expect(screen.getByText('Tab 1')).toBeInTheDocument();
-    expect(screen.getByText('Tab 2')).toBeInTheDocument();
-    expect(screen.getByText('Tab 3')).toBeInTheDocument();
-  });
-
-  it('renders first tab content by default', () => {
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        <div title="Tab 2">Content 2</div>
-        <div title="Tab 3">Content 3</div>
-      </Tabs>,
-    );
-
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
-  });
-
-  it('switches to selected tab when clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        <div title="Tab 2">Content 2</div>
-        <div title="Tab 3">Content 3</div>
-      </Tabs>,
-    );
-
-    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
-    await user.click(tab2);
-
-    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    expect(screen.getByText('Content 2')).toBeInTheDocument();
-    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
-  });
-
-  it('displays correct content when multiple tabs are clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        <div title="Tab 2">Content 2</div>
-        <div title="Tab 3">Content 3</div>
-      </Tabs>,
-    );
-
-    await user.click(screen.getByRole('tab', { name: 'Tab 2' }));
-    expect(screen.getByText('Content 2')).toBeInTheDocument();
-
-    await user.click(screen.getByRole('tab', { name: 'Tab 3' }));
-    expect(screen.getByText('Content 3')).toBeInTheDocument();
-
-    await user.click(screen.getByRole('tab', { name: 'Tab 1' }));
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-  });
-
-  it('applies custom className to root element', () => {
-    const { container } = render(
-      <Tabs className="custom-tabs-class">
-        <div title="Tab 1">Content 1</div>
-      </Tabs>,
-    );
-
-    const rootDiv = container.querySelector('.custom-tabs-class');
-    expect(rootDiv).toBeInTheDocument();
-  });
-
-  it('handles tabs without title prop gracefully', () => {
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        <div>No Title Child</div>
-        <div title="Tab 2">Content 2</div>
-      </Tabs>,
-    );
-
-    const tabs = screen.getAllByRole('tab');
-    // Should only have 2 tabs since one doesn't have a title
-    expect(tabs).toHaveLength(2);
-    expect(screen.getByText('Tab 1')).toBeInTheDocument();
-    expect(screen.getByText('Tab 2')).toBeInTheDocument();
-  });
-
-  it('handles null children gracefully', () => {
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        {null}
-        <div title="Tab 2">Content 2</div>
-      </Tabs>,
-    );
-
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(2);
-  });
-
-  it('handles complex content in tabs', () => {
-    render(
-      <Tabs>
-        <div title="Tab 1">
-          <div>
-            <h2>Tab 1 Header</h2>
-            <p>Tab 1 description</p>
-            <button>Button in Tab 1</button>
-          </div>
-        </div>
-        <div title="Tab 2">
-          <div>
-            <h2>Tab 2 Header</h2>
-            <input type="text" placeholder="Input in Tab 2" />
-          </div>
-        </div>
-      </Tabs>,
-    );
-
-    expect(screen.getByText('Tab 1 Header')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Button in Tab 1' })).toBeInTheDocument();
-
-    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
-    expect(tab2).toBeInTheDocument();
-  });
-
-  it('renders all tabs in MuiTabs component', () => {
-    const { container } = render(
-      <Tabs>
-        <div title="Tab A">Content A</div>
-        <div title="Tab B">Content B</div>
-        <div title="Tab C">Content C</div>
-      </Tabs>,
-    );
-
-    const tabsComponent = container.querySelector('[role="tablist"]');
-    expect(tabsComponent).toBeInTheDocument();
-  });
-
-  it('applies correct value prop to MuiTabs', async () => {
-    const user = userEvent.setup();
-    render(
-      <Tabs>
-        <div title="Tab 1">Content 1</div>
-        <div title="Tab 2">Content 2</div>
-      </Tabs>,
-    );
-
-    // Initially first tab should be selected (value 0)
-    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
-    expect(tab1).toHaveAttribute('aria-selected', 'true');
-
-    // Click second tab
-    await user.click(screen.getByRole('tab', { name: 'Tab 2' }));
-    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
-    expect(tab2).toHaveAttribute('aria-selected', 'true');
-    expect(tab1).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('renders with empty children array', () => {
-    const { container } = render(<Tabs>{[]}</Tabs>);
-    expect(container).toBeInTheDocument();
-  });
-
-  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="Short">Content 2</div>
-      </Tabs>,
-    );
-
-    expect(screen.getByText('This is a very long tab title that should still render correctly')).toBeInTheDocument();
-    expect(screen.getByText('Short')).toBeInTheDocument();
-  });
-});