@sudobility/components-rn 1.0.22 → 1.0.24

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();
+  });
+});

package/src/__tests__/tabs.test.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/Tabs';
+
+describe('Tabs', () => {
+  const renderTabs = (props = {}) =>
+    render(
+      <Tabs defaultValue='tab1' {...props}>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
+          <TabsTrigger value='tab3'>Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+        <TabsContent value='tab3'>
+          <Text>Content 3</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+  it('renders tab triggers', () => {
+    renderTabs();
+    expect(screen.getByText('Tab 1')).toBeTruthy();
+    expect(screen.getByText('Tab 2')).toBeTruthy();
+    expect(screen.getByText('Tab 3')).toBeTruthy();
+  });
+
+  it('shows content for default tab', () => {
+    renderTabs();
+    expect(screen.getByText('Content 1')).toBeTruthy();
+    expect(screen.queryByText('Content 2')).toBeNull();
+    expect(screen.queryByText('Content 3')).toBeNull();
+  });
+
+  it('switches content when a tab is pressed', () => {
+    renderTabs();
+
+    // Initially tab 1 content is shown
+    expect(screen.getByText('Content 1')).toBeTruthy();
+
+    // Press tab 2
+    fireEvent.press(screen.getByText('Tab 2'));
+    expect(screen.queryByText('Content 1')).toBeNull();
+    expect(screen.getByText('Content 2')).toBeTruthy();
+
+    // Press tab 3
+    fireEvent.press(screen.getByText('Tab 3'));
+    expect(screen.queryByText('Content 2')).toBeNull();
+    expect(screen.getByText('Content 3')).toBeTruthy();
+  });
+
+  it('calls onValueChange when tab changes', () => {
+    const onValueChange = jest.fn();
+    renderTabs({ onValueChange });
+
+    fireEvent.press(screen.getByText('Tab 2'));
+    expect(onValueChange).toHaveBeenCalledWith('tab2');
+  });
+
+  it('works in controlled mode', () => {
+    const onValueChange = jest.fn();
+    const { rerender } = render(
+      <Tabs value='tab1' onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Content 1')).toBeTruthy();
+
+    // Press tab 2 - in controlled mode the parent decides
+    fireEvent.press(screen.getByText('Tab 2'));
+    expect(onValueChange).toHaveBeenCalledWith('tab2');
+
+    // Content doesn't change until the parent updates the value prop
+    expect(screen.getByText('Content 1')).toBeTruthy();
+
+    // Rerender with updated value
+    rerender(
+      <Tabs value='tab2' onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Content 2')).toBeTruthy();
+    expect(screen.queryByText('Content 1')).toBeNull();
+  });
+
+  it('tab triggers have tab accessibility role', () => {
+    renderTabs();
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs.length).toBe(3);
+  });
+
+  it('selected tab has selected accessibility state', () => {
+    renderTabs();
+    const tabs = screen.getAllByRole('tab');
+    // First tab should be selected
+    expect(tabs[0].props.accessibilityState).toEqual({
+      selected: true,
+      disabled: false,
+    });
+    // Second tab should not be selected
+    expect(tabs[1].props.accessibilityState).toEqual({
+      selected: false,
+      disabled: false,
+    });
+  });
+
+  it('disabled tab has disabled accessibility state', () => {
+    render(
+      <Tabs defaultValue='tab1'>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2' disabled>
+            Tab 2
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[1].props.accessibilityState).toEqual({
+      selected: false,
+      disabled: true,
+    });
+  });
+
+  it('disabled tab does not switch content when pressed', () => {
+    render(
+      <Tabs defaultValue='tab1'>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2' disabled>
+            Tab 2
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    fireEvent.press(screen.getByText('Tab 2'));
+    // Content 1 should still be visible
+    expect(screen.getByText('Content 1')).toBeTruthy();
+    expect(screen.queryByText('Content 2')).toBeNull();
+  });
+});
+
+describe('TabsTrigger outside Tabs context', () => {
+  it('throws when used outside Tabs', () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() => render(<TabsTrigger value='tab1'>Tab 1</TabsTrigger>)).toThrow(
+      'Tabs components must be used within a Tabs provider'
+    );
+
+    consoleSpy.mockRestore();
+  });
+});
+
+describe('TabsContent outside Tabs context', () => {
+  it('throws when used outside Tabs', () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() =>
+      render(
+        <TabsContent value='tab1'>
+          <Text>Content</Text>
+        </TabsContent>
+      )
+    ).toThrow('Tabs components must be used within a Tabs provider');
+
+    consoleSpy.mockRestore();
+  });
+});