Merge pull request #53 from nicolaspita/puppetBug

Puppeteer Reducers bug

Author: Sean-Haverstock

src/__tests__/jest.config.js

@@ -108,7 +108,7 @@ const Middleware = ({ middleware, index }) => {
             </div>
 
             <div id={styles.middlewareBox}>
-              <label htmlFor='typesFile'>Query Type</label>
+              <label htmlFor='typesFile'>Middleware Function</label>
               <input
                 id='queryType'
                 placeholder='eg. thunk'

src/components/ReduxTestComponent/Middleware/Middleware.jsx

@@ -3,6 +3,7 @@ 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');

src/components/ReduxTestComponent/Reducer/Reducer.jsx

@@ -45,3 +45,4 @@
   }
   position: relative;
 }
+

src/components/ReduxTestComponent/Reducer/Reducer.module.scss

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 import { PuppeteerTestCaseState, PuppeteerAction } from '../../utils/puppeteerTypes';
-//import { actionTypes } from '../actions/puppeteerTestCaseActions';
+
 export const PuppeteerTestCaseContext = createContext<any>(null);
 
 export const puppeteerTestCaseState = {
@@ -21,7 +21,7 @@ export const puppeteerTestCaseState = {
       browserOptionId: 0,
     },
   ],
-  statementId: 0,
+  statementId: 1,
   modalOpen: false,
 };
 
@@ -56,10 +56,14 @@ export const puppeteerTestCaseReducer = (
 
   switch (action.type) {
     case 'DELETE_PUPPETEER_TEST':
-      puppeteerStatements = puppeteerStatements.filter((statement) => statement.id !== action.id);
+      puppeteerStatements.splice(action.id, 1);
+      puppeteerStatements.forEach((statement) => {
+        if (statement.id > action.id) statement.id -= 1;
+      });
       return {
         ...state,
         puppeteerStatements,
+        statementId: state.statementId - 1,
       };
 
     case 'ADD_PUPPETEER_PAINT_TIMING': {
@@ -90,7 +94,7 @@ export const puppeteerTestCaseReducer = (
             browserOptionId: 0,
           },
         ],
-        statementId: 0,
+        statementId: 1,
       };
 
     case 'DELETE_BROWSER_OPTION':
@@ -171,7 +175,6 @@ export const puppeteerTestCaseReducer = (
         puppeteerStatements: [...action.draggableStatements],
       };
     case 'OPEN_INFO_MODAL':
-      console.log('reducer');
       return {
         ...state,
         modalOpen: true,

src/components/useCounter.js

@@ -184,7 +184,8 @@ function useGenerateTest(test, projectFilePath) {
 
         beforeEach(() => {
           state = ${reducer.initialState}
-        });\n`;
+        });
+        \n`;
     }
 
     // Middleware Import Statements
@@ -420,12 +421,14 @@ function useGenerateTest(test, projectFilePath) {
     // Middleware Filepath
     function createPathToMiddlewares(statement) {
       let filePath = null;
+      console.log(filePath);
       if (statement.middlewaresFilePath) {
         filePath = path.relative(projectFilePath, statement.middlewaresFilePath);
         filePath = filePath.replace(/\\/g, '/');
       }
-      if (!testFileCode.includes(`import * as middleware from`) && filePath) {
-        testFileCode += `import * as middleware from '../${filePath}';`;
+
+      if (!testFileCode.includes(`import ${statement.queryType} from `)) {
+        testFileCode += `import ${statement.queryType} from '../${filePath}';`;
       }
     }
 
@@ -515,37 +518,45 @@ function useGenerateTest(test, projectFilePath) {
 
     // Middleware Jest Test Code
     const addMiddleware = (middleware) => {
-      testFileCode += `\n it('', () => {
-      const ${middleware.queryValue} = () => {
+      // testFileCode += `\n it('', () => {
+      if (!testFileCode.includes(`const store`)) {
+        testFileCode += `\n const createStore = () => {
           const store = {
             getState: jest.fn(() => ({})),
             dispatch: jest.fn()
           }
           const next = jest.fn()
           const invoke = action => ${middleware.queryType}(store)(next)(action)
           return { store, next, invoke } 
-          }
-        });
+        }
         \n`;
+      }
 
       if (middleware.queryValue === 'passes_non_functional_arguments') {
-        testFileCode += `const { next, invoke } = ${middleware.queryValue}()
+        testFileCode += `\n
+        it('${middleware.queryValue}', () => {
+          const { next, invoke } = createStore()
           const action = {type : 'TEST'}
           invoke(action)
-          expect(${middleware.querySelector}).${middleware.queryVariant}(action)`;
+          expect(${middleware.querySelector}).${middleware.queryVariant}(action)
+        })`;
       } else if (middleware.queryValue === 'calls_the_function') {
-        testFileCode += `const { invoke } = ${middleware.queryValue}()
+        testFileCode += `\n it('${middleware.queryValue}', () => {
+          const { invoke } = createStore()
           const fn = jest.fn()
           invoke(fn)
-          expect(${middleware.querySelector}).${middleware.queryVariant}()`;
+          expect(${middleware.querySelector}).${middleware.queryVariant}()
+        })`;
       } else if (middleware.queryValue === 'passes_functional_arguments') {
-        testFileCode += `const { store, invoke } = ${middleware.queryValue}()
+        testFileCode += `\n it('${middleware.queryValue}', () => {
+          const { store, invoke } = createStore()
           invoke((dispatch, getState) => {
             dispatch('Test Dispatch')
             getState()
           })
           expect(${middleware.querySelector}).${middleware.queryVariant}('Test Dispatch')
-          expect(${middleware.querySelector}).${middleware.queryVariant}()`;
+          expect(${middleware.querySelector}).${middleware.queryVariant}()
+        })`;
       }
     };
 
@@ -554,14 +565,14 @@ function useGenerateTest(test, projectFilePath) {
       // pass in reducer to expect. pass in initial state as 1st arg, key
       // if payload exists, add key/value pair to testfile code
       if (reducer.payloadKey) {
-        testFileCode += `it('${reducer.itStatement}', () => {
+        testFileCode += `\n it('${reducer.itStatement}', () => {
         expect(${reducer.reducerName}(state, { type: actionTypes.${reducer.reducerAction}, ${reducer.payloadKey}: ${reducer.payloadValue} })).toEqual({
-        ...state, ${reducer.expectedKey}: ${reducer.expectedValue} })})
+        ...state, ${reducer.expectedKey}: ${reducer.expectedValue} })
         `;
       } else {
-        testFileCode += `it('${reducer.itStatement}', () => {
+        testFileCode += `\n it('${reducer.itStatement}', () => {
           expect(${reducer.reducerName}(state, { type: actionTypes.${reducer.reducerAction}})).toEqual({
-          ...state, ${reducer.expectedKey}: ${reducer.expectedValue} })})
+          ...state, ${reducer.expectedKey}: ${reducer.expectedValue} })
           `;
       }
     }
@@ -747,6 +758,7 @@ function useGenerateTest(test, projectFilePath) {
           });
         `;
     };
+
     switch (test) {
       case 'react':
         var reactTestCase = testState;
@@ -808,6 +820,7 @@ function useGenerateTest(test, projectFilePath) {
             e4x: true,
           }))
         );
+
       default:
         return 'not a test';
     }