Merge branch 'master' into auth-testing

Author: akbuma

README.md

@@ -29,7 +29,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 - **Linux users**: run the application as a super user in order to read and write files.
 
-![Gif of adding](https://i.imgur.com/hdVTFcP.gif)
+![Gif of adding](https://i.imgur.com/nOeuuU6.gif)
 
 ### How to use
 

__mocks__/electron.ts

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Enzyme testing suite renders snapshots, too 1`] = `
+<div>
+  <h1>
+    Hello, Enzyme!
+  </h1>
+</div>
+`;

__tests__/__snapshots__/enzyme.test.tsx.snap

@@ -11,7 +11,7 @@ describe('Testing componentReducer functionality', function () {
   // TEST 'ADD COMPONENT'
   describe('ADD COMPONENT reducer', () => {
     it('should add new reuseable component to state', () => {
-      const action = {
+      const action: Action = {
         type: 'ADD COMPONENT',
         payload: {
           componentName: "TestRegular",
@@ -30,7 +30,7 @@ describe('Testing componentReducer functionality', function () {
   // TEST 'ADD CHILD'
   describe('ADD CHILD reducer', () => {
     it('should add child component to top-level component', () => {
-      const action = {
+      const action: Action = {
         type: 'ADD CHILD',
         payload: {
           type: 'Component',
@@ -40,45 +40,136 @@ describe('Testing componentReducer functionality', function () {
       }
       // switch focus to very first root component
       state.canvasFocus = { componentId: 1, childId: null };
-      console.log(state);
       state = reducer(state, action);
       const newParent = state.components[0];
       // expect new parent's children array to have length 1
       expect(newParent.children.length).toEqual(1);
       // expect new child to have type 'Component' 
-      console.log('new child ', newParent.children[0]);
       expect(newParent.children[0].type).toEqual('Component');
       const addedChild = state.components.find(comp => comp.id === newParent.children[0].typeId);
       // expect new child typeId to correspond to component with name 'TestRegular'
       expect(addedChild.name).toEqual('TestRegular');
     })
   })
-  
+
+  // TEST 'CHANGE POSITION'
+  describe('CHANGE POSITION reducer ', () => {
+    it('should move position of an instance', () => {
+      const actionHtml: Action = {
+        type: 'ADD CHILD',
+        payload: {
+          type: 'HTML Element',
+          typeId: 9,
+          childId: null
+        }
+      }
+      state = reducer(state, actionHtml);
+      const actionChangePos: Action = {
+        type: 'CHANGE POSITION',
+        payload: {
+          currentChildId: 1,
+          newParentChildId: null 
+        }
+      }
+      state = reducer(state, actionChangePos);
+      const changeParent = state.components.find(comp => comp.id === state.canvasFocus.componentId);
+      const changeParentChildLength = changeParent.children.length;
+      // expect last child of parent to be moved Component element
+      expect(changeParent.children[changeParentChildLength-1].type).toEqual('Component');
+      // expect last child of parent to have current child ID of payload
+      expect(changeParent.children[changeParentChildLength-1].childId).toEqual(1);
+    })
+  })
+
+  // TEST 'DELETE CHILD'
+  describe('DELETE CHILD reducer', () => {
+    it('should delete child of focused top-level component', () => {
+      // canvas still focused on childId: 2, which is an HTML element
+      const action: Action = {
+        type: 'DELETE CHILD'
+      }
+      state = reducer(state, action);
+      // expect only one remaining child
+      const delParent = state.components.find(comp => comp.id === state.canvasFocus.componentId);
+      // expect remaining child to have type 'Component'
+      expect(delParent.children.length).toEqual(1);
+      expect(delParent.children[delParent.children.length -1].type).toEqual('Component');
+    })
+  })
+
   // TEST 'CHANGE FOCUS'
   describe('CHANGE FOCUS reducer', () => {
     it('should change focus to specified component', () => {
-      const action = {
+      const action: Action = {
         type: 'CHANGE FOCUS',
         payload: {
           componentId: 2,
           childId: null
         }
       }
-      console.log('before change focus ', state.canvasFocus);
       state = reducer(state, action);
-      console.log('after change focus ', state.canvasFocus);
       expect(state.canvasFocus.componentId).toEqual(2);
       expect(state.canvasFocus.childId).toEqual(null);
     })
   })
 
   // TEST 'UPDATE CSS'
   describe('UPDATE CSS reducer', () => {
-    it('should update background color of focused component', () => {
-      
+    it('should add style to focused component', () => {
+      const action: Action = {
+        type: 'UPDATE CSS',
+        payload: {
+          style: {
+            backgroundColor: 'gray'
+          }
+        }
+      }
+      state = reducer(state, action);
+      const styledComp = state.components.find(comp => comp.id === state.canvasFocus.componentId);
+      // expect the style property on targeted comp to equal style property in payload
+      expect(styledComp.style.backgroundColor).toEqual(action.payload.style.backgroundColor);
+    })
+  })
+
+  // TEST 'UPDATE PROJECT NAME'
+  describe('UPDATE PROJECT NAME reducer', () => {
+    it('should update project with specified name', () => {
+      const action: Action = {
+        type: 'UPDATE PROJECT NAME',
+        payload: 'TESTNAME'
+      }
+      state = reducer(state, action);
+      // expect state name to equal payload
+      expect(state.name).toEqual(action.payload);
+    })
+  })
+
+  // TEST 'CHANGE PROJECT TYPE'
+  describe('CHANGE PROJECT TYPE reducer', () => {
+    it('should change project type to specified type', () => {
+      const action: Action = {
+        type: 'CHANGE PROJECT TYPE',
+        payload: {
+          projectType: 'Classic React'
+        }
+      };
+      state = reducer(state, action);
+      expect(state.projectType).toEqual(action.payload.projectType);
     })
   })
 
   // TEST 'RESET STATE'
+  describe('RESET STATE reducer', () => {
+    it('should reset project to initial state', () => {
+      const action: Action = {
+        type: 'RESET STATE'
+      }
+      state = reducer(state, action);
+      // expect default project to have empty string as name
+      expect(state.name).toEqual('');
+      // expect default project to only have one component in components array
+      expect(state.components.length).toEqual(1);
+    })
+  })
 
 })

__tests__/componentReducer.test.ts

@@ -0,0 +1,12 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+describe('Enzyme testing suite', () => {
+
+  it('renders snapshots, too', () => {
+    const wrapper = shallow(<div>
+      <h1>Hello, Enzyme!</h1>
+    </div>)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

__tests__/enzyme.test.tsx

@@ -24,8 +24,8 @@ const MenuBuilder = require('./menu');
 const path = require('path');
 // const fs = require('fs');
 
-console.log('NODE ENV is ', process.env.NODE_ENV);
-const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ;
+const isDev =
+  process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 
@@ -237,8 +237,6 @@ app.on('web-contents-created', (event, contents) => {
 
   contents.on('will-redirect', (event, navigationUrl) => {
     const parsedUrl = new URL(navigationUrl);
-    //console.log('parsedUrl is', parsedUrl);
-    //console.log('parsedUrl.origin is', parsedUrl.origin);
     const validOrigins = [
       selfHost,
       'http://localhost:5000',
@@ -339,8 +337,12 @@ ipcMain.on('set_cookie', event => {
   session.defaultSession.cookies
     .get({ url: serverUrl })
     .then(cookie => {
-      console.log(cookie);
-      event.reply('give_cookie', cookie);
+      // this if statement is necessary or the setInterval on main app will constantly run and will emit this event.reply, causing a memory leak
+      // checking for a cookie inside array will only emit reply when a cookie exists
+      if (cookie[0]) {
+        console.log(cookie);
+        event.reply('give_cookie', cookie);
+      }
     })
     .catch(error => {
       console.log('Error giving cookies in set_cookie:', error);

app/electron/main.js

@@ -0,0 +1,6 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({
+  adapter: new Adapter(),
+})

app/setupTests.ts

@@ -36,9 +36,6 @@ export const App = (): JSX.Element => {
       });
     } else {
       // otherwise if a user is logged in, use a fetch request to load user's projects from DB
-      // getProjects().then(projects =>
-      //   console.log('UseEffect in App getprojects() returns', projects)
-      // );
       let userId;
       if (Cookies.get('ssid')) {
         userId = Cookies.get('ssid');
@@ -69,10 +66,8 @@ export const App = (): JSX.Element => {
       userId = window.localStorage.getItem('ssid');
     }
     if (state.isLoggedIn === false) {
-      //console.log('Saving guest project as', state);
       localforage.setItem('guestProject', state);
     } else if (state.name !== '') {
-      //console.log('Saving user project as', state);
       saveProject(state.name, state);
       localforage.setItem(userId, state);
     }

app/src/components/App.tsx

@@ -121,13 +121,11 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   */
   const handleLogin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
-    console.log('click fired on handleLogin');
     setInvalidUser(false);
     setInvalidUserMsg('');
     setInvalidPass(false);
     setInvalidPassMsg('');
     sessionIsCreated(username, password).then(loginStatus => {
-      console.log('login fetch', loginStatus);
       if (loginStatus === 'Success') {
         props.history.push('/');
       } else {
@@ -157,7 +155,6 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const handleLoginGuest = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
-    console.log('Handle login guest fired');
     e.preventDefault();
     // generate "cookie" in localStorage for guest users
     window.localStorage.setItem('ssid', 'guest');
@@ -247,9 +244,6 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
 
         <Grid container>
           <Grid item xs>
-            {/* <Link href="#" variant="body2">
-              Forgot password?
-            </Link> */}
             <RouteLink to={`/signup`} className="nav_link">
               Forgot password?
             </RouteLink>

app/src/components/login/SignIn.tsx

@@ -182,14 +182,9 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
       setInvalidVerifyPassword(false);
     }
 
-    console.log('invalidUsername', invalidUsername);
-    console.log('invalidPassword', invalidPassword);
-    console.log('invalidEmail', invalidEmail);
-    console.log('invalidVerifyPassword', invalidVerifyPassword);
     // if(!invalidUsername && !invalidPassword && !invalidEmail && !invalidVerifyPassword) {
     newUserIsCreated(username, email, password).then(userCreated => {
       if (userCreated === 'Success') {
-        console.log('user created');
 
         props.history.push('/');
       } else {

app/src/components/login/SignUp.tsx

@@ -9,7 +9,6 @@ import renderChildren from '../../helperFunctions/renderChildren';
 function Canvas() {
   const [state, dispatch] = useContext(stateContext);
 
-  console.log('state is ', state);
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId

app/src/components/main/Canvas.tsx

@@ -57,6 +57,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     boxShadow:
       state.canvasFocus.childId === childId ? '1px 1px 3px rgb(11,212,112)' : ''
   };
+
   const combinedStyle = combineStyles(
     combineStyles(
       combineStyles(globalDefaultStyle, referencedComponent.style),
@@ -109,7 +110,13 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
         const HTMLDefaultPlacholder = HTMLType.placeHolderShort;
         const combinedStyle = combineStyles(HTMLDefaultStyle, child.style);
         return (
-          <React.Fragment>
+          <React.Fragment
+            key={
+              'indChildFrag' +
+              child.childId.toString() +
+              child.typeId.toString()
+            }
+          >
             {child.children.length === 0 ? (
               <IndirectChild
                 style={combinedStyle}
@@ -161,7 +168,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
   return (
     <div
       onClick={onClickHandler}
-      key={'childComp' + childId}
+      // key={'childComp' + childId}
       style={combinedStyle}
       ref={drag}
     >

app/src/components/main/DirectChildComponent.tsx

@@ -25,8 +25,6 @@ function IndirectChild({ style, children, placeHolder, linkId }) {
     combinedStyle = combineStyles(combinedStyle, { color: 'blue' });
   }
 
-  //console.log('children are ', children);
-  //console.log('place holder is ', placeHolder);
   return (
     <div style={combinedStyle}>
       {linkId ? (

app/src/components/main/IndirectChild.tsx

@@ -27,10 +27,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
   const { onClose, open, projects } = props;
   const [_, dispatch] = useContext(stateContext);
 
-  useEffect(() => {
-    console.log('state is', _);
-  }, [_]);
-
   // If no projects selected, keep the name of the current displayed
   const handleClose = () => {
     // onClose(selectedValue);