From 98f5a433f26aecef9bbf18dc3870b8405c561c58 Mon Sep 17 00:00:00 2001
From: Vishwas Rajashekar <vrajashe@cisco.com>
Date: Wed, 20 Mar 2024 21:33:44 +0530
Subject: [PATCH] fix: don't display divider for API Keys menu item when API
 key is disabled

Signed-off-by: Vishwas Rajashekar <vrajashe@cisco.com>
---
 src/__tests__/Header/UserAccountMenu.test.js | 40 ++++++++++++++++++++
 src/components/Header/UserAccountMenu.jsx    |  9 ++++-
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/Header/UserAccountMenu.test.js

diff --git a/src/__tests__/Header/UserAccountMenu.test.js b/src/__tests__/Header/UserAccountMenu.test.js
new file mode 100644
index 00000000..124c7fa4
--- /dev/null
+++ b/src/__tests__/Header/UserAccountMenu.test.js
@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import UserAccountMenu from 'components/Header/UserAccountMenu';
+import React from 'react';
+
+const mockIsApiKeyEnabled = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => {}
+}));
+
+jest.mock('../../utilities/authUtilities', () => ({
+  isApiKeyEnabled: () => {
+    return mockIsApiKeyEnabled();
+  },
+  getLoggedInUser: () => {
+    return 'jest-user';
+  },
+  logoutUser: () => {}
+}));
+
+describe('Account Menu', () => {
+  it('displays Api Keys menu item with its divider when the API Keys config is enabled', async () => {
+    mockIsApiKeyEnabled.mockReturnValue(true);
+    render(<UserAccountMenu />);
+    const userIconButton = await screen.getByTestId('user-icon-header-button');
+    fireEvent.click(userIconButton);
+    expect(await screen.queryByTestId('api-keys-menu-item')).toBeInTheDocument();
+    expect(await screen.queryByTestId('api-keys-menu-item-divider')).toBeInTheDocument();
+  });
+
+  it('does not display Api Keys menu item and divider when the API Keys config is disabled', async () => {
+    mockIsApiKeyEnabled.mockReturnValue(false);
+    render(<UserAccountMenu />);
+    const userIconButton = await screen.getByTestId('user-icon-header-button');
+    fireEvent.click(userIconButton);
+    expect(await screen.queryByTestId('api-keys-menu-item')).not.toBeInTheDocument();
+    expect(await screen.queryByTestId('api-keys-menu-item-divider')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Header/UserAccountMenu.jsx b/src/components/Header/UserAccountMenu.jsx
index d22fe1a6..5223dd65 100644
--- a/src/components/Header/UserAccountMenu.jsx
+++ b/src/components/Header/UserAccountMenu.jsx
@@ -30,6 +30,7 @@ function UserAccountMenu() {
         aria-controls={open ? 'account-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
+        data-testid="user-icon-header-button"
       >
         <Avatar sx={{ width: 32, height: 32 }} />
       </IconButton>
@@ -43,8 +44,12 @@ function UserAccountMenu() {
       >
         <MenuItem onClick={handleUserClose}>{getLoggedInUser()}</MenuItem>
         <Divider />
-        {isApiKeyEnabled() && <MenuItem onClick={apiKeyManagement}>API Keys</MenuItem>}
-        <Divider />
+        {isApiKeyEnabled() && (
+          <MenuItem onClick={apiKeyManagement} data-testid="api-keys-menu-item">
+            API Keys
+          </MenuItem>
+        )}
+        {isApiKeyEnabled() && <Divider data-testid="api-keys-menu-item-divider" />}
         <MenuItem onClick={logoutUser}>Log out</MenuItem>
       </Menu>
     </>