Merge pull request #99 from open-source-labs/master

Update staging branch

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc

@@ -0,0 +1,15 @@
+{
+  "extends": ["airbnb-typescript"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "arrow-body-style": "off",
+    "no-plusplus": "off",
+    "no-param-reassign": "off"
+  },
+  "env": {
+    "jest": true,
+    "browser": true
+  }
+}

.gitignore

@@ -23,3 +23,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+#configuration
+.vscode

.travis.yml

@@ -1,11 +1,11 @@
 language: node_js
 node_js:
-  - 'node'
+  - node
 cache:
   directories:
     - node_modules
-script:
-  - npm run build
-deplloy:
+script: 
+  - npm test
+deploy:
   skip_cleanup: true
-  on: master
+  on: master

README.md

@@ -1,6 +1,6 @@
 ![](https://lh5.googleusercontent.com/5Gr2dZXHJdmIiASsPw9put-6mR20e4g1gOk-af4krREaJ7NqkZnqXLD5QgiotfNHYhGRh387HSqdhjRwxdwOvQzg9ChhfIrZz0FdxVu6gktBtG-sy1MX6Xq36Gmrzu_6G_K7LDQZ)
 
-Spearmint helps developers easily create functional React/Redux/Endpoint tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.
+Spearmint helps developers easily create functional React/Redux/Endpoint/Paint Timing tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.
 
 ## How to use
 
@@ -22,6 +22,10 @@ To run Endpoint tests generated by spearmint, install the following in your dev
 
     npm i -D jest supertest
 
+To run Puppeteer tests generated by spearmint, install the following in your dev dependencies.
+
+    npm i -D jest puppeteer
+
 ## How it works
 
 1.  On the initial screen, enter the URL of your project and load your application to start creating tests.
@@ -30,23 +34,32 @@ To run Endpoint tests generated by spearmint, install the following in your dev
 
 2.  Utilize our auto-complete, drop-down options, and tooltips features to easily create arrangement, action, and assertion test statements for React; reducer, action creator, asynchronous action creator, and middleware test statements for Redux; and hooks, context, and endpoint test statements.
 
-![](https://lh5.googleusercontent.com/5VYUlGG5VDdZxdZEh5aokuilhKRp8B5QyVmxvtW_abLYCAzYN-s-el1oV5WMtGuTzbEO2I6l8Ys_yK2gC0fCi8ISHwjh4LlgezsrPWd7mDEtLbPqBYf1J4pgkGmfIV4yq4I_dpQg)
+![](/public/newReact.png?raw=true)
 
 3.  Refer to the browser view of your app that is displayed on the right to quickly identify values for your selectors and use the file directory to open up a code editor view to easily refer to your codebase for props information.
 
 4.  Spearmint will then convert user input to dynamically generate a test file that will be saved inside a **tests** folder, which you can use to run ‘npm test’ on.
 
-![](https://lh4.googleusercontent.com/zE-ty31I22R7P9-ubFIb4ko6MOBb7r1-56cHX65h9AcF9IsE22RhPKMEdhyR0MJ3PbqNovj1uwxF2T5_klwZ2sWniXfCiXfaEysjQgH5NRskaDFNd-TOGce0oTMn2jPaPEGFHlEq)
+![](/public/testfile.png?raw=true)
 
 ## Team
 
 > Alex [@apark0720](https://github.com/apark0720)  · 
-> Chloe [@HeyItsChloe](https://github.com/HeyItsChloe)  · 
-> Cornelius [@corneeltron](https://github.com/corneeltron)  · 
+> Ben [@bkwak](https://github.com/bkwak)  · 
+> Charlie [@charlie-maloney](https://github.com/charlie-maloney)  · 
+> Chloe [@HeyItsChloe](https://github.com/HeyItsChloe) <br />
+> Cornelius [@corneeltron](https://github.com/corneeltron)  &nbsp;&middot;&nbsp;
 > Dave [@davefranz](https://github.com/davefranz) &nbsp;&middot;&nbsp;
+> Evan [@Berghoer](https://github.com/Berghoer) &nbsp;&middot;&nbsp;
 > Johnny [@johnny-lim](https://github.com/johnny-lim) <br />
 > Julie [@julicious100](https://github.com/julicious100) &nbsp;&middot;&nbsp;
 > Karen [@karenpinilla](https://github.com/karenpinilla) &nbsp;&middot;&nbsp;
 > Linda [@lcwish](https://github.com/lcwish) &nbsp;&middot;&nbsp;
+> Luis [@Luis-KM-Lo](https://github.com/Luis-KM-Lo) <br />
+> Mike [@mbcoker](https://github.com/mbcoker) &nbsp;&middot;&nbsp;
 > Natlyn [@natlynp](https://github.com/natlynp) &nbsp;&middot;&nbsp;
-> Rachel [@rachethecreator](https://github.com/rachethecreator)
+> Nick [@nicolaspita](https://github.com/nicolaspita) &nbsp;&middot;&nbsp;
+> Rachel [@rachethecreator](https://github.com/rachethecreator) <br />
+> Sean [@sean-haverstock](https://github.com/Sean-Haverstock) &nbsp;&middot;&nbsp;
+> Sieun [@sieunjang](https://github.com/sieunjang) &nbsp;&middot;&nbsp;
+> Tristen [@twastell](https://github.com/twastell) 

package.json

@@ -18,9 +18,16 @@
   "homepage": "./",
   "private": true,
   "dependencies": {
+    "@types/jest": "^25.2.3",
+    "@types/react-beautiful-dnd": "^12.1.2",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-modal": "^3.10.5",
+    "classnames": "^2.2.6",
     "concurrently": "^4.1.2",
     "cross-env": "^5.2.1",
+    "dotenv": "^8.2.0",
     "electron-is-dev": "^1.1.0",
+    "fibers": "^5.0.0",
     "js-beautify": "^1.10.0",
     "monaco-editor": "^0.17.0",
     "node-sass": "^4.12.0",
@@ -30,23 +37,21 @@
     "react-dom": "^16.8.6",
     "react-modal": "^3.8.1",
     "react-monaco-editor": "^0.25.1",
-    "react-scripts": "3.0.1",
-    "typescript": "^3.5.1",
+    "react-scripts": "3.4.1",
+    "sass": "^1.26.5",
+    "typescript": "^3.9.2",
     "wait-on": "^3.3.0"
   },
   "scripts": {
     "react-start": "react-scripts start",
-    "react-build": "react-scripts build",
+    "react-build": "NODE_ENV=production react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "test:watch": "jest --watch",
     "react-eject": "react-scripts eject",
-    "electron-build": "electron-builder -mwl",
+    "electron-build": "NODE_ENV=production electron-builder -mwl",
     "release": "npm run react-build && electron-builder --publish=always",
-    "build": "npm run react-build && npm run electron-build",
-    "start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\""
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "build": "NODE_ENV=production npm run react-build && npm run electron-build",
+    "start": "NODE_ENV=development concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\""
   },
   "browserslist": {
     "production": [
@@ -61,13 +66,22 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/jest-dom": "^5.8.0",
+    "@testing-library/react": "^8.0.9",
     "@testing-library/react-hooks": "^3.2.1",
+    "@types/jest": "^25.2.3",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "electron": "^5.0.3",
-    "electron-builder": "^20.43.0",
+    "electron-builder": "^22.6.1",
+    "electron-devtools-installer": "^3.0.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "jest-dom": "^3.5.0",
+    "eslint-config-airbnb-typescript": "^7.2.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "react-test-renderer": "^16.12.0",
     "spectron": "^5.0.0",
     "test-data-bot": "^0.8.0"

public/electron.js

@@ -1,14 +1,26 @@
 const { app, BrowserWindow } = require('electron');
 const path = require('path');
 const isDev = require('electron-is-dev');
-
 let mainWindow;
-let testView;
 
+if (isDev) console.log('electron version', process.versions.electron);
+
+if (isDev) {
+  const {
+    default: installExtension,
+    REACT_DEVELOPER_TOOLS,
+  } = require('electron-devtools-installer');
+  function addDevTools() {
+    app.whenReady().then(() => {
+      installExtension(REACT_DEVELOPER_TOOLS)
+        .then((name) => console.log(`Added Extension:  ${name}`))
+        .catch((err) => console.log('An error occurred: ', err));
+    });
+  }
+}
 function createWindow() {
   mainWindow = new BrowserWindow({
-    width: 1400,
-    minWidth: 1400,
+    width: 1550,
     height: 750,
     minHeight: 750,
     icon: path.join(__dirname, 'public/icon.png'),
@@ -17,21 +29,22 @@ function createWindow() {
       webviewTag: true,
     },
   });
-
   mainWindow.loadURL(
     isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`
   );
   mainWindow.on('closed', () => (mainWindow = null));
 }
 
-app.on('ready', createWindow);
+if (isDev) {
+  app.on('ready', addDevTools);
+}
 
+app.on('ready', createWindow);
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
     app.quit();
   }
 });
-
 app.on('activate', () => {
   if (mainWindow === null) {
     createWindow();

public/index.html

@@ -9,6 +9,7 @@
         manifest.json provides metadata used when your web app is installed on a
         user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
       -->
+    <script src="https://kit.fontawesome.com/3142614e38.js" crossorigin="anonymous"></script>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
         Notice the use of %PUBLIC_URL% in the tags above.

src/App.jsx

@@ -1,59 +1,23 @@
 import React, { useReducer } from 'react';
 import styles from './App.module.scss';
-import { GlobalContext, globalState, globalReducer } from './context/globalReducer';
-import { TestCaseContext, testCaseState, testCaseReducer } from './context/testCaseReducer';
-import {
-  EndpointTestCaseContext,
-  endpointTestCaseState,
-  endpointTestCaseReducer,
-} from './context/endpointTestCaseReducer';
-import {
-  ReduxTestCaseContext,
-  reduxTestCaseState,
-  reduxTestCaseReducer,
-} from './context/reduxTestCaseReducer';
-import {
-  HooksTestCaseContext,
-  hooksTestCaseState,
-  hooksTestCaseReducer,
-} from './context/hooksTestCaseReducer';
-import {
-  TestFileModalContext,
-  testFileModalState,
-  testFileModalReducer,
-} from './context/testFileModalReducer';
-
-import { MockDataContext, mockDataState, mockDataReducer } from './context/mockDataReducer';
-import ProjectLoader from './containers/ProjectLoader/ProjectLoader';
-import NavBar from './containers/NavBar/NavBar';
-import LeftPanel from './containers//LeftPanel/LeftPanel';
-import RightPanel from './containers/RightPanel/RightPanel';
+import { GlobalContext, globalState, globalReducer } from './context/reducers/globalReducer';
+import ProjectLoader from './pages/ProjectLoader/ProjectLoader';
+import NavBar from './components/NavBar/NavBar';
+import LeftPanel from './pages//LeftPanel/LeftPanel';
+import RightPanel from './pages/RightPanel/RightPanel';
+import About from './pages/About/About';
 
 const App = () => {
-  const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
-  const [testCase, dispatchToTestCase] = useReducer(testCaseReducer, testCaseState);
-  const [mockData, dispatchToMockData] = useReducer(mockDataReducer, mockDataState);
-  const [endpointTestCase, dispatchToEndpointTestCase] = useReducer(
-    endpointTestCaseReducer,
-    endpointTestCaseState
-  );
+  // useReducer takes a reducer and initial state as
+  // args and return the current state paired with a dispatch method
+  // distpatchTo method invokes associated reducer function
 
-  const [reduxTestCase, dispatchToReduxTestCase] = useReducer(
-    reduxTestCaseReducer,
-    reduxTestCaseState
-  );
-  const [hooksTestCase, dispatchToHooksTestCase] = useReducer(
-    hooksTestCaseReducer,
-    hooksTestCaseState
-  );
-  const [testFileModal, dispatchToTestFileModal] = useReducer(
-    testFileModalReducer,
-    testFileModalState
-  );
+  const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
 
   if (!global.isProjectLoaded) {
     return (
       <div>
+        {/* pass global state and dispatch function as prop to context provider for child components */}
         <GlobalContext.Provider value={[global, dispatchToGlobal]}>
           <ProjectLoader />
         </GlobalContext.Provider>
@@ -62,7 +26,7 @@ const App = () => {
   } else {
     return (
       /**
-       * Wrap the components that we want to share the unique states with (ex: share testCase state with navbar & left panel (the two containers that hold the components that need testCaseRducer)) in the unique providers (ex: TestCaseContext.Provider).
+       * Wrap the components that we want to share the unique states with.
        * You can only provide one value to a Provider.
        *  - In order to avoid creating separate Contexts, wrap multiples in an array (ex: testCase and dispatchToTestCase).
        *
@@ -73,25 +37,32 @@ const App = () => {
        *
        * We access the value that we gave to the Provider through useContext
        */
-      <div id={global.isFileDirectoryOpen ? styles.appGridOpen : styles.appGridClose}>
+      <div
+        id={
+          global.isProjectLoaded === 'about'
+            ? ''
+            : global.isFileDirectoryOpen
+            ? global.isRightPanelOpen
+              ? styles.fileDirectoryOpenRightPanelOpen
+              : styles.fileDirectoryOpenRightPanelClosed
+            : global.isRightPanelOpen
+            ? styles.fileDirectoryClosedRightPanelOpen
+            : styles.fileDirectoryClosedRightPanelClosed
+        }
+      >
         <GlobalContext.Provider value={[global, dispatchToGlobal]}>
-          <TestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
-            <ReduxTestCaseContext.Provider value={[reduxTestCase, dispatchToReduxTestCase]}>
-              <EndpointTestCaseContext.Provider
-                value={[endpointTestCase, dispatchToEndpointTestCase]}
-              >
-                <HooksTestCaseContext.Provider value={[hooksTestCase, dispatchToHooksTestCase]}>
-                  <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
-                    <MockDataContext.Provider value={[mockData, dispatchToMockData]}>
-                      <NavBar />
-                      <LeftPanel />
-                    </MockDataContext.Provider>
-                  </TestFileModalContext.Provider>
-                </HooksTestCaseContext.Provider>
-              </EndpointTestCaseContext.Provider>
-            </ReduxTestCaseContext.Provider>
-          </TestCaseContext.Provider>
-          <RightPanel />
+          {global.isProjectLoaded === 'about' ? (
+            <>
+              <NavBar inAboutPage={true} />
+              <About dispatch={dispatchToGlobal} />{' '}
+            </>
+          ) : (
+            <>
+              <NavBar inAboutPage={false} />
+              <LeftPanel />
+            </>
+          )}
+          {global.isRightPanelOpen ? <RightPanel /> : ''}
         </GlobalContext.Provider>
       </div>
     );