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(); + 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(); + 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" > @@ -43,8 +44,12 @@ function UserAccountMenu() { > {getLoggedInUser()} - {isApiKeyEnabled() && API Keys} - + {isApiKeyEnabled() && ( + + API Keys + + )} + {isApiKeyEnabled() && } Log out