konnosDashboard
HTTPParameters.test.tsx55 lines · main
1import { render, screen } from '@testing-library/react'
2import userEvent from '@testing-library/user-event'
3import { useForm } from 'react-hook-form'
4import { Form } from 'ui'
5import { describe, expect, it } from 'vitest'
6
7import { type WebhookFormValues } from './EditHookPanel.constants'
8import { HTTPParameters } from './HTTPParameters'
9
10const HTTPParametersHarness = () => {
11 const form = useForm<WebhookFormValues>({
12 defaultValues: {
13 name: 'test-hook',
14 table_id: 'public.messages',
15 http_method: 'POST',
16 timeout_ms: 1000,
17 events: ['INSERT'],
18 function_type: 'http_request',
19 http_url: 'https://hooks.example.com/webhook',
20 httpHeaders: [],
21 httpParameters: [{ id: 'param-1', name: 'tenant', value: 'prod' }],
22 },
23 })
24
25 return (
26 <Form {...form}>
27 <HTTPParameters form={form} />
28 </Form>
29 )
30}
31
32describe('HTTPParameters', () => {
33 it('appends a new parameter row', async () => {
34 const user = userEvent.setup()
35
36 render(<HTTPParametersHarness />)
37
38 await user.click(screen.getByRole('button', { name: 'Add a new parameter' }))
39
40 expect(screen.getAllByPlaceholderText('Parameter name')).toHaveLength(2)
41 expect(screen.getAllByPlaceholderText('Parameter value')).toHaveLength(2)
42 })
43
44 it('removes an existing parameter row', async () => {
45 const user = userEvent.setup()
46
47 render(<HTTPParametersHarness />)
48
49 expect(screen.getByDisplayValue('tenant')).toBeInTheDocument()
50
51 await user.click(screen.getByRole('button', { name: 'Remove parameter' }))
52
53 expect(screen.queryByDisplayValue('tenant')).not.toBeInTheDocument()
54 })
55})