Merge pull request #47 from davefranz/tests

Created tests for redux, react, and endpoints. Updated placeholder text render hooks and reducer

Author: lcwish

src/containers/LeftPanel/HookRender/HookRender.jsx

@@ -62,17 +62,17 @@ const HookRender = ({ hookRender, index, dispatchToHooksTestCase }) => {
               <input
                 type='text'
                 id='hook'
-                placeholder='Hook Name'
+                placeholder='eg. useCounter'
                 onChange={e => handleChangeHookRenderFields(e, 'hook')}
               />
             </div>
 
             <div id={styles.hookRenderType}>
-              <label htmlFor='parameterOne'>Parameter (optional)</label>
+              <label htmlFor='parameterOne'>Hook Parameter (optional)</label>
               <input
                 type='text'
                 id='parameterOne'
-                placeholder='Hook Function Parameter'
+                placeholder='eg. 9000'
                 onChange={e => handleChangeHookRenderFields(e, 'parameterOne')}
               />
             </div>
@@ -83,7 +83,7 @@ const HookRender = ({ hookRender, index, dispatchToHooksTestCase }) => {
               <input
                 type='text'
                 id='returnValue'
-                placeholder='Return Value'
+                placeholder='eg. count'
                 onChange={e => handleChangeHookRenderFields(e, 'returnValue')}
               />
             </div>
@@ -92,7 +92,7 @@ const HookRender = ({ hookRender, index, dispatchToHooksTestCase }) => {
               <input
                 type='text'
                 id='expectedReturnValue'
-                placeholder='Expected Return Value'
+                placeholder='eg. 0'
                 onChange={e => handleChangeHookRenderFields(e, 'expectedReturnValue')}
               />
             </div>

src/containers/LeftPanel/Reducer/Reducer.jsx

@@ -80,7 +80,7 @@ const Reducer = ({ reducer, index, dispatchToReduxTestCase }) => {
               <input
                 type='text'
                 id='reducerName'
-                placeholder='Reducer Name'
+                placeholder='eg. todoReducer'
                 onChange={e => handleChangeReducerFields(e, 'reducerName')}
               />
             </div>
@@ -90,7 +90,7 @@ const Reducer = ({ reducer, index, dispatchToReduxTestCase }) => {
               <input
                 type='text'
                 id='initialState'
-                placeholder='Initial State'
+                placeholder="eg. { key: value }"
                 onChange={e => handleChangeReducerFields(e, 'initialState')}
               />
             </div>
@@ -102,7 +102,7 @@ const Reducer = ({ reducer, index, dispatchToReduxTestCase }) => {
               <input
                 type='text'
                 id='reducerAction'
-                placeholder='Action'
+                placeholder="eg. type: types.ADD_TASK"
                 onChange={e => handleChangeReducerFields(e, 'reducerAction')}
               />
             </div>
@@ -111,7 +111,7 @@ const Reducer = ({ reducer, index, dispatchToReduxTestCase }) => {
               <label htmlFor='expectedState'>Updated State</label>
               <input
                 type='text'
-                placeholder='Expected State'
+                placeholder="eg. { key: updated-value }"
                 id='expectedState'
                 onChange={e => handleChangeReducerFields(e, 'expectedState')}
               />

src/containers/LeftPanel/TestMenu/TestMenu.jsx

@@ -38,8 +38,8 @@ const TestMenu = ({ dispatchToTestCase, dispatchToMockData }) => {
           id={styles.right}
           style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}
         >
-          <button onClick={handleAddAction}>Action</button>
-          <button data-testid='assertionButton' onClick={handleAddAssertion}>
+          <button data-testid="actionButton" onClick={handleAddAction}>Action</button>
+          <button data-testid='assertionButton' className='assertionButton' onClick={handleAddAssertion}>
             Assertion
           </button>
           <button data-testid='rerenderButton' onClick={handleAddRender}>

src/containers/LeftPanel/__tests__/leftPanel.test.js

@@ -1,29 +1,15 @@
 import React from 'react';
-import LeftPanel from '../LeftPanel';
 import TestCase from '../TestCase/TestCase';
-import TestFile from '../TestFile/TestFile';
-import TestMenu from '../../LeftPanel/TestMenu/TestMenu';
 import { GlobalContext } from '../../../context/globalReducer';
 import { TestCaseContext } from '../../../context/testCaseReducer';
 import { MockDataContext } from '../../../context/mockDataReducer';
-
-import { render, fireEvent } from '@testing-library/react';
-import { build, fake } from 'test-data-bot';
-import '@testing-library/react/cleanup-after-each';
-import 'jest-dom/extend-expect';
-
-import { shallow, mount } from 'enzyme';
-import ReactDOM from 'react-dom';
-import { act } from 'react-dom/test-utils';
-
-import { configure } from 'enzyme';
+import { TestFileModalContext } from '../../../context/testFileModalReducer'
+import { mount, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { exportAllDeclaration } from '@babel/types';
-import Rerender from '../Render/Rerender';
-import Assertion from '../Assertion/Assertion';
+
 configure({ adapter: new Adapter() });
 
-let wrapper, globalM, dispatchToGlobal, testCase, dispatchToTestCase, mockData, dispatchToMockData;
+let wrapper, globalM, dispatchToGlobal, testCase, dispatchToTestCase, mockData, dispatchToMockData, testFileModal, dispatchToTestFileModal;
 
 beforeEach(() => {
   globalM = {
@@ -39,7 +25,9 @@ beforeEach(() => {
     projectFilePath: '',
     filePathMap: {},
   };
+
   dispatchToGlobal = jest.fn();
+
   testCase = {
     testStatement: '',
     statements: [
@@ -64,18 +52,25 @@ beforeEach(() => {
       },
     ],
   };
+
   dispatchToTestCase = jest.fn();
+  
   mockData = {
     mockData: [],
     hasMockData: false,
   };
+
   dispatchToMockData = jest.fn();
+  testFileModal = {}
+  dispatchToTestFileModal = jest.fn();
 
   wrapper = mount(
     <GlobalContext.Provider value={[globalM, dispatchToGlobal]}>
       <TestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
         <MockDataContext.Provider value={[mockData, dispatchToMockData]}>
-          <TestCase />
+          <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
+            <TestCase />
+          </TestFileModalContext.Provider>
         </MockDataContext.Provider>
       </TestCaseContext.Provider>
     </GlobalContext.Provider>
@@ -84,22 +79,43 @@ beforeEach(() => {
   jest.resetModules();
 });
 
-describe('testing left panel', () => {
-  it('renders the left panel with initial buttons and first render boxes', () => {
+describe('testing left panel react test menu', () => {
+  it('renders the react menu with initial buttons and first render boxes', () => {
     expect(wrapper.text()).toContain('Do you need mock data?');
     expect(wrapper.text()).toContain('Do you need props?');
     expect(wrapper.text()).toContain('Action');
     expect(wrapper.text()).toContain('Assertion');
     expect(wrapper.text()).toContain('Rerender');
+    expect(wrapper.text()).toContain('New Test +');
   });
 
-  it('new assertion card is produced when assertion button is clicked', () => {});
+  it('onclick function is invoked when assertion button is clicked', () => {
+    const btn = wrapper.find('button[data-testid="assertionButton"]');
+    btn.simulate('click');
+    expect(dispatchToTestCase).toHaveBeenCalled();
+  });
+
+  it('onclick function is invoked when action button is clicked', () => {
+    const btn = wrapper.find('button[data-testid="actionButton"]');
+    btn.simulate('click');
+    expect(dispatchToTestCase).toHaveBeenCalled();
+  });
+
+  it('onclick function is invoked when rerender button is clicked', () => {
+    const btn = wrapper.find('button[data-testid="rerenderButton"]');
+    btn.simulate('click');
+    expect(dispatchToTestCase).toHaveBeenCalled();
+  });
+
+  it('there should be 4 buttons', () => {
+    expect(wrapper.find('button').length).toEqual(4)
+  });
 
-  it('action card is removed when delete button is clicked', () => {});
+  xit('action card is removed when delete button is clicked', () => { });
 
-  it('clicking the mock data checkbox renders mock data input fields', () => {});
+  xit('clicking the mock data checkbox renders mock data input fields', () => { });
 
-  it('props table displays when prop checkbox on Render card is clicked', () => {});
+  xit('props table displays when prop checkbox on Render card is clicked', () => { });
 
-  it('wipes existing test statements when new test button is clicked ', () => {});
+  xit('wipes existing test statements when new test button is clicked ', () => { });
 });

src/containers/LeftPanel/__tests__/leftPanelEndpoint.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import EndpointTestCase from '../TestCase/EndpointTestCase';
+import { GlobalContext } from '../../../context/globalReducer';
+import { EndpointTestCaseContext } from '../../../context/endpointTestCaseReducer';
+import { TestFileModalContext } from '../../../context/testFileModalReducer';
+import { mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Endpoint from '../Endpoint/Endpoint';
+
+configure({ adapter: new Adapter() });
+
+let wrapper, globalM, dispatchToGlobal, endpointTestCase, dispatchToEndpointTestCase, testFileModal, dispatchToTestFileModal;
+
+beforeEach(() => {
+  globalM = {
+    url: null,
+    isProjectLoaded: false,
+    fileTree: null,
+    componentName: '',
+    isFileDirectoryOpen: true,
+    rightPanelDisplay: 'browserView',
+    displayedFileCode: '',
+    isFolderOpen: {},
+    isFileHighlighted: '',
+    projectFilePath: '',
+    filePathMap: {},
+  };
+  dispatchToGlobal = jest.fn();
+  endpointTestCase = {
+    endpointTestStatement: '',
+    endpointStatements: [],
+    hasEndpoint: 1,
+  };
+
+  testFileModal = {}
+  dispatchToTestFileModal = jest.fn();
+
+  dispatchToEndpointTestCase = jest.fn();
+
+  wrapper = mount(
+    <GlobalContext.Provider value={[global, dispatchToGlobal]}>
+      <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
+        <EndpointTestCaseContext.Provider value={[endpointTestCase, dispatchToEndpointTestCase]}>
+          <EndpointTestCase />
+        </EndpointTestCaseContext.Provider>
+      </TestFileModalContext.Provider>
+    </GlobalContext.Provider>
+  );
+
+  jest.resetModules();
+});
+
+describe('testing left panel endpoint test menu', () => {
+  it('renders the endpoint menu with initial buttons', () => {
+    expect(wrapper.text()).toContain('Endpoint');
+  });
+
+  it('onclick function is invoked when endpoint button is clicked', () => {
+    const button = wrapper.find('[data-testid="endPointButton"]')
+    button.simulate('click');
+    expect(dispatchToEndpointTestCase).toHaveBeenCalled();
+  });
+
+  it('there should be 2 buttons', () => {
+    expect(wrapper.find('button').length).toEqual(2)
+  });
+
+  xit('action card is removed when delete button is clicked', () => { });
+
+  xit('clicking the mock data checkbox renders mock data input fields', () => { });
+
+  xit('props table displays when prop checkbox on Render card is clicked', () => { });
+
+  xit('wipes existing test statements when new test button is clicked ', () => { });
+});

src/containers/LeftPanel/__tests__/leftPanelRedux.test.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import ReduxTestCase from '../TestCase/ReduxTestCase';
+import { GlobalContext } from '../../../context/globalReducer';
+import { ReduxTestCaseContext } from '../../../context/reduxTestCaseReducer';
+import { TestFileModalContext } from '../../../context/testFileModalReducer';
+import { mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Reducer from '../Reducer/Reducer';
+
+configure({ adapter: new Adapter() });
+
+let wrapper, globalM, dispatchToGlobal, reduxTestCase, dispatchToReduxTestCase, testFileModal, dispatchToTestFileModal;
+
+beforeEach(() => {
+  globalM = {
+    url: null,
+    isProjectLoaded: false,
+    fileTree: null,
+    componentName: '',
+    isFileDirectoryOpen: true,
+    rightPanelDisplay: 'browserView',
+    displayedFileCode: '',
+    isFolderOpen: {},
+    isFileHighlighted: '',
+    projectFilePath: '',
+    filePathMap: {},
+  };
+  dispatchToGlobal = jest.fn();
+  reduxTestCase = {
+    reduxTestStatement: '',
+    reduxStatements: [],
+    hasRedux: 1,
+  };
+
+  testFileModal = {}
+  dispatchToTestFileModal = jest.fn();
+
+  dispatchToReduxTestCase = jest.fn();
+
+  wrapper = mount(
+    <GlobalContext.Provider value={[global, dispatchToGlobal]}>
+      <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
+        <ReduxTestCaseContext.Provider value={[reduxTestCase, dispatchToReduxTestCase]}>
+          <ReduxTestCase />
+        </ReduxTestCaseContext.Provider>
+      </TestFileModalContext.Provider>
+    </GlobalContext.Provider>
+  );
+
+  jest.resetModules();
+});
+
+describe('testing left panel redux test menu', () => {
+  it('renders the redux menu with initial buttons and first render boxes', () => {
+    expect(wrapper.text()).toContain('Reducer');
+    expect(wrapper.text()).toContain('Action Creator');
+    expect(wrapper.text()).toContain('Async Action Creator');
+    expect(wrapper.text()).toContain('Middleware');
+  });
+
+  it('onclick function is invoked when reducer button is clicked', () => {
+    const button = wrapper.find('[data-testid="reducerButton"]')
+    button.simulate('click');
+    expect(dispatchToReduxTestCase).toHaveBeenCalled();
+  });
+
+  it('onclick function is invoked when action creator button is clicked', () => {
+    const button = wrapper.find('[data-testid="actionCreatorButton"]')
+    button.simulate('click');
+    expect(dispatchToReduxTestCase).toHaveBeenCalled();
+  });
+
+  it('onclick function is invoked when async action creator button is clicked', () => {
+    const button = wrapper.find('[data-testid="asyncButton"]')
+    button.simulate('click');
+    expect(dispatchToReduxTestCase).toHaveBeenCalled();
+  });
+
+  it('onclick function is invoked when middleware button is clicked', () => {
+    const button = wrapper.find('[data-testid="middlewareButton"]')
+    button.simulate('click');
+    expect(dispatchToReduxTestCase).toHaveBeenCalled();
+  });
+
+  it('there should be 5 buttons', () => {
+    expect(wrapper.find('button').length).toEqual(5)
+  });
+
+  xit('action card is removed when delete button is clicked', () => { });
+
+  xit('clicking the mock data checkbox renders mock data input fields', () => { });
+
+  xit('props table displays when prop checkbox on Render card is clicked', () => { });
+
+  xit('wipes existing test statements when new test button is clicked ', () => { });
+});