@pie-lib/config-ui 13.0.4-next.30 → 13.0.4-next.34

package/src/__tests__/help.test.jsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Help, { HelpButton, HelpDialog } from '../help';
+
+describe('HelpButton', () => {
+  it('renders help icon button', () => {
+    render(<HelpButton />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', async () => {
+    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);
+  });
+
+  it('renders with large size', () => {
+    const { container } = render(<HelpButton />);
+    const button = container.querySelector('button[class*="sizeLarge"]');
+    expect(button || screen.getByRole('button')).toBeInTheDocument();
+  });
+});
+
+describe('HelpDialog', () => {
+  const defaultProps = {
+    open: true,
+    onClose: jest.fn(),
+    title: 'Help Title',
+    children: 'Help content here',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders when open is true', () => {
+    render(<HelpDialog {...defaultProps} />);
+    expect(screen.getByText('Help Title')).toBeInTheDocument();
+    expect(screen.getByText('Help content here')).toBeInTheDocument();
+  });
+
+  it('does not render when open is false', () => {
+    render(<HelpDialog {...defaultProps} open={false} />);
+    expect(screen.queryByText('Help Title')).not.toBeInTheDocument();
+  });
+
+  it('displays title correctly', () => {
+    render(<HelpDialog {...defaultProps} title="Custom Help" />);
+    expect(screen.getByText('Custom Help')).toBeInTheDocument();
+  });
+
+  it('displays children content', () => {
+    const content = 'This is helpful information';
+    render(<HelpDialog {...defaultProps} children={content} />);
+    expect(screen.getByText(content)).toBeInTheDocument();
+  });
+
+  it('calls onClose when OK button is clicked', async () => {
+    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);
+  });
+
+  it('calls onClose when dialog is closed via backdrop', async () => {
+    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();
+  });
+
+  it('renders OK button', () => {
+    render(<HelpDialog {...defaultProps} />);
+    const okButton = screen.getByRole('button', { name: /OK/i });
+    expect(okButton).toBeInTheDocument();
+  });
+
+  it('handles multiline children content', () => {
+    const content = ['Line 1', 'Line 2', 'Line 3'];
+    render(
+      <HelpDialog {...defaultProps}>
+        {content.map((line, i) => (
+          <div key={i}>{line}</div>
+        ))}
+      </HelpDialog>,
+    );
+    expect(screen.getByText('Line 1')).toBeInTheDocument();
+    expect(screen.getByText('Line 2')).toBeInTheDocument();
+    expect(screen.getByText('Line 3')).toBeInTheDocument();
+  });
+});
+
+describe('Help Component', () => {
+  const defaultProps = {
+    title: 'Help Title',
+    children: 'Help content',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders help button initially', () => {
+    render(<Help {...defaultProps} />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  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();
+  });
+
+  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();
+    });
+  });
+
+  it('displays title prop', () => {
+    render(<Help title="Custom Title" children="content" />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  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

@@ -0,0 +1,156 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Input from '../input';
+
+describe('Input Component', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('Rendering', () => {
+    it('should render input without label', () => {
+      const { container } = render(<Input type="text" value="test" onChange={onChange} />);
+
+      const input = container.querySelector('input');
+      expect(input).toBeInTheDocument();
+      expect(input.value).toBe('test');
+    });
+
+    it('should render input with label', () => {
+      render(<Input type="text" label="Email" value="test@example.com" onChange={onChange} />);
+
+      expect(screen.getByText('Email')).toBeInTheDocument();
+      const input = screen.getByDisplayValue('test@example.com');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('should render input with different types', () => {
+      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} />);
+      expect(emailContainer.querySelector('input[type="email"]')).toBeInTheDocument();
+
+      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} />);
+      expect(container.querySelector('input').value).toBe('hello');
+    });
+
+    it('should handle number values', () => {
+      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} />);
+      expect(container.querySelector('input').value).toBe('');
+    });
+
+    it('should update when prop changes', () => {
+      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} />);
+      expect(container.querySelector('input').value).toBe('updated');
+    });
+  });
+
+  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 input = container.querySelector('input');
+      await user.type(input, 'hello');
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    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 input = container.querySelector('input');
+      await user.type(input, 'ab');
+
+      expect(customError).toHaveBeenCalled();
+    });
+  });
+
+  describe('Error state', () => {
+    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 input = container.querySelector('input');
+      await user.type(input, 'test');
+
+      expect(customError).toHaveBeenCalled();
+    });
+
+    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 input = container.querySelector('input');
+      await user.type(input, 'test');
+
+      // After typing valid content, error should be false
+      expect(customError).toHaveBeenCalled();
+    });
+  });
+
+  describe('Props spreading', () => {
+    it('should handle disabled state', () => {
+      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 input = container.querySelector('input');
+      expect(input).toHaveAttribute('readonly');
+    });
+  });
+
+  describe('Default props', () => {
+    it('should use default type of text', () => {
+      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 input = container.querySelector('input');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('should have noModelUpdateOnError default to false', () => {
+      const { container } = render(<Input type="text" value="" onChange={onChange} />);
+
+      const input = container.querySelector('input');
+      expect(input).toBeInTheDocument();
+    });
+  });
+});