670282989b
- apps/web: test updates (Vitest/setup), playbackAnalyticsService, TrackGrid, serviceErrorHandler - veza-common: logging, metrics, traits, validation, random - veza-stream-server: audio pipeline, codecs, cache, monitoring, routes - apps/web/dist_verification: refresh build assets (content-hashed filenames) Co-authored-by: Cursor <cursoragent@cursor.com>
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Input, SearchInput } from './input';
|
|
import { Search } from 'lucide-react';
|
|
|
|
describe('Input Component', () => {
|
|
it('renders with default props', () => {
|
|
render(<Input placeholder="Enter text" />);
|
|
|
|
const input = screen.getByPlaceholderText('Enter text');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input).toHaveClass('bg-background');
|
|
});
|
|
|
|
it('renders with label', () => {
|
|
render(<Input label="Username" id="username" />);
|
|
|
|
const label = screen.getByText('Username');
|
|
expect(label).toBeInTheDocument();
|
|
|
|
const input = screen.getByRole('textbox');
|
|
expect(input).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders with icon', () => {
|
|
const icon = <Search className="w-4 h-4" />;
|
|
render(<Input icon={icon} placeholder="Search" />);
|
|
|
|
const input = screen.getByPlaceholderText('Search');
|
|
expect(input).toBeInTheDocument();
|
|
expect(input).toHaveClass('pl-10');
|
|
});
|
|
|
|
it('handles onChange event', () => {
|
|
const handleChange = vi.fn();
|
|
render(<Input onChange={handleChange} />);
|
|
|
|
const input = screen.getByRole('textbox');
|
|
fireEvent.change(input, { target: { value: 'test' } });
|
|
|
|
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
expect(input).toHaveValue('test');
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Input className="custom-class" />);
|
|
|
|
const input = screen.getByRole('textbox');
|
|
expect(input).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('handles disabled state', () => {
|
|
render(<Input disabled />);
|
|
|
|
const input = screen.getByRole('textbox');
|
|
expect(input).toBeDisabled();
|
|
});
|
|
|
|
it('handles different input types', () => {
|
|
const { rerender } = render(<Input type="email" />);
|
|
let input = screen.getByRole('textbox');
|
|
expect(input).toHaveAttribute('type', 'email');
|
|
|
|
rerender(<Input type="password" />);
|
|
input = screen.getByDisplayValue('');
|
|
expect(input).toHaveAttribute('type', 'password');
|
|
});
|
|
});
|
|
|
|
describe('SearchInput Component', () => {
|
|
it('renders search input', () => {
|
|
render(<SearchInput placeholder="Search platform..." />);
|
|
|
|
const input = screen.getByPlaceholderText('Search platform...');
|
|
expect(input).toBeInTheDocument();
|
|
// SearchInput wraps Input with a search icon
|
|
expect(input).toHaveClass('rounded-xl');
|
|
});
|
|
|
|
it('handles onChange event', () => {
|
|
const handleChange = vi.fn();
|
|
render(<SearchInput onChange={handleChange} />);
|
|
|
|
const input = screen.getByRole('textbox');
|
|
fireEvent.change(input, { target: { value: 'test query' } });
|
|
|
|
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
expect(input).toHaveValue('test query');
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<SearchInput className="custom-search" />);
|
|
|
|
const input = screen.getByRole('textbox');
|
|
expect(input).toHaveClass('custom-search');
|
|
});
|
|
});
|