From 15ef0364cae7e4c6b6b2a27fff4ff2f8ef3b09f7 Mon Sep 17 00:00:00 2001
From: Mgrdich <46796009+Mgrdich@users.noreply.github.com>
Date: Fri, 1 Apr 2022 00:30:19 +0400
Subject: [PATCH] Clusters Style change during initializing phase + implement
 tests suites (#1787)

---
 .../Nav/ClusterTab/ClusterTab.styled.ts       | 23 +++++----
 .../__tests__/ClusterTab.styled.spec.tsx      | 47 +++++++++++++++++++
 kafka-ui-react-app/src/theme/theme.ts         |  1 +
 3 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx

diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
index a01434b91a..9b61878bba 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
+++ b/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',
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx b/kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx
new file mode 100644
index 0000000000..76b69ebd59
--- /dev/null
+++ b/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}`
+      );
+    });
+  });
+});
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index e30cacfb20..e2b337a3ce 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/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],
   },