Merge pull request #25 from JIB3377/endpoint-guide

Linked Puppeteer testing command to terminal & Added Endpoint-config Guide to the modal

Author: MaxWeisen

src/components/Modals/ExportFileModal.module.scss

@@ -224,6 +224,15 @@
   flex: 1;
   flex-direction: column;
 }
+#endPointGuide {
+  margin: 8px;
+}
+#configGuide {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  line-height: normal;
+}
 
 pre {
   display: flex;

src/components/Modals/Modal.jsx

@@ -7,7 +7,7 @@ import React, { useState, useContext } from 'react';
 import ReactModal from 'react-modal';
 import styles from './ExportFileModal.module.scss';
 import { useCopy, useNewTest, useGenerateScript } from './modalHooks';
-import {setTabIndex,} from '../../context/actions/globalActions';
+import { setTabIndex, } from '../../context/actions/globalActions';
 // Accordion view
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
@@ -68,7 +68,7 @@ const Modal = ({
   }
 
   const changeDirectory = () => {
-    ipc.send('terminal.toTerm', `"${script.cd}"${execute}`);
+    ipc.send('terminal.toTerm', `${script.cd}${execute}`);
     setBtnFeedback({ ...btnFeedback, changedDir: true });
   };
 
@@ -100,36 +100,36 @@ const Modal = ({
   if (title === 'New Test') {
     return (
       <ReactModal
-      className={styles.modal}
-      isOpen={isModalOpen}
-      onRequestClose={closeModal}
-      contentLabel="Save?"
-      shouldCloseOnOverlayClick={true}
-      shouldCloseOnEsc={true}
-      ariaHideApp={false}
-      style={{
-        content: {
-          top: '20%',
-          left: isFileDirectoryOpen ? '22%' : '11%',
-        },
-        overlay: {
-          zIndex: 3,
-          left: isFileDirectoryOpen ? '276px' : '46px',
-          minWidth: isFileDirectoryOpen ? '600px' : '600px',
-          width: isFileDirectoryOpen ? 'calc(59.9% - 276px)':'calc(49.9% - 46px)',
-        },
-      }}>
+        className={styles.modal}
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        contentLabel="Save?"
+        shouldCloseOnOverlayClick={true}
+        shouldCloseOnEsc={true}
+        ariaHideApp={false}
+        style={{
+          content: {
+            top: '20%',
+            left: isFileDirectoryOpen ? '22%' : '11%',
+          },
+          overlay: {
+            zIndex: 3,
+            left: isFileDirectoryOpen ? '276px' : '46px',
+            minWidth: isFileDirectoryOpen ? '600px' : '600px',
+            width: isFileDirectoryOpen ? 'calc(59.9% - 276px)' : 'calc(49.9% - 46px)',
+          },
+        }}>
         <div id={styles.title}>
           <p>{title}</p>
         </div>
 
         <div id={styles.body}>
           <p id={styles.text}>
             Do you want to start a new test? All unsaved changes
-            <br/>
+            <br />
             will be lost.
           </p>
-          <span id={styles.newTestButtons} style={{justifyContent: 'center', alignItems: 'center'}}>
+          <span id={styles.newTestButtons} style={{ justifyContent: 'center', alignItems: 'center' }}>
             <button id={styles.save} onClick={handleNewTest}>
               {title}
             </button>
@@ -139,9 +139,39 @@ const Modal = ({
           </span>
         </div>
       </ReactModal>
-      );
+    );
   }
 
+
+  const EndPointGuide = () => {
+    // endpoint guide only exists when user is in endpoint testing
+    if (script.endPointGuide) {
+      const array = [];
+      for (let step in script.endPointGuide) {
+        array.push(<div id={styles.endPointGuide}>{script.endPointGuide[step]}{'\n'}</div>)
+      }
+      // return accordion element 
+      return (
+        <Accordion hidden={false}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+            id={styles.accordionSummary}
+          >
+            Endpoint Testing Configuration Guide
+        </AccordionSummary>
+          <AccordionDetails id={styles.configGuide}>
+            {array}
+          </AccordionDetails>
+        </Accordion>
+      );
+    }
+
+    // return anything to not render accordion
+    return true;
+  };
+
   return (
     <ReactModal
       className={styles.modal2}
@@ -161,7 +191,7 @@ const Modal = ({
         overlay: {
           left: isFileDirectoryOpen ? '276px' : '46px',
           minWidth: isFileDirectoryOpen ? '600px' : '600px',
-          width: isFileDirectoryOpen ? 'calc(59.9% - 276px)':'calc(49.9% - 46px)',
+          width: isFileDirectoryOpen ? 'calc(59.9% - 276px)' : 'calc(49.9% - 46px)',
         },
       }}
     >
@@ -179,6 +209,7 @@ const Modal = ({
       {/* Accordian View */}
       <div>
         {/* Configuration Guide */}
+        <EndPointGuide />
         <Accordion>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
@@ -282,7 +313,7 @@ const Modal = ({
               {/* To do: make button toggle on/off */}
               <pre>
                 <div className="code-wrapper">
-                  <code>  
+                  <code>
                     {`jest ${fileName}\n`}
                     {`jest --verbose ${fileName}\n`}
                     {`jest --coverage ${fileName}\n`}

src/components/Modals/modalHooks.js

@@ -57,10 +57,10 @@ export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.
       }
       if (testType === 'puppeteer') {
         return (
-          `cd ${projectFilePath}
-          npm i -D axe-core puppeteer
-          node <YOUR_DIR_PATH/TEST_FILE.JS> ${puppeteerUrl}
-          `
+          {
+            cd: `cd ${projectFilePath}`,
+            install: 'npm i -D axe-core puppeteer',
+          }
         );
       }
       return 'error';
@@ -87,14 +87,14 @@ export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.
       );
     case 'endpoint':
       const endPointGuide = {
-        Pre: "Please follow these steps to configure your files correctly. The tests will not run properly if you skip these steps",
-        1: `Your server file MUST export your server object.`,
-        2: `Comment out or remove the appropriate lines of code where the call to the server's listen method takes place`,
-        3: `If you are testing a route that involves querying a database, you must import the file where your database instance is created.`,
-        4: `In that file, you must export your database instance object`,
-        '4a': `PostgreSQL: Pool, Client, or pg object`,
-        '4b': `MongoDB: MongoClient instance`,
-        '4c': `Mongoose: mongoose instance`,
+        1: `1. Please follow these steps to configure your files correctly. The tests will not run properly if you skip these steps.`,
+        2: `2. Your server file MUST export your server object.`,
+        3: `3. Comment out or remove the appropriate lines of code where the call to the server's listen method takes place.`,
+        4: `4. If you are testing a route that involves querying a database, you must import the file where your database instance is created.`,
+        5: `5. In that file, you must export your database instance object.`,
+        '5a': `5a. PostgreSQL: Pool, Client, or pg object.`,
+        '5b': `5b. MongoDB: MongoClient instance.`,
+        '5c': `5c. Mongoose: mongoose instance.`,
       }
       return (
         {
@@ -104,7 +104,12 @@ export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.
         }
       );
     case 'puppeteer':
-      return `cd ${projectFilePath}\nnpm i -D jest puppeteer\nnpm run test`;
+      return (
+        {
+          cd: `cd ${projectFilePath}`,
+          install: 'npm i -D puppeteer',
+        }
+      );
     default:
       return '';
     // code block