Space sensitive syntax for Create Connector #1217

* added trim to json config

* refactored new tests

* refactored edit tests

* fix new test act warning

* first working tests

* fixed textarea props

* resolved discussions

Co-authored-by: Ekaterina Petrova <epetrova@provectus.com>
Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx

@@ -88,7 +88,7 @@ const Edit: React.FC<EditProps> = ({
         clusterName,
         connectName,
         connectorName,
-        JSON.parse(values.config)
+        JSON.parse(values.config.trim())
       );
       if (connector) {
         history.push(
@@ -116,7 +116,7 @@ const Edit: React.FC<EditProps> = ({
           accidentally breaking your connector config!
         </ConnectEditWarningMessageStyled>
       )}
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} aria-label="Edit connect form">
         <div>
           <Controller
             control={control}

kafka-ui-react-app/src/components/Connect/Edit/__tests__/Edit.spec.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { create } from 'react-test-renderer';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { containerRendersView, TestRouterWrapper } from 'lib/testHelpers';
+import { containerRendersView, render } from 'lib/testHelpers';
 import {
   clusterConnectConnectorConfigPath,
   clusterConnectConnectorEditPath,
 } from 'lib/paths';
 import EditContainer from 'components/Connect/Edit/EditContainer';
 import Edit, { EditProps } from 'components/Connect/Edit/Edit';
 import { connector } from 'redux/reducers/connect/__test__/fixtures';
-import { ThemeProvider } from 'styled-components';
-import theme from 'theme/theme';
+import { Route } from 'react-router';
+import { waitFor } from '@testing-library/dom';
+import { fireEvent, screen } from '@testing-library/react';
 
 jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
 
@@ -38,43 +36,29 @@ describe('Edit', () => {
     const connectName = 'my-connect';
     const connectorName = 'my-connector';
 
-    const setupWrapper = (props: Partial<EditProps> = {}) => (
-      <ThemeProvider theme={theme}>
-        <TestRouterWrapper
-          pathname={pathname}
-          urlParams={{ clusterName, connectName, connectorName }}
-        >
+    const renderComponent = (props: Partial<EditProps> = {}) =>
+      render(
+        <Route path={pathname}>
           <Edit
             fetchConfig={jest.fn()}
             isConfigFetching={false}
             config={connector.config}
             updateConfig={jest.fn()}
             {...props}
           />
-        </TestRouterWrapper>
-      </ThemeProvider>
-    );
-
-    it('matches snapshot', () => {
-      const wrapper = create(setupWrapper());
-      expect(wrapper.toJSON()).toMatchSnapshot();
-    });
-
-    it('matches snapshot when fetching config', () => {
-      const wrapper = create(setupWrapper({ isConfigFetching: true }));
-      expect(wrapper.toJSON()).toMatchSnapshot();
-    });
-
-    it('matches snapshot when config has credentials', () => {
-      const wrapper = create(
-        setupWrapper({ config: { ...connector.config, password: '******' } })
+        </Route>,
+        {
+          pathname: clusterConnectConnectorEditPath(
+            clusterName,
+            connectName,
+            connectorName
+          ),
+        }
       );
-      expect(wrapper.toJSON()).toMatchSnapshot();
-    });
 
     it('fetches config on mount', () => {
       const fetchConfig = jest.fn();
-      mount(setupWrapper({ fetchConfig }));
+      renderComponent({ fetchConfig });
       expect(fetchConfig).toHaveBeenCalledTimes(1);
       expect(fetchConfig).toHaveBeenCalledWith(
         clusterName,
@@ -85,10 +69,8 @@ describe('Edit', () => {
 
     it('calls updateConfig on form submit', async () => {
       const updateConfig = jest.fn();
-      const wrapper = mount(setupWrapper({ updateConfig }));
-      await act(async () => {
-        wrapper.find('form').simulate('submit');
-      });
+      renderComponent({ updateConfig });
+      await waitFor(() => fireEvent.submit(screen.getByRole('form')));
       expect(updateConfig).toHaveBeenCalledTimes(1);
       expect(updateConfig).toHaveBeenCalledWith(
         clusterName,
@@ -100,10 +82,8 @@ describe('Edit', () => {
 
     it('redirects to connector config view on successful submit', async () => {
       const updateConfig = jest.fn().mockResolvedValueOnce(connector);
-      const wrapper = mount(setupWrapper({ updateConfig }));
-      await act(async () => {
-        wrapper.find('form').simulate('submit');
-      });
+      renderComponent({ updateConfig });
+      await waitFor(() => fireEvent.submit(screen.getByRole('form')));
       expect(mockHistoryPush).toHaveBeenCalledTimes(1);
       expect(mockHistoryPush).toHaveBeenCalledWith(
         clusterConnectConnectorConfigPath(
@@ -116,10 +96,8 @@ describe('Edit', () => {
 
     it('does not redirect to connector config view on unsuccessful submit', async () => {
       const updateConfig = jest.fn().mockResolvedValueOnce(undefined);
-      const wrapper = mount(setupWrapper({ updateConfig }));
-      await act(async () => {
-        wrapper.find('form').simulate('submit');
-      });
+      renderComponent({ updateConfig });
+      await waitFor(() => fireEvent.submit(screen.getByRole('form')));
       expect(mockHistoryPush).not.toHaveBeenCalled();
     });
   });

kafka-ui-react-app/src/components/Connect/New/New.styled.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const NewConnectFormStyled = styled.form`
+  padding: 0 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  & > button:last-child {
+    align-self: flex-start;
+  }
+`;