Merge pull request #91 from oslabs-beta/master

Spearmint 3.0

Author: sieunjang

.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
+  }
+}

.travis.yml

@@ -4,6 +4,8 @@ node_js:
 cache:
   directories:
     - node_modules
-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,27 @@ 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)  · 
+> Charlie [@charlie-maloney](https://github.com/charlie-maloney)  · 
 > Chloe [@HeyItsChloe](https://github.com/HeyItsChloe)  · 
 > Cornelius [@corneeltron](https://github.com/corneeltron)  · 
-> Dave [@davefranz](https://github.com/davefranz)  · 
-> Johnny [@johnny-lim](https://github.com/johnny-lim) <br />
+> Dave [@davefranz](https://github.com/davefranz) <br />
+> Johnny [@johnny-lim](https://github.com/johnny-lim) &nbsp;&middot;&nbsp;
 > 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;
+> Mike [@mbcoker](https://github.com/mbcoker) <br />
 > Natlyn [@natlynp](https://github.com/natlynp) &nbsp;&middot;&nbsp;
-> Rachel [@rachethecreator](https://github.com/rachethecreator)
+> Rachel [@rachethecreator](https://github.com/rachethecreator) &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,12 +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",
+    "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",
     "jest-dom": "^3.5.0",
     "react-test-renderer": "^16.12.0",
     "spectron": "^5.0.0",

public/electron.js

@@ -1,14 +1,22 @@
+require('dotenv').config()
 const { app, BrowserWindow } = require('electron');
 const path = require('path');
 const isDev = require('electron-is-dev');
-
 let mainWindow;
-let testView;
 
+if (process.env.NODE_ENV === 'development') {
+  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,23 +25,24 @@ 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 (process.env.NODE_ENV === 'development') {
+  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.

public/newReact.png

@@ -1,37 +1,42 @@
 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 { GlobalContext, globalState, globalReducer } from './context/reducers/globalReducer';
+import { ReactTestCaseContext, reactTestCaseState, reactTestCaseReducer } from './context/reducers/reactTestCaseReducer';
+import {
+  PuppeteerTestCaseContext,
+  puppeteerTestCaseState,
+  puppeteerTestCaseReducer,
+} from './context/reducers/puppeteerTestCaseReducer';
 import {
   EndpointTestCaseContext,
   endpointTestCaseState,
   endpointTestCaseReducer,
-} from './context/endpointTestCaseReducer';
+} from './context/reducers/endpointTestCaseReducer';
 import {
   ReduxTestCaseContext,
   reduxTestCaseState,
   reduxTestCaseReducer,
-} from './context/reduxTestCaseReducer';
+} from './context/reducers/reduxTestCaseReducer';
 import {
   HooksTestCaseContext,
   hooksTestCaseState,
   hooksTestCaseReducer,
-} from './context/hooksTestCaseReducer';
+} from './context/reducers/hooksTestCaseReducer';
 import {
   TestFileModalContext,
   testFileModalState,
   testFileModalReducer,
-} from './context/testFileModalReducer';
+} from './context/reducers/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 { MockDataContext, mockDataState, mockDataReducer } from './context/reducers/mockDataReducer';
+import ProjectLoader from './pages/ProjectLoader/ProjectLoader';
+import NavBar from './components/NavBar/NavBar';
+import LeftPanel from './pages//LeftPanel/LeftPanel';
+import RightPanel from './pages/RightPanel/RightPanel';
 
 const App = () => {
   const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
-  const [testCase, dispatchToTestCase] = useReducer(testCaseReducer, testCaseState);
+  const [reactTestCase, dispatchToReactTestCase] = useReducer(reactTestCaseReducer, reactTestCaseState);
   const [mockData, dispatchToMockData] = useReducer(mockDataReducer, mockDataState);
   const [endpointTestCase, dispatchToEndpointTestCase] = useReducer(
     endpointTestCaseReducer,
@@ -46,11 +51,16 @@ const App = () => {
     hooksTestCaseReducer,
     hooksTestCaseState
   );
+  const [puppeteerTestCase, dispatchToPuppeteerTestCase] = useReducer(
+    puppeteerTestCaseReducer,
+    puppeteerTestCaseState
+  );
   const [testFileModal, dispatchToTestFileModal] = useReducer(
     testFileModalReducer,
     testFileModalState
   );
 
+
   if (!global.isProjectLoaded) {
     return (
       <div>
@@ -73,25 +83,28 @@ 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.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 />
+          <ReduxTestCaseContext.Provider value={[reduxTestCase, dispatchToReduxTestCase]}>
+            <ReactTestCaseContext.Provider value={[reactTestCase, dispatchToReactTestCase]}>
+                <EndpointTestCaseContext.Provider value={[endpointTestCase, dispatchToEndpointTestCase]}>
+                  <HooksTestCaseContext.Provider value={[hooksTestCase, dispatchToHooksTestCase]}>
+                    <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
+                      <MockDataContext.Provider value={[mockData, dispatchToMockData]}>
+                        <PuppeteerTestCaseContext.Provider value={[puppeteerTestCase, dispatchToPuppeteerTestCase]}>
+                          <NavBar />
+                          <LeftPanel />
+                        </PuppeteerTestCaseContext.Provider>
+                      </MockDataContext.Provider>
+                    </TestFileModalContext.Provider>
+                  </HooksTestCaseContext.Provider>
+                </EndpointTestCaseContext.Provider>
+            </ReactTestCaseContext.Provider>
+          </ReduxTestCaseContext.Provider>
+          {global.isRightPanelOpen ?  <RightPanel /> : ''}
         </GlobalContext.Provider>
       </div>
     );

public/testfile.png

@@ -3,18 +3,40 @@
 @import 'assets/stylesheets/fonts';
 @import 'assets/stylesheets/colors';
 
-#appGridOpen {
+//file directory is open but right panel is closed
+#fileDirectoryOpenRightPanelClosed {
+  display: grid;
+  grid-template-columns: 280px auto;
+  grid-template-rows: 100vh;
+  grid-template-areas: 'navBar leftPanel';
+  background-color: $light-gray3;
+}
+
+//both open 
+#fileDirectoryOpenRightPanelOpen {
   display: grid;
   grid-template-columns: 280px auto 40%;
   grid-template-rows: 100vh;
   grid-template-areas: 'navBar leftPanel rightPanel';
   background-color: $light-gray3;
 }
 
-#appGridClose {
+//file directory is closed but right panel is open
+#fileDirectoryClosedRightPanelOpen {
   display: grid;
   grid-template-columns: 48px auto 50%;
   grid-template-rows: 100vh;
   grid-template-areas: 'navBar leftPanel rightPanel';
   background-color: $light-gray3;
 }
+
+//both closed
+#fileDirectoryClosedRightPanelClosed {
+  display: grid;
+  grid-template-columns: 48px auto;
+  grid-template-rows: 100vh;
+  grid-template-areas: 'navBar leftPanel';
+  background-color: $light-gray3;
+}
+
+