diff --git a/src/shared/ui/SearchBar/SearchBar.svelte.test.ts b/src/shared/ui/SearchBar/SearchBar.svelte.test.ts new file mode 100644 index 0000000..89913e3 --- /dev/null +++ b/src/shared/ui/SearchBar/SearchBar.svelte.test.ts @@ -0,0 +1,45 @@ +import { + fireEvent, + render, + screen, +} from '@testing-library/svelte'; +import SearchBar from './SearchBar.svelte'; + +describe('SearchBar', () => { + it('renders an input element', () => { + render(SearchBar); + expect(screen.getByRole('textbox')).toBeInTheDocument(); + }); + + it('renders placeholder text', () => { + render(SearchBar, { placeholder: 'Search…' }); + expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument(); + }); + + it('renders with initial value', () => { + render(SearchBar, { value: 'Roboto' }); + expect(screen.getByDisplayValue('Roboto')).toBeInTheDocument(); + }); + + it('renders search icon', () => { + const { container } = render(SearchBar); + expect(container.querySelector('svg')).toBeInTheDocument(); + }); + + it('updates value on user input', async () => { + render(SearchBar); + const input = screen.getByRole('textbox') as HTMLInputElement; + await fireEvent.input(input, { target: { value: 'Inter' } }); + expect(input.value).toBe('Inter'); + }); + + it('is not disabled by default', () => { + render(SearchBar); + expect(screen.getByRole('textbox')).not.toBeDisabled(); + }); + + it('is disabled when disabled prop is true', () => { + render(SearchBar, { disabled: true }); + expect(screen.getByRole('textbox')).toBeDisabled(); + }); +});