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