From 4f050523f1e5a9f980a59fea1494bd6b10af9bff Mon Sep 17 00:00:00 2001
From: Shiva <148421597+shivasankaran18@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:10:33 +0530
Subject: [PATCH] refactor:vitest to MemberDetailScreen (#2662)

---
 jest.config.js                                |  4 ++-
 package-lock.json                             |  1 +
 .../OrganizationScreen.test.tsx               |  8 ++---
 ...rDetail.test.tsx => MemberDetail.spec.tsx} | 32 ++++++++++++-------
 4 files changed, 26 insertions(+), 19 deletions(-)
 rename src/screens/MemberDetail/{MemberDetail.test.tsx => MemberDetail.spec.tsx} (95%)

diff --git a/jest.config.js b/jest.config.js
index 3083bcda4f..a3c6bbecbf 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -10,7 +10,8 @@ export default {
     '!**/index.{js,ts}',
     '!**/*.d.ts',
     '!src/test/**',
-    '!vitest.config.ts',],
+    '!vitest.config.ts',
+  ],
   // setupFiles: ['react-app-polyfill/jsdom'],
   setupFiles: ['whatwg-fetch'],
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
@@ -42,6 +43,7 @@ export default {
     '\\.svg\\?react$': '<rootDir>/scripts/__mocks__/fileMock.js',
     '\\.svg$': '<rootDir>/scripts/__mocks__/fileMock.js',
     '^@pdfme/generator$': '<rootDir>/scripts/__mocks__/@pdfme/generator.ts',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   moduleFileExtensions: [
     'web.js',
diff --git a/package-lock.json b/package-lock.json
index 2404c03835..f07c9e0e22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11375,6 +11375,7 @@
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
       "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "harmony-reflect": "^1.4.6"
       },
diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
index cd039cc3ca..6293562a5a 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
@@ -79,17 +79,13 @@ describe('Testing OrganizationScreen', () => {
 
     const closeButton = screen.getByTestId('closeMenu');
     fireEvent.click(closeButton);
-
-    // Check for contract class after closing
-    expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8');
+    expect(screen.getByTestId('mainpageright')).toHaveClass(styles.expand);
 
     const openButton = screen.getByTestId('openMenu');
     fireEvent.click(openButton);
 
     // Check for expand class after opening
-    expect(screen.getByTestId('mainpageright')).toHaveClass(
-      '_contract_ccl5z_61',
-    );
+    expect(screen.getByTestId('mainpageright')).toHaveClass(styles.contract);
   });
 
   test('handles window resize', () => {
diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.spec.tsx
similarity index 95%
rename from src/screens/MemberDetail/MemberDetail.test.tsx
rename to src/screens/MemberDetail/MemberDetail.spec.tsx
index b0514701f5..4c1a68369f 100644
--- a/src/screens/MemberDetail/MemberDetail.test.tsx
+++ b/src/screens/MemberDetail/MemberDetail.spec.tsx
@@ -21,6 +21,7 @@ import MemberDetail, { getLanguageName, prettyDate } from './MemberDetail';
 import { MOCKS1, MOCKS2, MOCKS3 } from './MemberDetailMocks';
 import type { ApolloLink } from '@apollo/client';
 import { toast } from 'react-toastify';
+import { vi } from 'vitest';
 
 const link1 = new StaticMockLink(MOCKS1, true);
 const link2 = new StaticMockLink(MOCKS2, true);
@@ -44,21 +45,28 @@ const translations = {
   ),
 };
 
-jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+vi.mock('@mui/x-date-pickers/DateTimePicker', async () => {
+  const actual = await vi.importActual(
+    '@mui/x-date-pickers/DesktopDateTimePicker',
+  );
   return {
-    DateTimePicker: jest.requireActual(
-      '@mui/x-date-pickers/DesktopDateTimePicker',
-    ).DesktopDateTimePicker,
+    DateTimePicker: actual.DesktopDateTimePicker,
   };
 });
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
+vi.mock('@dicebear/core', () => ({
+  createAvatar: vi.fn(() => ({
+    toDataUri: vi.fn(() => 'mocked-data-uri'),
+  })),
+}));
+
 const props = {
   id: 'rishav-jha-mech',
 };
@@ -87,10 +95,10 @@ const renderMemberDetailScreen = (link: ApolloLink): RenderResult => {
 };
 
 describe('MemberDetail', () => {
-  global.alert = jest.fn();
+  global.alert = vi.fn();
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     cleanup();
   });
 
@@ -115,7 +123,7 @@ describe('MemberDetail', () => {
 
   test('prettyDate function should work properly', () => {
     // If the date is provided
-    const datePretty = jest.fn(prettyDate);
+    const datePretty = vi.fn(prettyDate);
     expect(datePretty('2023-02-18T09:22:27.969Z')).toBe(
       prettyDate('2023-02-18T09:22:27.969Z'),
     );
@@ -124,7 +132,7 @@ describe('MemberDetail', () => {
   });
 
   test('getLanguageName function should work properly', () => {
-    const getLangName = jest.fn(getLanguageName);
+    const getLangName = vi.fn(getLanguageName);
     // If the language code is provided
     expect(getLangName('en')).toBe('English');
     // If the language code is not provided
@@ -229,7 +237,7 @@ describe('MemberDetail', () => {
 
     expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
 
-    const dicebearUrl = `mocked-data-uri`;
+    const dicebearUrl = 'mocked-data-uri';
 
     const userImage = await screen.findByTestId('userImageAbsent');
     expect(userImage).toBeInTheDocument();