@pie-lib/config-ui 12.0.0-beta.5 → 12.0.0-next.0

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

@@ -0,0 +1,283 @@
+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

@@ -0,0 +1,249 @@
+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

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