diff --git a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx index df179ca219..10c3d9fcd1 100644 --- a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx +++ b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx @@ -14,57 +14,38 @@ * limitations under the License. */ -import { cleanup, fireEvent, render } from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; -import { act } from 'react-dom/test-utils'; -import RegisterComponentForm, { Props } from './RegisterComponentForm'; +import { RegisterComponentForm } from './RegisterComponentForm'; -const setup = (props?: Partial) => { - return { - rendered: render( - , - ), - }; -}; describe('RegisterComponentForm', () => { - afterEach(() => cleanup()); - it('should initially render a disabled button', async () => { - const { rendered } = setup(); + render(); + expect( - await rendered.findByText( - 'Enter the full path to the component.yaml file in GitHub, GitLab, Bitbucket or Azure to start tracking your component.', - ), + await screen.findByText(/Enter the full path to the catalog-info.yaml/), ).toBeInTheDocument(); - const submit = (await rendered.getByTestId( - 'registerComponentFormSubmit', - )) as HTMLButtonElement; - expect(submit.disabled).toBeTruthy(); + expect(screen.getByText('Submit').closest('button')).toBeDisabled(); }); - it('should enable a submit form when data when component url is set ', async () => { - const { rendered } = setup(); - const input = (await rendered.getByRole('textbox')) as HTMLInputElement; + it('should enable a submit button when the target url is set ', async () => { + render(); + await act(async () => { - // react-hook-form uses `input` event for changes - fireEvent.input(input, { - target: { value: 'https://example.com/blob/master/component.yaml' }, - }); + await userEvent.type( + await screen.findByLabelText('Entity file URL', { exact: false }), + 'https://example.com/blob/master/component.yaml', + ); }); - const submit = (await rendered.getByTestId( - 'registerComponentFormSubmit', - )) as HTMLButtonElement; - expect(submit.disabled).toBeFalsy(); + expect(screen.getByText('Submit').closest('button')).not.toBeDisabled(); + }); + + it('should show spinner while submitting', async () => { + render(); + + expect(screen.getByTestId('loading-progress')).toBeInTheDocument(); }); }); - -it('should show spinner while submitting', async () => { - const { rendered } = setup({ submitting: true }); - expect(rendered.getByTestId('loading-progress')).toBeInTheDocument(); -}); diff --git a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx index 294f4db801..bc433e1c36 100644 --- a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx +++ b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx @@ -19,15 +19,15 @@ import { Button, FormControl, FormHelperText, - LinearProgress, - TextField, - Select, - MenuItem, InputLabel, + LinearProgress, + MenuItem, + Select, + TextField, } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import React, { FC } from 'react'; -import { useForm, Controller } from 'react-hook-form'; +import React from 'react'; +import { Controller, useForm } from 'react-hook-form'; import { ComponentIdValidators } from '../../util/validate'; const useStyles = makeStyles(theme => ({ @@ -39,14 +39,17 @@ const useStyles = makeStyles(theme => ({ submit: { marginTop: theme.spacing(1), }, + select: { + minWidth: 120, + }, })); export type Props = { onSubmit: (formData: Record) => Promise; - submitting: boolean; + submitting?: boolean; }; -const RegisterComponentForm: FC = ({ onSubmit, submitting }) => { +export const RegisterComponentForm = ({ onSubmit, submitting }: Props) => { const { control, register, handleSubmit, errors, formState } = useForm({ mode: 'onChange', }); @@ -67,14 +70,14 @@ const RegisterComponentForm: FC = ({ onSubmit, submitting }) => { = ({ onSubmit, submitting }) => { )} - - SCM Detection + + Host type = ({ onSubmit, submitting }) => { />