Merge branch 'stretch' of https://github.com/oslabs-beta/ReacType into native

Author: jzuniga206

README.md

@@ -27,7 +27,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.
 
-![Image of ReacType Application](https://i.imgur.com/0wV7R1P.jpg)
+![Image of ReacType Application](https://i.imgur.com/OgcP9II.png)
 
 ### How to use
 
@@ -37,16 +37,14 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 - To render a component **_instance_** to the screen, first select the component, or _parent_, that the instance will be rendered within. This selected component will be represented in a new canvas view, with its own white box. Then press the plus button next to the component name. An instance, or _child_, representation will appear on the canvas.
 - To add draggable **HTML elements**, select the image icons on the lower left panel.
 
-![Gif of adding](https://imgur.com/sZloD8o.gif)
+![Gif of adding](https://i.imgur.com/hdVTFcP.gif)
 
 - The bottom panel allows the user to toggle between 4 different views: a **tree diagram of the application**, a **real-time preview of the exportable code**, a form to enter component props, and a form to add HTML attributes.
 
-![Gif of code preview & tree](https://imgur.com/KZb2UTO.gif)
-
 - **_Props_** can be added to each component within its tab on bottom panel. Enter in a _key-value pair_, select its data _type_ and press the bottom 'ADD PROP'.
 - **_HTML Element Attributes_** of class name and ID can be added to each HTML element after an HTML element has been rendered to the canvas.
 
-![Gif of attr & props](https://imgur.com/JgCiBE9.gif)
+![Gif of attr & props](https://i.imgur.com/cmgOLLN.gif)
 
 - To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key.
 - To **_delete_** a _component_, click the 'DELETE' button of the desired component in the left panel.

src/components/bottom/AddChildProps.tsx

@@ -41,30 +41,6 @@ class AddChildProps extends Component<ChildPropsTypes> {
       );
     });
 
-    // const arrayPropsAvailable = [];
-    // // IIFE : so that it runs without needing to be invoked
-    // (() => {
-    //   focusComponent.props.map(prop => {
-    //     // console.log('this is component Name from props array', prop.key);
-    //     arrayPropsAvailable.push(
-    //       <span>
-    //         <input
-    //           type='checkbox'
-    //           id={`${prop}checkbox-${prop.key}`}
-    //           name={`${prop}checkbox-${prop.key}`}
-    //         />
-    //         <label
-    //           className={`labelForPropsToAddToChild`}
-    //           for={`${prop}checkbox-${prop.key}`}
-    //         >
-    //           {prop.key}
-    //         </label>
-    //       </span>
-    //     );
-    //   });
-    // })();
-    // console.log('this is the array of props available', arrayPropsAvailable);
-
     return (
       <div>
         <MaterialTable

src/reducers/__tests__/leftReducers.test.ts

@@ -10,7 +10,6 @@ describe('Left reducers', () => {
   // redefine the default state before each reducer test
   beforeEach(() => {
     state = initialApplicationState;
-    state.components.push(testComponent);
   });
 
   // TEST CHANGE FOCUS COMPONENT: test component will add "look" for "test" after it's added
@@ -173,6 +172,7 @@ describe('Left reducers', () => {
         type: types.CHANGE_FOCUS_COMPONENT,
         payload: { title: 'TEST' }
       };
+      state.components.push(testComponent);
       const newState = reducers.changeFocusComponent(state, action.payload);
       // expecting new payload of "title" to the payload we just created
       expect(newState.focusComponent.title).toEqual(action.payload.title);
@@ -193,22 +193,87 @@ describe('Left reducers', () => {
   });
 
   // TEST DELETE CHILD: test child should be deleted from local state components array
-  // describe('deleteChild reducer', () => {
-  //   it('should delete test component', () => {
-  //     // CHANGE FOCUS COMPONENT FIRST
-  //     // const action = {
-  //     //   type: types.CHANGE_FOCUS_COMPONENT,
-  //     //   payload: { title: 'TEST' }
-  //     // };
-  //     // const newState = reducers.changeFocusComponent(state, action.payload);
-  //     const prevState = cloneDeep(state);
-  //     console.log('this is prevState', prevState)
-  //     const newState = reducers.deleteChild(state, {});
-  //     // expecting new payload of "title" to the payload we just created
-  //     expect(prevState.focusComponent.childrenArray).not.toEqual(
-  //       newState.focusComponent.childrenArray
-  //     );
-  //   });
-});
+  describe('deleteChild reducer', () => {
+    it('should delete test component', () => {
+      // grab initial copy of current state
+      const prevState = cloneDeep(state);
+      // push into it the test component
+      prevState.focusComponent.childrenArray.push(testComponent);
+
+      //take new state and delete from it the testComponent
+      const newState = reducers.deleteChild(state, {});
+
+      // expecting previous state not to equal new state after deletion of test component
+      expect(prevState.focusComponent.childrenArray).not.toEqual(
+        newState.focusComponent.childrenArray
+      );
+    });
+  });
+  // TEST ADD COMPONENT: adds component to the global state components array
+  describe('addComponent reducer', () => {
+    it('return the state as it was if an empty title', () => {
+      const action = {
+        type: types.ADD_COMPONENT,
+        payload: { title: '' }
+      };
+      // grab initial copy of current state
+      const prevState = cloneDeep(state);
+
+      //take new state and add testComponent
+      const newState = reducers.addComponent(state, action.payload);
+      // expecting previous state not to equal new state after deletion of test component
+      expect(prevState.components[2]).toEqual(newState.components[2]);
+    });
+
+    it('should add test component', () => {
+      const action = {
+        type: types.ADD_COMPONENT,
+        payload: { title: 'TESTCOMPONENT' }
+      };
+      // grab initial copy of current state
+      const prevState = cloneDeep(state);
 
-// NEXT TEST
+      //take new state and add testComponent
+      const newState = reducers.addComponent(prevState, action.payload);
+
+      // expecting previous state not to equal new state after deletion of test component
+      expect(prevState.components[2]).not.toEqual(newState.components[2]);
+    });
+  });
+  // TEST ADD CHILD: adds child to the focus component's childrenArray
+  describe('addChild reducer', () => {
+    it('return focus component childrenarray with test react component', () => {
+      const actionReact = {
+        type: types.ADD_CHILD,
+        payload: {
+          title: 'TestREACTComponent',
+          childType: 'COMP'
+        }
+      };
+
+      state = reducers.addComponent(state, { title: 'TestREACTComponent' });
+      const newState = reducers.addChild(state, actionReact.payload);
+
+      expect(state.focusComponent.childrenArray).not.toEqual(
+        newState.focusComponent.childrenArray
+      );
+    });
+
+    it('return focus component childrenarray with test HTML component', () => {
+      const actionHTML = {
+        type: types.ADD_CHILD,
+        payload: {
+          title: 'TestHTMLComponent',
+          childType: 'HTML'
+        }
+      };
+
+      state = reducers.addComponent(state, { title: 'TestHTMLComponent' });
+      const newState = reducers.addChild(state, actionHTML.payload);
+
+      expect(state.focusComponent.childrenArray).not.toEqual(
+        newState.focusComponent.childrenArray
+      );
+    });
+  });
+});

src/utils/componentRender.util.ts

@@ -179,7 +179,7 @@ const componentRender = (
     
     /* Replace "any" with stricter types to reflect your usage*/
     interface Props {
-      ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)};\n`)}
+      ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}\n`)}
     };
 
       ${

src/utils/htmlElements.util.ts

@@ -94,6 +94,16 @@ const HTMLelements: htmlElementsInt = {
     width: 50,
     height: 50,
     attributes: ['className', 'id', 'href']
+  },
+  HTML: {
+    width: 50,
+    height: 50,
+    attributes: ['className', 'id']
+  },
+  NATIVE: {
+    width: 50,
+    height: 50,
+    attributes: ['className', 'id']
   }
 };