Merge branch 'master' of https://github.com/oslabs-beta/spearmint

Author: bkwak

src/__tests__/Hooks.test.js

@@ -0,0 +1,40 @@
+import { renderHook, act, cleanup } from '@testing-library/react-hooks';
+import useToggleModal from '../components/TestMenu/testMenuHooks';
+
+afterEach(cleanup);
+test('hooks should render', () => {
+  const { result } = renderHook(() => useToggleModal('redux'));
+  expect(result.current.title).toBe('redux');
+  expect(result.current.isModalOpen).toBe(false);
+  expect(typeof result.current.openModal).toBe('function');
+});
+
+test('openModal should work', () => {
+  const { result } = renderHook(() => useToggleModal('redux'));
+
+  act(() => {
+    result.current.openModal();
+  });
+  expect(result.current.title).toBe('New Test');
+  expect(result.current.isModalOpen).toBe(true);
+});
+
+test('openScriptModal should work', () => {
+  const { result } = renderHook(() => useToggleModal('redux'));
+
+  act(() => {
+    result.current.openScriptModal();
+  });
+  expect(result.current.title).toBe('redux');
+  expect(result.current.isModalOpen).toBe(true);
+});
+
+test('closeModal should work', () => {
+  const { result } = renderHook(() => useToggleModal('redux'));
+
+  act(() => {
+    result.current.closeModal();
+  });
+  expect(result.current.title).toBe('redux');
+  expect(result.current.isModalOpen).toBe(false);
+});

src/__tests__/jest.config.js

@@ -1,7 +1,7 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
-import { GlobalContext } from '../../context/reducers/globalReducer';
 import { editor } from 'monaco-editor';
+import { GlobalContext } from '../../context/reducers/globalReducer';
 import { updateFile } from '../../context/actions/globalActions';
 import styles from './EditorView.module.scss';
 
@@ -16,7 +16,7 @@ const Editor = () => {
   const options = {
     selectOnLineNumbers: true,
     wordWrap: 'wordWrapColumn',
-    wordWrapColumn: 70,
+    wordWrapColumn: 90,
     autoIndent: true,
     colorDecorators: true,
     wrappingIndent: 'indent',
@@ -25,6 +25,7 @@ const Editor = () => {
 
   const editorDidMount = () => {
     editor.setTheme('light-dark');
+    // editor.focus();
   };
 
   const updatafile = (newValue, e) => {
@@ -55,11 +56,11 @@ const Editor = () => {
     <div>
       <button id={styles.save} onClick={saveFile}>
         Save Changes
-      </button>{' '}
+      </button>
       <span id={styles.span}>{wasSaved}</span>
       <div onClick={() => setWasSaved('')}>
         <MonacoEditor
-          height='95vh'
+          height='100vh'
           language='javascript'
           theme='light-dark'
           value={

src/components/EditorView/EditorView.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef, useEffect } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styles from './Context.module.scss';
 import { GlobalContext } from '../../../context/reducers/globalReducer';
@@ -28,6 +28,14 @@ const Context = ({ context, index }) => {
     dispatchToHooksTestCase(deleteContexts(context.id));
   };
 
+  const testDescription = useRef(null);
+
+  useEffect(() => {
+    if (testDescription && testDescription.current) {
+      testDescription.current.focus();
+    }
+  }, []);
+
   return (
     <Draggable draggableId={context.id.toString()} index={index}>
       {(provided) => (
@@ -46,18 +54,38 @@ const Context = ({ context, index }) => {
 
           <div>
             <div id={styles.querySelector}>
-              <div id={styles.contextBox}>
-                <label htmlFor='contextFile' className={styles.queryLabel}>
-                  Import Context From
-                </label>
-                <SearchInput
-                  options={Object.keys(filePathMap)}
-                  dispatch={dispatchToHooksTestCase}
-                  action={updateContextFilePath}
-                  filePathMap={filePathMap}
-                />
+              <div id={styles.contextFlexBox}>
+                <div id={styles.contextBox}>
+                  <label htmlFor='contextFile' className={styles.queryLabel}>
+                    Import Context From
+                  </label>
+                  <SearchInput
+                    options={Object.keys(filePathMap)}
+                    dispatch={dispatchToHooksTestCase}
+                    action={updateContextFilePath}
+                    filePathMap={filePathMap}
+                  />
+                </div>
+                <div id={styles.serverInput}>
+                  <label htmlFor='test-statement'>Test description</label>
+                  <div
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'spaceBetween',
+                    }}
+                  >
+                    <div id={styles.labelInputTest}>
+                      <br />
+                      <input
+                        ref={testDescription}
+                        type='text'
+                        id={styles.testStatement}
+                        onChange={(e) => handleChangeContextFields(e, 'testName')}
+                      />
+                    </div>
+                  </div>
+                </div>
               </div>
-
               <div id={styles.dropdownFlex}>
                 {/* drop downs */}
                 <div id={styles.contextDrop}>

src/components/ReactHooksTestComponent/Context/Context.jsx

@@ -82,6 +82,12 @@
   }
 }
 
+#contextFlexBox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
 #dropdownFlex {
   display: flex;
   align-items: center;

src/components/ReactHooksTestComponent/Context/Context.module.scss

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styles from './HookRender.module.scss';
 import { GlobalContext } from '../../../context/reducers/globalReducer';
@@ -16,17 +16,53 @@ const dragIcon = require('../../../assets/images/drag-vertical.png');
 const HookRender = ({ hookRender, index }) => {
   const [{ filePathMap }] = useContext(GlobalContext);
   const [, dispatchToHooksTestCase] = useContext(HooksTestCaseContext);
+  const [count, setCount] = useState(1);
+  const [expectedCounts, setExpectedCount] = useState([{ id: `test${count}` }]);
 
   const handleChangeHookRenderFields = (e, field) => {
     let updatedHookRender = { ...hookRender };
+
     updatedHookRender[field] = e.target.value;
     dispatchToHooksTestCase(updateHookRender(updatedHookRender));
+    console.log(updatedHookRender);
   };
 
   const handleClickDeleteHookRender = (e) => {
     dispatchToHooksTestCase(deleteHookRender(hookRender.id));
   };
 
+  const handleAddInput = (e) => {
+    setCount(count);
+    setExpectedCount([...expectedCounts, { id: `test${count}` }]);
+  };
+
+  let input = expectedCounts.map((obj) => {
+    return (
+      <div id={`${styles.hookRenderFlexBox}`}>
+        <div id={styles.hookRenderType}>
+          <label htmlFor='expectedState'>Expected State</label>
+          <input
+            type='text'
+            id='expectedState'
+            placeholder='eg. count'
+            onChange={(e) => handleChangeHookRenderFields(e, 'expectedState')}
+          />
+        </div>
+        <div id={styles.hookRenderType}>
+          <label htmlFor='expectedValue'>Current Value</label>
+          <input
+            type='text'
+            id='expectedValue'
+            placeholder='eg. 0'
+            onChange={(e) => handleChangeHookRenderFields(e, 'expectedValue')}
+          />
+          <div id={styles.hookRenderType}>
+            <button onClick={handleAddInput}>+</button>
+          </div>
+        </div>
+      </div>
+    );
+  });
   return (
     <Draggable draggableId={hookRender.id.toString()} index={index}>
       {(provided) => (
@@ -65,41 +101,22 @@ const HookRender = ({ hookRender, index }) => {
               <input
                 type='text'
                 id='hook'
-                placeholder='eg. useCounter'
+                placeholder='eg. useStringCounter'
                 onChange={(e) => handleChangeHookRenderFields(e, 'hook')}
               />
             </div>
 
             <div id={styles.hookRenderType}>
-              <label htmlFor='parameterOne'>Hook Parameter (optional)</label>
-              <input
-                type='text'
-                id='parameterOne'
-                placeholder='eg. 9000'
-                onChange={(e) => handleChangeHookRenderFields(e, 'parameterOne')}
-              />
-            </div>
-          </div>
-          <div id={styles.hookRenderFlexBox}>
-            <div id={styles.hookRenderType}>
-              <label htmlFor='returnValue'>Managed State</label>
-              <input
-                type='text'
-                id='returnValue'
-                placeholder='eg. count'
-                onChange={(e) => handleChangeHookRenderFields(e, 'returnValue')}
-              />
-            </div>
-            <div id={styles.hookRenderType}>
-              <label htmlFor='expectedReturnValue'>Current Value</label>
+              <label htmlFor='parameters'>Hook Parameters (optional)</label>
               <input
                 type='text'
-                id='expectedReturnValue'
-                placeholder='eg. 0'
-                onChange={(e) => handleChangeHookRenderFields(e, 'expectedReturnValue')}
+                id='parameters'
+                placeholder='eg. 9000, "string"'
+                onChange={(e) => handleChangeHookRenderFields(e, 'parameters')}
               />
             </div>
           </div>
+          {input}
         </div>
       )}
     </Draggable>

src/components/ReactHooksTestComponent/HookRender/HookRender.jsx

@@ -42,5 +42,9 @@
     margin-top: 6px;
     width: 100%;
   }
+  button {
+    margin-top: 6px;
+    width: 100%;
+  }
   position: relative;
 }