Merge branch 'dev' into liam/screenshots

Author: liamroh

__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/App.tsx

@@ -19,6 +19,7 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
+  
   const [toggleAttempt, setToggleAttempt] = useState(false);
   const dispatch = useDispatch();
   // checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
@@ -34,11 +35,15 @@ export const App = (): JSX.Element => {
     console.log('state.isLoggedIn', state.isLoggedIn)
     // console.log('cookies.get in App', Cookies.get())
     // if user is a guest, see if a project exists in localforage and retrieve it
+    // v17 May not currently work yet
     if (!state.isLoggedIn) {
+      console.log('not state.islogged in')
       localforage.getItem('guestProject').then((project) => {
         // if project exists, use dispatch to set initial state to that project
+        console.log('guestProject', project)
         if (project) {
           dispatch(setInitialState(project));
+          console.log('project', project)
         }
       });
     } else {

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -198,7 +198,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
           />
           <TextField
             id="textfield-value"
-            label="initial value:"
+            label="initial value"
             variant="outlined"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
@@ -218,11 +218,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
           >
             <InputLabel
               id="select-required-label"
-              className={
-                isThemeLight
-                  ? classes.greyThemeFontColor
-                  : classes.darkThemeFontColor
-              }
+              style={{color: 'black'}}
             >
               Type
             </InputLabel>
@@ -509,7 +505,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '90%',
     textAlign: 'center',
     margin: '-20px 0px 5px 150px',
-    borderStyle: 'none',
+    border: ' 1px solid #186BB4',
     transition: '0.3s',
     // borderRadius: "25px",
   },
@@ -524,7 +520,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: '#fff'
   },
   greyThemeFontColor: {
-    color: 'rgba(0,0,0,0.54)'
+    color: 'white'
   },
   formControl: {
     margin: '8px',
@@ -538,7 +534,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   rootLight: {
     '& .MuiFormLabel-root': {
-      color: 'rgba(0,0,0,0.54)'
+      color: 'white'
     }
   },
   rootDark: {

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -57,7 +57,7 @@ const TableParentProps = props => {
       renderCell: function renderCell(params: any) {
         return (
           <Button
-            style={{ width: `${3}px`, color: 'black'}}
+            style={{ width: `${3}px`, color: 'white'}}
             onClick={() => {
               addProps(params.row, params.id - 1);
             }}

app/src/components/bottom/BottomTabs.tsx

@@ -130,9 +130,9 @@ const BottomTabs = (props): JSX.Element => {
         {tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
         {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
         {/* {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />} */}
-        {tab === 4 && <Tree data={components} />}
-        {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
-        {tab === 6 && (
+        {tab === 3 && <Tree data={components} />}
+        {tab === 4 && <ContextManager theme={theme} setTheme={setTheme} />}
+        {tab === 5 && (
           <StateManager
             theme={theme}
             setTheme={setTheme}

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,