Clusters Style change during initializing phase + implement tests suites (#1787)

kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts

@@ -12,7 +12,7 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })<{
     display: grid;
     grid-template-columns: min-content min-content auto min-content;
     grid-template-areas: 'title status . chevron';
-    gap: 0px 5px;
+    gap: 0 5px;
 
     padding: 0.5em 0.75em;
     cursor: pointer;
@@ -52,13 +52,20 @@ export const StatusIcon = styled.circle.attrs({
   cx: 2,
   cy: 2,
   r: 2,
-})<{ status: ServerStatus }>(
-  ({ theme, status }) => css`
-    fill: ${status === ServerStatus.ONLINE
-      ? theme.menu.statusIconColor.online
-      : theme.menu.statusIconColor.offline};
-  `
-);
+  role: 'status-circle',
+})<{ status: ServerStatus }>(({ theme, status }) => {
+  const statusColor: {
+    [k in ServerStatus]: string;
+  } = {
+    [ServerStatus.ONLINE]: theme.menu.statusIconColor.online,
+    [ServerStatus.OFFLINE]: theme.menu.statusIconColor.offline,
+    [ServerStatus.INITIALIZING]: theme.menu.statusIconColor.initializing,
+  };
+
+  return css`
+    fill: ${statusColor[status]};
+  `;
+});
 
 export const ChevronWrapper = styled.svg.attrs({
   viewBox: '0 0 10 6',

kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import theme from 'theme/theme';
+import { screen } from '@testing-library/react';
+import * as S from 'components/Nav/ClusterTab/ClusterTab.styled';
+import { ServerStatus } from 'generated-sources';
+
+describe('Cluster Styled Components', () => {
+  describe('Wrapper Component', () => {
+    it('should check the rendering and correct Styling when it is open', () => {
+      render(<S.Wrapper isOpen />);
+      expect(screen.getByRole('menuitem')).toHaveStyle(
+        `color:${theme.menu.color.isOpen}`
+      );
+    });
+    it('should check the rendering and correct Styling when it is Not open', () => {
+      render(<S.Wrapper isOpen={false} />);
+      expect(screen.getByRole('menuitem')).toHaveStyle(
+        `color:${theme.menu.color.normal}`
+      );
+    });
+  });
+
+  describe('StatusIcon Component', () => {
+    it('should check the rendering and correct Styling when it is online', () => {
+      render(<S.StatusIcon status={ServerStatus.ONLINE} />);
+
+      expect(screen.getByRole('status-circle')).toHaveStyle(
+        `fill:${theme.menu.statusIconColor.online}`
+      );
+    });
+
+    it('should check the rendering and correct Styling when it is offline', () => {
+      render(<S.StatusIcon status={ServerStatus.OFFLINE} />);
+      expect(screen.getByRole('status-circle')).toHaveStyle(
+        `fill:${theme.menu.statusIconColor.offline}`
+      );
+    });
+
+    it('should check the rendering and correct Styling when it is Initializing', () => {
+      render(<S.StatusIcon status={ServerStatus.INITIALIZING} />);
+      expect(screen.getByRole('status-circle')).toHaveStyle(
+        `fill:${theme.menu.statusIconColor.initializing}`
+      );
+    });
+  });
+});

kafka-ui-react-app/src/theme/theme.ts

@@ -225,6 +225,7 @@ const theme = {
     statusIconColor: {
       online: Colors.green[40],
       offline: Colors.red[50],
+      initializing: Colors.yellow[20],
     },
     chevronIconColor: Colors.neutral[50],
   },