Merge pull request open-source-labs#3 from charlie-maloney/clean-up-and-research

sieunjang · web-flow · commit d3e6fad47e87 · 2020-05-06T14:46:34.000-07:00
Clean up and research
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,7 @@
 import React, { useReducer } from 'react';
 import styles from './App.module.scss';
 import { GlobalContext, globalState, globalReducer } from './context/globalReducer';
-import { TestCaseContext, testCaseState, testCaseReducer } from './context/testCaseReducer';
+import { ReactTestCaseContext, reactTestCaseState, reactTestCaseReducer } from './context/reactTestCaseReducer';
 import {
   EndpointTestCaseContext,
   endpointTestCaseState,
@@ -31,7 +31,7 @@ import RightPanel from './containers/RightPanel/RightPanel';
 
 const App = () => {
   const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
-  const [testCase, dispatchToTestCase] = useReducer(testCaseReducer, testCaseState);
+  const [reactTestCase, dispatchToReactTestCase] = useReducer(reactTestCaseReducer, reactTestCaseState);
   const [mockData, dispatchToMockData] = useReducer(mockDataReducer, mockDataState);
   const [endpointTestCase, dispatchToEndpointTestCase] = useReducer(
     endpointTestCaseReducer,
@@ -75,8 +75,8 @@ const App = () => {
        */
       <div id={global.isFileDirectoryOpen ? styles.appGridOpen : styles.appGridClose}>
         <GlobalContext.Provider value={[global, dispatchToGlobal]}>
-          <TestCaseContext.Provider value={[testCase, dispatchToTestCase]}>
             <ReduxTestCaseContext.Provider value={[reduxTestCase, dispatchToReduxTestCase]}>
+          <ReactTestCaseContext.Provider value={[reactTestCase, dispatchToReactTestCase]}>
               <EndpointTestCaseContext.Provider
                 value={[endpointTestCase, dispatchToEndpointTestCase]}
               >
@@ -89,8 +89,8 @@ const App = () => {
                   </TestFileModalContext.Provider>
                 </HooksTestCaseContext.Provider>
               </EndpointTestCaseContext.Provider>
+          </ReactTestCaseContext.Provider>
             </ReduxTestCaseContext.Provider>
-          </TestCaseContext.Provider>
           <RightPanel />
         </GlobalContext.Provider>
       </div>
diff --git a/src/containers/LeftPanel/Action/Action.jsx b/src/containers/LeftPanel/Action/Action.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styles from '../Action/Action.module.scss';
 import styles2 from '../AutoComplete/AutoCompleteMockData.module.scss';
-import { deleteAction, updateAction } from '../../../context/testCaseActions';
+import { deleteAction, updateAction } from '../../../context/reactTestCaseActions';
 import { Draggable } from 'react-beautiful-dnd';
 import AutoComplete from '../AutoComplete/AutoComplete';
 import AutoCompleteMockData from '../AutoComplete/AutoCompleteMockData';
diff --git a/src/containers/LeftPanel/Assertion/LastAssertion.jsx b/src/containers/LeftPanel/Assertion/LastAssertion.jsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styles from '../Assertion/Assertion.module.scss';
-import { deleteAssertion, updateAssertion } from '../../../context/testCaseActions';
+import { deleteAssertion, updateAssertion } from '../../../context/reactTestCaseActions';
 import ToolTip from '../ToolTip/ToolTip';
 import ToolTipMatcher from '../ToolTip/ToolTipMatcher';
 import AutoComplete from '../AutoComplete/AutoComplete';
diff --git a/src/containers/LeftPanel/AutoComplete/AutoComplete.jsx b/src/containers/LeftPanel/AutoComplete/AutoComplete.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './AutoComplete.module.scss';
-import { updateAction, updateAssertion } from '../../../context/testCaseActions';
+import { updateAction, updateAssertion } from '../../../context/reactTestCaseActions';
 import { eventTypesList } from '../Action/eventTypesList';
 import { matcherTypesList } from '../Assertion/matcherTypesList';
 import AutoSuggest from 'react-autosuggest';
diff --git a/src/containers/LeftPanel/AutoComplete/AutoCompleteMockData.jsx b/src/containers/LeftPanel/AutoComplete/AutoCompleteMockData.jsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import styles from '../AutoComplete/AutoCompleteMockData.module.scss';
 import AutoSuggest from 'react-autosuggest';
-import { updateAction, updateAssertion, updateRenderProp } from '../../../context/testCaseActions';
+import { updateAction, updateAssertion, updateRenderProp } from '../../../context/reactTestCaseActions';
 import { MockDataContext } from '../../../context/mockDataReducer';
 
 const AutoCompleteMockData = ({
diff --git a/src/containers/LeftPanel/Render/FirstRender.jsx b/src/containers/LeftPanel/Render/FirstRender.jsx
@@ -5,13 +5,13 @@
 import React, { useContext } from 'react';
 import styles from './Render.module.scss';
 import { GlobalContext } from '../../../context/globalReducer';
-import { TestCaseContext } from '../../../context/testCaseReducer';
+import { ReactTestCaseContext } from '../../../context/reactTestCaseReducer';
 
 import {
   deleteRender,
   updateRenderComponent,
   addRenderProp,
-} from '../../../context/testCaseActions';
+} from '../../../context/reactTestCaseActions';
 import RenderProp from './RenderProp';
 
 const plusIcon = require('../../../assets/images/plus.png');
@@ -20,7 +20,7 @@ const dragIcon = require('../../../assets/images/drag-vertical.png');
 
 const FirstRender = ({ render }) => {
   const [{ filePathMap }, _] = useContext(GlobalContext);
-  const [{ statements, hasProp }, dispatchToTestCase] = useContext(TestCaseContext);
+  const [{ statements, hasProp }, dispatchToTestCase] = useContext(ReactTestCaseContext);
 
   const handleChangeComponentName = e => {
     const componentName = e.target.value;
diff --git a/src/containers/LeftPanel/Render/RenderProp.jsx b/src/containers/LeftPanel/Render/RenderProp.jsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import styles from '../Render/RenderProp.module.scss';
-import { deleteRenderProp, updateRenderProp } from '../../../context/testCaseActions';
+import { deleteRenderProp, updateRenderProp } from '../../../context/reactTestCaseActions';
 import AutoCompleteMockData from '../AutoComplete/AutoCompleteMockData';
 
 const minusIcon = require('../../../assets/images/minus-box-outline.png');
diff --git a/src/containers/LeftPanel/TestCase/TestCase.jsx b/src/containers/LeftPanel/TestCase/TestCase.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styles from '../TestCase/TestCase.module.scss';
-import { TestCaseContext } from '../../../context/testCaseReducer';
-import { updateTestStatement, updateStatementsOrder } from '../../../context/testCaseActions';
+import { ReactTestCaseContext } from '../../../context/reactTestCaseReducer';
+import { updateTestStatement, updateStatementsOrder } from '../../../context/reactTestCaseActions';
 import { MockDataContext } from '../../../context/mockDataReducer';
 import { toggleMockData, addMockData } from '../../../context/mockDataActions';
 import TestMenu from '../TestMenu/TestMenu';
@@ -14,7 +14,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 const plusIcon = require('../../../assets/images/plus-box.png');
 
 const TestCase = () => {
-  const [{ testStatement, statements }, dispatchToTestCase] = useContext(TestCaseContext);
+  const [{ testStatement, statements }, dispatchToTestCase] = useContext(ReactTestCaseContext);
   const [{ mockData, hasMockData }, dispatchToMockData] = useContext(MockDataContext);
   const firstRenderStatement = statements[0];
   const draggableStatements = statements.slice(1, -1);
diff --git a/src/containers/LeftPanel/TestFile/TestFile.jsx b/src/containers/LeftPanel/TestFile/TestFile.jsx
@@ -1,11 +1,11 @@
 import styles from '../../NavBar/Modals/ExportFileModal.module.scss';
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext } from 'react';
 import ReactModal from 'react-modal';
 
 /* testCase imports */
 import TestCase from '../TestCase/TestCase';
-import { TestCaseContext } from '../../../context/testCaseReducer';
-import { toggleReact } from '../../../context/testCaseActions';
+import { ReactTestCaseContext } from '../../../context/reactTestCaseReducer';
+import { toggleReact } from '../../../context/reactTestCaseActions';
 
 /* reduxTestCase imports */
 import { toggleRedux } from '../../../context/reduxTestCaseActions';
@@ -27,7 +27,7 @@ import { TestFileModalContext } from '../../../context/testFileModalReducer';
 
 const TestFile = () => {
   const [{ hasRedux }, dispatchToReduxTestCase] = useContext(ReduxTestCaseContext);
-  const [{ hasReact }, dispatchToTestCase] = useContext(TestCaseContext);
+  const [{ hasReact }, dispatchToTestCase] = useContext(ReactTestCaseContext);
   const [{ hasHooks }, dispatchToHooksTestCase] = useContext(HooksTestCaseContext);
   const [{ hasEndpoint }, dispatchToEndpointTestCase] = useContext(EndpointTestCaseContext);
   const [{ isTestModalOpen }, dispatchToTestFileModal] = useContext(TestFileModalContext);
diff --git a/src/containers/LeftPanel/TestMenu/TestMenu.jsx b/src/containers/LeftPanel/TestMenu/TestMenu.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styles from '../TestMenu/TestMenu.module.scss';
-import { addAction, addAssertion, addRender } from '../../../context/testCaseActions';
+import { addAction, addAssertion, addRender } from '../../../context/reactTestCaseActions';
 import NewTestModal from '../../NavBar/Modals/NewTestModal';
 
 const TestMenu = ({ dispatchToTestCase, dispatchToMockData }) => {
diff --git a/src/containers/NavBar/Modals/ExportFileModal.jsx b/src/containers/NavBar/Modals/ExportFileModal.jsx
@@ -7,7 +7,7 @@ import {
   toggleFolderView,
   highlightFile,
 } from '../../../context/globalActions';
-import { TestCaseContext } from '../../../context/testCaseReducer';
+import { ReactTestCaseContext } from '../../../context/reactTestCaseReducer';
 import { ReduxTestCaseContext } from '../../../context/reduxTestCaseReducer';
 import { HooksTestCaseContext } from '../../../context/hooksTestCaseReducer';
 import { MockDataContext } from '../../../context/mockDataReducer';
@@ -22,11 +22,11 @@ const beautify = remote.require('js-beautify');
 const ExportFileModal = ({ isExportModalOpen, closeExportModal }) => {
   const [fileName, setFileName] = useState('');
   const [{ projectFilePath }, dispatchToGlobal] = useContext(GlobalContext);
-  const [testCase, __] = useContext(TestCaseContext);
-  const [reduxTestCase, ____] = useContext(ReduxTestCaseContext);
-  const [hooksTestCase, _] = useContext(HooksTestCaseContext);
-  const [{ mockData }, ___] = useContext(MockDataContext);
-  const [endpointTestCase, _____] = useContext(EndpointTestCaseContext);
+  const [testCase] = useContext(ReactTestCaseContext);
+  const [reduxTestCase] = useContext(ReduxTestCaseContext);
+  const [hooksTestCase] = useContext(HooksTestCaseContext);
+  const [{ mockData }] = useContext(MockDataContext);
+  const [endpointTestCase] = useContext(EndpointTestCaseContext);
 
   let testFileCode = 'import React from "react";';
 
diff --git a/src/containers/NavBar/Modals/NewTestModal.jsx b/src/containers/NavBar/Modals/NewTestModal.jsx
@@ -5,7 +5,7 @@
 
 import React, { useContext } from 'react';
 import ReactModal from 'react-modal';
-import { createNewTest } from '../../../context/testCaseActions';
+import { createNewTest } from '../../../context/reactTestCaseActions';
 import { clearMockData } from '../../../context/mockDataActions';
 import styles from '../../NavBar/Modals/ExportFileModal.module.scss';
 import { toggleModal } from '../../../context/testFileModalActions';
diff --git a/src/context/reactTestCaseActions.js b/src/context/reactTestCaseActions.js
@@ -0,0 +1,138 @@
+/* ------------------------------ Action Types ------------------------------ */
+
+export const actionTypes = {
+  TOGGLE_REACT: 'TOGGLE_REACT',
+
+  UPDATE_STATEMENTS_ORDER: 'UPDATE_STATEMENTS_ORDER',
+  UPDATE_TEST_STATEMENT: 'UPDATE_TEST_STATEMENT',
+
+  ADD_ACTION: 'ADD_ACTION',
+  DELETE_ACTION: 'DELETE_ACTION',
+  UPDATE_ACTION: 'UPDATE_ACTION',
+
+  ADD_ASSERTION: 'ADD_ASSERTION',
+  DELETE_ASSERTION: 'DELETE_ASSERTION',
+  UPDATE_ASSERTION: 'UPDATE_ASSERTION',
+
+  ADD_RENDER: 'ADD_RENDER',
+  DELETE_RENDER: 'DELETE_RENDER',
+  UPDATE_RENDER_COMPONENT: 'UPDATE_RENDER_COMPONENT',
+
+  ADD_RENDER_PROP: 'ADD_RENDER_PROP',
+  DELETE_RENDER_PROP: 'DELETE_RENDER_PROP',
+  UPDATE_RENDER_PROP: 'UPDATE_RENDER_PROPS',
+
+  CREATE_NEW_TEST: 'CREATE_NEW_TEST',
+};
+
+/* --------------------------------- Actions -------------------------------- */
+
+export const toggleReact = () => ({
+  type: actionTypes.TOGGLE_REACT,
+});
+
+export const updateStatementsOrder = draggableStatements => ({
+  type: actionTypes.UPDATE_STATEMENTS_ORDER,
+  draggableStatements,
+});
+
+export const updateTestStatement = testStatement => ({
+  type: actionTypes.UPDATE_TEST_STATEMENT,
+  testStatement,
+});
+
+export const addAction = () => ({
+  type: actionTypes.ADD_ACTION,
+});
+
+export const deleteAction = id => ({
+  type: actionTypes.DELETE_ACTION,
+  id,
+});
+
+export const updateAction = ({
+  id,
+  eventType,
+  eventValue,
+  queryVariant,
+  querySelector,
+  queryValue,
+  suggestions,
+}) => ({
+  type: actionTypes.UPDATE_ACTION,
+  id,
+  eventType,
+  eventValue,
+  queryVariant,
+  querySelector,
+  queryValue,
+  suggestions,
+});
+
+export const addAssertion = () => ({
+  type: actionTypes.ADD_ASSERTION,
+});
+
+export const deleteAssertion = id => ({
+  type: actionTypes.DELETE_ASSERTION,
+  id,
+});
+
+export const updateAssertion = ({
+  id,
+  queryVariant,
+  querySelector,
+  queryValue,
+  isNot,
+  matcherType,
+  matcherValue,
+  suggestions,
+}) => ({
+  type: actionTypes.UPDATE_ASSERTION,
+  id,
+  queryVariant,
+  querySelector,
+  queryValue,
+  isNot,
+  matcherType,
+  matcherValue,
+  suggestions,
+});
+
+export const addRender = () => ({
+  type: actionTypes.ADD_RENDER,
+});
+
+export const deleteRender = id => ({
+  type: actionTypes.DELETE_RENDER,
+  id,
+});
+
+export const updateRenderComponent = (componentName, filePath) => ({
+  type: actionTypes.UPDATE_RENDER_COMPONENT,
+  componentName,
+  filePath,
+});
+
+export const addRenderProp = renderId => ({
+  type: actionTypes.ADD_RENDER_PROP,
+  renderId,
+});
+
+export const deleteRenderProp = (renderId, propId) => ({
+  type: actionTypes.DELETE_RENDER_PROP,
+  renderId,
+  propId,
+});
+
+export const updateRenderProp = (renderId, propId, propKey, propValue) => ({
+  type: actionTypes.UPDATE_RENDER_PROP,
+  renderId,
+  propId,
+  propKey,
+  propValue,
+});
+
+export const createNewTest = () => ({
+  type: actionTypes.CREATE_NEW_TEST,
+});
diff --git a/src/context/reactTestCaseReducer.js b/src/context/reactTestCaseReducer.js
diff --git a/src/context/testCaseActions.js b/src/context/testCaseActions.js
diff --git a/src/context/testCaseReducer.js b/src/context/testCaseReducer.js
