Finalized Undo, Redo, and Root Component unit tests.

>
>
Co-authored-by: slhoehn <[email protected]>

Author: elenaconn

__tests__/componentReducer.test.ts

@@ -26,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
+    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', () => {
@@ -159,43 +180,61 @@ describe('Testing componentReducer functionality', () => {
       expect(state.projectType).toEqual(action.payload.projectType);
     });
   });
+  
 
   // 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
-    // undo is not deleting the children because it relies on Canvas.tsx's function Canvas and snapShotFunc inside it
-    it('should remove the last 2 elements in the children array', () => {
+    it('should remove the last element from the past array and push it to the future array', () => {
       const focusIndex = state.canvasFocus.componentId - 1;
-      const actionHTML: Action = {
+      state.components[focusIndex].past = [];
+
+      // snapShotFunc taken from src/components/main/canvas.tsx to test undo 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: 9,
+          typeId: 4,
           childId: null,
         }
       }
-      console.log('focusIndex before UNDO', focusIndex);
-      console.log('before add child', state.components[focusIndex]);
-      state = reducer(state, actionHTML);
-      console.log('after add kid', state.components[focusIndex]);
+      state = reducer(state, actionHTML2);
+      snapShotFuncCopy();
+
       const actionUndo: Action = {
         type: 'UNDO',
          payload: {},
       };
-      
       state = reducer(state, actionUndo);
-      console.log('focusIndex after UNDO', focusIndex);
 
-      const undoParent = state.components.find(comp => comp.id === state.canvasFocus.componentId);
- 
-      expect(undoParent.children.length).toEqual(0);
- 
-      console.log('after undo', state.components[focusIndex]);
+      expect(state.components[focusIndex].past.length).toEqual(0);
+      expect(state.components[focusIndex].future.length).toEqual(1);
+    })
+  });
 
-      //expect(state.components[focusIndex].children.length).toEqual(0);
+  
+  // 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', () => {
     it('should reset project to initial state', () => {
@@ -212,19 +251,5 @@ describe('Testing componentReducer functionality', () => {
       expect(state.components[0].children.length).toEqual(0);
     });
   });
-  
 });
 
-  // 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: []
-      // }
-      // );

app/src/components/main/Canvas.tsx

@@ -10,31 +10,30 @@ 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
     );
-
-  // 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);
-  };
+    
+    // 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);
+    };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
@@ -96,6 +95,6 @@ function Canvas() {
     </div>
   );
 }
-// export { snapStateArr };
+
 export default Canvas;
 

app/src/reducers/componentReducer.ts

@@ -621,14 +621,14 @@ const reducer = (state: State, action: Action) => {
     }
     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())
-
+      // 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,10 +651,9 @@ const reducer = (state: State, action: Action) => {
       //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())
 
-
       // generate code for the Code Preview
       state.components.forEach((el, i) => {
         el.code = generateCode(

package.json

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