127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
/** @jsxImportSource solid-js */
|
|
import { cleanup, findByText, render, screen } from '@solidjs/testing-library';
|
|
import '@testing-library/jest-dom';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { For } from 'solid-js';
|
|
import {
|
|
mockFetchDataStream,
|
|
mockFetchDataStreamWithGenerator,
|
|
mockFetchError,
|
|
} from '../tests/utils/mock-fetch';
|
|
import { useChat } from './use-chat';
|
|
|
|
const TestComponent = () => {
|
|
const { messages, append, error, data, isLoading } = useChat();
|
|
|
|
return (
|
|
<div>
|
|
<div data-testid="loading">{isLoading().toString()}</div>
|
|
<div data-testid="error">{error()?.toString()}</div>
|
|
<div data-testid="data">{JSON.stringify(data())}</div>
|
|
|
|
<For each={messages()}>
|
|
{(m, idx) => (
|
|
<div data-testid={`message-${idx()}`} class="whitespace-pre-wrap">
|
|
{m.role === 'user' ? 'User: ' : 'AI: '}
|
|
{m.content}
|
|
</div>
|
|
)}
|
|
</For>
|
|
|
|
<button
|
|
data-testid="button"
|
|
onClick={() => {
|
|
append({ role: 'user', content: 'hi' });
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
beforeEach(() => {
|
|
render(() => <TestComponent />);
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.restoreAllMocks();
|
|
cleanup();
|
|
});
|
|
|
|
it('should return messages', async () => {
|
|
mockFetchDataStream({
|
|
url: 'https://example.com/api/chat',
|
|
chunks: ['0:"Hello"\n', '0:","\n', '0:" world"\n', '0:"."\n'],
|
|
});
|
|
|
|
await userEvent.click(screen.getByTestId('button'));
|
|
|
|
await screen.findByTestId('message-0');
|
|
expect(screen.getByTestId('message-0')).toHaveTextContent('User: hi');
|
|
|
|
await screen.findByTestId('message-1');
|
|
expect(screen.getByTestId('message-1')).toHaveTextContent(
|
|
'AI: Hello, world.',
|
|
);
|
|
});
|
|
|
|
it('should return messages and data', async () => {
|
|
mockFetchDataStream({
|
|
url: 'https://example.com/api/chat',
|
|
chunks: ['2:[{"t1":"v1"}]\n', '0:"Hello"\n'],
|
|
});
|
|
|
|
await userEvent.click(screen.getByTestId('button'));
|
|
|
|
await screen.findByTestId('data');
|
|
expect(screen.getByTestId('data')).toHaveTextContent('[{"t1":"v1"}]');
|
|
|
|
await screen.findByTestId('message-1');
|
|
expect(screen.getByTestId('message-1')).toHaveTextContent('AI: Hello');
|
|
});
|
|
|
|
it('should return error', async () => {
|
|
mockFetchError({ statusCode: 404, errorMessage: 'Not found' });
|
|
|
|
await userEvent.click(screen.getByTestId('button'));
|
|
|
|
await screen.findByTestId('error');
|
|
expect(screen.getByTestId('error')).toHaveTextContent('Error: Not found');
|
|
});
|
|
|
|
describe('loading state', () => {
|
|
it('should show loading state', async () => {
|
|
let finishGeneration: ((value?: unknown) => void) | undefined;
|
|
const finishGenerationPromise = new Promise(resolve => {
|
|
finishGeneration = resolve;
|
|
});
|
|
|
|
mockFetchDataStreamWithGenerator({
|
|
url: 'https://example.com/api/chat',
|
|
chunkGenerator: (async function* generate() {
|
|
const encoder = new TextEncoder();
|
|
yield encoder.encode('0:"Hello"\n');
|
|
await finishGenerationPromise;
|
|
})(),
|
|
});
|
|
|
|
await userEvent.click(screen.getByTestId('button'));
|
|
|
|
await screen.findByTestId('loading');
|
|
expect(screen.getByTestId('loading')).toHaveTextContent('true');
|
|
|
|
finishGeneration?.();
|
|
|
|
await findByText(await screen.findByTestId('loading'), 'false');
|
|
expect(screen.getByTestId('loading')).toHaveTextContent('false');
|
|
});
|
|
|
|
it('should reset loading state on error', async () => {
|
|
mockFetchError({ statusCode: 404, errorMessage: 'Not found' });
|
|
|
|
await userEvent.click(screen.getByTestId('button'));
|
|
|
|
await screen.findByTestId('loading');
|
|
expect(screen.getByTestId('loading')).toHaveTextContent('false');
|
|
});
|
|
});
|