CreateFunctionConfigParamsSection.test.tsx50 lines · main

1	import { render, screen } from '@testing-library/react'
2	import userEvent from '@testing-library/user-event'
3	import { useForm } from 'react-hook-form'
4	import { Form } from 'ui'
5	import { describe, expect, it } from 'vitest'
6
7	import { CreateFunctionConfigParamsSection } from './CreateFunctionConfigParamsSection'
8
9	type ConfigParamsFormValues = {
10	config_params: Array<{ name: string; value: string }>
11	}
12
13	const CreateFunctionConfigParamsHarness = () => {
14	const form = useForm<ConfigParamsFormValues>({
15	defaultValues: {
16	config_params: [{ name: 'search_path', value: 'public' }],
17	},
18	})
19
20	return (
21	<Form {...form}>
22	<CreateFunctionConfigParamsSection />
23	</Form>
24	)
25	}
26
27	describe('CreateFunctionConfigParamsSection', () => {
28	it('appends a new config parameter row with name and value fields', async () => {
29	const user = userEvent.setup()
30
31	render(<CreateFunctionConfigParamsHarness />)
32
33	await user.click(screen.getByRole('button', { name: 'Add a new config' }))
34
35	expect(screen.getAllByPlaceholderText('parameter_name')).toHaveLength(2)
36	expect(screen.getAllByPlaceholderText('parameter_value')).toHaveLength(2)
37	})
38
39	it('removes an existing config parameter row', async () => {
40	const user = userEvent.setup()
41
42	render(<CreateFunctionConfigParamsHarness />)
43
44	expect(screen.getByDisplayValue('search_path')).toBeInTheDocument()
45
46	await user.click(screen.getByRole('button', { name: 'Remove configuration parameter' }))
47
48	expect(screen.queryByDisplayValue('search_path')).not.toBeInTheDocument()
49	})
50	})