From 03843db50e342574e7acd04fbb9045d2fe2370ca Mon Sep 17 00:00:00 2001
From: alessandrogelmi <a.gelmi@codermine.com>
Date: Thu, 10 Oct 2024 10:37:52 +0200
Subject: [PATCH 1/6] fix: tests of PublicKeys

---
 .../src/__mocks__/ApiKeys.mock.ts             |   2 +-
 .../components/IntegrazioneApi/PublicKeys.tsx |  11 +-
 .../IntegrazioneApi/PublicKeysTable.tsx       |  13 +-
 .../__test__/ApiKeyModal.test.tsx             |  20 ++-
 .../__test__/ApiKeysDataSwitch.test.tsx       | 134 +++++++++++++++++-
 .../__test__/PublicKeysTable.test.tsx         | 111 ++++++++++++++-
 .../__test__/ApiIntegration.page.test.tsx     |  78 ++++++++++
 7 files changed, 342 insertions(+), 27 deletions(-)
 create mode 100644 packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx

diff --git a/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts b/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts
index 718dfb67c6..699c274681 100644
--- a/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts
+++ b/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts
@@ -23,7 +23,7 @@ export const publicKeys: BffPublicKeysResponse = {
       ],
     },
     {
-      kid: '92461124-9cc2-4608-a0d4-63a98b75c8f1',
+      kid: '92461124-9cc2-4608-a0d4-63a98b75c8g2',
       issuer: 'PG-d0f52c7d-76d5-4520-8971-edffeb5b46d5',
       name: 'public-key-2',
       value: 'string',
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeys.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeys.tsx
index d47d0c11dc..a3d6b9986d 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeys.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeys.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Block, Delete, Sync } from '@mui/icons-material';
 import { Button, InputAdornment, Stack, TextField, Typography } from '@mui/material';
-import { ApiErrorWrapper, useHasPermissions } from '@pagopa-pn/pn-commons';
+import { ApiErrorWrapper } from '@pagopa-pn/pn-commons';
 import { CopyToClipboardButton } from '@pagopa/mui-italia';
 
 import {
@@ -18,7 +18,6 @@ import {
   deletePublicKey,
   getPublicKeys,
 } from '../../redux/apikeys/actions';
-import { PNRole } from '../../redux/auth/types';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { RootState } from '../../redux/store';
 import ApiKeyModal from './ApiKeyModal';
@@ -57,15 +56,10 @@ const ShowCodesInput = ({ value, label }: { value: string; label: string }) => {
 const PublicKeys: React.FC = () => {
   const { t } = useTranslation(['integrazioneApi', 'common']);
   const dispatch = useAppDispatch();
-  const currentUser = useAppSelector((state: RootState) => state.userState.user);
   const publicKeys = useAppSelector((state: RootState) => state.apiKeysState.publicKeys);
 
   const [modal, setModal] = useState<ModalType>({ view: ModalApiKeyView.NONE });
 
-  const role = currentUser.organization?.roles ? currentUser.organization?.roles[0] : null;
-  const userHasAdminPermissions = useHasPermissions(role ? [role.role] : [], [PNRole.ADMIN]);
-
-  const isAdminWithoutGroups = userHasAdminPermissions && !currentUser.hasGroup;
   const hasOneActiveKey = publicKeys.items.some((key) => key.status === PublicKeyStatus.Active);
 
   const handleModalClick = (view: ModalApiKeyView, publicKeyId: string) => {
@@ -112,11 +106,12 @@ const PublicKeys: React.FC = () => {
           mb: 3,
           mt: 5,
         }}
+        data-testid="publicKeys"
       >
         <Typography variant="h6" sx={{ mb: { xs: 3, lg: 0 } }}>
           {t('publicKeys.title')}
         </Typography>
-        {isAdminWithoutGroups && !hasOneActiveKey && (
+        {!hasOneActiveKey && (
           <Button
             id="generate-public-key"
             data-testid="generatePublicKey"
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeysTable.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeysTable.tsx
index 30a2142bba..d901d7ba95 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeysTable.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeysTable.tsx
@@ -99,18 +99,7 @@ const PublicKeysTable: React.FC<Props> = ({ publicKeys, handleModalClick }) => {
   }
 
   return (
-    <SmartTable
-      data={data}
-      conf={publicKeysColumns}
-      sortLabels={{
-        title: t('sort.title', { ns: 'notifiche' }),
-        optionsTitle: t('sort.options', { ns: 'notifiche' }),
-        cancel: t('sort.cancel', { ns: 'notifiche' }),
-        asc: t('sort.asc', { ns: 'notifiche' }),
-        dsc: t('sort.desc', { ns: 'notifiche' }),
-      }}
-      testId="publicKeysTable"
-    >
+    <SmartTable data={data} conf={publicKeysColumns} testId="publicKeysTable">
       <SmartHeader>
         {publicKeysColumns.map((column) => (
           <SmartHeaderCell
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
index af11f52438..a0af4c8697 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 
-import { render, screen } from '../../../__test__/test-utils';
+import { fireEvent, render, screen } from '../../../__test__/test-utils';
 import ApiKeyModal, { ApiKeyModalProps } from '../ApiKeyModal';
 
 const closeModalFn = vi.fn();
@@ -29,4 +29,22 @@ describe('Api Key Modal', () => {
     expect(queryByTestId('subtitle-top')).toBeInTheDocument();
     expect(queryByTestId('subtitle-bottom')).not.toBeInTheDocument();
   });
+
+  it('render component and click close button', () => {
+    const { getByTestId } = render(<ApiKeyModal {...defaultProps} />);
+    const dialog = screen.getByTestId('dialog');
+    expect(dialog).toHaveTextContent('mock-title');
+    const closeButton = getByTestId('close-modal-button');
+    fireEvent.click(closeButton);
+    expect(closeModalFn).toBeCalledTimes(1);
+  });
+
+  it('render component and click action button', () => {
+    const { getByTestId } = render(<ApiKeyModal {...defaultProps} />);
+    const dialog = screen.getByTestId('dialog');
+    expect(dialog).toHaveTextContent('mock-title');
+    const actionButton = getByTestId('action-modal-button');
+    fireEvent.click(actionButton);
+    expect(actionModalFn).toBeCalledTimes(1);
+  });
 });
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
index 26d0615925..45d1c586ec 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
@@ -3,8 +3,10 @@ import { vi } from 'vitest';
 import { Row } from '@pagopa-pn/pn-commons';
 
 import { publicKeys } from '../../../__mocks__/ApiKeys.mock';
-import { render } from '../../../__test__/test-utils';
+import { fireEvent, render } from '../../../__test__/test-utils';
+import { BffPublicKeysResponse, PublicKeyStatus } from '../../../generated-client/pg-apikeys';
 import { ApiKeyColumnData } from '../../../models/ApiKeys';
+import { getApiKeyStatusInfos } from '../../../utility/apikeys.utility';
 import ApiKeysDataSwitch from '../ApiKeysDataSwitch';
 
 vi.mock('react-i18next', () => ({
@@ -24,6 +26,11 @@ const data: Row<ApiKeyColumnData> = {
   menu: '',
 };
 
+const activeData = {
+  ...data,
+  status: PublicKeyStatus.Active,
+};
+
 describe('Api Keys Data Switch', () => {
   const mockClick = vi.fn();
 
@@ -34,4 +41,129 @@ describe('Api Keys Data Switch', () => {
     const regexp = new RegExp(`^${data.name}$`, 'ig');
     expect(container).toHaveTextContent(regexp);
   });
+
+  it('renders component - value filled', () => {
+    const { container, getByTestId } = render(
+      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="value" />
+    );
+    const regexp = new RegExp(`^${data.value!.substring(0, 10)}...$`, 'ig');
+    expect(container).toHaveTextContent(regexp);
+    const clipboard = getByTestId('copyToClipboard');
+    expect(clipboard).toBeInTheDocument();
+  });
+
+  it('renders component - date', () => {
+    const { container } = render(
+      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="date" />
+    );
+    const regexp = new RegExp(`^${data.date!}$`, 'ig');
+    expect(container).toHaveTextContent(regexp);
+  });
+
+  it('renders component - status', () => {
+    const { label } = getApiKeyStatusInfos(data.status!, data.statusHistory);
+    const { container } = render(
+      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="status" />
+    );
+    const regexp = new RegExp(`^${label}$`, 'ig');
+    expect(container).toHaveTextContent(regexp);
+  });
+
+  it('renders component - contextMenu', async () => {
+    const { getByTestId } = render(
+      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="menu" />
+    );
+    const contextMenu = getByTestId('contextMenuButton');
+    expect(contextMenu).toBeInTheDocument();
+    fireEvent.click(contextMenu);
+    const viewGroupsId = getByTestId('buttonView');
+    expect(viewGroupsId).toBeInTheDocument();
+    fireEvent.click(viewGroupsId);
+    expect(mockClick).toBeCalledTimes(1);
+  });
+});
+
+describe('Menu items', async () => {
+  const renderMenu = (data: Row<ApiKeyColumnData>, keys: BffPublicKeysResponse) => {
+    const result = render(
+      <ApiKeysDataSwitch handleModalClick={vi.fn()} keys={keys} data={data} type="menu" />
+    );
+    const contextMenu = result.getByTestId('contextMenuButton');
+    expect(contextMenu).toBeInTheDocument();
+    fireEvent.click(contextMenu);
+
+    return result;
+  };
+
+  it('renders rotate button if status is Active and no rotated keys', async () => {
+    const keys = {
+      ...publicKeys,
+      items: publicKeys.items.filter((item) => item.status !== PublicKeyStatus.Rotated),
+    };
+
+    const { getByTestId } = renderMenu(activeData, keys);
+
+    const rotateButton = getByTestId('buttonRotate');
+    expect(rotateButton).toBeInTheDocument();
+  });
+
+  it('not renders rotate button if status is Active and there is a rotated key', async () => {
+    const keys = {
+      ...publicKeys,
+      items: [
+        ...publicKeys.items,
+        {
+          ...publicKeys.items[0],
+          status: PublicKeyStatus.Rotated,
+        },
+      ],
+    };
+
+    const { queryByTestId } = renderMenu(activeData, keys);
+
+    const rotateButton = queryByTestId('buttonRotate');
+    expect(rotateButton).not.toBeInTheDocument();
+  });
+
+  it('renders block button if status is Active and no blocked keys', async () => {
+    const keys = {
+      ...publicKeys,
+      items: publicKeys.items.filter((item) => item.status !== PublicKeyStatus.Blocked),
+    };
+
+    const { getByTestId } = renderMenu(activeData, keys);
+
+    const rotateButton = getByTestId('buttonBlock');
+    expect(rotateButton).toBeInTheDocument();
+  });
+
+  it('not renders rotate button if status is Active and there is a rotated key', async () => {
+    const keys = {
+      ...publicKeys,
+      items: [
+        ...publicKeys.items,
+        {
+          ...publicKeys.items[0],
+          status: PublicKeyStatus.Blocked,
+        },
+      ],
+    };
+
+    const { queryByTestId } = renderMenu(activeData, keys);
+
+    const rotateButton = queryByTestId('buttonBlock');
+    expect(rotateButton).not.toBeInTheDocument();
+  });
+
+  it('render delete button if status is not Active', async () => {
+    const blockedData = {
+      ...data,
+      status: PublicKeyStatus.Blocked,
+    };
+
+    const { getByTestId } = renderMenu(blockedData, publicKeys);
+
+    const deleteButton = getByTestId('buttonDelete');
+    expect(deleteButton).toBeInTheDocument();
+  });
 });
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx
index 6e70f3dfbc..4b3ccdc318 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx
@@ -1,9 +1,24 @@
 import { vi } from 'vitest';
 
-import { render } from '../../../__test__/test-utils';
+import { publicKeys } from '../../../__mocks__/ApiKeys.mock';
+import { fireEvent, render, screen, waitFor, within } from '../../../__test__/test-utils';
+import { PublicKeyStatus } from '../../../generated-client/pg-apikeys';
+import { ModalApiKeyView } from '../../../models/ApiKeys';
 import PublicKeysTable from '../PublicKeysTable';
 
-const handleModalClick = vi.fn();
+vi.mock('react-i18next', () => ({
+  // this mock makes sure any components using the translate hook can use it without a warning being shown
+  useTranslation: () => ({
+    t: (str: string) => str,
+  }),
+}));
+
+const mockHandleModalClick = vi.fn();
+
+const defaultProps = {
+  publicKeys,
+  handleModalClick: mockHandleModalClick,
+};
 
 describe('Public Keys Table', () => {
   afterEach(() => {
@@ -13,15 +28,103 @@ describe('Public Keys Table', () => {
   it('show empty state if no public keys is empty', () => {
     const { container, queryByTestId } = render(
       <PublicKeysTable
+        {...defaultProps}
         publicKeys={{
           items: [],
           total: 0,
         }}
-        handleModalClick={handleModalClick}
       />
     );
     expect(container).toHaveTextContent(/empty-state/i);
-    const table = queryByTestId('publicKeysTable');
+    const table = queryByTestId('publicKeysTableDesktop');
     expect(table).not.toBeInTheDocument();
   });
+
+  it('render component with public keys list', async () => {
+    const { getByTestId } = render(<PublicKeysTable {...defaultProps} />);
+    const table = getByTestId('publicKeysTableDesktop');
+    expect(table).toBeInTheDocument();
+    const rows = within(table).getAllByTestId('publicKeysBodyRowDesktop');
+    expect(rows).toHaveLength(publicKeys.items.length);
+  });
+
+  it('Check menu item', async () => {
+    const { getAllByTestId } = render(<PublicKeysTable {...defaultProps} />);
+    const contextComponent = getAllByTestId('contextMenu')[0];
+    expect(contextComponent).toBeInTheDocument();
+    const contextMenuButton = getAllByTestId('contextMenuButton')[0];
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const contextMenu = await waitFor(() => screen.getByTestId('menuContext'));
+    expect(contextMenu).toBeInTheDocument();
+  });
+
+  it('Check click view public key', async () => {
+    const { getAllByTestId } = render(<PublicKeysTable {...defaultProps} />);
+    const contextMenuButton = getAllByTestId('contextMenuButton')[0];
+    fireEvent.click(contextMenuButton);
+    const buttonView = await waitFor(() => screen.getByTestId('buttonView'));
+    fireEvent.click(buttonView);
+    expect(mockHandleModalClick).toHaveBeenCalledTimes(1);
+    expect(mockHandleModalClick).toHaveBeenCalledWith(
+      ModalApiKeyView.VIEW,
+      publicKeys.items[0].kid
+    );
+  });
+
+  it('Check click rotate public key', async () => {
+    const activeData = {
+      ...defaultProps.publicKeys.items[0],
+      status: PublicKeyStatus.Active,
+    };
+    const { getAllByTestId } = render(
+      <PublicKeysTable {...defaultProps} publicKeys={{ ...publicKeys, items: [activeData] }} />
+    );
+    const contextMenuButton = getAllByTestId('contextMenuButton')[0];
+    fireEvent.click(contextMenuButton);
+    const buttonRotate = await waitFor(() => screen.getByTestId('buttonRotate'));
+    fireEvent.click(buttonRotate);
+    expect(mockHandleModalClick).toHaveBeenCalledTimes(1);
+    expect(mockHandleModalClick).toHaveBeenCalledWith(
+      ModalApiKeyView.ROTATE,
+      publicKeys.items[0].kid
+    );
+  });
+
+  it.only('Check click block api key', async () => {
+    // ensure that there is no blocked key already
+    const keys = {
+      ...defaultProps.publicKeys,
+      items: [
+        {
+          ...defaultProps.publicKeys.items[0],
+          status: PublicKeyStatus.Active,
+        },
+      ],
+    };
+
+    const { getAllByTestId } = render(<PublicKeysTable {...defaultProps} publicKeys={keys} />);
+    const contextMenuButton = getAllByTestId('contextMenuButton')[0];
+    fireEvent.click(contextMenuButton);
+    const buttonBlock = await waitFor(() => screen.getByTestId('buttonBlock'));
+    fireEvent.click(buttonBlock);
+    expect(mockHandleModalClick).toHaveBeenCalledTimes(1);
+    expect(mockHandleModalClick).toHaveBeenCalledWith(
+      ModalApiKeyView.BLOCK,
+      publicKeys.items[0].kid
+    );
+  });
+
+  it('Check click delete public key', async () => {
+    const { getAllByTestId } = render(<PublicKeysTable {...defaultProps} />);
+    const contextMenuButton = getAllByTestId('contextMenuButton')[0];
+    fireEvent.click(contextMenuButton);
+    const buttonDelete = await waitFor(() => screen.getByTestId('buttonDelete'));
+    fireEvent.click(buttonDelete);
+    expect(mockHandleModalClick).toHaveBeenCalledTimes(1);
+    expect(mockHandleModalClick).toHaveBeenCalledWith(
+      ModalApiKeyView.DELETE,
+      publicKeys.items[0].kid
+    );
+  });
 });
diff --git a/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx b/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx
new file mode 100644
index 0000000000..d57964496e
--- /dev/null
+++ b/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx
@@ -0,0 +1,78 @@
+import { vi } from 'vitest';
+
+import { userResponse } from '../../__mocks__/Auth.mock';
+import { render } from '../../__test__/test-utils';
+import { PNRole, PartyRole } from '../../redux/auth/types';
+import ApiIntegration from '../ApiIntegration.page';
+
+vi.mock('react-i18next', () => ({
+  // this mock makes sure any components using the translate hook can use it without a warning being shown
+  useTranslation: () => ({
+    t: (str: string) => str,
+  }),
+}));
+
+describe('ApiIntegration page', async () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render the ApiIntegration page with PublicKeys section if user is admin', async () => {
+    const { container, getByTestId } = render(<ApiIntegration />, {
+      preloadedState: {
+        userState: {
+          user: userResponse,
+        },
+      },
+    });
+
+    expect(container).toHaveTextContent(/title/i);
+    expect(container).toHaveTextContent(/subtitle/i);
+    const publicKeys = getByTestId('publicKeys');
+    expect(publicKeys).toBeInTheDocument();
+  });
+
+  it('should render the ApiIntegration page without PublicKeys section if user is admin with groups', async () => {
+    const { container, queryByTestId } = render(<ApiIntegration />, {
+      preloadedState: {
+        userState: {
+          user: {
+            ...userResponse,
+            hasGroup: true,
+          },
+        },
+      },
+    });
+
+    expect(container).toHaveTextContent(/title/i);
+    expect(container).toHaveTextContent(/subtitle/i);
+    const publicKeys = queryByTestId('publicKeys');
+    expect(publicKeys).not.toBeInTheDocument();
+  });
+
+  it('should render the ApiIntegration page without PublicKeys section if user is operator', async () => {
+    const { container, queryByTestId } = render(<ApiIntegration />, {
+      preloadedState: {
+        userState: {
+          user: {
+            ...userResponse,
+            organization: {
+              ...userResponse.organization,
+              roles: [
+                {
+                  partyRole: PartyRole.OPERATOR,
+                  role: PNRole.OPERATOR,
+                },
+              ],
+            },
+          },
+        },
+      },
+    });
+
+    expect(container).toHaveTextContent(/title/i);
+    expect(container).toHaveTextContent(/subtitle/i);
+    const publicKeys = queryByTestId('publicKeys');
+    expect(publicKeys).not.toBeInTheDocument();
+  });
+});

From c633bcda63c01f4e75e6ff0254efde8d3e8da2ba Mon Sep 17 00:00:00 2001
From: alessandrogelmi <a.gelmi@codermine.com>
Date: Fri, 11 Oct 2024 11:49:14 +0200
Subject: [PATCH 2/6] fix: removed only and deprecated tobeCalledTimes

---
 .../components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx  | 4 ++--
 .../IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx       | 2 +-
 .../IntegrazioneApi/__test__/PublicKeysTable.test.tsx         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
index a0af4c8697..b320afe70c 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
@@ -36,7 +36,7 @@ describe('Api Key Modal', () => {
     expect(dialog).toHaveTextContent('mock-title');
     const closeButton = getByTestId('close-modal-button');
     fireEvent.click(closeButton);
-    expect(closeModalFn).toBeCalledTimes(1);
+    expect(closeModalFn).toHaveBeenCalledTimes(1);
   });
 
   it('render component and click action button', () => {
@@ -45,6 +45,6 @@ describe('Api Key Modal', () => {
     expect(dialog).toHaveTextContent('mock-title');
     const actionButton = getByTestId('action-modal-button');
     fireEvent.click(actionButton);
-    expect(actionModalFn).toBeCalledTimes(1);
+    expect(actionModalFn).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
index 45d1c586ec..b22c838144 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
@@ -79,7 +79,7 @@ describe('Api Keys Data Switch', () => {
     const viewGroupsId = getByTestId('buttonView');
     expect(viewGroupsId).toBeInTheDocument();
     fireEvent.click(viewGroupsId);
-    expect(mockClick).toBeCalledTimes(1);
+    expect(mockClick).toHaveBeenCalledTimes(1);
   });
 });
 
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx
index 4b3ccdc318..18a8cc5326 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeysTable.test.tsx
@@ -91,7 +91,7 @@ describe('Public Keys Table', () => {
     );
   });
 
-  it.only('Check click block api key', async () => {
+  it('Check click block api key', async () => {
     // ensure that there is no blocked key already
     const keys = {
       ...defaultProps.publicKeys,

From da945b5193a30a95b79466262129025b2c5ea779 Mon Sep 17 00:00:00 2001
From: alessandrogelmi <a.gelmi@codermine.com>
Date: Fri, 24 Jan 2025 14:38:17 +0100
Subject: [PATCH 3/6] fix: typescript errors on tests

---
 .../__test__/ApiKeysDataSwitch.test.tsx       | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
index 7557a3e996..6fa736b3c1 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
@@ -50,7 +50,13 @@ describe('Api Keys Data Switch', () => {
 
   it('renders component - value filled', () => {
     const { container, getByTestId } = render(
-      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="value" />
+      <ApiKeysDataSwitch
+        handleModalClick={mockClick}
+        keys={publicKeys}
+        data={data}
+        menuType="publicKeys"
+        type="value"
+      />
     );
     const regexp = new RegExp(`^${data.value!.substring(0, 10)}...$`, 'ig');
     expect(container).toHaveTextContent(regexp);
@@ -60,7 +66,13 @@ describe('Api Keys Data Switch', () => {
 
   it('renders component - date', () => {
     const { container } = render(
-      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="date" />
+      <ApiKeysDataSwitch
+        handleModalClick={mockClick}
+        keys={publicKeys}
+        data={data}
+        menuType="publicKeys"
+        type="date"
+      />
     );
     const regexp = new RegExp(`^${data.date!}$`, 'ig');
     expect(container).toHaveTextContent(regexp);
@@ -69,7 +81,13 @@ describe('Api Keys Data Switch', () => {
   it('renders component - status', () => {
     const { label } = getApiKeyStatusInfos(data.status!, data.statusHistory);
     const { container } = render(
-      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="status" />
+      <ApiKeysDataSwitch
+        handleModalClick={mockClick}
+        keys={publicKeys}
+        data={data}
+        menuType="publicKeys"
+        type="status"
+      />
     );
     const regexp = new RegExp(`^${label}$`, 'ig');
     expect(container).toHaveTextContent(regexp);
@@ -77,7 +95,13 @@ describe('Api Keys Data Switch', () => {
 
   it('renders component - contextMenu', async () => {
     const { getByTestId } = render(
-      <ApiKeysDataSwitch handleModalClick={mockClick} keys={publicKeys} data={data} type="menu" />
+      <ApiKeysDataSwitch
+        handleModalClick={mockClick}
+        keys={publicKeys}
+        data={data}
+        menuType="publicKeys"
+        type="menu"
+      />
     );
     const contextMenu = getByTestId('contextMenuButton');
     expect(contextMenu).toBeInTheDocument();
@@ -92,7 +116,13 @@ describe('Api Keys Data Switch', () => {
 describe('Menu items', async () => {
   const renderMenu = (data: Row<ApiKeyColumnData>, keys: BffPublicKeysResponse) => {
     const result = render(
-      <ApiKeysDataSwitch handleModalClick={vi.fn()} keys={keys} data={data} type="menu" />
+      <ApiKeysDataSwitch
+        handleModalClick={vi.fn()}
+        keys={keys}
+        data={data}
+        menuType="publicKeys"
+        type="menu"
+      />
     );
     const contextMenu = result.getByTestId('contextMenuButton');
     expect(contextMenu).toBeInTheDocument();

From 5a748d5fb3c196e78cac7af7a8450675d57c8475 Mon Sep 17 00:00:00 2001
From: alessandrogelmi <a.gelmi@codermine.com>
Date: Mon, 24 Feb 2025 10:37:51 +0100
Subject: [PATCH 4/6] wip on PublicKeys tests

---
 .../__test__/PublicKeys.test.tsx              | 56 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeys.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeys.test.tsx
index e01a28d4b3..04f8fd7878 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeys.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeys.test.tsx
@@ -1,6 +1,8 @@
 import { vi } from 'vitest';
 
-import { render } from '../../../__test__/test-utils';
+import { publicKeys } from '../../../__mocks__/ApiKeys.mock';
+import { fireEvent, render } from '../../../__test__/test-utils';
+import { PublicKeyStatus } from '../../../generated-client/pg-apikeys';
 import PublicKeys from '../PublicKeys';
 
 describe('Public Keys', () => {
@@ -15,4 +17,56 @@ describe('Public Keys', () => {
     const button = getByTestId('generatePublicKey');
     expect(button).toBeInTheDocument();
   });
+
+  it('render component with public key list and not show button if there is an active key', async () => {
+    const keys = {
+      ...publicKeys,
+      items: [
+        {
+          ...publicKeys.items[0],
+          status: PublicKeyStatus.Active,
+        },
+      ],
+    };
+
+    const { container, getByTestId, queryByTestId } = render(<PublicKeys />, {
+      preloadedState: {
+        apiKeysState: {
+          publicKeys: keys,
+        },
+      },
+    });
+    expect(container).not.toHaveTextContent(/empty-state/i);
+
+    const table = getByTestId('publicKeysTableDesktop');
+    expect(table).toBeInTheDocument();
+    const button = queryByTestId('generatePublicKey');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('check view code modal', async () => {
+    const { getByTestId, getAllByTestId } = render(<PublicKeys />, {
+      preloadedState: {
+        apiKeysState: {
+          publicKeys,
+        },
+      },
+    });
+
+    const contextMenuButton = getAllByTestId('contextMenuButton')[0];
+    fireEvent.click(contextMenuButton);
+    const viewCodeButton = getByTestId('buttonView');
+    fireEvent.click(viewCodeButton);
+
+    const dialog = getByTestId('dialog');
+    expect(dialog).toBeInTheDocument();
+
+    expect(dialog).toHaveTextContent(/view-title/i);
+    expect(dialog).toHaveTextContent(/view-subtitle/i);
+
+    const closeButton = getByTestId('close-modal-button');
+    fireEvent.click(closeButton);
+
+    expect(dialog).not.toBeInTheDocument();
+  });
 });

From 2ae1bf2be93d46efe75c106495faf5f656c9fde0 Mon Sep 17 00:00:00 2001
From: Andrea Cimini <andrea.cimini@pagopa.it>
Date: Mon, 24 Feb 2025 18:23:53 +0100
Subject: [PATCH 5/6] added utility tests

---
 .../IntegrazioneApi/ApiKeyModal.tsx           | 22 +++++------
 .../__test__/ApiKeyModal.test.tsx             | 34 ++++++++++++-----
 .../__test__/ApiIntegration.page.test.tsx     |  2 +-
 .../utility/__test__/apikeys.utility.test.tsx | 38 ++++++++++++++++++-
 4 files changed, 72 insertions(+), 24 deletions(-)

diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeyModal.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeyModal.tsx
index 44f042846d..74cc119ac6 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeyModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeyModal.tsx
@@ -5,7 +5,7 @@ import { PnDialog, PnDialogActions, PnDialogContent } from '@pagopa-pn/pn-common
 
 export type ApiKeyModalProps = {
   title: string;
-  subTitle?: ReactNode;
+  subTitle: ReactNode;
   content?: ReactNode;
   closeButtonLabel: string;
   closeModalHandler: () => void;
@@ -29,18 +29,16 @@ const ApiKeyModal = ({
   hasDeleteButton,
 }: ApiKeyModalProps) => (
   <PnDialog open onClose={closeModalHandler} fullWidth>
-    {title && <DialogTitle>{title}</DialogTitle>}
+    <DialogTitle>{title}</DialogTitle>
     <PnDialogContent>
-      {subTitle && (
-        <Typography
-          id="subtitle-top"
-          data-testid="subtitle-top"
-          variant="body1"
-          sx={{ mb: content ? 2 : 0 }}
-        >
-          {subTitle}
-        </Typography>
-      )}
+      <Typography
+        id="subtitle-top"
+        data-testid="subtitle-top"
+        variant="body1"
+        sx={{ mb: content ? 2 : 0 }}
+      >
+        {subTitle}
+      </Typography>
       {content}
     </PnDialogContent>
     <PnDialogActions>
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
index b320afe70c..a3f4226341 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeyModal.test.tsx
@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 
-import { fireEvent, render, screen } from '../../../__test__/test-utils';
+import { fireEvent, render, within } from '../../../__test__/test-utils';
 import ApiKeyModal, { ApiKeyModalProps } from '../ApiKeyModal';
 
 const closeModalFn = vi.fn();
@@ -22,28 +22,42 @@ describe('Api Key Modal', () => {
   });
 
   it('render component', () => {
-    const { queryByTestId } = render(<ApiKeyModal {...defaultProps} />);
-    const dialog = screen.getByTestId('dialog');
+    const { getByTestId } = render(<ApiKeyModal {...defaultProps} />);
+    const dialog = getByTestId('dialog');
     expect(dialog).toHaveTextContent('mock-title');
     expect(dialog).toHaveTextContent('mocked-content');
-    expect(queryByTestId('subtitle-top')).toBeInTheDocument();
-    expect(queryByTestId('subtitle-bottom')).not.toBeInTheDocument();
+    const subtitle = within(dialog).getByTestId('subtitle-top');
+    expect(subtitle).toBeInTheDocument();
+    const actionButton = within(dialog).getByTestId('action-modal-button');
+    expect(actionButton).toBeInTheDocument();
+  });
+
+  it('render component without content', () => {
+    const { getByTestId } = render(<ApiKeyModal {...defaultProps} content={null} />);
+    const dialog = getByTestId('dialog');
+    expect(dialog).not.toHaveTextContent('mocked-content');
+  });
+
+  it('render component without action', () => {
+    const { getByTestId } = render(<ApiKeyModal {...defaultProps} actionButtonLabel={undefined} />);
+    const dialog = getByTestId('dialog');
+    const actionButton = within(dialog).queryByTestId('action-modal-button');
+    expect(actionButton).not.toBeInTheDocument();
   });
 
   it('render component and click close button', () => {
     const { getByTestId } = render(<ApiKeyModal {...defaultProps} />);
-    const dialog = screen.getByTestId('dialog');
-    expect(dialog).toHaveTextContent('mock-title');
-    const closeButton = getByTestId('close-modal-button');
+    const dialog = getByTestId('dialog');
+    const closeButton = within(dialog).getByTestId('close-modal-button');
     fireEvent.click(closeButton);
     expect(closeModalFn).toHaveBeenCalledTimes(1);
   });
 
   it('render component and click action button', () => {
     const { getByTestId } = render(<ApiKeyModal {...defaultProps} />);
-    const dialog = screen.getByTestId('dialog');
+    const dialog = getByTestId('dialog');
     expect(dialog).toHaveTextContent('mock-title');
-    const actionButton = getByTestId('action-modal-button');
+    const actionButton = within(dialog).getByTestId('action-modal-button');
     fireEvent.click(actionButton);
     expect(actionModalFn).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx b/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx
index d57964496e..9acdba6851 100644
--- a/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/pages/__test__/ApiIntegration.page.test.tsx
@@ -2,7 +2,7 @@ import { vi } from 'vitest';
 
 import { userResponse } from '../../__mocks__/Auth.mock';
 import { render } from '../../__test__/test-utils';
-import { PNRole, PartyRole } from '../../redux/auth/types';
+import { PNRole, PartyRole } from '../../models/User';
 import ApiIntegration from '../ApiIntegration.page';
 
 vi.mock('react-i18next', () => ({
diff --git a/packages/pn-personagiuridica-webapp/src/utility/__test__/apikeys.utility.test.tsx b/packages/pn-personagiuridica-webapp/src/utility/__test__/apikeys.utility.test.tsx
index b2dfdfe257..f74c6f008a 100644
--- a/packages/pn-personagiuridica-webapp/src/utility/__test__/apikeys.utility.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/utility/__test__/apikeys.utility.test.tsx
@@ -1,7 +1,10 @@
 import { vi } from 'vitest';
 
+import { formatDate } from '@pagopa-pn/pn-commons';
+
 import { publicKeys } from '../../__mocks__/ApiKeys.mock';
-import { PublicKeyStatus } from '../../generated-client/pg-apikeys';
+import { render } from '../../__test__/test-utils';
+import { PublicKeyStatus, PublicKeyStatusHistory } from '../../generated-client/pg-apikeys';
 import { TooltipApiKey, getApiKeyStatusInfos } from '../apikeys.utility';
 
 vi.mock('react-i18next', () => ({
@@ -56,4 +59,37 @@ describe('test apikeys utilities', () => {
       tooltip: undefined,
     });
   });
+
+  it('render TooltipApiKey', () => {
+    const history: Array<PublicKeyStatusHistory> = [
+      {
+        status: PublicKeyStatus.Blocked,
+        date: '2024-09-30T17:00:00.00Z',
+        changedByDenomination: 'e490f02e-9429-4b38-bb11-ddb8a561fb62',
+      },
+      {
+        status: PublicKeyStatus.Rotated,
+        date: '2024-09-30T12:00:00.000Z',
+        changedByDenomination: 'e490f02e-9429-4b38-bb11-ddb8a561fb62',
+      },
+      {
+        status: PublicKeyStatus.Active,
+        date: '2024-09-30T11:00:00.000Z',
+        changedByDenomination: 'e490f02e-9429-4b38-bb11-ddb8a561fb62',
+      },
+      {
+        status: PublicKeyStatus.Created,
+        date: '2024-09-30T09:00:00.000Z',
+        changedByDenomination: 'e490f02e-9429-4b38-bb11-ddb8a561fb62',
+      },
+    ];
+    const { container } = render(<TooltipApiKey history={history} />);
+
+    for (const h of history) {
+      expect(container).toHaveTextContent(
+        `tooltip.${h.status !== PublicKeyStatus.Active ? h.status?.toLowerCase() : 'enabled'}-in`
+      );
+      expect(container).toHaveTextContent(h.date ? formatDate(h.date) : '');
+    }
+  });
 });

From 14b843b78bbc7d44bd8859d900115e738624a1fa Mon Sep 17 00:00:00 2001
From: Andrea Cimini <andrea.cimini@pagopa.it>
Date: Tue, 25 Feb 2025 15:22:42 +0100
Subject: [PATCH 6/6] added tests for context menu

---
 .../src/__mocks__/ApiKeys.mock.ts             |  83 +++-
 .../IntegrazioneApi/ApiKeysDataSwitch.tsx     |   2 +-
 .../IntegrazioneApi/VirtualKeyContextMenu.tsx |   2 +-
 .../__test__/ApiKeysDataSwitch.test.tsx       | 121 +----
 .../__test__/PublicKeyContextMenu.test.tsx    | 215 +++++++++
 .../__test__/VirtualKeyContextMenu.test.tsx   | 428 ++++++++++++++++++
 6 files changed, 723 insertions(+), 128 deletions(-)
 create mode 100644 packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeyContextMenu.test.tsx
 create mode 100644 packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/VirtualKeyContextMenu.test.tsx

diff --git a/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts b/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts
index abfe204fa5..58fc4d2f85 100644
--- a/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts
+++ b/packages/pn-personagiuridica-webapp/src/__mocks__/ApiKeys.mock.ts
@@ -2,8 +2,8 @@ import {
   BffPublicKeysCheckIssuerResponse,
   BffPublicKeysResponse,
   BffVirtualKeysResponse,
-  PublicKeysIssuerResponseIssuerStatusEnum,
   PublicKeyStatus,
+  PublicKeysIssuerResponseIssuerStatusEnum,
   VirtualKeyStatus,
 } from '../generated-client/pg-apikeys';
 
@@ -39,43 +39,84 @@ export const publicKeys: BffPublicKeysResponse = {
         },
       ],
     },
+    {
+      kid: '92461124-9cc2-4608-a0d4-63a98b75c8f2',
+      issuer: 'PG-d0f52c7d-76d5-4520-8971-edffeb5b46d5',
+      name: 'public-key-3',
+      value: 'string',
+      createdAt: '2024-09-30T17:53:02.405Z',
+      status: PublicKeyStatus.Active,
+    },
+  ],
+  total: 3,
+};
+
+export const virtualKeysOfUser: BffVirtualKeysResponse = {
+  items: [
+    {
+      id: 'key-3',
+      name: 'string',
+      value: 'string',
+      lastUpdate: '2024-09-30T17:10:03.178Z',
+      status: VirtualKeyStatus.Enabled,
+    },
+    {
+      id: 'key-4',
+      name: 'string',
+      value: 'string',
+      lastUpdate: '2024-09-30T17:10:03.178Z',
+      status: VirtualKeyStatus.Rotated,
+    },
+    {
+      id: 'key-5',
+      name: 'string',
+      value: 'string',
+      lastUpdate: '2024-09-30T23:10:03.178Z',
+      status: VirtualKeyStatus.Blocked,
+    },
   ],
-  total: 2,
+  total: 3,
 };
 
 export const virtualKeys: BffVirtualKeysResponse = {
   items: [
     {
-      id: 'string',
+      id: 'key-1',
       name: 'string',
       value: 'string',
-      lastUpdate: '2024-09-30T13:15:03.178Z',
+      lastUpdate: '2024-09-30T13:10:03.178Z',
       user: {
-        denomination: 'string',
-        fiscalCode: 'string',
+        denomination: 'Luca Bianchi',
+        fiscalCode: 'BNCLCU89E08H501A',
       },
-      status: VirtualKeyStatus.Created,
+      status: VirtualKeyStatus.Rotated,
     },
     {
-      id: 'string',
+      id: 'key-2',
       name: 'string',
       value: 'string',
-      lastUpdate: '2024-09-30T13:10:03.178Z',
+      lastUpdate: '2024-09-30T17:10:03.178Z',
       user: {
-        denomination: 'string',
-        fiscalCode: 'string',
+        denomination: 'Sara Verdi',
+        fiscalCode: 'VRDSRA05S47H505C',
       },
-      status: VirtualKeyStatus.Rotated,
+      status: VirtualKeyStatus.Blocked,
     },
+    ...virtualKeysOfUser.items.map((key) => ({
+      ...key,
+      user: {
+        denomination: 'Mario Rossi',
+        fiscalCode: 'RSSMRA93E04H502V',
+      },
+    })),
   ],
-  total: 2,
+  total: 2 + virtualKeysOfUser.total!,
 };
 
-  
-  export const checkIssuerPublicKey : BffPublicKeysCheckIssuerResponse = { 
-    tosAccepted: true,
-    issuer: {
-      isPresent: true,
-      issuerStatus: PublicKeysIssuerResponseIssuerStatusEnum.Inactive,
-    }
-  }
+export const checkIssuerPublicKey: BffPublicKeysCheckIssuerResponse = {
+  tosAccepted: true,
+  issuer: {
+    isPresent: true,
+    issuerStatus: PublicKeysIssuerResponseIssuerStatusEnum.Inactive,
+  },
+};
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeysDataSwitch.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeysDataSwitch.tsx
index e23d169003..01b261134c 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeysDataSwitch.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/ApiKeysDataSwitch.tsx
@@ -72,7 +72,7 @@ const ApiKeysDataSwitch: React.FC<Props> = ({
             data-testid="copyToClipboard"
             disabled={isApiKeyDisactivated(data)}
             tooltipTitle={t('api-key-copied')}
-            value={() => data.value || ''}
+            value={() => data.value ?? ''}
           />
         </Stack>
       );
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/VirtualKeyContextMenu.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/VirtualKeyContextMenu.tsx
index 83208aa8f3..8d011fb603 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/VirtualKeyContextMenu.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/VirtualKeyContextMenu.tsx
@@ -66,7 +66,7 @@ const VirtualKeyContextMenu: React.FC<Props> = ({
         key.user?.fiscalCode === data.user?.fiscalCode && key.status === VirtualKeyStatus.Blocked
     ) && data.status !== VirtualKeyStatus.Rotated;
 
-  const shoudlShowViewButton = !isUserAdmin || isPersonalKey;
+  const shoudlShowViewButton = isPersonalKey;
 
   const shouldShowDeleteButton = data.status !== VirtualKeyStatus.Enabled;
 
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
index 6fa736b3c1..e0005f7c93 100644
--- a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx
@@ -4,18 +4,10 @@ import { Row } from '@pagopa-pn/pn-commons';
 
 import { publicKeys } from '../../../__mocks__/ApiKeys.mock';
 import { fireEvent, render } from '../../../__test__/test-utils';
-import { BffPublicKeysResponse, PublicKeyStatus } from '../../../generated-client/pg-apikeys';
 import { ApiKeyColumnData } from '../../../models/ApiKeys';
 import { getApiKeyStatusInfos } from '../../../utility/apikeys.utility';
 import ApiKeysDataSwitch from '../ApiKeysDataSwitch';
 
-vi.mock('react-i18next', () => ({
-  // this mock makes sure any components using the translate hook can use it without a warning being shown
-  useTranslation: () => ({
-    t: (str: string) => str,
-  }),
-}));
-
 const data: Row<ApiKeyColumnData> = {
   id: publicKeys.items[0].kid!,
   name: publicKeys.items[0].name,
@@ -26,11 +18,6 @@ const data: Row<ApiKeyColumnData> = {
   menu: '',
 };
 
-const activeData = {
-  ...data,
-  status: PublicKeyStatus.Active,
-};
-
 describe('Api Keys Data Switch', () => {
   const mockClick = vi.fn();
 
@@ -48,6 +35,21 @@ describe('Api Keys Data Switch', () => {
     expect(container).toHaveTextContent(regexp);
   });
 
+  it('renders component - value empty', () => {
+    const { container, queryByTestId } = render(
+      <ApiKeysDataSwitch
+        handleModalClick={mockClick}
+        keys={publicKeys}
+        data={{ ...data, value: undefined }}
+        menuType="publicKeys"
+        type="value"
+      />
+    );
+    expect(container).toHaveTextContent('-');
+    const clipboard = queryByTestId('copyToClipboard');
+    expect(clipboard).not.toBeInTheDocument();
+  });
+
   it('renders component - value filled', () => {
     const { container, getByTestId } = render(
       <ApiKeysDataSwitch
@@ -58,7 +60,7 @@ describe('Api Keys Data Switch', () => {
         type="value"
       />
     );
-    const regexp = new RegExp(`^${data.value!.substring(0, 10)}...$`, 'ig');
+    const regexp = new RegExp(`^${data.value}$`, 'ig');
     expect(container).toHaveTextContent(regexp);
     const clipboard = getByTestId('copyToClipboard');
     expect(clipboard).toBeInTheDocument();
@@ -112,94 +114,3 @@ describe('Api Keys Data Switch', () => {
     expect(mockClick).toHaveBeenCalledTimes(1);
   });
 });
-
-describe('Menu items', async () => {
-  const renderMenu = (data: Row<ApiKeyColumnData>, keys: BffPublicKeysResponse) => {
-    const result = render(
-      <ApiKeysDataSwitch
-        handleModalClick={vi.fn()}
-        keys={keys}
-        data={data}
-        menuType="publicKeys"
-        type="menu"
-      />
-    );
-    const contextMenu = result.getByTestId('contextMenuButton');
-    expect(contextMenu).toBeInTheDocument();
-    fireEvent.click(contextMenu);
-
-    return result;
-  };
-
-  it('renders rotate button if status is Active and no rotated keys', async () => {
-    const keys = {
-      ...publicKeys,
-      items: publicKeys.items.filter((item) => item.status !== PublicKeyStatus.Rotated),
-    };
-
-    const { getByTestId } = renderMenu(activeData, keys);
-
-    const rotateButton = getByTestId('buttonRotate');
-    expect(rotateButton).toBeInTheDocument();
-  });
-
-  it('not renders rotate button if status is Active and there is a rotated key', async () => {
-    const keys = {
-      ...publicKeys,
-      items: [
-        ...publicKeys.items,
-        {
-          ...publicKeys.items[0],
-          status: PublicKeyStatus.Rotated,
-        },
-      ],
-    };
-
-    const { queryByTestId } = renderMenu(activeData, keys);
-
-    const rotateButton = queryByTestId('buttonRotate');
-    expect(rotateButton).not.toBeInTheDocument();
-  });
-
-  it('renders block button if status is Active and no blocked keys', async () => {
-    const keys = {
-      ...publicKeys,
-      items: publicKeys.items.filter((item) => item.status !== PublicKeyStatus.Blocked),
-    };
-
-    const { getByTestId } = renderMenu(activeData, keys);
-
-    const rotateButton = getByTestId('buttonBlock');
-    expect(rotateButton).toBeInTheDocument();
-  });
-
-  it('not renders rotate button if status is Active and there is a rotated key', async () => {
-    const keys = {
-      ...publicKeys,
-      items: [
-        ...publicKeys.items,
-        {
-          ...publicKeys.items[0],
-          status: PublicKeyStatus.Blocked,
-        },
-      ],
-    };
-
-    const { queryByTestId } = renderMenu(activeData, keys);
-
-    const rotateButton = queryByTestId('buttonBlock');
-    expect(rotateButton).not.toBeInTheDocument();
-  });
-
-  it('render delete button if status is not Active', async () => {
-    const blockedData = {
-      ...data,
-      status: PublicKeyStatus.Blocked,
-    };
-
-    const { getByTestId } = renderMenu(blockedData, publicKeys);
-
-    const deleteButton = getByTestId('buttonDelete');
-    expect(deleteButton).toBeInTheDocument();
-  });
-});
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeyContextMenu.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeyContextMenu.test.tsx
new file mode 100644
index 0000000000..62f0182135
--- /dev/null
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/PublicKeyContextMenu.test.tsx
@@ -0,0 +1,215 @@
+import { vi } from 'vitest';
+
+import { Row } from '@pagopa-pn/pn-commons';
+
+import { publicKeys } from '../../../__mocks__/ApiKeys.mock';
+import { fireEvent, render, within } from '../../../__test__/test-utils';
+import { PublicKeyRow, PublicKeyStatus } from '../../../generated-client/pg-apikeys';
+import { ApiKeyColumnData, ModalApiKeyView } from '../../../models/ApiKeys';
+import PublicKeyContextMenu from '../PublicKeyContextMenu';
+
+const data = (publicKey: PublicKeyRow): Row<ApiKeyColumnData> => ({
+  id: publicKey.kid!,
+  name: publicKey.name,
+  value: publicKey.value,
+  date: publicKey.createdAt,
+  status: publicKey.status,
+  statusHistory: publicKey.statusHistory,
+  menu: '',
+});
+
+const activeKey = publicKeys.items.find((key) => key.status === PublicKeyStatus.Active);
+const noActiveKey = publicKeys.items.find((key) => key.status !== PublicKeyStatus.Active);
+
+const handleModalClickMk = vi.fn();
+
+describe('PublicKeyContextMenu', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Rotate button is shown only if the current key is active and there is no rotated one
+  it('render component - rotate button', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={{
+          total: publicKeys.total,
+          items: publicKeys.items.filter((key) => key.status !== PublicKeyStatus.Rotated),
+        }}
+        data={data(activeKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).getByTestId('buttonRotate');
+    expect(buttonRotate).toBeInTheDocument();
+    expect(buttonRotate).toHaveTextContent('context-menu.rotate');
+    fireEvent.click(buttonRotate);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.ROTATE, activeKey!.kid);
+  });
+
+  it('render component - no rotate button if no active key', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={{
+          total: publicKeys.total,
+          items: publicKeys.items.filter((key) => key.status !== PublicKeyStatus.Rotated),
+        }}
+        data={data(noActiveKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).queryByTestId('buttonRotate');
+    expect(buttonRotate).not.toBeInTheDocument();
+  });
+
+  it('render component - no rotate button if there is already one rotated key', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={publicKeys}
+        data={data(activeKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).queryByTestId('buttonRotate');
+    expect(buttonRotate).not.toBeInTheDocument();
+  });
+
+  // Block button is shown only if the current key is active and there is no blocked one
+  it('render component - block button', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={{
+          total: publicKeys.total,
+          items: publicKeys.items.filter((key) => key.status !== PublicKeyStatus.Blocked),
+        }}
+        data={data(activeKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonBlock = within(menuContext).getByTestId('buttonBlock');
+    expect(buttonBlock).toBeInTheDocument();
+    expect(buttonBlock).toHaveTextContent('context-menu.block');
+    fireEvent.click(buttonBlock);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.BLOCK, activeKey!.kid);
+  });
+
+  it('render component - no block button if no active key', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={{
+          total: publicKeys.total,
+          items: publicKeys.items.filter((key) => key.status !== PublicKeyStatus.Blocked),
+        }}
+        data={data(noActiveKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonBlock = within(menuContext).queryByTestId('buttonBlock');
+    expect(buttonBlock).not.toBeInTheDocument();
+  });
+
+  it('render component - no block button if there is already one blocked key', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={publicKeys}
+        data={data(activeKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonBlock = within(menuContext).queryByTestId('buttonBlock');
+    expect(buttonBlock).not.toBeInTheDocument();
+  });
+
+  // View button is always shown
+  it('render component - view button', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={publicKeys}
+        data={data(activeKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonView = within(menuContext).getByTestId('buttonView');
+    expect(buttonView).toBeInTheDocument();
+    expect(buttonView).toHaveTextContent('context-menu.view');
+    fireEvent.click(buttonView);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.VIEW, activeKey!.kid);
+  });
+
+  // Delete button is shown only if the current key is not active
+  it('render component - delete button', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={publicKeys}
+        data={data(noActiveKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonDelete = within(menuContext).getByTestId('buttonDelete');
+    expect(buttonDelete).toBeInTheDocument();
+    expect(buttonDelete).toHaveTextContent('button.elimina');
+    fireEvent.click(buttonDelete);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.DELETE, noActiveKey!.kid);
+  });
+
+  it('render component - no delete button if current key is active', () => {
+    const { getByTestId } = render(
+      <PublicKeyContextMenu
+        keys={publicKeys}
+        data={data(activeKey!)}
+        handleModalClick={handleModalClickMk}
+      />
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonDelete = within(menuContext).queryByTestId('buttonDelete');
+    expect(buttonDelete).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/VirtualKeyContextMenu.test.tsx b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/VirtualKeyContextMenu.test.tsx
new file mode 100644
index 0000000000..b353f091a5
--- /dev/null
+++ b/packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/VirtualKeyContextMenu.test.tsx
@@ -0,0 +1,428 @@
+import { vi } from 'vitest';
+
+import { Row } from '@pagopa-pn/pn-commons';
+
+import { virtualKeysOfUser } from '../../../__mocks__/ApiKeys.mock';
+import { fireEvent, render, within } from '../../../__test__/test-utils';
+import { VirtualKey, VirtualKeyStatus } from '../../../generated-client/pg-apikeys';
+import { ApiKeyColumnData, ModalApiKeyView } from '../../../models/ApiKeys';
+import { PNRole } from '../../../models/User';
+import VirtualKeyContextMenu from '../VirtualKeyContextMenu';
+
+const data = (virtualKey: VirtualKey): Row<ApiKeyColumnData> => ({
+  id: virtualKey.id!,
+  name: virtualKey.name,
+  value: virtualKey.value,
+  date: virtualKey.lastUpdate,
+  status: virtualKey.status,
+  user: virtualKey.user,
+  menu: '',
+});
+
+// virtual keys returned for an user that is not an admin, don't have the user key
+// virtual keys returned for an user that is an admin, have the user key
+const virtualKeys = {
+  ...virtualKeysOfUser,
+  items: virtualKeysOfUser.items.map((key) => ({
+    ...key,
+    user: {
+      denomination: 'Mario Rossi',
+      fiscalCode: 'RSSMRA93E04H502V',
+    },
+  })),
+};
+
+const testData = [
+  {
+    case: 'not admin user',
+    user: { organization: { roles: [{ role: PNRole.OPERATOR }] } },
+    keys: virtualKeysOfUser,
+    enabledKey: virtualKeysOfUser.items.find((key) => key.status === VirtualKeyStatus.Enabled),
+    notEnabledKey: virtualKeysOfUser.items.find((key) => key.status !== VirtualKeyStatus.Enabled),
+    rotatedKey: virtualKeysOfUser.items.find((key) => key.status === VirtualKeyStatus.Rotated),
+  },
+  {
+    case: 'admin user',
+    user: {
+      organization: { roles: [{ role: PNRole.ADMIN }] },
+      fiscal_number: 'RSSMRA93E04H502V',
+    },
+    keys: virtualKeys,
+    enabledKey: virtualKeys.items.find((key) => key.status === VirtualKeyStatus.Enabled),
+    notEnabledKey: virtualKeys.items.find((key) => key.status !== VirtualKeyStatus.Enabled),
+    rotatedKey: virtualKeys.items.find((key) => key.status === VirtualKeyStatus.Rotated),
+  },
+];
+
+const handleModalClickMk = vi.fn();
+
+describe('VirtualKeyContextMenu', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Rotate button is shown only if the current key is enabled, there is no rotated one
+  // that belongs to the current user and issuer is active
+  it.each(testData)('render component - rotate button ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={{
+          total: d.keys.total,
+          items: d.keys.items.filter((key) => key.status !== VirtualKeyStatus.Rotated),
+        }}
+        data={data(d.enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).getByTestId('buttonRotate');
+    expect(buttonRotate).toBeInTheDocument();
+    expect(buttonRotate).toHaveTextContent('context-menu.rotate');
+    fireEvent.click(buttonRotate);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.ROTATE, d.enabledKey!.id);
+  });
+
+  it.each(testData)('render component - no rotate button if no enabled key ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={{
+          total: d.keys.total,
+          items: d.keys.items.filter((key) => key.status !== VirtualKeyStatus.Rotated),
+        }}
+        data={data(d.notEnabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).queryByTestId('buttonRotate');
+    expect(buttonRotate).not.toBeInTheDocument();
+  });
+
+  it.each(testData)(
+    'render component - no rotate button if there is already one rotated key ($case)',
+    (d) => {
+      const { getByTestId } = render(
+        <VirtualKeyContextMenu
+          keys={d.keys}
+          data={data(d.enabledKey!)}
+          handleModalClick={handleModalClickMk}
+          issuerIsActive
+        />,
+        {
+          preloadedState: {
+            userState: {
+              user: d.user,
+            },
+          },
+        }
+      );
+      const contextMenuButton = getByTestId('contextMenuButton');
+      expect(contextMenuButton).toBeInTheDocument();
+      fireEvent.click(contextMenuButton);
+      const menuContext = getByTestId('menuContext');
+      expect(menuContext).toBeInTheDocument();
+      const buttonRotate = within(menuContext).queryByTestId('buttonRotate');
+      expect(buttonRotate).not.toBeInTheDocument();
+    }
+  );
+
+  it.each(testData)("render component - no rotate button if issuer isn't active ($case)", (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={d.keys}
+        data={data(d.enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive={false}
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).queryByTestId('buttonRotate');
+    expect(buttonRotate).not.toBeInTheDocument();
+  });
+
+  it("render component - no rotate button if the user doesn't own the key ('admin user')", () => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={{
+          total: testData[1].keys.total,
+          items: testData[1].keys.items.filter((key) => key.status !== VirtualKeyStatus.Blocked),
+        }}
+        data={data(testData[1].enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: { ...testData[1].user, fiscal_number: 'different_fiscal_number' },
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonRotate = within(menuContext).queryByTestId('buttonRotate');
+    expect(buttonRotate).not.toBeInTheDocument();
+  });
+
+  // Block button is shown only if the current key is not rotated and there is no blocked one
+  it.each(testData)('render component - block button ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={{
+          total: d.keys.total,
+          items: d.keys.items.filter((key) => key.status !== VirtualKeyStatus.Blocked),
+        }}
+        data={data(d.enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonBlock = within(menuContext).getByTestId('buttonBlock');
+    expect(buttonBlock).toBeInTheDocument();
+    expect(buttonBlock).toHaveTextContent('context-menu.block');
+    fireEvent.click(buttonBlock);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.BLOCK, d.enabledKey!.id);
+  });
+
+  it.each(testData)('render component - no block button if it is a rotated key ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={{
+          total: d.keys.total,
+          items: d.keys.items.filter((key) => key.status !== VirtualKeyStatus.Blocked),
+        }}
+        data={data(d.rotatedKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonBlock = within(menuContext).queryByTestId('buttonBlock');
+    expect(buttonBlock).not.toBeInTheDocument();
+  });
+
+  it.each(testData)(
+    'render component - no block button if there is already one blocked key ($case)',
+    (d) => {
+      const { getByTestId } = render(
+        <VirtualKeyContextMenu
+          keys={d.keys}
+          data={data(d.enabledKey!)}
+          handleModalClick={handleModalClickMk}
+          issuerIsActive
+        />,
+        {
+          preloadedState: {
+            userState: {
+              user: d.user,
+            },
+          },
+        }
+      );
+      const contextMenuButton = getByTestId('contextMenuButton');
+      expect(contextMenuButton).toBeInTheDocument();
+      fireEvent.click(contextMenuButton);
+      const menuContext = getByTestId('menuContext');
+      expect(menuContext).toBeInTheDocument();
+      const buttonBlock = within(menuContext).queryByTestId('buttonBlock');
+      expect(buttonBlock).not.toBeInTheDocument();
+    }
+  );
+
+  // View button is shown if the user is the owner of the key
+  it.each(testData)('render component - view button ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={d.keys}
+        data={data(d.enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonView = within(menuContext).getByTestId('buttonView');
+    expect(buttonView).toBeInTheDocument();
+    expect(buttonView).toHaveTextContent('context-menu.view');
+    fireEvent.click(buttonView);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.VIEW, d.enabledKey!.id);
+  });
+
+  it("render component - no view button if the user doesn't own the key ('admin user')", () => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={{
+          total: testData[1].keys.total,
+          items: testData[1].keys.items.filter((key) => key.status !== VirtualKeyStatus.Blocked),
+        }}
+        data={data(testData[1].enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: { ...testData[1].user, fiscal_number: 'different_fiscal_number' },
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonView = within(menuContext).queryByTestId('buttonView');
+    expect(buttonView).not.toBeInTheDocument();
+  });
+
+  // Delete button is shown only if the current key is not active
+  it.each(testData)('render component - delete button ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={virtualKeys}
+        data={data(d.notEnabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonDelete = within(menuContext).getByTestId('buttonDelete');
+    expect(buttonDelete).toBeInTheDocument();
+    expect(buttonDelete).toHaveTextContent('button.elimina');
+    fireEvent.click(buttonDelete);
+    expect(handleModalClickMk).toHaveBeenCalledTimes(1);
+    expect(handleModalClickMk).toHaveBeenCalledWith(ModalApiKeyView.DELETE, d.notEnabledKey!.id);
+  });
+
+  it.each(testData)('render component - no delete button if current key is active ($case)', (d) => {
+    const { getByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={virtualKeys}
+        data={data(d.enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: d.user,
+          },
+        },
+      }
+    );
+    const contextMenuButton = getByTestId('contextMenuButton');
+    expect(contextMenuButton).toBeInTheDocument();
+    fireEvent.click(contextMenuButton);
+    const menuContext = getByTestId('menuContext');
+    expect(menuContext).toBeInTheDocument();
+    const buttonDelete = within(menuContext).queryByTestId('buttonDelete');
+    expect(buttonDelete).not.toBeInTheDocument();
+  });
+
+  it('hide context menu if no action is available', () => {
+    const { queryByTestId } = render(
+      <VirtualKeyContextMenu
+        keys={testData[1].keys}
+        data={data(testData[1].enabledKey!)}
+        handleModalClick={handleModalClickMk}
+        issuerIsActive
+      />,
+      {
+        preloadedState: {
+          userState: {
+            user: { ...testData[1].user, fiscal_number: 'different_fiscal_number' },
+          },
+        },
+      }
+    );
+    const contextMenuButton = queryByTestId('contextMenuButton');
+    expect(contextMenuButton).not.toBeInTheDocument();
+  });
+});