Merge branch 'dev' into victor/marketplaceTest

Author: martins5225

__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' });
+//   });
+// });

app/src/components/bottom/CodePreview.tsx

@@ -1,21 +1,24 @@
-import React, { useContext, useState, useRef, useEffect } from 'react';
-import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-min-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/theme-monokai';
-import 'ace-builds/src-noconflict/theme-github';
-import 'ace-builds/src-noconflict/theme-solarized_dark';
-import 'ace-builds/src-noconflict/theme-solarized_light';
-import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-noconflict/theme-terminal';
-import { Component } from '../../interfaces/Interfaces';
-import useResizeObserver from '../../tree/useResizeObserver';
-import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
-import { fetchPlugin } from '../../plugins/fetch-plugin';
+
 import * as esbuild from 'esbuild-wasm';
-import {codePreviewSave, codePreviewInput} from "../../redux/reducers/slice/codePreviewSlice";
+
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import {
+  codePreviewInput,
+  codePreviewSave
+} from '../../redux/reducers/slice/codePreviewSlice';
 import { useDispatch, useSelector } from 'react-redux';
+
+import AceEditor from 'react-ace';
+import { Component } from '../../interfaces/Interfaces';
 import { RootState } from '../../redux/store';
+import { fetchPlugin } from '../../plugins/fetch-plugin';
+import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
+import useResizeObserver from '../../tree/useResizeObserver';
 
 const CodePreview: React.FC<{
   theme: string | null;
@@ -37,7 +40,7 @@ const CodePreview: React.FC<{
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
   const { height } = dimensions || 0;
-  const state = useSelector((store:RootState) => store.appState)
+  const state = useSelector((store: RootState) => store.appState);
   const [, setDivHeight] = useState(0);
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -80,7 +83,7 @@ const CodePreview: React.FC<{
         global: 'window'
       }
     });
-    dispatch(codePreviewSave(result.outputFiles[0].text))
+    dispatch(codePreviewSave(result.outputFiles[0].text));
   };
 
   return (
@@ -95,15 +98,16 @@ const CodePreview: React.FC<{
     >
       <AceEditor
         mode="javascript"
-        theme="monokai"
+        theme="dracula"
         width="100%"
         height="100%"
         onChange={handleChange}
         value={input}
         name="Code_div"
         readOnly={false}
-        fontSize={18}
+        fontSize={14}
         tabSize={2}
+        wrapEnabled={true}
         setOptions={{
           useWorker: false
         }}

app/src/components/bottom/StylesEditor.tsx

@@ -1,18 +1,17 @@
-import React, { useState, useRef } from 'react';
-import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/mode-css';
-import 'ace-builds/src-noconflict/theme-monokai';
-import 'ace-builds/src-noconflict/theme-github';
-import 'ace-builds/src-noconflict/theme-solarized_dark';
-import 'ace-builds/src-noconflict/theme-solarized_light';
-import 'ace-builds/src-noconflict/theme-terminal';
-import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-min-noconflict/ext-searchbox';
+import 'ace-builds/src-noconflict/ext-language_tools';
+
+import React, { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import AceEditor from 'react-ace';
 import Fab from '@mui/material/Fab';
+import { RootState } from '../../redux/store';
 import SaveIcon from '@mui/icons-material/Save';
 import { updateStylesheet } from '../../redux/reducers/slice/appStateSlice';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from '../../redux/store';
 
 const StylesEditor: React.FC<{
   theme: string | null;
@@ -50,13 +49,13 @@ const StylesEditor: React.FC<{
     >
       <AceEditor
         mode="css"
-        theme={'monokai'}
+        theme="dracula"
         width="100%"
         height="100%"
         onChange={handleChange}
         value={css}
         name="Css_div"
-        fontSize={16}
+        fontSize={14}
         tabSize={2}
         setOptions={{
           useWorker: false,

app/src/components/marketplace/MarketplaceCard.tsx

@@ -26,6 +26,9 @@ import imageSrc from '../../../../resources/marketplace_images/marketplace_image
 import { red } from '@mui/material/colors';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import { useHistory } from 'react-router-dom';
+import { openProject } from '../../redux/reducers/slice/appStateSlice';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 
 interface Project {
   forked: String;
@@ -46,6 +49,7 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
   const history = useHistory();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
   const state = useSelector((store: RootState) => store.appState);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -56,9 +60,8 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
     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);
-    alert('Project cloned!');
+    const project = response.data.project;
+    setAlertOpen(true);
     setAnchorEl(null);
     return {
       _id: project._id,
@@ -73,10 +76,29 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
     history.push('/');
     dispatch(openProject(project));
   };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
 
+  const handleAlertClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setAlertOpen(false);
+    setAnchorEl(null);
+  };
+
+  const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+    props,
+    ref
+  ) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  });
+
   return (
     <>
       <Card
@@ -143,6 +165,19 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
             Clone and open
           </MenuItem>
         </Menu>
+        <Snackbar
+          open={alertOpen}
+          autoHideDuration={3000}
+          onClose={handleAlertClose}
+        >
+          <Alert
+            onClose={handleAlertClose}
+            severity="success"
+            sx={{ width: '100%', color: 'white' }}
+          >
+            Project Cloned!
+          </Alert>
+        </Snackbar>
       </Card>
     </>
   );

app/src/helperFunctions/projectGetSaveDel.ts

@@ -142,7 +142,7 @@ export const deleteProject = (project: any): Promise<Object> => {
     body
   })
     .then((res) => res.json())
-    .then((data) => {
+    .then((data) => { console.log(data)
       return {_id: data._id, name: data.name, published:data.published, ...data.project};
     })
     .catch((err) => console.log(`Error deleting project ${err}`));

mockData.ts

@@ -5,7 +5,7 @@ const mockObj = {
     username: 'test',
     email: '[email protected]',
     password: 'password1!',
-    userId: '64513ce26f7de07139a03069'
+    userId: '64f11a47e77f99bf34b08979'
   },
 
   state: {
@@ -29,7 +29,7 @@ const mockObj = {
 
   projectToSave: {
     name: 'super test project',
-    userId: '60469fc6c435891422b3a84c',
+    userId: '64f11a47e77f99bf34b08979',
     username: 'test',
     project: {
       name: 'test',