Merge pull request #58 from fredosauce/working

Set up Enzyme testing

Author: andrewjcho84

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
 

__tests__/__snapshots__/enzyme.test.tsx.snap

@@ -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__/enzyme.test.tsx

@@ -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()
+  })
+})

app/setupTests.ts

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

app/src/components/main/DirectChildComponent.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/helperFunctions/renderChildren.tsx

@@ -21,7 +21,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           style={style}
-          key={childId.toString()}
+          key={'DirChild' + childId.toString()}
         />
       );
     }
@@ -33,7 +33,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           style={style}
-          key={childId.toString()}
+          key={'DirChild' + childId.toString()}
         />
       );
     }
@@ -46,7 +46,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           style={style}
           children={children}
-          key={childId.toString()}
+          key={'DirChild' + childId.toString()}
         />
       );
     }
@@ -60,7 +60,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           style={style}
           children={children}
-          key={childId.toString()}
+          key={'DirChild' + childId.toString()}
         />
       );
     }

app/src/reducers/componentReducer.ts

@@ -6,6 +6,7 @@ import {
 } from '../interfaces/Interfaces';
 import initialState from '../context/initialState';
 import generateCode from '../helperFunctions/generateCode';
+import cloneDeep from '../helperFunctions/cloneDeep';
 
 const reducer = (state: State, action: Action) => {
   // if the project type is set as Next.js, next component code should be generated
@@ -133,7 +134,7 @@ const reducer = (state: State, action: Action) => {
         type,
         typeId,
         childId
-      }: { type: string; typeId: number; childId: any} = action.payload;
+      }: { type: string; typeId: number; childId: any } = action.payload;
       // the parent of the new child is whichever component that is currently focused on
       const parentComponentId: number = state.canvasFocus.componentId;
 
@@ -286,7 +287,14 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'SET INITIAL STATE': {
-      return { ...action.payload };
+      // set the canvas focus to be the first component
+      const canvasFocus = {
+        ...action.payload.canvasFocus,
+        componentId: 1,
+        childId: null
+      };
+
+      return { ...action.payload, canvasFocus };
     }
     case 'SET PROJECT NAME': {
       return {
@@ -314,9 +322,32 @@ const reducer = (state: State, action: Action) => {
 
       return { ...state, components, projectType };
     }
-    // Reset state of a given project back to its initial state
+    // Reset all component data back to their initial state but maintain the user's project name and log-in status
     case 'RESET STATE': {
-      return { ...initialState };
+      const nextChildId = 1;
+      const rootComponents = [1];
+      const nextComponentId = 2;
+      const canvasFocus = {
+        ...state.canvasFocus,
+        componentId: 1,
+        childId: null
+      };
+      const rootComponent = {
+        ...state.components[0],
+        code: '',
+        children: [],
+        style: {}
+      };
+      const components = [rootComponent];
+      return {
+        ...state,
+        nextChildId,
+        rootComponents,
+        nextComponentId,
+        components,
+        canvasFocus
+      };
+      // return { ...initialState };
     }
 
     case 'UPDATE PROJECT NAME': {

app/src/setupTests.ts

@@ -72,7 +72,8 @@
         "diagnostics": false
       }
     },
-    "testTimeout": 50000
+    "setupFilesAfterEnv": ["<rootDir>/app/setupTests.ts"],
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   },
   "bugs": {
     "url": "https://github.com/open-source-labs/ReacType/issues"
@@ -84,8 +85,6 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.0.1",
     "@material-ui/styles": "^4.9.6",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/js-cookie": "^2.2.6",
     "@types/node": "^14.0.20",
     "@types/prettier": "^1.19.0",
@@ -125,6 +124,8 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@types/chai": "^4.2.11",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^25.1.5",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^25.2.4",
@@ -137,6 +138,7 @@
     "dotenv": "^8.2.0",
     "electron": "^9.1.0",
     "electron-builder": "^22.7.0",
+    "enzyme-to-json": "^3.5.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^13.0.0",
     "eslint-plugin-babel": "^5.3.1",