replacing enzyme with react testing library for topics overview (#1475)

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
-import Overview from 'components/Topics/Topic/Details/Overview/Overview';
+import Overview, {
+  Props as OverviewProps,
+} from 'components/Topics/Topic/Details/Overview/Overview';
 import theme from 'theme/theme';
 
 describe('Overview', () => {
@@ -25,66 +26,70 @@ describe('Overview', () => {
     },
   ];
 
-  const renderComponent = ({
+  const setupComponent = (
-    underReplicatedPartitions = 1,
+    props: OverviewProps,
-    inSyncReplicas = 1,
+    underReplicatedPartitions?: number,
-    replicas = 1,
+    inSyncReplicas?: number,
-  } = {}) =>
+    replicas?: number
+  ) =>
     render(
       <Overview
-        name={mockTopicName}
-        partitions={mockPartitions}
-        internal={undefined}
-        clusterName={mockClusterName}
-        topicName={mockTopicName}
-        clearTopicMessages={mockClearTopicMessages}
         underReplicatedPartitions={underReplicatedPartitions}
         inSyncReplicas={inSyncReplicas}
         replicas={replicas}
+        {...props}
       />
     );
 
   describe('when it has internal flag', () => {
     it('does not render the Action button a Topic', () => {
-      const component = shallow(
+      setupComponent({
-        <Overview
+        name: mockTopicName,
-          name={mockTopicName}
+        partitions: mockPartitions,
-          partitions={mockPartitions}
+        internal: false,
-          internal={false}
+        clusterName: mockClusterName,
-          clusterName={mockClusterName}
+        topicName: mockTopicName,
-          topicName={mockTopicName}
+        clearTopicMessages: mockClearTopicMessages,
-          clearTopicMessages={mockClearTopicMessages}
+      });
-        />
+      expect(screen.getByRole('menu')).toBeInTheDocument();
-      );
-
-      expect(component.exists('Dropdown')).toBeTruthy();
     });
 
     it('does not render Partitions', () => {
-      const componentEmpty = shallow(
+      setupComponent({
-        <Overview
+        name: mockTopicName,
-          name={mockTopicName}
+        partitions: [],
-          partitions={[]}
+        internal: true,
-          internal
+        clusterName: mockClusterName,
-          clusterName={mockClusterName}
+        topicName: mockTopicName,
-          topicName={mockTopicName}
+        clearTopicMessages: mockClearTopicMessages,
-          clearTopicMessages={mockClearTopicMessages}
+      });
-        />
-      );
 
-      expect(componentEmpty.find('td').text()).toEqual('No Partitions found');
+      expect(screen.getByText('No Partitions found')).toBeInTheDocument();
     });
   });
 
   describe('should render circular alert', () => {
     it('should be in document', () => {
-      renderComponent();
+      setupComponent({
+        name: mockTopicName,
+        partitions: [],
+        internal: true,
+        clusterName: mockClusterName,
+        topicName: mockTopicName,
+        clearTopicMessages: mockClearTopicMessages,
+      });
       const circles = screen.getAllByRole('circle');
       expect(circles.length).toEqual(2);
     });
 
     it('should be the appropriate color', () => {
-      renderComponent({
+      setupComponent({
+        name: mockTopicName,
+        partitions: [],
+        internal: true,
+        clusterName: mockClusterName,
+        topicName: mockTopicName,
+        clearTopicMessages: mockClearTopicMessages,
         underReplicatedPartitions: 0,
         inSyncReplicas: 1,
         replicas: 2,