Merge pull request #94 from oslabs-beta/master

Merge from beta

Author: bkwak

.gitignore

@@ -23,3 +23,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+#configuration
+.vscode

package.json

@@ -82,7 +82,6 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.1",
-    "jest-dom": "^3.5.0",
     "react-test-renderer": "^16.12.0",
     "spectron": "^5.0.0",
     "test-data-bot": "^0.8.0"

public/electron.js

@@ -1,18 +1,22 @@
-require('dotenv').config()
 const { app, BrowserWindow } = require('electron');
 const path = require('path');
 const isDev = require('electron-is-dev');
 let mainWindow;
 
-if (process.env.NODE_ENV === 'development') {
-  const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
+if (isDev) console.log('electron version', process.versions.electron);
+
+if (isDev) {
+  const {
+    default: installExtension,
+    REACT_DEVELOPER_TOOLS,
+  } = require('electron-devtools-installer');
   function addDevTools() {
     app.whenReady().then(() => {
-    installExtension(REACT_DEVELOPER_TOOLS)
+      installExtension(REACT_DEVELOPER_TOOLS)
         .then((name) => console.log(`Added Extension:  ${name}`))
         .catch((err) => console.log('An error occurred: ', err));
-  });
-  };
+    });
+  }
 }
 function createWindow() {
   mainWindow = new BrowserWindow({
@@ -31,7 +35,7 @@ function createWindow() {
   mainWindow.on('closed', () => (mainWindow = null));
 }
 
-if (process.env.NODE_ENV === 'development') {
+if (isDev) {
   app.on('ready', addDevTools);
 }
 
@@ -45,4 +49,4 @@ app.on('activate', () => {
   if (mainWindow === null) {
     createWindow();
   }
-});
+});

src/App.jsx

@@ -1,69 +1,23 @@
 import React, { useReducer } from 'react';
 import styles from './App.module.scss';
 import { GlobalContext, globalState, globalReducer } from './context/reducers/globalReducer';
-import { ReactTestCaseContext, reactTestCaseState, reactTestCaseReducer } from './context/reducers/reactTestCaseReducer';
-import {
-  PuppeteerTestCaseContext,
-  puppeteerTestCaseState,
-  puppeteerTestCaseReducer,
-} from './context/reducers/puppeteerTestCaseReducer';
-import {
-  EndpointTestCaseContext,
-  endpointTestCaseState,
-  endpointTestCaseReducer,
-} from './context/reducers/endpointTestCaseReducer';
-import {
-  ReduxTestCaseContext,
-  reduxTestCaseState,
-  reduxTestCaseReducer,
-} from './context/reducers/reduxTestCaseReducer';
-import {
-  HooksTestCaseContext,
-  hooksTestCaseState,
-  hooksTestCaseReducer,
-} from './context/reducers/hooksTestCaseReducer';
-import {
-  TestFileModalContext,
-  testFileModalState,
-  testFileModalReducer,
-} from './context/reducers/testFileModalReducer';
-
-import { MockDataContext, mockDataState, mockDataReducer } from './context/reducers/mockDataReducer';
 import ProjectLoader from './pages/ProjectLoader/ProjectLoader';
 import NavBar from './components/NavBar/NavBar';
 import LeftPanel from './pages//LeftPanel/LeftPanel';
 import RightPanel from './pages/RightPanel/RightPanel';
+import About from './pages/About/About';
 
 const App = () => {
-  const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
-  const [reactTestCase, dispatchToReactTestCase] = useReducer(reactTestCaseReducer, reactTestCaseState);
-  const [mockData, dispatchToMockData] = useReducer(mockDataReducer, mockDataState);
-  const [endpointTestCase, dispatchToEndpointTestCase] = useReducer(
-    endpointTestCaseReducer,
-    endpointTestCaseState
-  );
-
-  const [reduxTestCase, dispatchToReduxTestCase] = useReducer(
-    reduxTestCaseReducer,
-    reduxTestCaseState
-  );
-  const [hooksTestCase, dispatchToHooksTestCase] = useReducer(
-    hooksTestCaseReducer,
-    hooksTestCaseState
-  );
-  const [puppeteerTestCase, dispatchToPuppeteerTestCase] = useReducer(
-    puppeteerTestCaseReducer,
-    puppeteerTestCaseState
-  );
-  const [testFileModal, dispatchToTestFileModal] = useReducer(
-    testFileModalReducer,
-    testFileModalState
-  );
+  // useReducer takes a reducer and initial state as
+  // args and return the current state paired with a dispatch method
+  // distpatchTo method invokes associated reducer function
 
+  const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);
 
   if (!global.isProjectLoaded) {
     return (
       <div>
+        {/* pass global state and dispatch function as prop to context provider for child components */}
         <GlobalContext.Provider value={[global, dispatchToGlobal]}>
           <ProjectLoader />
         </GlobalContext.Provider>
@@ -72,7 +26,7 @@ const App = () => {
   } else {
     return (
       /**
-       * Wrap the components that we want to share the unique states with (ex: share testCase state with navbar & left panel (the two containers that hold the components that need testCaseRducer)) in the unique providers (ex: TestCaseContext.Provider).
+       * Wrap the components that we want to share the unique states with.
        * You can only provide one value to a Provider.
        *  - In order to avoid creating separate Contexts, wrap multiples in an array (ex: testCase and dispatchToTestCase).
        *
@@ -83,28 +37,32 @@ const App = () => {
        *
        * We access the value that we gave to the Provider through useContext
        */
-      <div id={global.isFileDirectoryOpen ? 
-        (global.isRightPanelOpen? styles.fileDirectoryOpenRightPanelOpen : styles.fileDirectoryOpenRightPanelClosed) :
-        (global.isRightPanelOpen? styles.fileDirectoryClosedRightPanelOpen : styles.fileDirectoryClosedRightPanelClosed) 
-      }>
+      <div
+        id={
+          global.isProjectLoaded === 'about'
+            ? ''
+            : global.isFileDirectoryOpen
+            ? global.isRightPanelOpen
+              ? styles.fileDirectoryOpenRightPanelOpen
+              : styles.fileDirectoryOpenRightPanelClosed
+            : global.isRightPanelOpen
+            ? styles.fileDirectoryClosedRightPanelOpen
+            : styles.fileDirectoryClosedRightPanelClosed
+        }
+      >
         <GlobalContext.Provider value={[global, dispatchToGlobal]}>
-          <ReduxTestCaseContext.Provider value={[reduxTestCase, dispatchToReduxTestCase]}>
-            <ReactTestCaseContext.Provider value={[reactTestCase, dispatchToReactTestCase]}>
-                <EndpointTestCaseContext.Provider value={[endpointTestCase, dispatchToEndpointTestCase]}>
-                  <HooksTestCaseContext.Provider value={[hooksTestCase, dispatchToHooksTestCase]}>
-                    <TestFileModalContext.Provider value={[testFileModal, dispatchToTestFileModal]}>
-                      <MockDataContext.Provider value={[mockData, dispatchToMockData]}>
-                        <PuppeteerTestCaseContext.Provider value={[puppeteerTestCase, dispatchToPuppeteerTestCase]}>
-                          <NavBar />
-                          <LeftPanel />
-                        </PuppeteerTestCaseContext.Provider>
-                      </MockDataContext.Provider>
-                    </TestFileModalContext.Provider>
-                  </HooksTestCaseContext.Provider>
-                </EndpointTestCaseContext.Provider>
-            </ReactTestCaseContext.Provider>
-          </ReduxTestCaseContext.Provider>
-          {global.isRightPanelOpen ?  <RightPanel /> : ''}
+          {global.isProjectLoaded === 'about' ? (
+            <>
+              <NavBar inAboutPage={true} />
+              <About dispatch={dispatchToGlobal} />{' '}
+            </>
+          ) : (
+            <>
+              <NavBar inAboutPage={false} />
+              <LeftPanel />
+            </>
+          )}
+          {global.isRightPanelOpen ? <RightPanel /> : ''}
         </GlobalContext.Provider>
       </div>
     );

src/__tests__/Action.test.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { ReactTestCaseContext } from '../context/reducers/reactTestCaseReducer';
 import { MockDataContext } from '../context/reducers/mockDataReducer';
-import Action from '../components/Action/Action';
+import Action from '../components/ReactTestComponent/Action/Action';
 
 const dispatchToReactTextCase = jest.fn();
 const dispatchToMockData = jest.fn();
@@ -35,12 +34,12 @@ const mockDataState = {
 describe('Assertion ', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(
+    render(
       <ReactTestCaseContext.Provider value={[reactTestCaseState, dispatchToReactTextCase]}>
         <MockDataContext.Provider value={[mockDataState, dispatchToMockData]}>
           <Action {...reactTestCaseState} />
         </MockDataContext.Provider>
-      </ReactTestCaseContext.Provider>, div,
+      </ReactTestCaseContext.Provider>
     );
   });
 });

src/__tests__/Assertion.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { ReactTestCaseContext } from '../context/reducers/reactTestCaseReducer';
 import { MockDataContext } from '../context/reducers/mockDataReducer';
-import Assertion from '../components/Assertion/Assertion';
+import Assertion from '../components/ReactTestComponent/Assertion/Assertion';
+import userEvent from '@testing-library/user-event';
 
 const dispatchToReactTextCase = jest.fn();
 const dispatchToMockData = jest.fn();
@@ -35,13 +35,21 @@ const mockDataState = {
 
 describe('Assertion ', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(
+    // const div = document.createElement('div');
+
+    const { getByText, getAllByRole, debug } = render(
       <ReactTestCaseContext.Provider value={[reactTestCaseState, dispatchToReactTextCase]}>
         <MockDataContext.Provider value={[mockDataState, dispatchToMockData]}>
           <Assertion {...reactTestCaseState} />
         </MockDataContext.Provider>
-      </ReactTestCaseContext.Provider>, div,
+      </ReactTestCaseContext.Provider>
     );
+    expect(getByText('Assertion')).toBeInTheDocument;
+
+    expect(getAllByRole('textbox')).toBeInTheDocument;
+    // expect()
+    // expect(screen.getAllByRole('Query', { name: 'Query' })).toHaveValue('Hello,\nWorld!');
+
+    debug();
   });
 });

src/__tests__/Hooks.test.js

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

src/__tests__/ReduxTestMenu.test.js

@@ -0,0 +1,36 @@
+window.require = jest.fn();
+
+import { actionTypes, ReduxTestCaseState } from '../utils/reduxTypes';
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ReduxTestCaseContext } from '../context/reducers/reduxTestCaseReducer';
+import { MockDataContext } from '../context/reducers/mockDataReducer';
+import ReduxTestMenu from '../components/TestMenu/ReduxTestMenu';
+
+const dispatchToReduxTextCase = jest.fn();
+const dispatchToMockData = jest.fn();
+
+export const reduxTestCaseState: ReduxTestCaseState = {
+  reduxTestStatement: '' /* the test description */,
+  reduxStatements: [] /* both of the cards on the page at open. Each card gets an id */,
+};
+
+const mockDataState = {
+  mockData: [],
+  hasMockData: false,
+};
+
+describe('should render ReduxTestCase component', () => {
+  it('renders Test Menu', () => {
+    const { getByText, debug } = render();
+    <ReduxTestCaseContext.Provider value={(reduxTestCaseState, dispatchToReduxTextCase)}>
+      <MockDataContext.Provider value={(mockDataState, dispatchToMockData)}>
+        <ReduxTestMenu />;
+      </MockDataContext.Provider>
+    </ReduxTestCaseContext.Provider>;
+    expect(getByText('test'));
+    screen.debug();
+  });
+});