@pie-lib/config-ui 11.30.3-next.2 → 11.30.3-next.203

package/src/__tests__/settings.test.jsx

@@ -0,0 +1,515 @@
+import React from 'react';
+import { render, screen, fireEvent } 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

@@ -0,0 +1,193 @@
+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();
+  });
+});