Merge pull request #13 from mbcoker/react_tests

React tests

Author: sieunjang

src/containers/LeftPanel/SearchInput/SearchInput.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './SearchInput.scss';
 
-export const Autocomplete = ({dispatch, action, filePathMap, options}) => {
+export const Autocomplete = ({dispatch, action, filePathMap, options, reactTestCase}) => {
 
   const [activeOption, setActiveOption] = useState(0)
   const [filteredOptions, setFilteredOptions] = useState([])
@@ -54,10 +54,14 @@ export const Autocomplete = ({dispatch, action, filePathMap, options}) => {
     }
   };
   let optionList;
+  let optionStyles = 'options'
   if (showOptions && userInput) {
     if (filteredOptions.length) {
+      if(reactTestCase) {
+        optionStyles = 'react-test-options'
+      }
       optionList = (
-        <ul className="options">
+        <ul className={optionStyles}>
           {filteredOptions.map((optionName, index) => {
             let className;
             if (index === activeOption) {

src/containers/LeftPanel/SearchInput/SearchInput.scss

@@ -17,4 +17,23 @@ ul.options li.option-active {
   position: absolute;
   z-index: 1;
   width: -webkit-fill-available ;
-}
+}
+
+.react-test-options {
+  background-color: white;
+  overflow: auto;
+  position: absolute;
+  z-index: 4;
+  width: 137px;
+}
+ul.react-test-options li:hover {
+  font-weight: bold;
+  color: #00b4cc;
+  cursor: pointer;
+  transition: 0.3s all;
+}
+
+ul.react-test-options li.option-active {
+  background: whitesmoke;
+  color: #00b4cc;
+}

src/containers/LeftPanel/TestCase/ReactTestCase.jsx

@@ -53,6 +53,7 @@ const ReactTestCase = () => {
             Enter Component Name:
           </label>
           <SearchInput
+            reactTestCase={true}
             dispatch={dispatchToReactTestCase}
             action={updateRenderComponent}
             filePathMap={filePathMap}

src/containers/LeftPanel/TestMenu/ReactTestMenu.jsx

@@ -33,7 +33,7 @@ const ReactTestMenu = ({ dispatchToTestCase, dispatchToMockData }) => {
           id={styles.right}
           style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}
         >
-          <button onClick={handleAddDescribeBlock}>+Describe Block</button>
+          <button data-testid='addDescribeButton' onClick={handleAddDescribeBlock}>+Describe Block</button>
         </div>
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import TestCase from '../TestCase/TestCase';
+import ReactTestCase from '../TestCase/ReactTestCase';
 import { GlobalContext } from '../../../context/globalReducer';
-import { TestCaseContext } from '../../../context/testCaseReducer';
+import { ReactTestCaseContext } from '../../../context/reactTestCaseReducer';
 import { MockDataContext } from '../../../context/mockDataReducer';
 import { TestFileModalContext } from '../../../context/testFileModalReducer'
 import { mount, configure } from 'enzyme';
@@ -29,28 +29,47 @@ beforeEach(() => {
   dispatchToGlobal = jest.fn();
 
   testCase = {
-    testStatement: '',
-    statements: [
-      {
-        id: 0,
-        type: 'render',
-        componentName: '',
-        filePath: '',
-        props: [],
-        hasProp: false,
+    hasReact: 0,
+    describeId: 1,
+    itId: 1,
+    statementId: 1,
+    propId: 1,
+    describeBlocks: {
+      byId: {
+        describe0: {
+          id: 'describe0',
+          text: '',
+        },
       },
-      {
-        id: 1,
-        type: 'assertion',
-        queryVariant: '',
-        querySelector: '',
-        queryValue: '',
-        isNot: false,
-        matcherType: '',
-        matcherValue: '',
-        suggestions: [],
+      allIds: ['describe0'],
+    },
+    itStatements: {
+      byId: {
+        it0: {
+          id: 'it0',
+          describeId: 'describe0',
+          text: '',
+        },
       },
-    ],
+      allIds: ['it0'],
+    },
+    statements: {
+      byId: {
+        statement0: {
+          id: 'statement0',
+          itId: 'it0',
+          describeId: 'describe0',
+          type: 'render',
+          componentName: '',
+          filePath: '',
+          props: [],
+          hasProp: false,
+        },
+      },
+      allIds: ['statement0'],
+      componentPath: '',
+      componentName: '',
+    },
   };
 
   dispatchToTestCase = jest.fn();
@@ -66,48 +85,30 @@ beforeEach(() => {
 
   wrapper = mount(
     <GlobalContext.Provider value={[globalM, dispatchToGlobal]}>
-      <TestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
+      <ReactTestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
         <MockDataContext.Provider value={[mockData, dispatchToMockData]}>
           <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
-            <TestCase />
+            <ReactTestCase />
           </TestFileModalContext.Provider>
         </MockDataContext.Provider>
-      </TestCaseContext.Provider>
+      </ReactTestCaseContext.Provider>
     </GlobalContext.Provider>
   );
 
   jest.resetModules();
 });
 
 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');
+  it('renders the react menu with initial buttons, component input, first Describe Block', () => {
+    expect(wrapper.text()).toContain('Enter Component Name:');
+    expect(wrapper.text()).toContain('Mock Data');
+    expect(wrapper.text()).toContain('+Describe Block');
     expect(wrapper.text()).toContain('New Test +');
   });
 
-  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"]');
+  it('onclick function is invoked when add Describe Block button is clicked', () => {
+    const btn = wrapper.find("button[data-testid='addDescribeButton']");
     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)
-  });
 });

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

@@ -5,8 +5,9 @@ import { GlobalContext } from '../../../context/globalReducer';
 import { TestFileModalContext } from '../../../context/testFileModalReducer';
 import { HooksTestCaseContext } from '../../../context/hooksTestCaseReducer';
 import { ReduxTestCaseContext } from '../../../context/reduxTestCaseReducer';
-import { TestCaseContext } from '../../../context/testCaseReducer';
+import { ReactTestCaseContext } from '../../../context/reactTestCaseReducer';
 import { EndpointTestCaseContext } from '../../../context/endpointTestCaseReducer';
+import { PuppeteerTestCaseContext } from '../../../context/puppeteerTestCaseReducer';
 
 import { mount } from 'enzyme';
 import { configure } from 'enzyme';
@@ -26,7 +27,9 @@ let wrapper,
   testCase,
   dispatchToTestCase,
   endpointTestCaseState,
-  dispatchToEndpointTestCase;
+  dispatchToEndpointTestCase,
+  pupeteerTestCaseState,
+  dispatchToPuppeteerTestCase;
 
 beforeEach(() => {
   globalM = {
@@ -96,18 +99,26 @@ beforeEach(() => {
   };
   dispatchToEndpointTestCase = jest.fn();
 
+  pupeteerTestCaseState =  {
+    puppeteerStatements: [],
+    hasPuppeteer: 0,
+  };
+  dispatchToPuppeteerTestCase = jest.fn();
+
   wrapper = mount(
     <GlobalContext.Provider value={[globalM, dispatchToGlobal]}>
       <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
         <HooksTestCaseContext.Provider value={[hooksTestCase, dispatchToHooksTestCase]}>
           <ReduxTestCaseContext.Provider value={[reduxTestCaseState, dispatchToReduxTestCase]}>
-            <TestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
+            <ReactTestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
               <EndpointTestCaseContext.Provider
                 value={[endpointTestCaseState, dispatchToEndpointTestCase]}
               >
-                <TestFile />
+                <PuppeteerTestCaseContext.Provider value={[pupeteerTestCaseState, dispatchToPuppeteerTestCase]}>
+                  <TestFile />
+                </PuppeteerTestCaseContext.Provider>
               </EndpointTestCaseContext.Provider>
-            </TestCaseContext.Provider>
+            </ReactTestCaseContext.Provider>
           </ReduxTestCaseContext.Provider>
         </HooksTestCaseContext.Provider>
       </TestFileModalContext.Provider>