@sudobility/components-rn 1.0.21 → 1.0.23

package/src/__tests__/card.test.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Card, CardHeader, CardContent, CardFooter } from '../ui/Card';
+
+// Mock @sudobility/design
+jest.mock('@sudobility/design', () => ({
+  textVariants: {
+    heading: { h4: () => 'mocked-heading' },
+    body: { sm: () => 'mocked-body' },
+  },
+  getCardVariantColors: () => 'mocked-card-variant',
+}));
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(
+      <Card>
+        <Text>Card content</Text>
+      </Card>
+    );
+    expect(screen.getByText('Card content')).toBeTruthy();
+  });
+
+  it('renders with different variants without crashing', () => {
+    const variants = [
+      'default',
+      'bordered',
+      'elevated',
+      'info',
+      'success',
+      'warning',
+      'error',
+      'callout',
+    ] as const;
+
+    variants.forEach(variant => {
+      const { unmount } = render(
+        <Card variant={variant}>
+          <Text>{variant}</Text>
+        </Card>
+      );
+      expect(screen.getByText(variant)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders icon for info-type variants', () => {
+    render(
+      <Card variant='info' icon={<Text testID='card-icon'>Icon</Text>}>
+        <Text>Info card</Text>
+      </Card>
+    );
+    expect(screen.getByTestId('card-icon')).toBeTruthy();
+    expect(screen.getByText('Info card')).toBeTruthy();
+  });
+
+  it('renders close button for info-type variants with onClose', () => {
+    const onClose = jest.fn();
+    render(
+      <Card variant='error' onClose={onClose}>
+        <Text>Error card</Text>
+      </Card>
+    );
+    const closeButton = screen.getByLabelText('Close');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render icon/close layout for non-info variants', () => {
+    render(
+      <Card variant='elevated'>
+        <Text>Plain card</Text>
+      </Card>
+    );
+    expect(screen.queryByLabelText('Close')).toBeNull();
+  });
+});
+
+describe('CardHeader', () => {
+  it('renders title', () => {
+    render(<CardHeader title='Card Title' />);
+    expect(screen.getByText('Card Title')).toBeTruthy();
+  });
+
+  it('renders description', () => {
+    render(<CardHeader description='Card description' />);
+    expect(screen.getByText('Card description')).toBeTruthy();
+  });
+
+  it('renders title and description together', () => {
+    render(<CardHeader title='Title' description='Description' />);
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Description')).toBeTruthy();
+  });
+
+  it('renders children alongside title', () => {
+    render(
+      <CardHeader title='Title'>
+        <Text>Extra content</Text>
+      </CardHeader>
+    );
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Extra content')).toBeTruthy();
+  });
+});
+
+describe('CardContent', () => {
+  it('renders children', () => {
+    render(
+      <CardContent>
+        <Text>Body content</Text>
+      </CardContent>
+    );
+    expect(screen.getByText('Body content')).toBeTruthy();
+  });
+});
+
+describe('CardFooter', () => {
+  it('renders children', () => {
+    render(
+      <CardFooter>
+        <Text>Footer content</Text>
+      </CardFooter>
+    );
+    expect(screen.getByText('Footer content')).toBeTruthy();
+  });
+});
+
+describe('Card composition', () => {
+  it('renders full card with all sub-components', () => {
+    render(
+      <Card variant='elevated'>
+        <CardHeader title='My Card' description='A description' />
+        <CardContent>
+          <Text>Main body</Text>
+        </CardContent>
+        <CardFooter>
+          <Text>Action area</Text>
+        </CardFooter>
+      </Card>
+    );
+    expect(screen.getByText('My Card')).toBeTruthy();
+    expect(screen.getByText('A description')).toBeTruthy();
+    expect(screen.getByText('Main body')).toBeTruthy();
+    expect(screen.getByText('Action area')).toBeTruthy();
+  });
+});

package/src/__tests__/dialog.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Dialog } from '../ui/Dialog';
+
+describe('Dialog', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    children: <Text>Dialog content</Text>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders children when open', () => {
+    render(<Dialog {...defaultProps} />);
+    expect(screen.getByText('Dialog content')).toBeTruthy();
+  });
+
+  it('renders close button by default when onClose is provided', () => {
+    render(<Dialog {...defaultProps} />);
+    const closeButton = screen.getByLabelText('Close dialog');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = jest.fn();
+    render(
+      <Dialog isOpen={true} onClose={onClose}>
+        <Text>Content</Text>
+      </Dialog>
+    );
+    fireEvent.press(screen.getByLabelText('Close dialog'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides close button when showCloseButton is false', () => {
+    render(<Dialog {...defaultProps} showCloseButton={false} />);
+    expect(screen.queryByLabelText('Close dialog')).toBeNull();
+  });
+
+  it('renders with different sizes without crashing', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;
+
+    sizes.forEach(size => {
+      const { unmount } = render(
+        <Dialog {...defaultProps} size={size}>
+          <Text>{size}</Text>
+        </Dialog>
+      );
+      expect(screen.getByText(size)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('does not render close button when onClose is not provided', () => {
+    render(
+      <Dialog isOpen={true}>
+        <Text>No close</Text>
+      </Dialog>
+    );
+    expect(screen.queryByLabelText('Close dialog')).toBeNull();
+  });
+
+  it('renders without close button when showCloseButton is false', () => {
+    render(
+      <Dialog {...defaultProps} showCloseButton={false}>
+        <Text>No X button</Text>
+      </Dialog>
+    );
+    expect(screen.getByText('No X button')).toBeTruthy();
+    expect(screen.queryByLabelText('Close dialog')).toBeNull();
+  });
+});

package/src/__tests__/input.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Input } from '../ui/Input';
+
+// Mock @sudobility/design
+jest.mock('@sudobility/design', () => ({
+  variants: {
+    input: {
+      default: () => 'mocked-input-class',
+    },
+  },
+}));
+
+describe('Input', () => {
+  it('renders with placeholder', () => {
+    render(<Input placeholder='Enter text' />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeTruthy();
+  });
+
+  it('displays the current value', () => {
+    render(<Input value='Hello' />);
+    expect(screen.getByDisplayValue('Hello')).toBeTruthy();
+  });
+
+  it('calls onChangeText when text changes', () => {
+    const onChangeText = jest.fn();
+    render(<Input placeholder='Type here' onChangeText={onChangeText} />);
+    fireEvent.changeText(screen.getByPlaceholderText('Type here'), 'New text');
+    expect(onChangeText).toHaveBeenCalledWith('New text');
+  });
+
+  it('is not editable when disabled', () => {
+    render(<Input placeholder='Disabled' disabled />);
+    const input = screen.getByPlaceholderText('Disabled');
+    expect(input.props.editable).toBe(false);
+  });
+
+  it('is not editable when editable is false', () => {
+    render(<Input placeholder='Read only' editable={false} />);
+    const input = screen.getByPlaceholderText('Read only');
+    expect(input.props.editable).toBe(false);
+  });
+
+  it('sets disabled accessibility state when disabled', () => {
+    render(<Input placeholder='Disabled' disabled />);
+    const input = screen.getByPlaceholderText('Disabled');
+    expect(input.props.accessibilityState).toEqual({ disabled: true });
+  });
+
+  it('calls onFocus and onBlur handlers', () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+    render(
+      <Input placeholder='Focus test' onFocus={onFocus} onBlur={onBlur} />
+    );
+    const input = screen.getByPlaceholderText('Focus test');
+    fireEvent(input, 'focus');
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    fireEvent(input, 'blur');
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with error state without crashing', () => {
+    render(<Input placeholder='Error input' error />);
+    expect(screen.getByPlaceholderText('Error input')).toBeTruthy();
+  });
+
+  it('passes through TextInput props', () => {
+    render(
+      <Input
+        placeholder='Email'
+        keyboardType='email-address'
+        autoCapitalize='none'
+      />
+    );
+    const input = screen.getByPlaceholderText('Email');
+    expect(input.props.keyboardType).toBe('email-address');
+    expect(input.props.autoCapitalize).toBe('none');
+  });
+});

package/src/__tests__/modal.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Modal, ModalHeader, ModalContent, ModalFooter } from '../ui/Modal';
+
+describe('Modal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    children: <Text>Modal body</Text>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders children when open', () => {
+    render(<Modal {...defaultProps} />);
+    expect(screen.getByText('Modal body')).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    render(<Modal {...defaultProps} title='My Modal' />);
+    expect(screen.getByText('My Modal')).toBeTruthy();
+  });
+
+  it('renders close button by default', () => {
+    render(<Modal {...defaultProps} title='Modal' />);
+    const closeButton = screen.getByLabelText('Close modal');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = jest.fn();
+    render(
+      <Modal isOpen={true} onClose={onClose} title='Modal'>
+        <Text>Content</Text>
+      </Modal>
+    );
+    fireEvent.press(screen.getByLabelText('Close modal'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides close button when showCloseButton is false', () => {
+    render(<Modal {...defaultProps} title='Modal' showCloseButton={false} />);
+    expect(screen.queryByLabelText('Close modal')).toBeNull();
+  });
+
+  it('renders with different sizes without crashing', () => {
+    const sizes = ['small', 'medium', 'large', 'fullWidth'] as const;
+
+    sizes.forEach(size => {
+      const { unmount } = render(
+        <Modal {...defaultProps} size={size}>
+          <Text>{size}</Text>
+        </Modal>
+      );
+      expect(screen.getByText(size)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('does not show header when no title and showCloseButton is false', () => {
+    const { toJSON } = render(
+      <Modal {...defaultProps} showCloseButton={false} />
+    );
+    expect(screen.queryByLabelText('Close modal')).toBeNull();
+    expect(toJSON()).toBeTruthy();
+  });
+});
+
+describe('ModalHeader', () => {
+  it('renders children', () => {
+    render(
+      <ModalHeader>
+        <Text>Header content</Text>
+      </ModalHeader>
+    );
+    expect(screen.getByText('Header content')).toBeTruthy();
+  });
+});
+
+describe('ModalContent', () => {
+  it('renders children', () => {
+    render(
+      <ModalContent>
+        <Text>Content area</Text>
+      </ModalContent>
+    );
+    expect(screen.getByText('Content area')).toBeTruthy();
+  });
+});
+
+describe('ModalFooter', () => {
+  it('renders children', () => {
+    render(
+      <ModalFooter>
+        <Text>Footer actions</Text>
+      </ModalFooter>
+    );
+    expect(screen.getByText('Footer actions')).toBeTruthy();
+  });
+});
+
+describe('Modal composition', () => {
+  it('renders with all sub-components', () => {
+    render(
+      <Modal isOpen={true} onClose={jest.fn()} title='Full Modal'>
+        <ModalHeader>
+          <Text>Custom Header</Text>
+        </ModalHeader>
+        <ModalContent>
+          <Text>Main content</Text>
+        </ModalContent>
+        <ModalFooter>
+          <Text>Footer</Text>
+        </ModalFooter>
+      </Modal>
+    );
+    expect(screen.getByText('Full Modal')).toBeTruthy();
+    expect(screen.getByText('Custom Header')).toBeTruthy();
+    expect(screen.getByText('Main content')).toBeTruthy();
+    expect(screen.getByText('Footer')).toBeTruthy();
+  });
+});

package/src/__tests__/sheet.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Sheet } from '../ui/Sheet';
+
+describe('Sheet', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    children: <Text>Sheet content</Text>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders children when open', () => {
+    render(<Sheet {...defaultProps} />);
+    expect(screen.getByText('Sheet content')).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    render(<Sheet {...defaultProps} title='Sheet Title' />);
+    expect(screen.getByText('Sheet Title')).toBeTruthy();
+  });
+
+  it('renders description when provided', () => {
+    render(
+      <Sheet {...defaultProps} title='Title' description='Sheet description' />
+    );
+    expect(screen.getByText('Sheet description')).toBeTruthy();
+  });
+
+  it('renders close button by default', () => {
+    render(<Sheet {...defaultProps} title='Title' />);
+    const closeButton = screen.getByLabelText('Close sheet');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = jest.fn();
+    render(
+      <Sheet isOpen={true} onClose={onClose} title='Sheet'>
+        <Text>Content</Text>
+      </Sheet>
+    );
+    fireEvent.press(screen.getByLabelText('Close sheet'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides close button when showCloseButton is false', () => {
+    render(<Sheet {...defaultProps} title='Title' showCloseButton={false} />);
+    expect(screen.queryByLabelText('Close sheet')).toBeNull();
+  });
+
+  it('renders footer when provided', () => {
+    render(<Sheet {...defaultProps} footer={<Text>Footer area</Text>} />);
+    expect(screen.getByText('Footer area')).toBeTruthy();
+  });
+
+  it('renders with different sizes without crashing', () => {
+    const sizes = ['sm', 'md', 'lg', 'full'] as const;
+
+    sizes.forEach(size => {
+      const { unmount } = render(
+        <Sheet {...defaultProps} size={size}>
+          <Text>Size {size}</Text>
+        </Sheet>
+      );
+      expect(screen.getByText(`Size ${size}`)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders with different sides without crashing', () => {
+    const sides = ['bottom', 'top', 'left', 'right'] as const;
+
+    sides.forEach(side => {
+      const { unmount } = render(
+        <Sheet {...defaultProps} side={side}>
+          <Text>Side {side}</Text>
+        </Sheet>
+      );
+      expect(screen.getByText(`Side ${side}`)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders without drag handle when showHandle is false', () => {
+    const { toJSON } = render(<Sheet {...defaultProps} showHandle={false} />);
+    // When showHandle is false, the drag handle View is not rendered
+    expect(screen.getByText('Sheet content')).toBeTruthy();
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with title, description, content, and footer together', () => {
+    render(
+      <Sheet
+        isOpen={true}
+        onClose={jest.fn()}
+        title='Full Sheet'
+        description='A full sheet example'
+        footer={<Text>Done</Text>}
+      >
+        <Text>Main content</Text>
+      </Sheet>
+    );
+    expect(screen.getByText('Full Sheet')).toBeTruthy();
+    expect(screen.getByText('A full sheet example')).toBeTruthy();
+    expect(screen.getByText('Main content')).toBeTruthy();
+    expect(screen.getByText('Done')).toBeTruthy();
+  });
+});