{"size": 2234, "ext": "js", "max_stars_repo_path": "packages/forms/src/rhf/fields/Select/Select.test.js", "max_stars_repo_name": "abdelillah-tech/ui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/forms/src/rhf/fields/Select/Select.test.js", "max_issues_repo_name": "abdelillah-tech/ui", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/forms/src/rhf/fields/Select/Select.test.js", "max_forks_repo_name": "abdelillah-tech/ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.5494505495, "max_line_length": 85, "alphanum_fraction": 0.5841539839}
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { useForm, FormProvider } from 'react-hook-form';
import Select from './RHFSelect.component';

/* eslint-disable-next-line react/prop-types */
function FormWrapper({ children, onSubmit }) {
	const rhf = useForm({ mode: 'onChange' });
	return (
		<form onSubmit={rhf.handleSubmit(onSubmit)}>
			<FormProvider {...rhf}>
				{children}
				<button type="submit">Submit</button>
			</FormProvider>
		</form>
	);
}

describe('Input RHF widget', () => {
	it('should integrate with RHF', async () => {
		// given
		const onSubmit = jest.fn();
		// when
		const wrapper = mount(
			<FormWrapper onSubmit={onSubmit}>
				<Select
					id="name"
					name="name"
					label="name"
					options={[
						{ value: 'blue', name: 'Blue color' },
						{ value: 'red', name: 'Red color' },
					]}
					required
					rules={{
						required: 'This should not be empty',
					}}
				/>{' '}
			</FormWrapper>,
		);
		// then
		await act(async () => {
			wrapper.find('form').simulate('submit');
		});
		expect(onSubmit.mock.calls[0][0]).toEqual({ name: 'blue' });

		await act(async () => {
			const select = wrapper.find('select').at(0);
			select.getDOMNode().value = 'red';
			select.getDOMNode().dispatchEvent(new Event('change'));
			wrapper.find('form').simulate('submit');
		});

		expect(onSubmit.mock.calls[1][0]).toEqual({ name: 'red' });
	});

	it('should render RHF error', async () => {
		// given
		const onSubmit = jest.fn();
		// when
		const wrapper = mount(
			<FormWrapper onSubmit={onSubmit}>
				<Select
					id="name"
					name="name"
					label="name"
					options={[
						{ value: 'blue', name: 'Blue color' },
						{ value: 'red', name: 'Red color' },
					]}
					required
					rules={{
						required: 'This should not be empty',
					}}
				/>
			</FormWrapper>,
		);
		// then
		expect(wrapper.find('p[id="name-error"]').text()).toBe('');

		await act(async () => {
			const select = wrapper.find('select').at(0);
			select.getDOMNode().value = '';
			select.getDOMNode().dispatchEvent(new Event('change'));
		});

		expect(wrapper.find('p[id="name-error"]').text()).toBe('This should not be empty');
	});
});
