From fd445abef2ec4f3e0d794c0a8fa2b4093fd29c62 Mon Sep 17 00:00:00 2001
From: Michele Moio <michelemoiodev@gmail.com>
Date: Thu, 26 Sep 2024 11:07:11 +0200
Subject: [PATCH] feat: [P4PU-384] test and config refactoring

---
 .env.test                               |  1 +
 package.json                            |  4 +--
 src/routes/Dashboard/Dashboard.test.tsx | 33 ++++++++++++++-----------
 src/utils/converters.test.ts            |  2 +-
 vitest.config.mts                       | 12 ++++++---
 vitest.setup.mts                        |  3 +++
 6 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/.env.test b/.env.test
index c67089a..ba92ddf 100644
--- a/.env.test
+++ b/.env.test
@@ -11,3 +11,4 @@ VERSION="test"
 PAYMENT_RETURN_URL="http://localhost:1234"
 # Cause our webapp will served in a subpath of a domain
 DEPLOY_PATH="/pagamenti"
+TZ="utc"
diff --git a/package.json b/package.json
index bbe475f..bc3f532 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "type-check": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "yarn generate && storybook build",
-    "test": "TZ=UTC vitest --run",
-    "coverage": "vitest --coverage --run",
+    "test": "vitest",
+    "coverage": "vitest --coverage",
     "axe": "axe localhost:1234, localhost:1234/transactions, localhost:1234/transaction/1, localhost:1234/user,  --include '#root'",
     "serve-coverage-html-report": "npx serve coverage/lcov-report -c ./../../serve.json"
   },
diff --git a/src/routes/Dashboard/Dashboard.test.tsx b/src/routes/Dashboard/Dashboard.test.tsx
index f88f624..226c15f 100644
--- a/src/routes/Dashboard/Dashboard.test.tsx
+++ b/src/routes/Dashboard/Dashboard.test.tsx
@@ -3,7 +3,6 @@ import { fireEvent, render, waitFor, screen } from '@testing-library/react';
 import Dashboard from '.';
 import '@testing-library/jest-dom';
 import { useStore } from 'store/GlobalStore';
-import { useMediaQuery } from '@mui/material';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { useUserInfo } from 'hooks/useUserInfo';
@@ -13,6 +12,8 @@ import storage from 'utils/storage';
 import { Mock } from 'vitest';
 import { Signal } from '@preact/signals-react';
 import { i18nTestSetup } from '__tests__/i18nTestSetup';
+import { ThemeProvider } from '@mui/material';
+import { theme } from '@pagopa/mui-italia';
 
 i18nTestSetup({
   app: {
@@ -30,11 +31,6 @@ i18nTestSetup({
 vi.mock('utils/converters');
 vi.mock('utils/loaders');
 
-vi.mock('@mui/material', async (importActual) => ({
-  ...(await importActual()),
-  useMediaQuery: vi.fn()
-}));
-
 vi.mock('store/GlobalStore', () => ({
   useStore: vi.fn()
 }));
@@ -48,11 +44,9 @@ vi.mock('hooks/useUserInfo', () => ({
   useUserInfo: vi.fn()
 }));
 
-const queryClient = new QueryClient();
 describe('DashboardRoute', () => {
-  (useMediaQuery as Mock).mockReturnValue(false);
+  const queryClient = new QueryClient();
   const navigate = vi.fn();
-  (useNavigate as Mock).mockReturnValue(navigate);
   const setState = vi.fn();
   const mockTransactions = {
     transactions: [
@@ -66,13 +60,20 @@ describe('DashboardRoute', () => {
   ];
 
   const mockPrepareRowsData = vi.fn().mockReturnValue(preparedData);
-  converters.prepareRowsData = mockPrepareRowsData;
 
-  (loaders.getTransactions as Mock).mockReturnValue({
-    data: mockTransactions,
-    isError: false
+  beforeAll(() => {
+    vi.mocked(useNavigate).mockReturnValue(navigate);
+    converters.prepareRowsData = mockPrepareRowsData;
+
+    vi.mocked(loaders.getTransactions as Mock).mockReturnValue({
+      data: mockTransactions,
+      isError: false
+    });
+
+    Object.defineProperty(document.documentElement, 'lang', { value: 'it', configurable: true });
   });
-  Object.defineProperty(document.documentElement, 'lang', { value: 'it', configurable: true });
+
+  afterAll(() => {});
 
   beforeEach(() => {
     (useStore as Mock).mockReturnValue({ setState });
@@ -91,7 +92,9 @@ describe('DashboardRoute', () => {
   const DashboardWithState = () => {
     return (
       <QueryClientProvider client={queryClient}>
-        <Dashboard />
+        <ThemeProvider theme={theme}>
+          <Dashboard />
+        </ThemeProvider>
       </QueryClientProvider>
     );
   };
diff --git a/src/utils/converters.test.ts b/src/utils/converters.test.ts
index be360d0..9e0ae7d 100644
--- a/src/utils/converters.test.ts
+++ b/src/utils/converters.test.ts
@@ -158,7 +158,7 @@ describe('return a transactionDetail object', () => {
         transactionId: 'string',
         authCode: 'string',
         rrn: 'string',
-        transactionDate: 'string',
+        transactionDate: new Date().toISOString(),
         pspName: 'string',
         walletInfo: { accountHolder: 'string', brand: 'string', blurredNumber: 'string' },
         paymentMethod: 'BBT',
diff --git a/vitest.config.mts b/vitest.config.mts
index 80d5345..70ab59b 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -8,20 +8,24 @@ export default defineConfig({
     setupFiles: './vitest.setup.mts',
     environment: 'jsdom',
 		clearMocks: true,
+		watch: false,
+		silent: true,
     coverage: {
       provider: 'v8',
       reportOnFailure: true,
       exclude: [
         ...configDefaults.exclude,
-        '/node_modules/',
+				'**/*.test.ts?(x)',
+				'src/__tests__/',
         'src/stories/',
         'src/index.tsx',
         'src/App.tsx',
         'src/global.d.ts',
-        'src/components/Layout',
-        'src/utils/style'
+        'src/components/Layout.tsx',
+        'src/utils/style.tsx',
+        'src/models/',
       ],
-      include: ['**/*.test.ts?(x)'],
+      include: ['src/**/*.ts?(x)'],
       thresholds: {
         lines: 80,
         branches: 80
diff --git a/vitest.setup.mts b/vitest.setup.mts
index a1963e6..1c259b5 100644
--- a/vitest.setup.mts
+++ b/vitest.setup.mts
@@ -1,4 +1,7 @@
 import { vi } from 'vitest';
+import { i18nTestSetup } from './src/__tests__/i18nTestSetup';
+
+i18nTestSetup({});
 
 vi.mock('@preact/signals-react', () => {
   return {