PN-12793 - Tests of Public keys

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';
 
@@ -25,7 +25,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',
@@ -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: 2,
+  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: 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,
+  },
+};

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>

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>
       );

packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/PublicKeys.tsx

@@ -102,6 +102,7 @@ const PublicKeys: React.FC = () => {
           mb: 3,
           mt: 5,
         }}
+        data-testid="publicKeys"
       >
         <Typography variant="h6" sx={{ mb: { xs: 3, lg: 0 } }}>
           {t('publicKeys.title')}

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;
 

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, within } from '../../../__test__/test-utils';
 import ApiKeyModal, { ApiKeyModalProps } from '../ApiKeyModal';
 
 const closeModalFn = vi.fn();
@@ -22,11 +22,43 @@ 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 = 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 = getByTestId('dialog');
+    expect(dialog).toHaveTextContent('mock-title');
+    const actionButton = within(dialog).getByTestId('action-modal-button');
+    fireEvent.click(actionButton);
+    expect(actionModalFn).toHaveBeenCalledTimes(1);
   });
 });

packages/pn-personagiuridica-webapp/src/components/IntegrazioneApi/__test__/ApiKeysDataSwitch.test.tsx

@@ -3,17 +3,11 @@ 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 { 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,
@@ -40,4 +34,83 @@ describe('Api Keys Data Switch', () => {
     const regexp = new RegExp(`^${data.name}$`, 'ig');
     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
+        handleModalClick={mockClick}
+        keys={publicKeys}
+        data={data}
+        menuType="publicKeys"
+        type="value"
+      />
+    );
+    const regexp = new RegExp(`^${data.value}$`, '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}
+        menuType="publicKeys"
+        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}
+        menuType="publicKeys"
+        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}
+        menuType="publicKeys"
+        type="menu"
+      />
+    );
+    const contextMenu = getByTestId('contextMenuButton');
+    expect(contextMenu).toBeInTheDocument();
+    fireEvent.click(contextMenu);
+    const viewGroupsId = getByTestId('buttonView');
+    expect(viewGroupsId).toBeInTheDocument();
+    fireEvent.click(viewGroupsId);
+    expect(mockClick).toHaveBeenCalledTimes(1);
+  });
 });