Editing Jest Undo Reducer Test

Author: elenaconn

__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;
@@ -159,6 +160,48 @@ describe('Testing componentReducer functionality', () => {
     });
   });
 
+  // TEST 'UNDO'
+  describe('UNDO reducer', () => {
+    // problem: past array up to this point is empty because snapshot function is responsible for populating it- not invoked in testing
+    // other ideas: take a snapshot in each of the tests in order to populate the past array
+    it('should move the last element in past array to the future array, both nested within state.components', () => {
+      const focusIndex = state.canvasFocus.componentId - 1;
+      state.components[focusIndex].past.push({
+        type: "HTML Element", typeId: 1000, name: "separator", childId: 1001, style: { border: "none" }, children: []
+      }, 
+      {
+        type: "HTML Element", typeId: 4, name: "button", childId: 2, style: { border: "none" }, children: []
+      });
+      state.components[focusIndex].children.push({
+        type: "HTML Element", typeId: 1000, name: "separator", childId: 1001, style: { border: "none" }, children: []
+      }, 
+      {
+        type: "HTML Element", typeId: 4, name: "button", childId: 2, style: { border: "none" }, children: []
+      }
+      );
+      // const actionHTML: Action = {
+      //   type: 'ADD CHILD',
+      //   payload: {
+      //     type: 'HTML Element',
+      //     typeId: 9,
+      //     childId: null,
+      //   },
+      // };
+      // state = reducer(state, actionHTML);
+      const actionUndo: Action = {
+        type: 'UNDO',
+        payload: {},
+      }
+      console.log('state 1', state)
+      state = reducer(state, actionUndo);
+      console.log('state 2', state);
+      //const undidEl = state.components[focusIndex].past.pop();
+      //const undidEl = state.components[focusIndex].past.pop()
+      expect(state.components[focusIndex].future.length).toEqual(1);
+      //expect(state.components[focusIndex].past
+    })
+  });
+
   // TEST 'RESET STATE'
   describe('RESET STATE reducer', () => {
     it('should reset project to initial state', () => {
@@ -175,4 +218,6 @@ describe('Testing componentReducer functionality', () => {
       expect(state.components[0].children.length).toEqual(0);
     });
   });
+  
 });
+

app/src/components/main/Canvas.tsx

@@ -10,6 +10,7 @@ import renderChildren from '../../helperFunctions/renderChildren';
 
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
+  console.log('state', state);
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -33,13 +34,7 @@ function Canvas() {
       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)
-    };
+  };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({

app/src/reducers/componentReducer.ts

@@ -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
@@ -628,14 +629,6 @@ const reducer = (state: State, action: Action) => {
         //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());
 
       //generate code for the Code Preview
       state.components.forEach((el, i) => {
@@ -662,15 +655,7 @@ const reducer = (state: State, action: Action) => {
       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,

package.json

@@ -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",