Merge pull request #46 from oslabs-beta/staging-faast

Add Jest Testing by Fredo

Author: andrewjcho84

__tests__/componentReducer.test.ts

@@ -0,0 +1,80 @@
+import reducer from '../app/src/reducers/componentReducer';
+import { State, Action, Component, ChildElement } from '../app/src/interfaces/InterfacesNew';
+
+import initialState from '../app/src/context/initialState';
+
+
+describe('Testing componentReducer functionality', function () {
+  let state: State = initialState;
+  
+
+  // TEST 'ADD COMPONENT'
+  describe('ADD COMPONENT reducer', () => {
+    it('should add new reuseable component to state', () => {
+      const action = {
+        type: 'ADD COMPONENT',
+        payload: {
+          componentName: "TestRegular",
+          root: false
+        }
+      }
+      state = reducer(state, action);
+      // expect state.components array to have length 2
+      const length = state.components.length;
+      expect(length).toEqual(2);
+      // expect new component name to match name of last elem in state.components array
+      expect(state.components[length - 1].name).toEqual(action.payload.componentName);
+    })
+  })
+
+  // TEST 'ADD CHILD'
+  describe('ADD CHILD reducer', () => {
+    it('should add child component to top-level component', () => {
+      const action = {
+        type: 'ADD CHILD',
+        payload: {
+          type: 'Component',
+          typeId: 2,
+          childId: null
+        }
+      }
+      // switch focus to very first root component
+      state.canvasFocus = { componentId: 1, childId: null };
+      console.log(state);
+      state = reducer(state, action);
+      const newParent = state.components[0];
+      // expect new parent's children array to have length 1
+      expect(newParent.children.length).toEqual(1);
+      // expect new child to have type 'Component' 
+      console.log('new child ', newParent.children[0]);
+      expect(newParent.children[0].type).toEqual('Component');
+      const addedChild = state.components.find(comp => comp.id === newParent.children[0].typeId);
+      // expect new child typeId to correspond to component with name 'TestRegular'
+      expect(addedChild.name).toEqual('TestRegular');
+    })
+  })
+  
+  // TEST 'CHANGE FOCUS'
+  describe('CHANGE FOCUS reducer', () => {
+    it('should change focus to specified component', () => {
+      const action = {
+        type: 'CHANGE FOCUS',
+        payload: {
+          componentId: 2,
+          childId: null
+        }
+      }
+      console.log('before change focus ', state.canvasFocus);
+      state = reducer(state, action);
+      console.log('after change focus ', state.canvasFocus);
+      expect(state.canvasFocus.componentId).toEqual(2);
+      expect(state.canvasFocus.childId).toEqual(null);
+    })
+  })
+
+  // TEST 'UPDATE CSS'
+
+
+  // TEST 'RESET STATE'
+
+})

app/electron/main.js

@@ -10,17 +10,22 @@ const {
 // The splash screen is what appears while the app is loading
 const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
 const { resolve } = require('app-root-path');
-const Protocol = require('./protocol');
-const MenuBuilder = require('./menu');
-const path = require('path');
 
 const {
   default: installExtension,
   REACT_DEVELOPER_TOOLS
 } = require('electron-devtools-installer');
 const debug = require('electron-debug');
 
-const isDev = process.env.NODE_ENV === 'development';
+const Protocol = require('./protocol');
+// menu from another file to modularize the code
+const MenuBuilder = require('./menu');
+
+const path = require('path');
+// const fs = require('fs');
+
+console.log('NODE ENV is ', process.env.NODE_ENV);
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ;
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 
@@ -189,18 +194,19 @@ app.on('ready', createWindow);
 app.on('window-all-closed', () => {
   // On macOS it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit();
-  } else {
-    ContextMenu.clearMainBindings(ipcMain);
-  }
+  // if (process.platform !== 'darwin') {
+  //   app.quit();
+  // } else {
+  //   ContextMenu.clearMainBindings(ipcMain);
+  // }
+  app.quit();
 });
 
-app.on('activate', () => {
+app.on('activate', async () => {
   // On macOS it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (win === null) {
-    createWindow();
+    await createWindow();
   }
 });
 

app/src/components/App.tsx

@@ -1,6 +1,5 @@
 import React, {  useReducer, useEffect } from 'react';
 import '../public/styles/style.css';
-import '../public/styles/styleNew.css';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import AppContainer from '../containers/AppContainer';

app/src/helperFunctions/generateCode.ts

@@ -1,5 +1,12 @@
 import { Component, State, ChildElement } from '../interfaces/InterfacesNew';
 import HTMLTypes from '../context/HTMLTypes';
+const { format } = require('prettier');
+
+declare global {
+  interface Window {
+    api: any;
+  }
+}
 
 // generate code based on the component heirarchy
 const generateUnformattedCode = (
@@ -211,14 +218,20 @@ const generateUnformattedCode = (
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  return window.api.formatCode(code);
-  // return format(code, {
-  //   singleQuote: true,
-  //   trailingComma: 'es5',
-  //   bracketSpacing: true,
-  //   jsxBracketSameLine: true,
-  //   parser: 'babel'
-  // });
+
+  // in test environment, window.api is not defined,
+  // so we reference original prettier format function instead
+  if (process.env.NODE_ENV === 'test') {
+    return format(code, {
+      singleQuote: true,
+      trailingComma: 'es5',
+      bracketSpacing: true,
+      jsxBracketSameLine: true,
+      parser: 'babel'
+    });
+  } else {
+    return window.api.formatCode(code);
+  }
 };
 
 // generate code based on component heirarchy and then return the rendered code

app/src/public/styles/style.css

@@ -301,12 +301,6 @@ div.rst__rowContents {
   cursor: pointer;
 }
 
-/* @media only screen and (max-width: 560px) {
-  .app-container {
-    width: 80%;
-  }
-} */
-
 a.nav_link {
   color: rgba(0, 0, 0, 0.87);
   cursor: pointer;
@@ -316,3 +310,62 @@ a.nav_link:hover {
   color: #3ec1ac;
   text-decoration: underline;
 }
+
+// Additional styling for ReacType X
+
+.componentDefault {
+  width: 100%;
+  border: 2px solid gray;
+  min-height: 150px;
+  padding: 10px;
+  background-color: lightgray;
+  opacity: 0.75;
+}
+
+.componentPanelWrapper {
+  margin-top: 75px;
+  width: 100%;
+}
+
+.inputName {
+  margin-bottom: 35px;
+  text-align: center;
+}
+
+.makeStyles-panelWrapperList-4::-webkit-scrollbar-track {
+  background-color: rgba(25, 25, 25, 0.8);
+}
+
+h4 {
+  color: white;
+  text-align: center;
+}
+
+h3 {
+  margin: 0;
+  padding-left: 15px;
+  padding-top: 15px;
+  font-size: 1em;
+  letter-spacing: 0.5px;
+}
+
+.compPanelItem {
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+.compPanelItem h3 {
+  padding-top: 25px;
+  font-size: 1.15em;
+  letter-spacing: 0.75px;
+}
+
+.compPanelItem:hover {
+  cursor: pointer;
+}
+
+.right {
+  padding-top: 35px;
+  width: 420px;
+}

app/src/public/styles/styleNew.css

@@ -133,7 +133,7 @@ const reducer = (state: State, action: Action) => {
         type,
         typeId,
         childId
-      }: { type: string; typeId: number; childId: number } = 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;