add marketplace testing

Author: martins5225

__tests__/marketplace.test.tsx

@@ -3,20 +3,30 @@ import '@testing-library/jest-dom/extend-expect';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import MarketplaceCard from '../app/src/components/marketplace/MarketplaceCard';
+import MarketplaceCardContainer from '../app/src/components/marketplace/MarketplaceCardContainer';
 import { Provider } from 'react-redux';
 import React from 'react';
+import SearchBar from '../app/src/components/marketplace/Searchbar';
 import axios from 'axios';
 import store from '../app/src/redux/store';
 
 // Mocking the axios module to avoid actual network calls
 jest.mock('axios');
 
-describe('MarketplaceCard', () => {
+describe('MarketplaceCard Render Test', () => {
   const mockProject = {
     _id: 123,
     name: 'Sample Project',
-    username: 'user123'
-    // ... other properties as needed
+    username: 'user123',
+    forked: 'false',
+    comments: [],
+    createdAt: new Date(),
+    likes: 0,
+    project: {
+      id: 'sample-project-id'
+    },
+    published: true,
+    userId: 123456
   };
 
   it('displays project name and username', () => {
@@ -29,9 +39,6 @@ describe('MarketplaceCard', () => {
     expect(screen.getByText('Sample Project')).toBeInTheDocument();
     expect(screen.getByText('user123')).toBeInTheDocument();
   });
-
-  // You can also test handleClone and handleCloneOpen functionalities
-  // e.g. using mock implementations for axios.get, dispatch, history.push, etc.
 });
 
 describe('MarketplaceContainer', () => {
@@ -40,32 +47,86 @@ describe('MarketplaceContainer', () => {
       _id: 1,
       name: 'Project 1',
       username: 'user1'
-      // ... other properties
     },
     {
       _id: 2,
       name: 'Project 2',
       username: 'user2'
-      // ... other properties
     }
   ];
 
   beforeEach(() => {
     // Set up mock axios call for every test
-    axios.get.mockResolvedValue({ data: mockProjects });
+    axios.get = jest.fn().mockResolvedValue({ data: mockProjects });
   });
 
-  it('fetches and displays projects', async () => {
-    render(<MarketplaceCard proj={undefined} />);
-
-    // Wait for the async axios call to complete and state to update
-    const project1 = await screen.findByText('Project 1');
-    const project2 = await screen.findByText('Project 2');
+  it('renders multiple MarketplaceCards', () => {
+    render(
+      <Provider store={store}>
+        <MarketplaceCardContainer displayProjects={mockProjects} />
+      </Provider>
+    );
 
-    expect(project1).toBeInTheDocument();
-    expect(project2).toBeInTheDocument();
+    expect(screen.getByText('Project 1')).toBeInTheDocument();
+    expect(screen.getByText('user1')).toBeInTheDocument();
+    expect(screen.getByText('Project 2')).toBeInTheDocument();
+    expect(screen.getByText('user2')).toBeInTheDocument();
   });
 
   // Additional tests can include: testing search bar functionality,
   // loading states, and no results found message.
 });
+
+const mockProjects = [
+  {
+    name: 'Sample Project',
+    username: 'user123'
+  },
+  {
+    name: 'Test Project',
+    username: 'user_test'
+  },
+  {
+    name: 'Hello Project',
+    username: 'hello_user'
+  }
+];
+
+describe('SearchBar Component', () => {
+  it('updates the text field value on change', () => {
+    const updateDisplayProjects = jest.fn();
+
+    render(
+      <SearchBar
+        marketplaceProjects={mockProjects}
+        updateDisplayProjects={updateDisplayProjects}
+      />
+    );
+
+    const textField = screen.getByLabelText('Search') as HTMLInputElement;
+    fireEvent.change(textField, { target: { value: 'Sample' } });
+
+    expect(textField.value).toBe('Sample');
+  });
+
+  it('filters projects by username', () => {
+    const updateDisplayProjects = jest.fn();
+
+    render(
+      <SearchBar
+        marketplaceProjects={mockProjects}
+        updateDisplayProjects={updateDisplayProjects}
+      />
+    );
+
+    const textField = screen.getByLabelText('Search');
+    fireEvent.change(textField, { target: { value: 'test' } });
+
+    // Using setImmediate to wait for useEffect to execute.
+    setTimeout(() => {
+      expect(updateDisplayProjects).toHaveBeenCalledWith([
+        { name: 'Test Project', username: 'user_test' }
+      ]);
+    });
+  });
+});

app/src/components/marketplace/MarketplaceCard.tsx

@@ -12,52 +12,63 @@ import {
   Typography,
   styled
 } from '@mui/material';
+import React, { useEffect } from 'react';
+import {
+  openProject,
+  resetAllState
+} from '../../redux/reducers/slice/appStateSlice';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { MoreVert } from '@mui/icons-material';
-import React, { useEffect } from 'react';
+import { RootState } from '../../redux/store';
+import axios from 'axios';
 import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
-import axios from 'axios';
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../redux/store';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import { useHistory } from 'react-router-dom';
-import { openProject, resetAllState } from '../../redux/reducers/slice/appStateSlice';
 
 interface Project {
-  forked: String,
-  comments: string[]
-  createdAt: Date
-  likes: number
-  name: string
-  project: object
-  published: boolean
-  userId: number
-  username: string
-  _id: number
+  forked: String;
+  comments: string[];
+  createdAt: Date;
+  likes: number;
+  name: string;
+  project: object;
+  published: boolean;
+  userId: number;
+  username: string;
+  _id: number;
 }
 
 const ITEM_HEIGHT = 48;
-const MarketplaceCard = ({proj} :{proj: Project}) => {
+const MarketplaceCard = ({ proj }: { proj: Project }) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
-  const state = useSelector((store:RootState) => store.appState);
+  const state = useSelector((store: RootState) => store.appState);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClone = async () => { // creates a copy of the project 
+  const handleClone = async () => {
+    // creates a copy of the project
     const docId = proj._id;
-    const response = await axios.get(`/cloneProject/${docId}`, { params: { username: window.localStorage.getItem('username') } });//passing in username as a query param is query params
+    const response = await axios.get(`/cloneProject/${docId}`, {
+      params: { username: window.localStorage.getItem('username') }
+    }); //passing in username as a query param is query params
     const project = response.data;
-    console.log('handleClone project', response.data)
+    console.log('handleClone project', response.data);
     alert('Project cloned!');
     setAnchorEl(null);
-    return {_id: project._id, name: project.name, published: project.published, ...project.project};
+    return {
+      _id: project._id,
+      name: project.name,
+      published: project.published,
+      ...project.project
+    };
   };
-  
-  const handleCloneOpen = async() => {
+
+  const handleCloneOpen = async () => {
     const project = await handleClone();
     history.push('/');
     dispatch(openProject(project));
@@ -66,9 +77,6 @@ const MarketplaceCard = ({proj} :{proj: Project}) => {
     setAnchorEl(null);
   };
 
-
-
-
   return (
     <>
       <Card

app/src/components/marketplace/MarketplaceCardContainer.tsx

@@ -3,10 +3,7 @@ import { Container, Grid } from '@mui/material';
 import MarketplaceCard from './MarketplaceCard';
 import React from 'react';
 
-
-const MarketplaceCardContainer = ({displayProjects}) => {
-
-
+const MarketplaceCardContainer = ({ displayProjects }) => {
   return (
     <>
       <Container>
@@ -17,9 +14,8 @@ const MarketplaceCardContainer = ({displayProjects}) => {
           columns={{ xs: 4, sm: 8, md: 12 }}
         >
           {displayProjects.map((proj, i) => (
-
-            <Grid item xs={4} sm={4} md={4} key={i}>
-              <MarketplaceCard proj={proj}/>
+            <Grid item xs={4} sm={4} md={4} key={proj._id}>
+              <MarketplaceCard proj={proj} />
             </Grid>
           ))}
         </Grid>

app/src/interfaces/Interfaces.ts

@@ -113,9 +113,9 @@ export interface AddRoutes {
 }
 
 export interface ManageSeparators {
-  mergeSeparator: (arg1:ChildElement[], arg2?:number) => any;  // update specificity
+  mergeSeparator: (arg1: ChildElement[], arg2?: number) => any; // update specificity
   handleSeparators: (arg1: ChildElement[], arg2?: string) => number;
-  nextTopSeparatorId: number
+  nextTopSeparatorId: number;
 }
 
 export interface StateUsed {
@@ -133,15 +133,24 @@ export interface Attributes {
 }
 
 // interface PublishResponse {
-//   success: boolean; 
+//   success: boolean;
 //   error?: string;
 // }
 
-
 export interface Arrow {
   renderArrow: (id: number) => any;
   deleteLines: () => void;
-  lineDraw: (x1:number, y1:number,x2:number,y2:number) => void;
-  createHeadElement:(x:number, y:number,length:number,angle:number) => HTMLDivElement;
-  createLineElement: (x:number, y:number,length:number,angle:number) => HTMLDivElement;
-}
+  lineDraw: (x1: number, y1: number, x2: number, y2: number) => void;
+  createHeadElement: (
+    x: number,
+    y: number,
+    length: number,
+    angle: number
+  ) => HTMLDivElement;
+  createLineElement: (
+    x: number,
+    y: number,
+    length: number,
+    angle: number
+  ) => HTMLDivElement;
+}

app/src/interfaces/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.gif';

app/src/interfaces/global.ts

@@ -4,4 +4,5 @@ declare global {
     api: any;
   }
 }
+
 let api = window.api;

tsconfig.json

@@ -17,5 +17,9 @@
     "noEmitOnError": false
   },
   // only compile ts files in this directory
-  "include": ["app/src/**/*","server/**/*"],
+  "include": [
+    "app/src/**/*",
+    "app/src/interfaces/declarations.d.ts",
+    "server/**/*"
+  ]
 }