From dd93106e331410869fc502f1c3015692e44f3b69 Mon Sep 17 00:00:00 2001
From: Leshe4ka <kozyurov.alexey@google.com>
Date: Fri, 17 May 2024 18:42:39 +0500
Subject: [PATCH] Tests

---
 .../Menu/MenuColorPicker/MenuColorPicker.tsx  |  3 +-
 .../__tests__/MenuColorPicker.spec.tsx        | 49 +++++++++++++++++++
 .../Nav/Menu/__tests__/MenuTab.spec.tsx       |  1 +
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Nav/Menu/MenuColorPicker/__tests__/MenuColorPicker.spec.tsx

diff --git a/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx b/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx
index 716561d7f..0d7844a3b 100644
--- a/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx
+++ b/frontend/src/components/Nav/Menu/MenuColorPicker/MenuColorPicker.tsx
@@ -5,7 +5,7 @@ import { ClusterColorKey } from 'theme/theme';
 
 import * as S from './MenuColorPicker.styled';
 
-interface MenuColorPickerProps {
+export interface MenuColorPickerProps {
   setColorKey: (key: ClusterColorKey) => void;
 }
 
@@ -32,6 +32,7 @@ const MenuColorPicker = ({ setColorKey }: MenuColorPickerProps) => {
       <S.Container>
         {COLOR_KEYS.map((key) => (
           <S.ColorCircle
+            data-testid={`color-circle-${key}`}
             onClick={handleCircleCLick(key)}
             $colorKey={key}
             key={key}
diff --git a/frontend/src/components/Nav/Menu/MenuColorPicker/__tests__/MenuColorPicker.spec.tsx b/frontend/src/components/Nav/Menu/MenuColorPicker/__tests__/MenuColorPicker.spec.tsx
new file mode 100644
index 000000000..c7a030cd2
--- /dev/null
+++ b/frontend/src/components/Nav/Menu/MenuColorPicker/__tests__/MenuColorPicker.spec.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, screen } from '@testing-library/react';
+import MenuColorPicker, {
+  MenuColorPickerProps,
+} from 'components/Nav/Menu/MenuColorPicker/MenuColorPicker';
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { ClusterColorKey } from 'theme/theme';
+
+describe('MenuColorPicker component', () => {
+  const setupWrapper = (props?: Partial<MenuColorPickerProps>) => (
+    <MenuColorPicker setColorKey={jest.fn()} {...props} />
+  );
+
+  it('renders all color circles', () => {
+    render(setupWrapper());
+
+    const colorKeys: ClusterColorKey[] = [
+      'transparent',
+      'gray',
+      'red',
+      'orange',
+      'lettuce',
+      'green',
+      'turquoise',
+      'blue',
+      'violet',
+      'pink',
+    ];
+
+    colorKeys.forEach((key) => {
+      expect(screen.getByTestId(`color-circle-${key}`)).toBeInTheDocument();
+    });
+  });
+
+  it('calls setColorKey with the correct color key when a color circle is clicked', () => {
+    const setColorKeyMock = jest.fn();
+    render(setupWrapper({ setColorKey: setColorKeyMock }));
+
+    const colorCircle = screen.getByTestId('color-circle-red');
+    fireEvent.click(colorCircle);
+
+    expect(setColorKeyMock).toHaveBeenCalledWith('red');
+  });
+
+  it('renders the Dropdown component', () => {
+    render(setupWrapper());
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
index 50b4ba88e..d8d08a9a8 100644
--- a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
+++ b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
@@ -11,6 +11,7 @@ const toggleClusterMenuMock = jest.fn();
 describe('MenuTab component', () => {
   const setupWrapper = (props?: Partial<MenuTabProps>) => (
     <MenuTab
+      setColorKey={() => {}}
       status={ServerStatus.ONLINE}
       isOpen
       title={testClusterName}