@aiready/components 0.14.4 → 0.14.6

package/src/components/__tests__/input.test.tsx

@@ -3,44 +3,59 @@ import { render, screen } from '@testing-library/react';
 import { Input } from '../input';
 
 describe('Input', () => {
-  it('should render an input element', () => {
+  it('renders input element', () => {
     render(<Input />);
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Input className="custom-class" />);
-    expect(container.firstChild).toHaveClass('custom-class');
+  it('applies custom className', () => {
+    render(<Input className="custom-input" />);
+    expect(screen.getByRole('textbox')).toHaveClass('custom-input');
   });
 
-  it('should handle placeholder text', () => {
-    render(<Input placeholder="Enter text" />);
-    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
-  });
+  it('handles different input types', () => {
+    const { rerender } = render(<Input type="text" />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
+
+    rerender(<Input type="email" data-testid="email" />);
+    expect(screen.getByTestId('email')).toHaveAttribute('type', 'email');
 
-  it('should handle different input types', () => {
-    const { container } = render(<Input type="password" />);
-    expect(container.firstChild).toHaveAttribute('type', 'password');
+    rerender(<Input type="password" data-testid="password" />);
+    expect(screen.getByTestId('password')).toHaveAttribute('type', 'password');
   });
 
-  it('should forward ref', () => {
+  it('forwards ref correctly', () => {
     const ref = { current: null };
     render(<Input ref={ref} />);
-    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
   });
 
-  it('should be disabled when disabled prop is set', () => {
+  it('is disabled when disabled prop is true', () => {
     render(<Input disabled />);
     expect(screen.getByRole('textbox')).toBeDisabled();
   });
 
-  it('should handle value prop', () => {
-    render(<Input value="test value" readOnly />);
-    expect(screen.getByRole('textbox')).toHaveValue('test value');
+  it('accepts placeholder', () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  it('handles onChange events', () => {
+    render(
+      <Input
+        onChange={(_e) => {
+          // onChange handler
+        }}
+      />
+    );
+    const input = screen.getByRole('textbox');
+    input.focus();
+    expect(input).toBeInTheDocument();
   });
 
-  it('should spread additional props', () => {
-    const { container } = render(<Input data-testid="input" />);
-    expect(container.firstChild).toHaveAttribute('data-testid', 'input');
+  it('applies default styling classes', () => {
+    render(<Input data-testid="styled-input" />);
+    const input = screen.getByTestId('styled-input');
+    expect(input).toHaveClass('flex', 'h-10', 'w-full', 'rounded-md');
   });
 });

package/src/components/__tests__/label.test.tsx

@@ -3,51 +3,45 @@ import { render, screen } from '@testing-library/react';
 import { Label } from '../label';
 
 describe('Label', () => {
-  it('should render children content', () => {
-    render(<Label>Test Label</Label>);
-    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  it('renders label with text', () => {
+    render(<Label>Name</Label>);
+    expect(screen.getByText('Name')).toBeInTheDocument();
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Label className="custom-class">Label</Label>);
-    expect(container.firstChild).toHaveClass('custom-class');
+  it('applies custom className', () => {
+    render(<Label className="custom-label">Test</Label>);
+    expect(screen.getByText('Test')).toHaveClass('custom-label');
   });
 
-  it('should render with default styles', () => {
-    const { container } = render(<Label>Label</Label>);
-    expect(container.firstChild).toHaveClass(
-      'text-sm',
-      'font-medium',
-      'leading-none'
-    );
-  });
-
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Label ref={ref}>Label</Label>);
-    expect(ref.current).not.toBeNull();
+  it('renders as label element', () => {
+    render(<Label data-testid="label">Label</Label>);
+    const label = screen.getByTestId('label');
+    expect(label.tagName).toBe('LABEL');
   });
 
-  it('should spread additional props', () => {
-    const { container } = render(<Label data-testid="label">Label</Label>);
-    expect(container.firstChild).toHaveAttribute('data-testid', 'label');
-  });
-
-  it('should render as a label element', () => {
-    render(<Label>Label</Label>);
-    expect(screen.getByText('Label').tagName).toBe('LABEL');
+  it('associates with input via htmlFor', () => {
+    render(
+      <>
+        <Label htmlFor="email">Email</Label>
+        <input id="email" type="email" />
+      </>
+    );
+    const label = screen.getByText('Email');
+    expect(label).toHaveAttribute('for', 'email');
   });
 
-  it('should support htmlFor attribute', () => {
-    render(<Label htmlFor="input-id">Label</Label>);
-    expect(screen.getByText('Label')).toHaveAttribute('for', 'input-id');
+  it('applies default styling', () => {
+    render(<Label data-testid="styled">Styled</Label>);
+    const label = screen.getByTestId('styled');
+    expect(label).toHaveClass('text-sm', 'font-medium');
   });
 
-  it('should have peer-disabled classes', () => {
-    const { container } = render(<Label>Label</Label>);
-    expect(container.firstChild).toHaveClass(
-      'peer-disabled:cursor-not-allowed',
-      'peer-disabled:opacity-70'
+  it('renders with children elements', () => {
+    render(
+      <Label>
+        <span>Required</span>
+      </Label>
     );
+    expect(screen.getByText('Required')).toBeInTheDocument();
   });
 });

package/src/components/__tests__/modal.test.tsx

@@ -1,88 +1,59 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 import { Modal } from '../modal';
 
 describe('Modal', () => {
-  const defaultProps = {
-    isOpen: true,
-    onClose: vi.fn(),
-    children: <div>Modal Content</div>,
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should render children when open', () => {
-    render(<Modal {...defaultProps} />);
-    expect(screen.getByText('Modal Content')).toBeInTheDocument();
-  });
-
-  it('should not render children when closed', () => {
-    render(<Modal {...defaultProps} isOpen={false} />);
-    expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
-  });
-
-  it('should render close button by default', () => {
-    render(<Modal {...defaultProps} />);
-    expect(screen.getByLabelText('Close modal')).toBeInTheDocument();
-  });
-
-  it('should hide close button when showClose is false', () => {
-    render(<Modal {...defaultProps} showClose={false} />);
-    expect(screen.queryByLabelText('Close modal')).not.toBeInTheDocument();
-  });
-
-  it('should call onClose when close button is clicked', () => {
-    render(<Modal {...defaultProps} />);
-    fireEvent.click(screen.getByLabelText('Close modal'));
-    expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call onClose when backdrop is clicked', () => {
-    const { container } = render(<Modal {...defaultProps} />);
-    const backdrop = container.querySelector('.bg-slate-950\\/60');
-    if (backdrop) {
-      fireEvent.click(backdrop);
-      expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
-    }
-  });
-
-  it('should apply custom maxWidth', () => {
-    const { container } = render(
-      <Modal {...defaultProps} maxWidth="max-w-2xl" />
+  it('renders modal when open', () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}}>
+        <div>Modal content</div>
+      </Modal>
     );
-    const modalContent = container.querySelector('.max-w-2xl');
-    expect(modalContent).toBeInTheDocument();
+    expect(screen.getByText('Modal content')).toBeInTheDocument();
   });
 
-  it('should apply default maxWidth of max-w-4xl', () => {
-    const { container } = render(<Modal {...defaultProps} />);
-    const modalContent = container.querySelector('.max-w-4xl');
-    expect(modalContent).toBeInTheDocument();
+  it('does not render when closed', () => {
+    render(
+      <Modal isOpen={false} onClose={() => {}}>
+        <div>Hidden content</div>
+      </Modal>
+    );
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
   });
 
-  it('should apply glass variant styles by default', () => {
-    const { container } = render(<Modal {...defaultProps} />);
-    const modalContent = container.querySelector('.bg-slate-900\\/90');
-    expect(modalContent).toBeInTheDocument();
+  it('renders with custom className', () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}}>
+        <div>Content</div>
+      </Modal>
+    );
+    expect(screen.getByText('Content')).toBeInTheDocument();
   });
 
-  it('should apply default variant styles', () => {
-    const { container } = render(<Modal {...defaultProps} variant="default" />);
-    const modalContent = container.querySelector('.bg-white');
-    expect(modalContent).toBeInTheDocument();
+  it('renders modal overlay', () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}}>
+        <div data-testid="content">Content</div>
+      </Modal>
+    );
+    expect(screen.getByTestId('content')).toBeInTheDocument();
   });
 
-  it('should have fixed positioning for backdrop', () => {
-    const { container } = render(<Modal {...defaultProps} />);
-    const wrapper = container.querySelector('.fixed.inset-0');
-    expect(wrapper).toBeInTheDocument();
+  it('renders close button by default', () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}}>
+        <div>Content</div>
+      </Modal>
+    );
+    expect(screen.getByLabelText('Close modal')).toBeInTheDocument();
   });
 
-  it('should have z-index of 100', () => {
-    const { container } = render(<Modal {...defaultProps} />);
-    const wrapper = container.querySelector('.z-\\[100\\]');
-    expect(wrapper).toBeInTheDocument();
+  it('hides close button when showClose is false', () => {
+    render(
+      <Modal isOpen={true} onClose={() => {}} showClose={false}>
+        <div>Content</div>
+      </Modal>
+    );
+    expect(screen.queryByLabelText('Close modal')).not.toBeInTheDocument();
   });
 });

package/src/components/__tests__/select.test.tsx

@@ -1,100 +1,67 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 import { Select } from '../select';
 
 describe('Select', () => {
-  const options = [
-    { value: 'option1', label: 'Option 1' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'Option 3' },
-  ];
-
-  const defaultProps = {
-    options,
-    onChange: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should render a select element', () => {
-    render(<Select {...defaultProps} />);
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('should render all options', () => {
-    render(<Select {...defaultProps} />);
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-    expect(screen.getByText('Option 2')).toBeInTheDocument();
-    expect(screen.getByText('Option 3')).toBeInTheDocument();
-  });
-
-  it('should apply custom className', () => {
-    const { container } = render(
-      <Select {...defaultProps} className="custom-class" />
+  it('renders select element', () => {
+    render(
+      <Select
+        options={[
+          { value: 'a', label: 'Option A' },
+          { value: 'b', label: 'Option B' },
+        ]}
+        data-testid="select"
+      />
     );
-    expect(container.firstChild).toHaveClass('custom-class');
-  });
-
-  it('should render placeholder when provided', () => {
-    render(<Select {...defaultProps} placeholder="Select an option" />);
-    expect(screen.getByText('Select an option')).toBeInTheDocument();
+    expect(screen.getByTestId('select')).toBeInTheDocument();
   });
 
-  it('should call onChange when option is selected', () => {
-    render(<Select {...defaultProps} />);
-    fireEvent.change(screen.getByRole('combobox'), {
-      target: { value: 'option2' },
-    });
-    expect(defaultProps.onChange).toHaveBeenCalledWith('option2');
-  });
-
-  it('should disable specific options', () => {
-    const optionsWithDisabled = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2', disabled: true },
-    ];
-    render(<Select {...defaultProps} options={optionsWithDisabled} />);
-    expect(screen.getByText('Option 2')).toBeDisabled();
-  });
-
-  it('should be disabled when disabled prop is set', () => {
-    render(<Select {...defaultProps} disabled />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
-  });
-
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Select {...defaultProps} ref={ref} />);
-    expect(ref.current).not.toBeNull();
-  });
-
-  it('should spread additional props', () => {
-    const { container } = render(
-      <Select {...defaultProps} data-testid="select" />
+  it('renders with placeholder', () => {
+    render(
+      <Select
+        options={[{ value: 'a', label: 'Option A' }]}
+        placeholder="Select option"
+        data-testid="select"
+      />
     );
-    expect(container.firstChild).toHaveAttribute('data-testid', 'select');
+    expect(screen.getByText('Select option')).toBeInTheDocument();
   });
 
-  it('should have default styling classes', () => {
-    const { container } = render(<Select {...defaultProps} />);
-    expect(container.firstChild).toHaveClass(
-      'flex',
-      'h-10',
-      'w-full',
-      'rounded-md'
+  it('renders all options', () => {
+    render(
+      <Select
+        options={[
+          { value: 'a', label: 'Option A' },
+          { value: 'b', label: 'Option B' },
+          { value: 'c', label: 'Option C' },
+        ]}
+        data-testid="select"
+      />
     );
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+    expect(screen.getByText('Option B')).toBeInTheDocument();
+    expect(screen.getByText('Option C')).toBeInTheDocument();
   });
 
-  it('should handle value prop', () => {
-    render(<Select {...defaultProps} value="option2" />);
-    expect(screen.getByRole('combobox')).toHaveValue('option2');
+  it('applies custom className', () => {
+    render(
+      <Select
+        options={[{ value: 'a', label: 'Option A' }]}
+        className="custom-select"
+        data-testid="select"
+      />
+    );
+    expect(screen.getByTestId('select')).toHaveClass('custom-select');
   });
 
-  it('should disable placeholder option', () => {
-    render(<Select {...defaultProps} placeholder="Select an option" />);
-    const placeholderOption = screen.getByText('Select an option');
-    expect(placeholderOption).toBeDisabled();
+  it('is disabled when disabled prop is true', () => {
+    render(
+      <Select
+        options={[{ value: 'a', label: 'Option A' }]}
+        disabled
+        data-testid="select"
+      />
+    );
+    expect(screen.getByTestId('select')).toBeDisabled();
   });
 });

package/src/components/__tests__/separator.test.tsx

@@ -1,72 +1,39 @@
 import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Separator } from '../separator';
 
 describe('Separator', () => {
-  it('should render a separator', () => {
-    const { container } = render(<Separator />);
-    expect(container.firstChild).toBeInTheDocument();
+  it('renders separator', () => {
+    render(<Separator data-testid="sep" />);
+    expect(screen.getByTestId('sep')).toBeInTheDocument();
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Separator className="custom-class" />);
-    expect(container.firstChild).toHaveClass('custom-class');
+  it('applies custom className', () => {
+    render(<Separator className="custom-sep" data-testid="sep" />);
+    expect(screen.getByTestId('sep')).toHaveClass('custom-sep');
   });
 
-  it('should render with horizontal orientation by default', () => {
-    const { container } = render(<Separator />);
-    expect(container.firstChild).toHaveClass('h-[1px]', 'w-full');
+  it('renders horizontal by default', () => {
+    render(<Separator data-testid="sep" />);
+    const sep = screen.getByTestId('sep');
+    expect(sep).toHaveAttribute('data-orientation', 'horizontal');
   });
 
-  it('should render with vertical orientation', () => {
-    const { container } = render(<Separator orientation="vertical" />);
-    expect(container.firstChild).toHaveClass('h-full', 'w-[1px]');
+  it('renders vertical orientation', () => {
+    render(<Separator orientation="vertical" data-testid="sep" />);
+    const sep = screen.getByTestId('sep');
+    expect(sep).toHaveAttribute('data-orientation', 'vertical');
   });
 
-  it('should have role="none" when decorative is true', () => {
-    const { container } = render(<Separator decorative />);
-    expect(container.firstChild).toHaveAttribute('role', 'none');
+  it('applies decorative attribute', () => {
+    render(<Separator decorative data-testid="sep" />);
+    const sep = screen.getByTestId('sep');
+    expect(sep).toHaveAttribute('role', 'none');
   });
 
-  it('should have role="separator" when decorative is false', () => {
-    const { container } = render(<Separator decorative={false} />);
-    expect(container.firstChild).toHaveAttribute('role', 'separator');
-  });
-
-  it('should have aria-orientation attribute', () => {
-    const { container } = render(<Separator orientation="horizontal" />);
-    expect(container.firstChild).toHaveAttribute(
-      'aria-orientation',
-      'horizontal'
-    );
-  });
-
-  it('should have aria-orientation vertical for vertical separator', () => {
-    const { container } = render(<Separator orientation="vertical" />);
-    expect(container.firstChild).toHaveAttribute(
-      'aria-orientation',
-      'vertical'
-    );
-  });
-
-  it('should have shrink-0 class', () => {
-    const { container } = render(<Separator />);
-    expect(container.firstChild).toHaveClass('shrink-0');
-  });
-
-  it('should have bg-border class', () => {
-    const { container } = render(<Separator />);
-    expect(container.firstChild).toHaveClass('bg-border');
-  });
-
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Separator ref={ref} />);
-    expect(ref.current).not.toBeNull();
-  });
-
-  it('should spread additional props', () => {
-    const { container } = render(<Separator data-testid="separator" />);
-    expect(container.firstChild).toHaveAttribute('data-testid', 'separator');
+  it('has default styling', () => {
+    render(<Separator data-testid="sep" />);
+    const sep = screen.getByTestId('sep');
+    expect(sep).toHaveClass('shrink-0', 'bg-border');
   });
 });