Merge pull request #59 from oslabs-beta/v4_stage

V4 stage

Author: Berghoer

src/components/Modals/ExportFileModal.jsx

@@ -63,7 +63,6 @@ const ExportFileModal = ({ isExportModalOpen, setIsExportModalOpen }) => {
 
   const displayTestFile = (testFolderFilePath) => {
     const fileContent = fs.readFileSync(testFolderFilePath + `/${fileName}.test.js`, 'utf8');
-    console.log('fileContent: ', fileContent);
     dispatchToGlobal(updateFile(fileContent));
     dispatchToGlobal(toggleFolderView(testFolderFilePath));
     dispatchToGlobal(highlightFile(`${fileName}.test.js`));

src/components/Modals/Modal.jsx

@@ -50,6 +50,7 @@ const Modal = ({
           <pre>
             <div className='code-wrapper'>
               <code ref={codeRef}>{script}</code>
+              <p id={styles.endpoint}>Note if you are using Create React App do not install jest</p>
             </div>
           </pre>
         )}

src/components/Modals/modalHooks.js

@@ -41,19 +41,19 @@ export function useGenerateScript(test) {
     case 'react':
       return (
         `cd ${projectFilePath}\n` +
-        'npm i -D jest @testing-library/jest-dom @testing-library/react test-data-bot\n' +
+        'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot jest\n' +
         'npm run test'
       );
     case 'redux':
       return (
         `cd ${projectFilePath}\n` +
-        'npm i -D jest @testing-library/jest-dom @testing-library/react test-data-bot redux-mock-store redux-thunk fetch-mock\n' +
+        'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot redux-mock-store redux-thunk fetch-mock node-fetch jest\n' +
         'npm run test'
       );
     case 'hooks':
       return (
         `cd ${projectFilePath}\n` +
-        'npm i -D jest @testing-library/jest-dom @testing-library/react test-data-bot @testing-library/react-hooks\n' +
+        'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot @testing-library/react-hooks jest\n' +
         'npm run test'
       );
     case 'endpoint':

src/components/NavBar/NavBar.jsx

@@ -26,7 +26,7 @@ const homeIcon = require('../../assets/images/home.png');
 
 const NavBar = () => {
   const [
-    { fileTree, isFileDirectoryOpen, url, projectUrl, rightPanelDisplay },
+    { fileTree, isFileDirectoryOpen, projectUrl, rightPanelDisplay },
     dispatchToGlobal,
   ] = useContext(GlobalContext);
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);

src/components/ReduxTestComponent/ActionCreator/ActionCreator.jsx

@@ -1,21 +1,16 @@
 import React, { useContext } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styles from './ActionCreator.module.scss';
-import { GlobalContext } from '../../../context/reducers/globalReducer';
 import { ReduxTestCaseContext } from '../../../context/reducers/reduxTestCaseReducer';
 import {
   deleteActionCreator,
   updateActionCreator,
-  updateActionsFilePath,
-  updateTypesFilePath,
 } from '../../../context/actions/reduxTestCaseActions';
-import SearchInput from '../../SearchInput/SearchInput';
 
 const closeIcon = require('../../../assets/images/close.png');
 const dragIcon = require('../../../assets/images/drag-vertical.png');
 
 const ActionCreator = ({ actionCreator, index }) => {
-  const [{ filePathMap }] = useContext(GlobalContext);
   const [, dispatchToReduxTestCase] = useContext(ReduxTestCaseContext);
 
   const handleChangeActionCreatorFields = (e, field) => {

src/components/ReduxTestComponent/Middleware/Middleware.jsx

@@ -1,20 +1,13 @@
 import React, { useContext } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styles from './Middleware.module.scss';
-import { GlobalContext } from '../../../context/reducers/globalReducer';
 import { ReduxTestCaseContext } from '../../../context/reducers/reduxTestCaseReducer';
-import {
-  deleteMiddleware,
-  updateMiddleware,
-  updateMiddlewaresFilePath,
-} from '../../../context/actions/reduxTestCaseActions';
-import SearchInput from '../../SearchInput/SearchInput';
+import { deleteMiddleware, updateMiddleware } from '../../../context/actions/reduxTestCaseActions';
 
 const closeIcon = require('../../../assets/images/close.png');
 const dragIcon = require('../../../assets/images/drag-vertical.png');
 
 const Middleware = ({ middleware, index }) => {
-  const [{ filePathMap }] = useContext(GlobalContext);
   const [, dispatchToReduxTestCase] = useContext(ReduxTestCaseContext);
 
   const handleChangeMiddlewareFields = (e, field) => {

src/components/ReduxTestComponent/Reducer/Reducer.jsx

@@ -3,7 +3,6 @@ import { Draggable } from 'react-beautiful-dnd';
 import styles from './Reducer.module.scss';
 import { ReduxTestCaseContext } from '../../../context/reducers/reduxTestCaseReducer';
 import { deleteReducer, updateReducer } from '../../../context/actions/reduxTestCaseActions';
-import { updateHooksTestStatement } from '../../../context/actions/hooksTestCaseActions';
 
 const closeIcon = require('../../../assets/images/close.png');
 const dragIcon = require('../../../assets/images/drag-vertical.png');
@@ -118,33 +117,3 @@ const Reducer = ({ reducer, index }) => {
 };
 
 export default Reducer;
-
-{
-  /* <div id={styles.reducerNameFlexBox}> */
-}
-{
-  /* <div id={styles.reducerName}>
-              <label htmlFor='typesFile'>Import Reducer From</label>
-              <SearchInput
-                options={Object.keys(filePathMap)}
-                dispatch={dispatchToReduxTestCase}
-                action={updateReducersFilePath}
-                filePathMap={filePathMap}
-              />
-            </div> */
-}
-{
-  /* <div id={styles.reducerName}>
-              <label htmlFor='typesFile'>Import Action Types From</label>
-              <SearchInput
-                options={Object.keys(filePathMap)}
-                dispatch={dispatchToReduxTestCase}
-                filePathMap={filePathMap}
-                updateTypesFilePath={updateTypesFilePath}
-                id={reducer.id}
-              />
-            </div> */
-}
-{
-  /* </div> */
-}

src/components/ReduxTestComponent/Thunk/Thunk.jsx

@@ -1,16 +1,13 @@
 import React, { useContext } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styles from './Thunk.module.scss';
-import { GlobalContext } from '../../../context/reducers/globalReducer';
 import { ReduxTestCaseContext } from '../../../context/reducers/reduxTestCaseReducer';
 import { deleteAsync, updateAsync } from '../../../context/actions/reduxTestCaseActions';
 
 const closeIcon = require('../../../assets/images/close.png');
 const dragIcon = require('../../../assets/images/drag-vertical.png');
-const questionIcon = require('../../../assets/images/help-circle.png');
 
 const Async = ({ async, index }) => {
-  const [{ filePathMap }] = useContext(GlobalContext);
   const [, dispatchToReduxTestCase] = useContext(ReduxTestCaseContext);
 
   const handleChangeAsyncFields = (e, field) => {
@@ -44,7 +41,7 @@ const Async = ({ async, index }) => {
               <input
                 type='text'
                 name='it'
-                placeholder='eg/ should return expected action'
+                placeholder='e.g. store should hold expected action'
                 onChange={(e) => handleChangeAsyncFields(e, 'it')}
               />
             </div>
@@ -73,7 +70,7 @@ const Async = ({ async, index }) => {
 
           <div id={styles.groupFlexbox}>
             <div id={styles.labelInput}>
-              <label htmlFor='expectedArg'>argument 1</label>
+              <label htmlFor='expectedArg'>Argument 1</label>
               <div id={styles.inputFlexBox}>
                 <input
                   type='text'
@@ -101,12 +98,12 @@ const Async = ({ async, index }) => {
               </div>
             </div>
             <div id={styles.labelInput}>
-              <label htmlFor='payloadKey'>argument 2</label>
+              <label htmlFor='payloadKey'>Argument 2</label>
               <input
                 type='text'
                 id='payloadKey'
                 onChange={(e) => handleChangeAsyncFields(e, 'payloadKey')}
-                placeholder='e.g. todo'
+                placeholder='e.g. id'
               />
             </div>
             <div id={styles.dropdownWrapper}>
@@ -156,31 +153,6 @@ const Async = ({ async, index }) => {
               </div>
             </div>
           </div>
-
-          {async.responseType === 'object' ? (
-            <div id={styles.groupFlexbox}>
-              <div id={styles.labelInput}>
-                <label htmlFor='responseKey'>Response Key</label>
-                <div id={styles.inputFlexBox}>
-                  <input
-                    type='text'
-                    name='responseKey'
-                    onChange={(e) => handleChangeAsyncFields(e, 'responseKey')}
-                  />
-                </div>
-              </div>
-              <div id={styles.labelInput}>
-                <label htmlFor='responseValue'>Response Value</label>
-                <div id={styles.inputFlexBox}>
-                  <input
-                    type='text'
-                    name='responseValue'
-                    onChange={(e) => handleChangeAsyncFields(e, 'responseValue')}
-                  />
-                </div>
-              </div>
-            </div>
-          ) : null}
         </div>
       )}
     </Draggable>

src/components/SearchInput/SearchInput.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import './SearchInput.scss';
+import { ReduxTestCaseContext } from '../../context/reducers/reduxTestCaseReducer';
 
 const SearchInput = ({
   dispatch,
@@ -16,6 +17,7 @@ const SearchInput = ({
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
   const [userInput, setUserInput] = useState('');
+  const [, dispatchToReduxTestCase] = useContext(ReduxTestCaseContext);
 
   const handleChange = (e) => {
     const input = e.currentTarget.value;
@@ -38,7 +40,13 @@ const SearchInput = ({
 
     const selectedOption = e.target.type;
     const filePath = filePathMap[selectedOption] || '';
-    if (updateTypesFilePath) dispatch(updateTypesFilePath(selectedOption, filePath, type)); //type));
+    if (updateTypesFilePath) {
+      if (dispatchToReduxTestCase === dispatch) {
+        dispatch(updateTypesFilePath(selectedOption, filePath, 'reducer'));
+        dispatch(updateTypesFilePath(selectedOption, filePath, 'async'));
+        dispatch(updateTypesFilePath(selectedOption, filePath, 'action-creator'));
+      } else dispatch(updateTypesFilePath(selectedOption, filePath, type));
+    } //type));
     if (updateActionsFilePath) dispatch(updateActionsFilePath(selectedOption, filePath, type));
     if (action) dispatch(action(selectedOption, filePath));
   };
@@ -51,7 +59,13 @@ const SearchInput = ({
       const selectedOption = filteredOptions[activeOption];
       const filePath = filePathMap[selectedOption] || '';
       if (action) dispatch(action(selectedOption, filePath));
-      if (updateTypesFilePath) dispatch(updateTypesFilePath(selectedOption, filePath, type)); //type));
+      if (updateTypesFilePath) {
+        if (dispatchToReduxTestCase === dispatch) {
+          dispatch(updateTypesFilePath(selectedOption, filePath, 'reducer'));
+          dispatch(updateTypesFilePath(selectedOption, filePath, 'async'));
+          dispatch(updateTypesFilePath(selectedOption, filePath, 'action-creator'));
+        } else dispatch(updateTypesFilePath(selectedOption, filePath, type));
+      } //type));
     } else if (e.keyCode === 38) {
       if (activeOption === 0) {
         return;

src/components/TestCase/HooksTestStatements.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import Context from '../ReactHooksTestComponent/Context/Context';
 import HookUpdates from '../ReactHooksTestComponent/HookUpdates/HookUpdates';
 import { HooksTestCaseContext } from '../../context/reducers/hooksTestCaseReducer';
 import { HooksStatements } from '../../utils/hooksTypes';