| 1 |
import { render, screen } from '@testing-library/react'; |
| 2 |
import userEvent from '@testing-library/user-event'; |
| 3 |
import { ChatInput } from '../ChatInput'; |
| 4 |
|
| 5 |
jest.mock('@agent/state/global', () => ({ |
| 6 |
useGlobalStore: () => ({ isMobile: false }), |
| 7 |
})); |
| 8 |
jest.mock('@agent/state/workflows', () => ({ |
| 9 |
useWorkflowStore: () => ({ |
| 10 |
getWorkflowsByFeature: () => [], |
| 11 |
block: null, |
| 12 |
}), |
| 13 |
})); |
| 14 |
jest.mock('@agent/components/ChatTools', () => ({ |
| 15 |
ChatTools: () => null, |
| 16 |
__esModule: true, |
| 17 |
})); |
| 18 |
|
| 19 |
beforeAll(() => { |
| 20 |
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { |
| 21 |
configurable: true, |
| 22 |
get() { |
| 23 |
if (this.id === 'extendify-agent-chat') return 600; |
| 24 |
return 100; |
| 25 |
}, |
| 26 |
}); |
| 27 |
}); |
| 28 |
|
| 29 |
describe('ChatInput — input limit', () => { |
| 30 |
const setup = (props = {}) => { |
| 31 |
const handleSubmit = jest.fn(); |
| 32 |
render( |
| 33 |
<div id="extendify-agent-chat"> |
| 34 |
<ChatInput disabled={false} handleSubmit={handleSubmit} {...props} /> |
| 35 |
</div>, |
| 36 |
); |
| 37 |
const textarea = screen.getByRole('textbox'); |
| 38 |
const sendBtn = screen.getByRole('button', { name: /send message/i }); |
| 39 |
const user = userEvent.setup(); |
| 40 |
return { textarea, sendBtn, handleSubmit, user }; |
| 41 |
}; |
| 42 |
|
| 43 |
test('disables sending and shows a warning when exceeding 1500 chars', async () => { |
| 44 |
const { textarea, sendBtn, handleSubmit, user } = setup(); |
| 45 |
|
| 46 |
const longText = 'x'.repeat(1501); |
| 47 |
await user.type(textarea, longText); |
| 48 |
|
| 49 |
expect(screen.getByText(/message too long/i)).toBeInTheDocument(); |
| 50 |
expect(sendBtn).toBeDisabled(); |
| 51 |
|
| 52 |
await user.type(textarea, '{enter}'); |
| 53 |
expect(handleSubmit).not.toHaveBeenCalled(); |
| 54 |
}); |
| 55 |
|
| 56 |
test('sends normally when below the limit', async () => { |
| 57 |
const { textarea, sendBtn, handleSubmit, user } = setup(); |
| 58 |
|
| 59 |
await user.type(textarea, 'hello world'); |
| 60 |
expect(sendBtn).toBeEnabled(); |
| 61 |
|
| 62 |
await user.click(sendBtn); |
| 63 |
expect(handleSubmit).toHaveBeenCalledWith('hello world'); |
| 64 |
}); |
| 65 |
|
| 66 |
test('pressing Enter sends when within the limit', async () => { |
| 67 |
const { textarea, handleSubmit, user } = setup(); |
| 68 |
|
| 69 |
await user.type(textarea, 'short message{enter}'); |
| 70 |
expect(handleSubmit).toHaveBeenCalledWith('short message'); |
| 71 |
}); |
| 72 |
}); |
| 73 |
|
