Tests

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}

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();
+  });
+});

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}