fix for failing tests in member profile page

Real-Dev-Squad · Sep 10, 2023 · d523458 · d523458
1 parent fedc827
commit d523458
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 19 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -8,5 +8,6 @@ module.exports = {
     '^@store(.*)$': '<rootDir>/src/store$1',
     '^@helper-functions(.*)$': '<rootDir>/src/helper-functions$1',
     '^@constants(.*)$': '<rootDir>/src/constants$1',
+    '^@custom-hooks(.*)$': '<rootDir>/src/custom-hooks$1',
   },
 };
diff --git a/src/store/keyboard/context.js b/src/store/keyboard/context.js
@@ -2,16 +2,16 @@ import { createContext, useContext, useState } from 'react';
 
 const KeyboardContext = createContext();
 
-export const KeyboardProvider = ({ children }) => {
+export const KeyboardProvider = ({ children, initialValue }) => {
   const [isOptionKeyPressed, setIsOptionKeyPressed] = useState(false);
 
-  const initialValue = {
+  const value = {
     isOptionKeyPressed,
     setIsOptionKeyPressed,
   };
 
   return (
-    <KeyboardContext.Provider value={initialValue}>
+    <KeyboardContext.Provider value={initialValue || value}>
       {children}
     </KeyboardContext.Provider>
   );

diff --git a/src/test/unit/components/member-profile/index.test.js b/src/test/unit/components/member-profile/index.test.js
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import Profile from '@components/member-profile';
 import { TaskContextProvider } from '@store/tasks/tasks-context';
 import { UserContextProvider } from '@store/user/user-context';
+import { KeyboardProvider } from '@store/keyboard/context';
 
 const notaMember = {
   roles: {
@@ -20,24 +21,49 @@ const initialUserContext = {
   isSuperUser: true,
 };
 
+jest.mock('next/router', () => {
+  return {
+    useRouter: jest.fn().mockReturnValue({
+      query: {
+        dev: true,
+      },
+    }),
+  };
+});
+
 describe('Members Profile', () => {
-  it('Should render member status properly', () => {
+  it('Should render member status properly', async () => {
     render(
-      <UserContextProvider value={initialUserContext}>
-        <TaskContextProvider>
-          <Profile membersData={notaMember} />
-        </TaskContextProvider>
-      </UserContextProvider>
+      <KeyboardProvider
+        initialValue={{
+          isOptionKeyPressed: true,
+          setIsOptionKeyPressed: jest.fn(),
+        }}
+      >
+        <UserContextProvider value={initialUserContext}>
+          <TaskContextProvider>
+            <Profile membersData={notaMember} />
+          </TaskContextProvider>
+        </UserContextProvider>
+      </KeyboardProvider>
     );
 
     let memberStatus = screen.getByText('User is not a Member');
     expect(memberStatus).toBeInTheDocument();
+
     render(
-      <UserContextProvider value={initialUserContext}>
-        <TaskContextProvider>
-          <Profile membersData={isaMember} />
-        </TaskContextProvider>
-      </UserContextProvider>
+      <KeyboardProvider
+        initialValue={{
+          isOptionKeyPressed: true,
+          setIsOptionKeyPressed: jest.fn(),
+        }}
+      >
+        <UserContextProvider value={initialUserContext}>
+          <TaskContextProvider>
+            <Profile membersData={isaMember} />
+          </TaskContextProvider>
+        </UserContextProvider>
+      </KeyboardProvider>
     );
 
     memberStatus = screen.getByText('User is a Member');
@@ -46,11 +72,18 @@ describe('Members Profile', () => {
 
   it('Should render the info icon correctly', () => {
     render(
-      <UserContextProvider value={initialUserContext}>
-        <TaskContextProvider>
-          <Profile membersData={notaMember} />
-        </TaskContextProvider>
-      </UserContextProvider>
+      <KeyboardProvider
+        initialValue={{
+          isOptionKeyPressed: true,
+          setIsOptionKeyPressed: jest.fn(),
+        }}
+      >
+        <UserContextProvider value={initialUserContext}>
+          <TaskContextProvider>
+            <Profile membersData={notaMember} />
+          </TaskContextProvider>
+        </UserContextProvider>
+      </KeyboardProvider>
     );
 
     const icon = screen.getByAltText('info icon');