45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
||
import { test, expect, vi } from 'vitest';
|
||
import SearchResults from '../../src/components/SearchResults';
|
||
|
||
test('renders result count, titles, and highlighted snippets', () => {
|
||
render(
|
||
<SearchResults
|
||
query="检索"
|
||
results={[
|
||
{
|
||
key: '产品文档/架构设计.md',
|
||
title: '架构设计.md',
|
||
path: '产品文档',
|
||
snippet: '检索：Meilisearch，支持 <em>中文全文检索</em>。',
|
||
},
|
||
]}
|
||
onJumpToResult={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
expect(screen.getByTestId('search-results-count')).toHaveTextContent('1 条与「检索」相关的结果');
|
||
expect(screen.getByText('架构设计.md')).toBeInTheDocument();
|
||
expect(document.querySelector('em')).toHaveTextContent('中文全文检索');
|
||
});
|
||
|
||
test('clicking a result calls onJumpToResult with its key', () => {
|
||
const onJumpToResult = vi.fn();
|
||
render(
|
||
<SearchResults
|
||
query="检索"
|
||
results={[{ key: '产品文档/架构设计.md', title: '架构设计.md', path: '产品文档', snippet: '...' }]}
|
||
onJumpToResult={onJumpToResult}
|
||
/>
|
||
);
|
||
|
||
fireEvent.click(screen.getByTestId('search-result-产品文档/架构设计.md'));
|
||
|
||
expect(onJumpToResult).toHaveBeenCalledWith('产品文档/架构设计.md');
|
||
});
|
||
|
||
test('shows an empty state when there are no results', () => {
|
||
render(<SearchResults query="xyz" results={[]} onJumpToResult={vi.fn()} />);
|
||
expect(screen.getByTestId('search-no-results')).toBeInTheDocument();
|
||
});
|