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

Author: sean1292

src/components/__tests__/App.test.tsx

@@ -7,6 +7,7 @@ describe('Test the App Component', () => {
   // wrapped version of react component
   // component comes with additional functionality
   const wrapped: any = shallow(<App />);
+
   it('Matches snapshot', () => {
     // look inside wrapped component and find every instance of commentBox inside of it
     // expect(wrapped.find(KonvaStage).length).toEqual(1);
@@ -15,7 +16,6 @@ describe('Test the App Component', () => {
   it('Should contain the App Container', () => {
     // look inside wrapped component and find every instance of commentBox inside of it
     // expect(wrapped.find(KonvaStage).length).toEqual(1);
-    expect(wrapped.contains(<AppContainer />)).toBe(true)
-
+    expect(wrapped.contains(<AppContainer />)).toBe(true);
   });
 });

src/components/bottom/CodePreview.tsx

@@ -17,9 +17,8 @@ type CodePreviewProps = {
   toggleCodeEdit(): void;
   codeReadOnly: boolean;
 };
-
+// comment out delete
 class CodePreview extends Component<CodePreviewProps> {
-
   //checking if the code has been asigned yet or not
   //if no then generate code and asign to a focus component
   componentDidMount() {
@@ -44,7 +43,7 @@ class CodePreview extends Component<CodePreviewProps> {
         parser: 'babel'
       }
     );
-    // console.log('code  prev>>>>>>>>>>>>>>>>>>>', text);
+
     this.props.updateCode({
       componentId: this.props.focusComponent.id,
       code: text

src/reducers/__tests__/leftReducers.test.ts

@@ -88,22 +88,24 @@ describe('Left reducers', () => {
       expect(newState.imageSource).toEqual(action.payload.imageSource);
     });
   });
+
   // TEST DELETE CHILD: test child should be deleted from local state components array
   // describe('deleteChild reducer', () => {
   //   it('should delete test component', () => {
-  //     //   const action = {
-  //     //     type: types.CHANGE_IMAGE_SOURCE,
-  //     //     payload: { imageSource: 'www.test.com/test.img' }
-  //     //   };
-  //     const model = {
-  //       parentId = state.focusComponent.id,
-  //       childId = state.focusChild.childId,
-  //       calledFromDeleteComponent = false
-  //     };
-  //     const newState = reducers.deleteChild();
+  //     // 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(newState.imageSource).toEqual(action.payload.imageSource);
+  //     expect(prevState.focusComponent.childrenArray).not.toEqual(
+  //       newState.focusComponent.childrenArray
+  //     );
   //   });
-  // });
-  // NEXT TEST
 });
+
+// NEXT TEST

src/reducers/initialState.ts

@@ -28,6 +28,27 @@ export const appComponent: ComponentInt = {
   changed: false
 };
 
+export const testComponent: ComponentInt = {
+  id: 19,
+  stateful: false,
+  classBased: false,
+  title: 'TEST',
+  color: '#FF6D00',
+  props: [],
+  nextPropId: 1,
+  position: {
+    x: 25,
+    y: 25,
+    width: 1200,
+    height: 800
+  },
+  childrenArray: [],
+  nextChildId: 1,
+  focusChildId: 0,
+  code: '',
+  changed: false
+};
+
 const initialApplicationFocusChild: ChildInt = {
   childId: 0,
   componentName: null,
@@ -101,25 +122,3 @@ export const nativeComponentTypes = [
   'RNTextInput',
   'RNTouchOpacity'
 ];
-
-// used for reducer testing
-export const testComponent: ComponentInt = {
-  id: 19,
-  stateful: false,
-  classBased: false,
-  title: 'TEST',
-  color: '#FF6D00',
-  props: [],
-  nextPropId: 1,
-  position: {
-    x: 25,
-    y: 25,
-    width: 1200,
-    height: 800
-  },
-  childrenArray: [],
-  nextChildId: 1,
-  focusChildId: 0,
-  code: '',
-  changed: false
-};

src/reducers/leftReducers.ts

@@ -35,7 +35,7 @@ export const addChild = (
   // if childType is NOT included in the array of NATIVE React types && also not coming from left panel then the childType will revert to HTML
   !nativeComponentTypes.includes(childType) && childType !== 'COMP'
     ? (childType = 'HTML')
-    : childType = childType === 'COMP' ? 'COMP' : 'NATIVE';
+    : (childType = childType === 'COMP' ? 'COMP' : 'NATIVE');
 
   // view represents the curretn FOCUSED COMPONENT - this is the component where the child is being added to
   // we only add childrent (or do any action) to the focused omconent
@@ -302,6 +302,7 @@ export const deleteChild = (
     however when deleting  component we wnt to delete ALL the places where it's used, so we call this function
     Also when calling from DELETE components , we do not touch focusComponent.
    ************************************************************************************ */
+
   if (!parentId) {
     window.alert('Cannot delete root child of a component');
     return state;
@@ -314,7 +315,7 @@ export const deleteChild = (
     window.alert('Cannot delete root child of a component');
     return state;
   }
-  // make a DEEP copy of the parent component (the one thats about to loose a child)
+  // make a DEEP copy of the parent component (the one thats about to lose a child)
   const parentComponentCopy: any = cloneDeep(
     state.components.find((comp: ComponentInt) => comp.id === parentId)
   );

src/utils/componentRender.util.ts

@@ -162,8 +162,10 @@ const componentRender = (
           return `import {${importNativeNameGenerator(
             child
           )}} from 'react-native'`;
-        } else
-          `import ${child.componentName} from './${child.componentName}.tsx'`;
+        }
+        if (child.childType === 'COMP') {
+          return `import ${child.componentName} from './${child.componentName}.tsx'`;
+        }
       })
       .reduce((acc: Array<string>, child) => {
         if (!acc.includes(child)) {

src/utils/createApplication.util.ts

@@ -87,7 +87,8 @@ export const createPackage = (path, appName) => {
     "express": "^4.16.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "webpack": "^4.29.6"
+    "webpack": "^4.29.6",
+    "react-native": "^0.62.1",
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
@@ -284,7 +285,7 @@ app.listen(8080, () => {
 async function createApplicationUtil({
   path,
   appName,
-  genOption,
+  genOption
 }: {
   path: string;
   appName: string;