Improve tests coverage (#1864)

* improve tests coverage of topic details component

* improve tests coverage on topic details overview component

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

@@ -6,6 +6,8 @@ import Overview, {
 } from 'components/Topics/Topic/Details/Overview/Overview';
 import theme from 'theme/theme';
 import { CleanUpPolicy } from 'generated-sources';
+import ClusterContext from 'components/contexts/ClusterContext';
+import userEvent from '@testing-library/user-event';
 
 describe('Overview', () => {
   const mockClusterName = 'local';
@@ -26,45 +28,52 @@ describe('Overview', () => {
       offsetMin: 0,
     },
   ];
-
+  const defaultContextValues = {
-  const setupComponent = (
+    isReadOnly: false,
-    props: OverviewProps,
+    hasKafkaConnectConfigured: true,
-    underReplicatedPartitions?: number,
+    hasSchemaRegistryConfigured: true,
-    inSyncReplicas?: number,
+    isTopicDeletionAllowed: true,
-    replicas?: number
+  };
-  ) =>
+  const defaultProps: OverviewProps = {
-    render(
-      <Overview
-        underReplicatedPartitions={underReplicatedPartitions}
-        inSyncReplicas={inSyncReplicas}
-        replicas={replicas}
-        {...props}
-      />
-    );
-
-  describe('when it has internal flag', () => {
-    it('does not render the Action button a Topic', () => {
-      setupComponent({
-        name: mockTopicName,
-        partitions: mockPartitions,
-        internal: false,
-        clusterName: mockClusterName,
-        topicName: mockTopicName,
-        cleanUpPolicy: CleanUpPolicy.DELETE,
-        clearTopicMessages: mockClearTopicMessages,
-      });
-      expect(screen.getByRole('menu')).toBeInTheDocument();
-    });
-
-    it('does not render Partitions', () => {
-      setupComponent({
     name: mockTopicName,
     partitions: [],
     internal: true,
     clusterName: mockClusterName,
     topicName: mockTopicName,
     clearTopicMessages: mockClearTopicMessages,
+  };
+
+  const setupComponent = (
+    props = defaultProps,
+    contextValues = defaultContextValues,
+    underReplicatedPartitions?: number,
+    inSyncReplicas?: number,
+    replicas?: number
+  ) =>
+    render(
+      <ClusterContext.Provider value={contextValues}>
+        <Overview
+          underReplicatedPartitions={underReplicatedPartitions}
+          inSyncReplicas={inSyncReplicas}
+          replicas={replicas}
+          {...props}
+        />
+      </ClusterContext.Provider>
+    );
+
+  describe('when it has internal flag', () => {
+    it('does not render the Action button a Topic', () => {
+      setupComponent({
+        ...defaultProps,
+        partitions: mockPartitions,
+        internal: false,
+        cleanUpPolicy: CleanUpPolicy.DELETE,
       });
+      expect(screen.getAllByRole('menu')[0]).toBeInTheDocument();
+    });
+
+    it('does not render Partitions', () => {
+      setupComponent();
 
       expect(screen.getByText('No Partitions found')).toBeInTheDocument();
     });
@@ -72,26 +81,14 @@ describe('Overview', () => {
 
   describe('should render circular alert', () => {
     it('should be in document', () => {
-      setupComponent({
+      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', () => {
       setupComponent({
-        name: mockTopicName,
+        ...defaultProps,
-        partitions: [],
-        internal: true,
-        clusterName: mockClusterName,
-        topicName: mockTopicName,
-        clearTopicMessages: mockClearTopicMessages,
         underReplicatedPartitions: 0,
         inSyncReplicas: 1,
         replicas: 2,
@@ -105,4 +102,18 @@ describe('Overview', () => {
       );
     });
   });
+
+  describe('when Clear Messages is clicked', () => {
+    setupComponent({
+      ...defaultProps,
+      partitions: mockPartitions,
+      internal: false,
+      cleanUpPolicy: CleanUpPolicy.DELETE,
+    });
+
+    const clearMessagesButton = screen.getByText('Clear Messages');
+    userEvent.click(clearMessagesButton);
+
+    expect(mockClearTopicMessages).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -5,7 +5,13 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import Details from 'components/Topics/Topic/Details/Details';
 import { internalTopicPayload } from 'redux/reducers/topics/__test__/fixtures';
 import { render } from 'lib/testHelpers';
-import { clusterTopicPath } from 'lib/paths';
+import {
+  clusterTopicEditPath,
+  clusterTopicPath,
+  clusterTopicsPath,
+} from 'lib/paths';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 
 describe('Details', () => {
   const mockDelete = jest.fn();
@@ -13,8 +19,20 @@ describe('Details', () => {
   const mockClearTopicMessages = jest.fn();
   const mockInternalTopicPayload = internalTopicPayload.internal;
   const mockRecreateTopic = jest.fn();
+  const defaultPathname = clusterTopicPath(
+    mockClusterName,
+    internalTopicPayload.name
+  );
+  const mockHistory = createMemoryHistory({
+    initialEntries: [defaultPathname],
+  });
+  jest.spyOn(mockHistory, 'push');
 
-  const setupComponent = (pathname: string) =>
+  const setupComponent = (
+    pathname = defaultPathname,
+    history = mockHistory,
+    props = {}
+  ) =>
     render(
       <ClusterContext.Provider
         value={{
@@ -24,6 +42,7 @@ describe('Details', () => {
           isTopicDeletionAllowed: true,
         }}
       >
+        <Router history={history}>
           <Details
             clusterName={mockClusterName}
             topicName={internalTopicPayload.name}
@@ -34,7 +53,9 @@ describe('Details', () => {
             clearTopicMessages={mockClearTopicMessages}
             isDeleted={false}
             isDeletePolicy
+            {...props}
           />
+        </Router>
       </ClusterContext.Provider>,
       { pathname }
     );
@@ -68,10 +89,83 @@ describe('Details', () => {
     });
   });
 
-  it('shows a confirmation popup on deleting topic messages', () => {
+  describe('when remove topic modal is open', () => {
-    setupComponent(
+    beforeEach(() => {
-      clusterTopicPath(mockClusterName, internalTopicPayload.name)
+      setupComponent();
+
+      const openModalButton = screen.getAllByText('Remove topic')[0];
+      userEvent.click(openModalButton);
+    });
+
+    it('calls deleteTopic on confirm', () => {
+      const submitButton = screen.getAllByText('Submit')[0];
+      userEvent.click(submitButton);
+
+      expect(mockDelete).toHaveBeenCalledWith(
+        mockClusterName,
+        internalTopicPayload.name
       );
+    });
+
+    it('closes the modal when cancel button is clicked', () => {
+      const cancelButton = screen.getAllByText('Cancel')[0];
+      userEvent.click(cancelButton);
+
+      expect(cancelButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when clear messages modal is open', () => {
+    beforeEach(() => {
+      setupComponent();
+
+      const confirmButton = screen.getAllByText('Clear messages')[0];
+      userEvent.click(confirmButton);
+    });
+
+    it('it calls clearTopicMessages on confirm', () => {
+      const submitButton = screen.getAllByText('Submit')[0];
+      userEvent.click(submitButton);
+
+      expect(mockClearTopicMessages).toHaveBeenCalledWith(
+        mockClusterName,
+        internalTopicPayload.name
+      );
+    });
+
+    it('closes the modal when cancel button is clicked', () => {
+      const cancelButton = screen.getAllByText('Cancel')[0];
+      userEvent.click(cancelButton);
+
+      expect(cancelButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when edit settings is clicked', () => {
+    it('redirects to the edit page', () => {
+      setupComponent();
+
+      const button = screen.getAllByText('Edit settings')[0];
+      userEvent.click(button);
+
+      const redirectRoute = clusterTopicEditPath(
+        mockClusterName,
+        internalTopicPayload.name
+      );
+
+      expect(mockHistory.push).toHaveBeenCalledWith(redirectRoute);
+    });
+  });
+
+  it('redirects to the correct route if topic is deleted', () => {
+    setupComponent(defaultPathname, mockHistory, { isDeleted: true });
+    const redirectRoute = clusterTopicsPath(mockClusterName);
+
+    expect(mockHistory.push).toHaveBeenCalledWith(redirectRoute);
+  });
+
+  it('shows a confirmation popup on deleting topic messages', () => {
+    setupComponent();
     const { getByText } = screen;
     const clearMessagesButton = getByText(/Clear messages/i);
     userEvent.click(clearMessagesButton);
@@ -82,9 +176,7 @@ describe('Details', () => {
   });
 
   it('shows a confirmation popup on recreating topic', () => {
-    setupComponent(
+    setupComponent();
-      clusterTopicPath(mockClusterName, internalTopicPayload.name)
-    );
     const recreateTopicButton = screen.getByText(/Recreate topic/i);
     userEvent.click(recreateTopicButton);
 
@@ -94,9 +186,7 @@ describe('Details', () => {
   });
 
   it('calling recreation function after click on Submit button', () => {
-    setupComponent(
+    setupComponent();
-      clusterTopicPath(mockClusterName, internalTopicPayload.name)
-    );
     const recreateTopicButton = screen.getByText(/Recreate topic/i);
     userEvent.click(recreateTopicButton);
     const confirmBtn = screen.getByRole('button', { name: /submit/i });
@@ -105,9 +195,7 @@ describe('Details', () => {
   });
 
   it('close popup confirmation window after click on Cancel button', () => {
-    setupComponent(
+    setupComponent();
-      clusterTopicPath(mockClusterName, internalTopicPayload.name)
-    );
     const recreateTopicButton = screen.getByText(/Recreate topic/i);
     userEvent.click(recreateTopicButton);
     const cancelBtn = screen.getByRole('button', { name: /cancel/i });