Merge branch 'dev' into Ahnafkhvn/testing

Author: AhnafKhvn

__tests__/BottomTabs.test.tsx

@@ -1,35 +1,37 @@
-import React from 'react';
-import { Provider } from 'react-redux';
 import '@testing-library/jest-dom';
+
 import {
+  fireEvent,
   render,
   screen,
-  fireEvent,
   waitFor,
   within
 } from '@testing-library/react';
+
 import BottomTabs from '../app/src/components/bottom/BottomTabs';
-import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
-import store from '../app/src/redux/store';
+import { BrowserRouter } from 'react-router-dom';
 import ComponentPanel from '../app/src/components/right/ComponentPanel';
-import HTMLPanel from '../app/src/components/left/HTMLPanel';
-import StateManager from '../app/src/components/StateManagement/StateManagement';
+import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
 import CustomizationPanel from '../app/src/containers/CustomizationPanel';
-import { BrowserRouter } from 'react-router-dom';
-import DragDropPanel from '../app/src/components/left/DragDropPanel';
-import MainContainer from '../app/src/containers/MainContainer';
 import { DndProvider } from 'react-dnd';
+import DragDropPanel from '../app/src/components/left/DragDropPanel';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import HTMLPanel from '../app/src/components/left/HTMLPanel';
+import MainContainer from '../app/src/containers/MainContainer';
+import { Provider } from 'react-redux';
+import React from 'react';
+import StateManager from '../app/src/components/StateManagement/StateManagement';
+import store from '../app/src/redux/store';
 
 describe('Bottom Panel Render Test', () => {
-  test('should render all seven tabs', () => {
+  test('should render all six tabs', () => {
     render(
       <Provider store={store}>
         <BottomTabs />
       </Provider>
     );
-    expect(screen.getAllByRole('tab')).toHaveLength(7);
-    expect(screen.getByText('Code Preview')).toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(6);
+    // expect(screen.getByText('Code Preview')).toBeInTheDocument();
     expect(screen.getByText('Component Tree')).toBeInTheDocument();
     expect(screen.getByText('Creation Panel')).toBeInTheDocument();
     expect(screen.getByText('Customization')).toBeInTheDocument();

__tests__/DragAndDrop.test.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
 import '@testing-library/jest-dom';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import { fireEvent, render, screen } from '@testing-library/react';
-import DragDropPanel from '../app/src/components/left/DragDropPanel';
+
 import ComponentDrag from '../app/src/components/left/ComponentDrag';
+import { DndProvider } from 'react-dnd';
+import DragDropPanel from '../app/src/components/left/DragDropPanel';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import MainContainer from '../app/src/containers/MainContainer';
 import { Provider } from 'react-redux';
+import React from 'react';
 import store from '../app/src/redux/store';
-import MainContainer from '../app/src/containers/MainContainer';
 import { within } from '@testing-library/react';
 
-
 function TestContext(component) {
   return (
     <Provider store={store}>
@@ -48,7 +49,7 @@ describe('Drag and Drop Side Panel', () => {
     expect(screen.getByText('LinkTo')).toBeInTheDocument();
   });
 
-  test('Should render Roots Components and Reusbale components', () => {
+  test.skip('Should render Roots Components and Reusbale components', () => {
     render(TestContext(<ComponentDrag />));
 
     expect(screen.getByText('Root Components')).toBeInTheDocument();

__tests__/marketplace.test.tsx

@@ -0,0 +1,133 @@
+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');
+jest.mock(
+  'resources/marketplace_images/marketplace_image.png',
+  () => 'mock-image-url'
+);
+
+describe('MarketplaceCard Render Test', () => {
+  const mockProject = {
+    _id: 123,
+    name: 'Sample Project',
+    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', () => {
+    render(
+      <Provider store={store}>
+        <MarketplaceCard proj={mockProject} />
+      </Provider>
+    );
+
+    expect(screen.getByText('Sample Project')).toBeInTheDocument();
+    expect(screen.getByText('user123')).toBeInTheDocument();
+  });
+});
+
+describe('MarketplaceContainer', () => {
+  const mockProjects = [
+    {
+      _id: 1,
+      name: 'Project 1',
+      username: 'user1'
+    },
+    {
+      _id: 2,
+      name: 'Project 2',
+      username: 'user2'
+    }
+  ];
+
+  beforeEach(() => {
+    // Set up mock axios call for every test
+    axios.get = jest.fn().mockResolvedValue({ data: mockProjects });
+  });
+
+  it('renders multiple MarketplaceCards', () => {
+    render(
+      <Provider store={store}>
+        <MarketplaceCardContainer displayProjects={mockProjects} />
+      </Provider>
+    );
+
+    expect(screen.getByText('Project 1')).toBeInTheDocument();
+    expect(screen.getByText('user1')).toBeInTheDocument();
+    expect(screen.getByText('Project 2')).toBeInTheDocument();
+    expect(screen.getByText('user2')).toBeInTheDocument();
+  });
+});
+
+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' }
+      ]);
+    });
+  });
+});

__tests__/projects.test.ts

@@ -11,7 +11,7 @@ const http = require('http')
 const {state, projectToSave } = mockData
 
 // save and get projects endpoint testing
-xdescribe('Project endpoints tests', () => {
+describe('Project endpoints tests', () => {
   let server;
   beforeAll((done) => {
     server = http.createServer(app);
@@ -22,7 +22,7 @@ xdescribe('Project endpoints tests', () => {
     server.close(done);
   });
   // test saveProject endpoint
-  xdescribe('/saveProject', () => {
+  describe('/saveProject', () => {
     describe('/POST', () => {
       it('responds with a status of 200 and json object equal to project sent', () => {
         return request(server)
@@ -36,7 +36,7 @@ xdescribe('Project endpoints tests', () => {
     });
   });
   // test getProjects endpoint
-  xdescribe('/getProjects', () => {
+  describe('/getProjects', () => {
     describe('POST', () => {
       it('responds with status of 200 and json object equal to an array of user projects', () => {
         return request(server)
@@ -53,7 +53,7 @@ xdescribe('Project endpoints tests', () => {
     });
   });
   // test deleteProject endpoint
-  xdescribe('/deleteProject', () => {
+  describe('/deleteProject', () => {
     describe('DELETE', () => {
       const { name, userId } = projectToSave;
       it('responds with status of 200 and json object equal to deleted project', () => {

__tests__/server.test.tsx

@@ -0,0 +1,124 @@
+import marketplaceController from '../server/controllers/marketplaceController'; 
+import app from '../server/server';
+import mockData from '../mockData';
+const request = require('supertest');
+const mongoose = require('mongoose');
+const mockNext = jest.fn(); // Mock nextFunction
+const MONGO_DB = process.env.MONGO_DB_TEST;
+const { state, projectToSave, user } = mockData
+const PORT = 8080;
+
+beforeAll(async () => {
+  await mongoose.connect(MONGO_DB, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  });
+});
+
+afterAll(async () => {
+  await mongoose.connection.close();
+});
+
+describe('Server endpoint tests', () => {
+  it('should pass this test request', async () => {
+    const response = await request(app).get('/test');
+    expect(response.status).toBe(200);
+    expect(response.text).toBe('test request is working');
+  });
+  describe('Marketplace endpoint testing', () => {
+    it('get requests to /getMarketplaceProjects should return an array of projects', async () => {
+      const response = await request(app).get('/getMarketplaceProjects');
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.body)).toBe(true);
+    });
+    it('the return array should be populated with project objects', async () => {
+      const response = await request(app).get('/getMarketplaceProjects');
+      expect(response.status).toBe(200);
+      expect(Array.isArray(response.body)).toBe(true);
+    });
+  });
+  // test saveProject endpoint
+  describe('/saveProject', () => {
+    describe('/POST', () => {
+      it('responds with a status of 200 and json object equal to project sent', async () => {
+        // const response = await request(app).post('/saveProject').set('Accept', 'application/json').send(projectToSave);
+        // console.log(response);
+        // console.log(response.body);
+        // expect(response.status).toBe(200);
+        return request(app)
+          .post('/saveProject')
+          .set('Accept', 'application/json')
+          .send(projectToSave)
+          .expect(200)
+          .expect('Content-Type', /application\/json/)
+          .then((res) => expect(res.body.name).toBe(projectToSave.name));
+      });
+    // });
+  });
+  // test getProjects endpoint
+  describe('/getProjects', () => {
+    describe('POST', () => {
+      it('responds with status of 200 and json object equal to an array of user projects', () => {
+        return request(app)
+          .post('/getProjects')
+          .set('Accept', 'application/json')
+          .send({ userId: projectToSave.userId })
+          .expect(200)
+          .expect('Content-Type', /json/)
+          .then((res) => {
+            expect(Array.isArray(res.body)).toBeTruthy;
+            expect(res.body[0].name).toBe(state.name);
+          });
+      });
+    });
+  });
+  // test deleteProject endpoint
+  describe('/deleteProject', () => {
+    describe('DELETE', () => {
+      it('responds with status of 200 and json object equal to deleted project', async () => {
+        const response: Response = await request(app).post('/getProjects').set('Accept', 'application/json').send({ userId: projectToSave.userId });
+        const _id: String = response.body[0]._id;
+        const userId: String = user.username;
+        console.log(_id, userId);
+        return request(app)
+          .delete('/deleteProject')
+          .set('Content-Type', 'application/json')
+          .send({ _id, userId })
+          .expect(200)
+          .then((res) => expect(res.body.name).toBe(projectToSave.name)); // @Denton might want to check more of these fields
+      });
+    });
+  });
+});
+});
+
+
+
+
+
+
+
+// describe('marketplaceController Middleware', () => {
+//   describe('getProjects tests', () => {
+//     it('should add the projects as an array to res.locals', () => {
+//       const req = {};
+//       const res = { locals: {} };
+//       console.log(marketplaceController.getPublishedProjects);
+//       console.log(typeof marketplaceController.getPublishedProjects);
+//       marketplaceController.getPublishedProjects(req, res, mockNext);
+//       expect(Array.isArray(res.locals.publishedProjects)).toBe(true);
+//       expect(mockNext).toHaveBeenCalled();
+//     });
+//   });
+
+
+//   it('should send an error response if there is an error in the middleware', () => {
+//     const req = { user: { isAuthenticated: false } };
+//     const res = mockResponse();
+    
+//     marketplaceController.authenticateMiddleware(req, res, mockNext);
+    
+//     expect(res.status).toHaveBeenCalledWith(500);
+//     expect(res.json).toHaveBeenCalledWith({ err: 'Error in marketplaceController.getPublishedProjects, check server logs for details' });
+//   });
+// });