0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make Submit button inactive when required fields aren't filled (#2315)

Browse source 
* fixing create schema page validation issue

* fixing schema create form schemaType select issue

* adding test cases for schema creation
This commit is contained in:
Robert Azizbekyan 2022-07-27 16:20:40 +04:00 • committed by GitHub
parent bffe316063
commit d92fe63e8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
kafka-ui-react-app/src/components/Schemas/New/New.tsx
View file

@ -105,11 +105,11 @@ const New: React.FC = () => {
control={control}
rules={{ required: 'Schema Type is required.' }}
name="schemaType"
defaultValue={SchemaTypeOptions[0].value as SchemaType}
render={({ field: { name, onChange, value } }) => (
<Select
selectSize="M"
name={name}
defaultValue={SchemaTypeOptions[0].value}
value={value}
onChange={onChange}
minWidth="50%"

27
kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
View file

@ -2,9 +2,12 @@ import React from 'react';
import New from 'components/Schemas/New/New';
import { render, WithRoute } from 'lib/testHelpers';
import { clusterSchemaNewPath } from 'lib/paths';
import { screen } from '@testing-library/dom';
import { act, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
const clusterName = 'local';
const subjectValue = 'subject';
const schemaValue = 'schema';
describe('New Component', () => {
beforeEach(() => {
@ -21,4 +24,26 @@ describe('New Component', () => {
it('renders component', () => {
expect(screen.getByText('Create new schema')).toBeInTheDocument();
});
it('submit button will be disabled while form fields are not filled', () => {
const submitBtn = screen.getByRole('button', { name: /submit/i });
expect(submitBtn).toBeDisabled();
});
it('submit button will be enabled when form fields are filled', async () => {
const subject = screen.getByPlaceholderText('Schema Name');
const schema = screen.getAllByRole('textbox')[1];
const schemaTypeSelect = screen.getByRole('listbox');
await act(() => {
userEvent.type(subject, subjectValue);
});
await act(() => {
userEvent.type(schema, schemaValue);
});
await act(() => {
userEvent.selectOptions(schemaTypeSelect, ['AVRO']);
});
const submitBtn = screen.getByRole('button', { name: /Submit/i });
expect(submitBtn).toBeEnabled();
});
});