fixed: hooks test output and callback field typo

Author: Luis-KM-Lo

package.json

@@ -72,7 +72,7 @@
     "@types/jest": "^25.2.3",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
-    "electron": "^10.1.1",
+    "electron": "^5.0.3",
     "electron-builder": "^22.6.1",
     "electron-devtools-installer": "^3.0.0",
     "enzyme": "^3.10.0",

src/__tests__/Hooks.test.js

@@ -2,39 +2,41 @@ 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');
-});
+describe('asomsdfak', () => {
+  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'));
+  test('openModal should work', () => {
+    const { result } = renderHook(() => useToggleModal('redux'));
 
-  act(() => {
-    result.current.openModal();
+    act(() => {
+      result.current.openModal();
+    });
+    expect(result.current.title).toBe('New Test');
+    expect(result.current.isModalOpen).toBe(true);
   });
-  expect(result.current.title).toBe('New Test');
-  expect(result.current.isModalOpen).toBe(true);
-});
 
-test('openScriptModal should work', () => {
-  const { result } = renderHook(() => useToggleModal('redux'));
+  test('openScriptModal should work', () => {
+    const { result } = renderHook(() => useToggleModal('redux'));
 
-  act(() => {
-    result.current.openScriptModal();
+    act(() => {
+      result.current.openScriptModal();
+    });
+    expect(result.current.title).toBe('redux');
+    expect(result.current.isModalOpen).toBe(true);
   });
-  expect(result.current.title).toBe('redux');
-  expect(result.current.isModalOpen).toBe(true);
-});
 
-test('closeModal should work', () => {
-  const { result } = renderHook(() => useToggleModal('redux'));
+  test('closeModal should work', () => {
+    const { result } = renderHook(() => useToggleModal('redux'));
 
-  act(() => {
-    result.current.closeModal();
+    act(() => {
+      result.current.closeModal();
+    });
+    expect(result.current.title).toBe('redux');
+    expect(result.current.isModalOpen).toBe(false);
   });
-  expect(result.current.title).toBe('redux');
-  expect(result.current.isModalOpen).toBe(false);
 });

src/components/ReactHooksTestComponent/HookUpdates/HookUpdates.jsx

@@ -96,21 +96,21 @@ const HookUpdates = ({ hookUpdates, index }) => {
               <input
                 type='text'
                 id='hookParams'
-                placeholder='eg. false, 0'
+                placeholder='e.g. false, 0'
                 onChange={(e) => handleChangeHookUpdatesFields(e, 'hookParams')}
               />
             </div>
           </div>
           {hookUpdates.callbackFunc.map((callbackFunc, i) => {
             return (
               <div id={styles.cbFlexBox}>
-                <HooksCallback callbackFunc={callbackFunc} index={index} id={i} />
+                <HooksCallback callbackFunc={callbackFunc} index={index} id={i} key={'k' + i} />
               </div>
             );
           })}{' '}
           <div className={styles.buttonsContainer}></div>
           {hookUpdates.assertions.map((assertion, i) => {
-            return <HooksAssertion assertion={assertion} index={index} id={i} />;
+            return <HooksAssertion assertion={assertion} index={index} id={i} key={'k' + i} />;
           })}
           <div className={styles.buttonsContainer} id={styles.stateFlexBox}>
             <button onClick={addAssertionHandleClick} className={styles.assertionButton}>

src/components/ReactHooksTestComponent/HooksAssertion.jsx

@@ -59,7 +59,7 @@ const HooksAssertion = ({ assertion, index, id }) => {
   return (
     <div id={styles.groupFlexboxAssertion}>
       <div id={styles.labelInput}>
-        <label htmlFor='expectedState'>Expect State</label>
+        <label htmlFor='expectedState'>Expected State</label>
         <div id={styles.inputFlexBox}>
           <input
             type='text'

src/components/ReactHooksTestComponent/HooksCallback.jsx

@@ -25,7 +25,7 @@ const HooksCallback = ({ callbackFunc, index, id }) => {
           <input
             type='text'
             list='responseProperties'
-            value={callbackFunc.callbackFunc}
+            placeholder='e.g. openModal'
             onChange={(e) => handleChangeUpdateCallbackFunc(e, 'callbackFunc')}
           />
         </div>

src/context/useGenerateTest.jsx

@@ -1,5 +1,3 @@
-
-
 const remote = window.require('electron').remote;
 const fs = remote.require('fs');
 const path = remote.require('path');
@@ -660,7 +658,7 @@ function useGenerateTest(test, projectFilePath) {
       hookUpdates.assertions.forEach((assertion) => {
         testFileCode += `expect(result.current.${assertion.expectedState})${
           assertion.not ? '.not' : ''
-        }.${assertion.matcher}.(${assertion.expectedValue || ''})\n`;
+        }.${assertion.matcher}(${assertion.expectedValue || ''})\n`;
       });
       testFileCode += '})\n\n';
     };