91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
||
import { render, screen, waitFor } from '@testing-library/react';
|
||
import userEvent from '@testing-library/user-event';
|
||
import { http, HttpResponse } from 'msw';
|
||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||
import { MemoryRouter } from 'react-router-dom';
|
||
import { server } from '@/test/server';
|
||
import { SearchBar } from '@/widgets/search-bar';
|
||
|
||
const API = '/api/v1';
|
||
|
||
function renderSearchBar() {
|
||
const queryClient = new QueryClient({
|
||
defaultOptions: { queries: { retry: false } },
|
||
});
|
||
|
||
return render(
|
||
<QueryClientProvider client={queryClient}>
|
||
<MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||
<SearchBar />
|
||
</MemoryRouter>
|
||
</QueryClientProvider>,
|
||
);
|
||
}
|
||
|
||
describe('SearchBar', () => {
|
||
it('renders search input', () => {
|
||
renderSearchBar();
|
||
|
||
expect(screen.getByPlaceholderText('Поиск акций и облигаций...')).toBeInTheDocument();
|
||
});
|
||
|
||
it('shows dropdown on focus', async () => {
|
||
renderSearchBar();
|
||
const input = screen.getByPlaceholderText('Поиск акций и облигаций...');
|
||
|
||
await userEvent.type(input, 'sber');
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Сбер')).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
it('shows loading state while fetching', async () => {
|
||
server.use(http.get(`${API}/securities/search`, () => new Promise(() => {})));
|
||
renderSearchBar();
|
||
const input = screen.getByPlaceholderText('Поиск акций и облигаций...');
|
||
|
||
await userEvent.type(input, 'sber');
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Загрузка...')).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
it('shows no results message', async () => {
|
||
server.use(
|
||
http.get(`${API}/securities/search`, () =>
|
||
HttpResponse.json({
|
||
data: { data: [], meta: { fromCache: false, cachedAt: null } },
|
||
}),
|
||
),
|
||
);
|
||
renderSearchBar();
|
||
const input = screen.getByPlaceholderText('Поиск акций и облигаций...');
|
||
|
||
await userEvent.type(input, 'zzzzz');
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Ничего не найдено')).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
it('hides dropdown when clicking outside', async () => {
|
||
renderSearchBar();
|
||
const input = screen.getByPlaceholderText('Поиск акций и облигаций...');
|
||
|
||
await userEvent.type(input, 'sber');
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Сбер')).toBeInTheDocument();
|
||
});
|
||
|
||
await userEvent.click(document.body);
|
||
|
||
await waitFor(() => {
|
||
expect(screen.queryByText('Сбер')).not.toBeInTheDocument();
|
||
});
|
||
});
|
||
});
|