Merge pull request #41 from oslabs-beta/Ahnafkhvn/testing

Added more testing coverage on Navbar

Author: dentonwong

__tests__/NavBar.test.tsx

@@ -4,13 +4,50 @@ import '@testing-library/jest-dom/extend-expect';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import NavBar from '../app/src/components/top/NavBar';
-import navbarDropDown from '../app/src/components/top/navbarDropDown'
+import navBarButtons from '../app/src/components/top/NavBarButtons';
 import * as projectFunctions from '../app/src/helperFunctions/projectGetSaveDel';
 import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from '../app/src/redux/reducers/rootReducer';
 import { initialState as appStateInitialState } from '../app/src/redux/reducers/slice/appStateSlice';
 
+
+
+// Mock the non-serializable HTMLTypes
+const mockHTMLTypes = [
+  {
+    id: 11,
+    tag: 'div',
+    name: 'Div',
+    style: {},
+    placeHolderShort: 'div',
+    placeHolderLong: '',
+    framework: 'reactClassic',
+    nestable: true,
+  },
+  {
+    id: 1000,
+    tag: 'separator',
+    name: 'separator',
+    style: { border: 'none' },
+    placeHolderShort: '',
+    placeHolderLong: '',
+    framework: '',
+    nestable: true,
+  },
+  {
+    id: 1,
+    tag: 'img',
+    name: 'Img',
+    style: {},
+    placeHolderShort: 'image',
+    placeHolderLong: '',
+    framework: 'reactClassic',
+    nestable: false,
+  },
+];
+
+
 // Mocking the theme
 const theme = createTheme({
   spacing: (value) => `${value}px`,
@@ -36,9 +73,9 @@ jest.mock('file-saver', () => ({
 //   console.error = jest.fn();
 // });
 
-// afterAll(() => {
-//   console.error = originalError;
-// });
+afterAll(() => {
+  jest.resetAllMocks();
+});
 
 // Mocking the render
 const renderNavBar = (store) => {
@@ -69,6 +106,7 @@ describe('NavBar Component', () => {
           ...appStateInitialState,
           isLoggedIn: true,
           name: 'Mock Project Name',
+          HTMLTypes: mockHTMLTypes,
         },
       },
     });
@@ -98,6 +136,7 @@ describe('NavBar Component', () => {
           ...appStateInitialState,
           isLoggedIn: true,
           name: '', 
+          HTMLTypes: mockHTMLTypes,
         },
       },
     });
@@ -144,6 +183,7 @@ describe('NavBar Component', () => {
           ...appStateInitialState,
           isLoggedIn: true,
           name: 'Mock Project Name',
+          HTMLTypes: mockHTMLTypes,
         },
       },
     });
@@ -173,6 +213,7 @@ describe('NavBar Component', () => {
           ...appStateInitialState,
           isLoggedIn: true,
           name: 'Mock Project Name',
+          HTMLTypes: mockHTMLTypes,
         },
       },
     });
@@ -187,43 +228,65 @@ describe('NavBar Component', () => {
     const exportButton = getByText('< > Export');
     fireEvent.click(exportButton);
 
-
+    // Check if the modal for export options is displayed
     await waitFor(() => {
       const exportModal = getByText('Click to download in zip file:');
       expect(exportModal).toBeInTheDocument();
     });
 
-
+    // Simulate clicking the export components 
     const exportComponentsOption = getByText('Export components');
     fireEvent.click(exportComponentsOption);
 
   });
 
-
-
-xit('handles dropdown menu correctly', () => {
-  const store = configureStore({
-    reducer: rootReducer,
-    preloadedState: {
-      appState: {
-        ...appStateInitialState,
-        isLoggedIn: true,
-        name: 'Mock Project Name',
+  test('handles dropdown menu correctly', async () => {
+    const store = configureStore({
+      reducer: rootReducer,
+      preloadedState: {
+        appState: {
+          ...appStateInitialState,
+        },
       },
-    },
-  });
-
-  const { getByTestId } = renderNavBar(store);
-  const moreVertButton = getByTestId('more-vert-button');
-
- 
-  expect(moreVertButton).toBeInTheDocument();
-
-
-  fireEvent.click(moreVertButton);
-
-
-});
-
+    });
 
-});
+    // Render component
+    const { getByTestId, getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ThemeProvider theme={theme}>
+            <NavBar />
+          </ThemeProvider>
+        </MemoryRouter>
+      </Provider>
+    );
+  
+    // Initially, the dropdown should have the "hideNavDropDown" class
+    const dropdownMenu = getByTestId('navDropDown');
+    expect(dropdownMenu).toHaveClass('hideNavDropDown');
+  
+    // Find and click the button to open the dropdown
+    const moreVertButton = getByTestId('more-vert-button');
+    fireEvent.click(moreVertButton);
+  
+    // After clicking, the dropdown should have the "navDropDown" class
+    expect(dropdownMenu).toHaveClass('navDropDown');
+  
+  
+    //clear canvas click
+    const clearCanvasMenuItem = getByText('Clear Canvas');
+    fireEvent.click(clearCanvasMenuItem);
+    expect(dropdownMenu).toHaveClass('navDropDown');
+  
+    // After clicking "Marketplace", it should remain open
+    const marketplaceMenuItem = getByText('Marketplace');
+    fireEvent.click(marketplaceMenuItem);
+    expect(dropdownMenu).toHaveClass('navDropDown');
+  
+    // Close the dropdown by clicking the button again
+    fireEvent.click(moreVertButton);
+  
+    // After closing, the dropdown should have the "hideNavDropDown" class
+    expect(dropdownMenu).toHaveClass('hideNavDropDown');
+  });
+});

app/src/components/top/NavBar.tsx

@@ -175,7 +175,7 @@ const NavBar = () => {
           onClick={() => setDropMenu(!dropMenu)}
           ref={menuButtonRef}
         >
-          <MoreVertIcon style={{ color: 'white' }} />
+          <MoreVertIcon style={{ color: 'white' }} data-testid="more-vert-button" />
         </Button>
         <NavBarButtons
           dropMenu={dropMenu}

app/src/components/top/NavBarButtons.tsx

@@ -332,7 +332,7 @@ function navbarDropDown(props) {
 
   return (
     // <div ref={dropdownRef} className={showMenu}> dropdownRef making the menu fly off and anchorel messingup
-    <div ref={ref} className={showMenu}>
+    <div data-testid="navDropDown" ref={ref} className={showMenu}>
       <Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
         <button>
           Tutorial

package.json

@@ -259,6 +259,12 @@
       "__tests__/spec.ts",
       "__tests__/projects.test.ts"
     ],
+    "coveragePathIgnorePatterns": [
+      "server/graphQL"
+    ],
+    "testPathIgnorePatterns": [
+      "server/graphQL"
+    ],
     "transform": {
       "\\.(ts|tsx)$": "ts-jest",
       "^.+\\.js?$": "babel-jest"