Updated test for topic detail overview.

provectus · Jan 12, 2022 · bf029b3 · bf029b3
1 parent 97b0710
commit bf029b3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
@@ -11,7 +11,7 @@ import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import * as Metrics from 'components/common/Metrics';
 import TagStyled from 'components/common/Tag/Tag.styled';
 
-interface Props extends Topic, TopicDetails {
+export interface Props extends Topic, TopicDetails {
   clusterName: ClusterName;
   topicName: TopicName;
   clearTopicMessages(

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/__test__/Overview.spec.tsx
@@ -3,15 +3,11 @@ 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 { Colors } from 'theme/theme';
+import theme from 'theme/theme';
 
 describe('Overview', () => {
-  const mockInternal = false;
   const mockClusterName = 'local';
   const mockTopicName = 'topic';
-  const mockUnderReplicatedPartitions = 1;
-  const mockInSyncReplicas = 1;
-  const mockReplicas = 0;
   const mockClearTopicMessages = jest.fn();
   const mockPartitions = [
     {
@@ -28,18 +24,23 @@ describe('Overview', () => {
       offsetMin: 0,
     },
   ];
-  const renderComponent = () =>
+
+  const renderComponent = ({
+    underReplicatedPartitions = 1,
+    inSyncReplicas = 1,
+    replicas = 1,
+  } = {}) =>
     render(
       <Overview
         name={mockTopicName}
         partitions={mockPartitions}
-        internal={mockInternal}
+        internal={undefined}
         clusterName={mockClusterName}
         topicName={mockTopicName}
         clearTopicMessages={mockClearTopicMessages}
-        underReplicatedPartitions={mockUnderReplicatedPartitions}
-        inSyncReplicas={mockInSyncReplicas}
-        replicas={mockReplicas}
+        underReplicatedPartitions={underReplicatedPartitions}
+        inSyncReplicas={inSyncReplicas}
+        replicas={replicas}
       />
     );
 
@@ -49,7 +50,7 @@ describe('Overview', () => {
         <Overview
           name={mockTopicName}
           partitions={mockPartitions}
-          internal={mockInternal}
+          internal={false}
           clusterName={mockClusterName}
           topicName={mockTopicName}
           clearTopicMessages={mockClearTopicMessages}
@@ -64,7 +65,7 @@ describe('Overview', () => {
         <Overview
           name={mockTopicName}
           partitions={[]}
-          internal={mockInternal}
+          internal
           clusterName={mockClusterName}
           topicName={mockTopicName}
           clearTopicMessages={mockClearTopicMessages}
@@ -79,16 +80,22 @@ describe('Overview', () => {
     it('should be in document', () => {
       renderComponent();
       const circles = screen.getAllByRole('circle');
-      expect(circles[0]).toBeInTheDocument();
-      expect(circles[1]).toBeInTheDocument();
       expect(circles.length).toEqual(2);
     });
 
     it('should be the appropriate color', () => {
-      renderComponent();
+      renderComponent({
+        underReplicatedPartitions: 0,
+        inSyncReplicas: 1,
+        replicas: 2,
+      });
       const circles = screen.getAllByRole('circle');
-      expect(circles[0]).toHaveStyle(`fill: ${Colors.green[40]}`);
-      expect(circles[1]).toHaveStyle(`fill: ${Colors.red[50]}`);
+      expect(circles[0]).toHaveStyle(
+        `fill: ${theme.circularAlert.color.error}`
+      );
+      expect(circles[1]).toHaveStyle(
+        `fill: ${theme.circularAlert.color.error}`
+      );
     });
   });
 });
diff --git a/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx b/kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx
@@ -3,7 +3,7 @@ import { Indicator } from 'components/common/Metrics';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import { Props } from 'components/common/Metrics/Indicator';
-import { Colors } from 'theme/theme';
+import theme from 'theme/theme';
 
 const title = 'Test Title';
 const label = 'Test Label';
@@ -34,26 +34,28 @@ describe('Indicator', () => {
     it('success alert', () => {
       setupComponent({ title, label, isAlert: true, alertType: 'success' });
       expect(screen.getByRole('circle')).toHaveStyle(
-        `fill: ${Colors.green[40]}`
+        `fill: ${theme.circularAlert.color.success}`
       );
     });
 
     it('error alert', () => {
       setupComponent({ title, label, isAlert: true, alertType: 'error' });
-      expect(screen.getByRole('circle')).toHaveStyle(`fill: ${Colors.red[50]}`);
+      expect(screen.getByRole('circle')).toHaveStyle(
+        `fill: ${theme.circularAlert.color.error}`
+      );
     });
 
     it('warning alert', () => {
       setupComponent({ title, label, isAlert: true, alertType: 'warning' });
       expect(screen.getByRole('circle')).toHaveStyle(
-        `fill: ${Colors.yellow[10]}`
+        `fill: ${theme.circularAlert.color.warning}`
       );
     });
 
     it('info alert', () => {
       setupComponent({ title, label, isAlert: true, alertType: 'info' });
       expect(screen.getByRole('circle')).toHaveStyle(
-        `fill: ${Colors.neutral[10]}`
+        `fill: ${theme.circularAlert.color.info}`
       );
     });
   });