Merge branch 'EBE-563-modify-doc-page' of https://github.com/pagopa/idpay-portal-merchants-frontend into EBE-563-modify-doc-page

Author: Mario De Fazio

src/api/MerchantsApiClient.ts

@@ -241,11 +241,15 @@ export const MerchantApi = {
   },
 
   getRewardBatches: async (
-    initiativeId: string
+    initiativeId: string,
+    page: number,
+    size: number
   ): Promise<RewardBatchListDTO> => {
      try {
     const result = await apiClient.getRewardBatches({
-      initiativeId
+      initiativeId,
+      page,
+      size
     });
 
     return extractResponse(result, 200, onRedirectToLogin);

src/components/Drawer/__tests__/DetailDrawer.test.tsx

@@ -10,11 +10,14 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
 
 describe('DetailDrawer', () => {
   const defaultProps = {
-    open: true,
-    toggleDrawer: mockToggleDrawer,
+    isOpen: true,
+    setIsOpen: mockToggleDrawer,
     children: <div data-testid="drawer-content">Contenuto di Test</div>,
+    title: "Titolo"
   };
 
+  const buttons = [{title: "button", dataTestId: "button-test-id"}]
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -29,16 +32,18 @@ describe('DetailDrawer', () => {
     const drawer = screen.getByTestId('detail-drawer');
     expect(drawer).toBeInTheDocument();
     expect(screen.getByText('Contenuto di Test')).toBeInTheDocument();
+    expect(screen.getByText('Titolo')).toBeInTheDocument();
   });
 
   it('should not render the content when open prop is false', () => {
     render(
       <Wrapper>
-        <DetailDrawer {...defaultProps} open={false} />
+        <DetailDrawer {...defaultProps} isOpen={false} />
       </Wrapper>
     );
 
     expect(screen.queryByText('Contenuto di Test')).not.toBeInTheDocument();
+    expect(screen.queryByTestId("buttons-box")).not.toBeInTheDocument();
   });
 
   it('should call toggleDrawer(false) when the CloseIcon button is clicked', () => {
@@ -48,25 +53,30 @@ describe('DetailDrawer', () => {
       </Wrapper>
     );
 
-    const closeButton = screen.getByTestId('open-detail-button');
+    const closeButton = screen.getByTestId('close-button');
     fireEvent.click(closeButton);
 
     expect(mockToggleDrawer).toHaveBeenCalledTimes(1);
-    expect(mockToggleDrawer).toHaveBeenCalledWith(false);
   });
 
-  it('should call toggleDrawer(false) when the drawer is closed via background click (onClose event)', () => {
+  it('should render buttons', () => {
     render(
       <Wrapper>
-        <DetailDrawer {...defaultProps} />
+        <DetailDrawer {...defaultProps} buttons={buttons} />
       </Wrapper>
     );
 
-    const drawer = screen.getByTestId('detail-drawer');
+    expect(screen.getByTestId("buttons-box")).toBeInTheDocument();
+    expect(screen.getByTestId("button-test-id")).toBeInTheDocument();
+  });
 
-    fireEvent.keyDown(drawer, { key: 'Escape' });
+  it('should not render buttons when is an empty array', () => {
+    render(
+      <Wrapper>
+        <DetailDrawer {...defaultProps} buttons={[]} />
+      </Wrapper>
+    );
 
-    expect(mockToggleDrawer).toHaveBeenCalledTimes(1);
-    expect(mockToggleDrawer).toHaveBeenCalledWith(false);
+    expect(screen.queryByTestId("buttons-box")).not.toBeInTheDocument();
   });
 });

src/components/Transactions/TransactionDetail.tsx

@@ -76,14 +76,8 @@ export default function TransactionDetail({ itemValues, listItem, ...rest }: Pro
         text: 'Non è stato possibile scaricare il file',
         isOpen: true,
         severity: 'error',
-        containerStyle: {
-          height: 'fit-content',
-          position: 'fixed',
-          bottom: '20px',
-          right: '20px',
-          zIndex: '1300',
-        },
-        contentStyle: { position: 'unset', bottom: '0', right: '0' },
+        containerStyle: { height: 'fit-content', position: 'fixed', bottom: '20px', right: '20px', zIndex: '1300' },
+        contentStyle: { position: 'unset', bottom: '0', right: '0' }
       });
       setIsLoading(false);
     }

src/components/Transactions/__tests__/MerchantTransactions.test.tsx

@@ -7,14 +7,12 @@ import MerchantTransactions from '../MerchantTransactions';
 import { PointOfSaleTransactionProcessedDTO } from '../../../api/generated/merchants/PointOfSaleTransactionProcessedDTO';
 import getStatus from '../useStatus';
 import CustomChip from '../../Chip/CustomChip';
-import TransactionDataTable from '../TransactionDataTable';
 
 jest.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 
 const mockSetAlert = jest.fn();
-
 jest.mock('../../../hooks/useAlert', () => ({
   useAlert: () => ({
     alert: { isOpen: false },
@@ -24,6 +22,7 @@ jest.mock('../../../hooks/useAlert', () => ({
 
 jest.mock('../useStatus', () => jest.fn());
 jest.mock('../useDetailList', () => () => []);
+
 jest.mock('../../Chip/CustomChip', () => {
   return jest.fn((props: any) => (
     <div data-testid="custom-chip">{props.label}</div>
@@ -40,61 +39,64 @@ jest.mock('@mui/material', () => ({
 }));
 
 jest.mock('../CurrencyColumn', () => (props: any) => <div>{props.value}</div>);
+
 jest.mock('../../../pages/components/EmptyList', () => (props: any) => (
   <div data-testid="empty-list">{props.message}</div>
 ));
-jest.mock('../TransactionDetail', () => (props: any) => (
-  <div data-testid="transaction-detail">{props.title}</div>
-));
-jest.mock(
-  '../TransactionDataTable',
-  () =>
-    ({ handleRowAction, onSortModelChange, onPaginationPageChange, rows }: any) =>
-      (
-        <div data-testid="transaction-data-table">
-          <button onClick={() => handleRowAction(rows[0])}>Row Action</button>
-          <button onClick={() => onSortModelChange([{ field: 'updateDate', sort: 'desc' }])}>
-            Sort Action
-          </button>
-          <button onClick={() => onPaginationPageChange(2)}>Pagination Action</button>
-        </div>
-      )
+
+jest.mock('../TransactionDataTable', () =>
+  (props: any) => (
+    <div data-testid="transaction-data-table">
+      <button onClick={() => props.onSortModelChange([{ field: 'updateDate', sort: 'desc' }])}>
+        Sort Action
+      </button>
+      <button onClick={() => props.onPaginationPageChange(2)}>Pagination Action</button>
+      <button onClick={() => props.handleRowAction(props.rows[0])}>Row Action</button>
+      {props.columns.map((col: any) => {
+        return (
+          <div key={col.field} data-testid={`col-${col.field}`}>
+            {col.valueGetter ? props?.rows[0]?.additionalProperties?.productName : props?.rows[0]?.[col.field]}
+          </div>
+        );
+      })}
+    </div>
+  )
 );
+
 jest.mock(
-  '../../Drawer/DetailDrawer',
+  '../TransactionDetail',
   () =>
-    ({ open, toggleDrawer, children }: any) =>
-      open ? (
+    ({ isOpen, setIsOpen, children }: any) =>
+      isOpen && (
         <div data-testid="detail-drawer">
           {children}
-          <button onClick={() => toggleDrawer(false)}>Close Drawer</button>
+          <button data-testid="close-button" onClick={() => setIsOpen(false)}>Close Drawer</button>
         </div>
-      ) : null
+      )
 );
 
 const MockedCustomChip = CustomChip as jest.Mock;
-const MockedTransactionDataTable = TransactionDataTable as jest.Mock;
 const mockedGetStatus = getStatus as jest.Mock;
 const MockedTooltip = Tooltip as jest.Mock;
 
-const mockTransactions: Array<PointOfSaleTransactionProcessedDTO> = [
-  {
-    trxId: '1',
-    updateDate: '2025-10-06T10:00:00Z',
-    fiscalCode: 'AAAAAA00A00A000A',
-    effectiveAmountCents: 5000,
-    rewardAmountCents: 500,
-    status: 'REWARDED',
-    additionalProperties: { productName: 'Frigorifero' },
-  },
-];
-
 describe('MerchantTransactions', () => {
   const handleFiltersApplied = jest.fn();
   const handleFiltersReset = jest.fn();
   const handleSortChange = jest.fn();
   const handlePaginationPageChange = jest.fn();
 
+  const mockTransactions: any = [
+    {
+      trxId: '1',
+      updateDate: '2025-10-06T10:00:00Z',
+      fiscalCode: 'AAAAAA00A00A000A',
+      effectiveAmountCents: 5000,
+      rewardAmountCents: 500,
+      status: 'REWARDED',
+      additionalProperties: { productName: 'Frigorifero' },
+    }
+  ]
+
   beforeEach(() => {
     jest.clearAllMocks();
     mockedGetStatus.mockImplementation((status) => ({ label: status, color: 'green', textColor: 'white' }));
@@ -105,10 +107,14 @@ describe('MerchantTransactions', () => {
       <MerchantTransactions
         transactions={mockTransactions}
         handleFiltersApplied={handleFiltersApplied}
-        handleFiltersReset={handleFiltersReset}
-      />
+        handleFiltersReset={handleFiltersReset} />
     );
     expect(screen.getByTestId('transaction-data-table')).toBeInTheDocument();
+    expect(screen.getByText('Frigorifero')).toBeInTheDocument();
+    expect(screen.getByText('AAAAAA00A00A000A')).toBeInTheDocument();
+    expect(screen.getByText('5000')).toBeInTheDocument();
+    expect(screen.getByText('500')).toBeInTheDocument();
+    expect(screen.getByText('REWARDED')).toBeInTheDocument();
     expect(screen.queryByTestId('empty-list')).not.toBeInTheDocument();
   });
 
@@ -262,7 +268,7 @@ describe('MerchantTransactions', () => {
     const rowButton = screen.getByRole('button', { name: 'Row Action' });
     await userEvent.click(rowButton);
 
-    expect(screen.getByTestId('detail-drawer')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByTestId('detail-drawer')).toBeInTheDocument());
   });
 
   it('closes drawer when toggle is called', async () => {
@@ -276,9 +282,9 @@ describe('MerchantTransactions', () => {
 
     const rowButton = screen.getByRole('button', { name: 'Row Action' });
     await userEvent.click(rowButton);
-    expect(screen.getByTestId('detail-drawer')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByTestId('detail-drawer')).toBeInTheDocument());
 
-    const closeButton = screen.getByRole('button', { name: 'Close Drawer' });
+    const closeButton = screen.getByTestId('close-button');
     await userEvent.click(closeButton);
     expect(screen.queryByTestId('detail-drawer')).not.toBeInTheDocument();
   });
@@ -295,7 +301,8 @@ describe('MerchantTransactions', () => {
     const rowButton = screen.getByRole('button', { name: 'Row Action' });
     await userEvent.click(rowButton);
 
-    const closeButton = screen.getByRole('button', { name: 'Close Drawer' });
+    await waitFor(() => expect(screen.getByTestId('detail-drawer')).toBeInTheDocument());
+    const closeButton = screen.getByTestId('close-button');
     await userEvent.click(closeButton);
 
     await waitFor(() => {
@@ -632,7 +639,7 @@ describe('MerchantTransactions', () => {
     const rowButton = screen.getByRole('button', { name: 'Row Action' });
     await userEvent.click(rowButton);
 
-    expect(screen.getByTestId('transaction-detail')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByTestId('detail-drawer')).toBeInTheDocument());
   });
 
   it('passes correct props to transaction data table', () => {
@@ -745,6 +752,7 @@ describe('MerchantTransactions', () => {
   });
 
   it('does not call handleFiltersReset when callback is undefined', async () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
     render(
       <MerchantTransactions
         transactions={mockTransactions}
@@ -759,11 +767,15 @@ describe('MerchantTransactions', () => {
       await userEvent.type(fiscalCodeInput, 'test');
       await userEvent.click(applyButton);
     });
+    expect(consoleSpy).toHaveBeenCalled()
 
     await waitFor(() => {
       const resetButton = screen.getByRole('button', { name: 'commons.removeFiltersBtn' });
       expect(resetButton).toBeInTheDocument();
+      userEvent.click(resetButton)
     });
+    expect(consoleSpy).toHaveBeenCalled()
+    consoleSpy.mockRestore();
   });
 
   it('does not call handleSortChange when callback is undefined', async () => {
@@ -863,7 +875,6 @@ describe('MerchantTransactions', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('detail-drawer')).toBeInTheDocument();
-      expect(screen.getByTestId('transaction-detail')).toBeInTheDocument();
     });
   });
 
@@ -939,7 +950,7 @@ describe('MerchantTransactions', () => {
     render(<MerchantTransactions
       transactions={mockTransactions}
       handleFiltersApplied={handleFiltersApplied}
-      handleFiltersReset={handleFiltersReset} sortModel={[]}    />);
+      handleFiltersReset={handleFiltersReset} sortModel={[]} />);
 
     const applyButton = screen.getByRole('button', { name: 'commons.filterBtn' });
     fireEvent.click(applyButton);
@@ -956,7 +967,8 @@ describe('MerchantTransactions', () => {
     />);
 
     await userEvent.click(screen.getByRole('button', { name: 'Row Action' }));
-    await userEvent.click(screen.getByRole('button', { name: 'Close Drawer' }));
+    await waitFor(() => expect(screen.getByTestId('detail-drawer')).toBeInTheDocument());
+    await userEvent.click(screen.getByTestId('close-button'));
 
     await waitFor(() => {
       expect(mockSetAlert).toHaveBeenCalledWith({ isOpen: false });