Merge pull request #10 from elenaconn/UndoRedoTests

Jest Tests for Undo/Redo/Root Component

Author: eddypjr

__tests__/componentReducer.test.ts

@@ -1,7 +1,8 @@
 import reducer from '../app/src/reducers/componentReducer';
-import { State, Action } from '../app/src/interfaces/InterfacesNew';
+import { State, Action } from '../app/src/interfaces/Interfaces';
 
 import initialState from '../app/src/context/initialState';
+import { iterate } from 'localforage';
 
 describe('Testing componentReducer functionality', () => {
   let state: State = initialState;
@@ -25,6 +26,27 @@ describe('Testing componentReducer functionality', () => {
     });
   });
 
+  // TEST 'ADD COMPONENT' with new root 
+  describe('ADD COMPONENT reducer', () => {
+    it('should add new reuseable component to state as the new root', () => {
+      const action: Action = {
+        type: 'ADD COMPONENT',
+        payload: {
+          componentName: 'TestRootChange',
+          id: 3,
+          root: true,
+        },
+      };
+      state = reducer(state, action);
+      
+      // expect state.components array to have length 3
+      const length = state.components.length;
+      expect(length).toEqual(3);
+      // expect new root to match id of component id of TestRootChange (rootComponents is an array of component ID numbers)
+      expect(state.rootComponents[state.rootComponents.length - 1]).toEqual(action.payload.id);
+    });
+  });
+
   // TEST 'ADD CHILD'
   describe('ADD CHILD reducer', () => {
     it('should add child component and separator to top-level component', () => {
@@ -158,6 +180,62 @@ describe('Testing componentReducer functionality', () => {
       expect(state.projectType).toEqual(action.payload.projectType);
     });
   });
+  
+
+  // TEST 'UNDO'
+  describe('UNDO reducer', () => {
+    it('should remove the last element from the past array and push it to the future array', () => {
+      const focusIndex = state.canvasFocus.componentId - 1;
+      state.components[focusIndex].past = [];
+
+      // snapShotFunc taken from src/components/main/canvas.tsx to test undo functionality
+      // snapShotFunc takes a snapshot of state to be used in UNDO/REDO functionality
+      const snapShotFuncCopy = () => {
+      const deepCopiedState = JSON.parse(JSON.stringify(state));
+      // pushes the last user action on the canvas into the past array of Component
+      state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
+      }
+
+      const actionHTML2: Action = {
+        type: 'ADD CHILD',
+        payload: {
+          type: 'HTML Element',
+          typeId: 4,
+          childId: null,
+        }
+      }
+      state = reducer(state, actionHTML2);
+      // invoking snapShotFunc is necessary to push actions into the past array, referenced in the UNDO functionality to define children
+      snapShotFuncCopy();
+
+      const actionUndo: Action = {
+        type: 'UNDO',
+         payload: {},
+      };
+      state = reducer(state, actionUndo);
+
+      expect(state.components[focusIndex].past.length).toEqual(0);
+      expect(state.components[focusIndex].future.length).toEqual(1);
+    })
+  });
+
+  
+  // TEST 'REDO'
+  describe('REDO reducer', () => {
+    it('should remove the last element from the future array and push it to the past array', () => {
+      const focusIndex = state.canvasFocus.componentId - 1;
+  
+      const actionRedo: Action = {
+        type: 'REDO',
+         payload: {},
+      };
+      state = reducer(state, actionRedo);
+
+      expect(state.components[focusIndex].future.length).toEqual(0);
+      expect(state.components[focusIndex].past.length).toEqual(1);
+    })
+  });
+
 
   // TEST 'RESET STATE'
   describe('RESET STATE reducer', () => {
@@ -176,3 +254,4 @@ describe('Testing componentReducer functionality', () => {
     });
   });
 });
+

app/src/Dashboard/FormsContainer.tsx

@@ -75,7 +75,6 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
       window.api.setCookie();
       window.api.getCookie(cookie => {
         // if a cookie exists, set localstorage item with cookie data, clear interval, go back to '/' route to load app
-        console.log(cookie);
         if (cookie[0]) {
           window.localStorage.setItem('ssid', cookie[0].value);
           clearInterval(githubCookie);

app/src/components/login/SignIn.tsx

@@ -14,31 +14,25 @@ function Canvas() {
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
     );
-
-  // changes focus of the canvas to a new component / child
-  const changeFocus = (componentId?: number, childId?: number | null, e?: string) => {
-    dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId, e, /*state*/ } });
-  };
-  // onClickHandler is responsible for changing the focused component and child component
-  function onClickHandler(event) {
-    event.stopPropagation();
-    // note: a null value for the child id means that we are focusing on the top-level component rather than any child
-    changeFocus(state.canvasFocus.componentId, null);
-  };
-
-  // stores a snapshot of state into the past array for UNDO
-  const snapShotFunc = () => {
-    // make a deep clone of state
-      const deepCopiedState = JSON.parse(JSON.stringify(state));
-      const focusIndex = state.canvasFocus.componentId - 1;
-      //pushes the last user action on the canvas into the past array of Component
-      state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
-      
-      /** OLD CODE */
-      // state.past.push(deepCopiedState.components[focusIndex].children);
-      // state.past.push(deepCopiedState.components[state.canvasFocus.componentId].children);
-      // state.arrowMovements.push(deepCopiedState.canvasFocus)
-      // console.log('state in snapshotFunc', state)
+    
+    // changes focus of the canvas to a new component / child
+    const changeFocus = (componentId?: number, childId?: number | null) => {
+      dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
+    };
+    // onClickHandler is responsible for changing the focused component and child component
+    function onClickHandler(event) {
+      event.stopPropagation();
+      // note: a null value for the child id means that we are focusing on the top-level component rather than any child
+      changeFocus(state.canvasFocus.componentId, null);
+    };
+    
+    // stores a snapshot of state into the past array for UNDO
+    const snapShotFunc = () => {
+      // make a deep clone of state
+        const deepCopiedState = JSON.parse(JSON.stringify(state));
+        const focusIndex = state.canvasFocus.componentId - 1;
+        //pushes the last user action on the canvas into the past array of Component
+        state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
     };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
@@ -101,6 +95,5 @@ function Canvas() {
     </div>
   );
 }
-// export { snapStateArr };
-export default Canvas;
 
+export default Canvas;

app/src/components/main/Canvas.tsx

@@ -48,7 +48,6 @@ function DirectChildHTML({
   function onClickHandler(event) {
     event.stopPropagation();
     changeFocus(state.canvasFocus.componentId, childId);
-    console.log('state in directChild', state)
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications

app/src/components/main/DirectChildHTML.tsx

@@ -215,10 +215,11 @@ const reducer = (state: State, action: Action) => {
       };
       components.push(newComponent);
 
+      // functionality if the new component will become the root component
       const rootComponents = [...state.rootComponents];
       if (action.payload.root) rootComponents.push(newComponent.id);
 
-      // update the focus to the new component
+      // updates the focus to the new component, which redirects to the new blank canvas of said new component
       const canvasFocus = {
         ...state.canvasFocus,
         componentId: newComponent.id,
@@ -344,7 +345,7 @@ const reducer = (state: State, action: Action) => {
     case 'CHANGE POSITION': {
       const { currentChildId, newParentChildId } = action.payload;
 
-      // if the currentChild Id is the same as the newParentId (i.e. a component is trying to drop itself into itself), don't update sate
+      // if the currentChild Id is the same as the newParentId (i.e. a component is trying to drop itself into itself), don't update state
       if (currentChildId === newParentChildId) return state;
 
       // find the current component in focus
@@ -618,24 +619,17 @@ const reducer = (state: State, action: Action) => {
         HTMLTypes
       };
     }
+
     case 'UNDO': {
       const focusIndex = state.canvasFocus.componentId - 1;
-      //if the past array is empty, return state
+      // if the past array is empty, return state
       if(state.components[focusIndex].past.length === 0) return {...state};
-      //the children array of the focused component will equal the last element of the past array
-      state.components[focusIndex].children = state.components[focusIndex].past[state.components[focusIndex].past.length - 1]
-      //the last element of the past array gets pushed into the future
-        //the last element of the past array gets popped out
-      state.components[focusIndex].future.push(state.components[focusIndex].past.pop())
-
-      
-      /**OLD CODE */
-      // //if past is empty, return state
-      // if (state.past.length === 0) return {...state};
-      // //the children array of state.components[0] will equal the last element of the past array
-      //   state.components[focusIndex].children = state.past[state.past.length-1];
-      //   //the last element of past array gets pushed into future;
-      //   state.future.push(state.past.pop());
+      // the children array of the focused component will equal the last element of the past array
+      state.components[focusIndex].children = state.components[focusIndex].past[state.components[focusIndex].past.length - 1];
+      // the last element of the past array gets popped off
+      const poppedEl = state.components[focusIndex].past.pop();
+      // the last element of the past array gets popped off and pushed into the future array
+      state.components[focusIndex].future.push(poppedEl);
 
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
@@ -651,26 +645,18 @@ const reducer = (state: State, action: Action) => {
         ...state
       };
     }
+    
     case 'REDO': {
       const focusIndex = state.canvasFocus.componentId - 1;
       //if future array is empty, return state
       if(state.components[focusIndex].future.length === 0) return {...state};
       //the children array of the focused component will equal the last element of the future array
       state.components[focusIndex].children = state.components[focusIndex].future[state.components[focusIndex].future.length - 1]
       //the last element of the future array gets pushed into the past
-        //the last element of the future array gets popped out
+      //the last element of the future array gets popped out
       state.components[focusIndex].past.push(state.components[focusIndex].future.pop())
 
-
-
-      //nothing left to redo
-      // if(state.future.length === 0) return {...state};
-      // //the children array of state.components[0] will equal the last element of the future array
-      //   state.components[focusIndex].children = state.future[state.future.length - 1];
-      //   //the last element of the future array gets pushed into the past array and the last element of the future array gets popped off
-      //   state.past.push(state.future.pop());
-
-      // //generate code for the Code Preview
+      // generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(
           state.components,

app/src/reducers/componentReducer.ts

@@ -136,8 +136,7 @@ export const createPackage = (path, appName) => {
     "express": "^4.17.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "webpack": "^4.29.6",
-    "react-native": "^0.62.1"
+    "webpack": "^4.29.6"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",

app/src/utils/createApplication.util.ts

@@ -175,7 +175,7 @@
     "@types/chai": "^4.2.11",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^25.1.5",
+    "@types/jest": "^25.2.3",
     "apollo": "^2.32.5",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^25.2.4",
@@ -207,7 +207,7 @@
     "sass-loader": "^7.0.3",
     "style-loader": "^0.20.3",
     "supertest": "^4.0.2",
-    "ts-jest": "^25.3.0",
+    "ts-jest": "^25.5.1",
     "ts-node": "^8.10.2",
     "typescript": "^3.9.6",
     "url-loader": "^4.1.0",