From d92fe63e8aaa146c2b6279d60898544bc1e6ed39 Mon Sep 17 00:00:00 2001
From: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
Date: Wed, 27 Jul 2022 16:20:40 +0400
Subject: [PATCH] Make Submit button inactive when required fields aren't
 filled (#2315)

* fixing create schema page validation issue

* fixing schema create form schemaType select issue

* adding test cases for schema creation
---
 .../src/components/Schemas/New/New.tsx        |  2 +-
 .../Schemas/New/__test__/New.spec.tsx         | 27 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Schemas/New/New.tsx b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
index c3d9ba7003..38bef9bc9b 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
@@ -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%"
diff --git a/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx b/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
index c4bcf77abc..01b9b1cd8b 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx
@@ -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();
+  });
 });