-
- {title === 'New Test' ? title : 'Copy to Terminal'}
+Run Tests in Terminal
+
- {title === 'New Test'
- ? (
- ${puppeteerUrl}
- `
+ {
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D axe-core puppeteer',
+ }
);
-
}
return 'error';
case 'react':
return (
- `cd ${projectFilePath}\n` +
- 'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot jest\n' +
- 'npm run test'
+ {
+ cd: `cd ${projectFilePath}`,
+ install: `npm i -D @testing-library/jest-dom @testing-library/react test-data-bot jest`,
+ }
);
case 'redux':
return (
- `cd ${projectFilePath}\n` +
- 'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot redux-mock-store redux-thunk fetch-mock node-fetch jest\n' +
- 'npm run test'
+ {
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot redux-mock-store redux-thunk fetch-mock node-fetch jest',
+ }
);
case 'hooks':
return (
- `cd ${projectFilePath}\n` +
- 'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot @testing-library/react-hooks jest\n' +
- 'npm run test'
+ {
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D @testing-library/jest-dom @testing-library/react test-data-bot @testing-library/react-hooks jest',
+ }
);
case 'endpoint':
+ const endPointGuide = {
+ 1: `1. Please follow these steps to configure your files correctly. The tests will not run properly if you skip these steps.`,
+ 2: `2. Your server file MUST export your server object.`,
+ 3: `3. Comment out or remove the appropriate lines of code where the call to the server's listen method takes place.`,
+ 4: `4. If you are testing a route that involves querying a database, you must import the file where your database instance is created.`,
+ 5: `5. In that file, you must export your database instance object.`,
+ '5a': `5a. PostgreSQL: Pool, Client, or pg object.`,
+ '5b': `5b. MongoDB: MongoClient instance.`,
+ '5c': `5c. Mongoose: mongoose instance.`,
+ }
return (
- <>
-
-
-(GlobalContext);
+ const [{ projectFilePath, file, exportBool, isTestModalOpen, }, dispatchToGlobal] = useContext(GlobalContext);
const generateTest = useGenerateTest('acc', projectFilePath);
// setValidCode to true on load.
@@ -44,6 +47,11 @@ const AccTestMenu = () => {
dispatchToGlobal(updateFile(generateTest(accTestCase)));
dispatchToGlobal(toggleRightPanel('codeEditorView'));
dispatchToGlobal(setFilePath(''));
+ dispatchToGlobal(setTabIndex(0));
+ };
+
+ const openNewTestModal = () => {
+ if (!isTestModalOpen) dispatchToGlobal(toggleModal());
};
if (!file && exportBool) dispatchToGlobal(updateFile(generateTest(accTestCase)));
@@ -54,7 +62,7 @@ const AccTestMenu = () => {
-
+
);
}
diff --git a/src/components/TestMenu/EndpointTestMenu.tsx b/src/components/TestMenu/EndpointTestMenu.tsx
index 2e8b3690..5d0d93e9 100644
--- a/src/components/TestMenu/EndpointTestMenu.tsx
+++ b/src/components/TestMenu/EndpointTestMenu.tsx
@@ -7,6 +7,9 @@ import {
setFilePath,
setValidCode,
toggleExportBool,
+ setTestCase,
+ toggleModal,
+ setTabIndex,
} from '../../context/actions/globalActions';
import styles from './TestMenu.module.scss';
import Modal from '../Modals/Modal';
@@ -24,7 +27,7 @@ import { useToggleModal, validateInputs } from './testMenuHooks';
const EndpointTestMenu = () => {
const [endpointTestCase, dispatchToEndpointTestCase] = useContext(EndpointTestCaseContext);
- const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext
- Do you want to start a new test? All unsaved changes
-
- will be lost.
-
-- )} - - {title === 'New Test' - ? ( - - ) - : ( - - )} - - + {/* Accordian View */} +--- {script} -- - {testType === 'react' - ? -- Requires React version 16 or less. -
- : null - } - -- Note if you are using Create React App do not install jest -
-
+ {/* Configuration Guide */}
+
+
+
+
+ {/* Specify File to test */}
+
+
+ {/* Select test to run */}
+
+
+ {/* Testing */}
+
+
+ {/* Select test to run */}
+
+
);
diff --git a/src/components/Modals/modalHooks.js b/src/components/Modals/modalHooks.js
index 1812e033..d2b37b7c 100644
--- a/src/components/Modals/modalHooks.js
+++ b/src/components/Modals/modalHooks.js
@@ -36,82 +36,80 @@ export function useNewTest(dispatchToMockData, dispatchTestCase, createTest, clo
}
export function useGenerateScript(test, testType = null, puppeteerUrl = 'sample.io') {
- const [{ projectFilePath }] = useContext(GlobalContext);
+ const [{ projectFilePath }] = useContext(GlobalContext)
switch (test) {
case 'acc':
if (testType === 'html') {
return (
- `cd ${projectFilePath}
- npm i -D axe-core regenerator-runtime jest
- jest`
+ {
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D axe-core regenerator-runtime jest',
+ }
);
}
if (testType === 'react') {
return (
- `cd ${projectFilePath}
- npm i -D axe-core regenerator-runtime jest enzyme enzyme-adapter-react-16
- jest`
+ {
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D axe-core regenerator-runtime jest enzyme enzyme-adapter-react-16',
+ }
);
}
if (testType === 'puppeteer') {
return (
- `cd ${projectFilePath}
- npm i -D axe-core puppeteer
- node
+ {/* Change Directory */}
+
+
+
+
+ {/* Install Dependencies */}
+
+
+
+
+ {/* Create config file only if title is react or hook */}
+
+
+
+ ++ + ++++ {script.cd} ++
+ {btnFeedback.changedDir === false ? null :
+
+ Directory has been changed to root directory.
} +
+
+ ++ + ++++ {script.install} ++
+
+
+
+
+
+
+
+
+
+ {/* To do: make button toggle on/off */}
+
+ ++ + + + + ++++ {`npx jest ${fileName}\n`} + {`npx jest --verbose ${fileName}\n`} + {`npx jest --coverage ${fileName}\n`} ++
- Please follow these steps to configure your files correctly. The tests will not run
- properly if you skip these steps!
-
-
1. Your server file MUST export your server object.
-
2. Comment out or remove the appropriate lines of code where the call to the
- server's listen method takes place
-
- Example
-
3. If your are testing a route that involves querying a database, you must
- import the file where your database instance is created.
-
-
-
- 4. In that file, you must export your database instance object
-
- PostgreSQL: Pool, Client, or pg object -
- MongoDB: MongoClient instance -
- Mongoose: mongoose instance -
-
npm i -D jest supertest
- -
npm run test
-
+ {
+ endPointGuide: endPointGuide,
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D jest supertest regenerator-runtime',
+ }
);
case 'puppeteer':
- return `cd ${projectFilePath}\nnpm i -D jest puppeteer\nnpm run test`;
+ return (
+ {
+ cd: `cd ${projectFilePath}`,
+ install: 'npm i -D puppeteer',
+ }
+ );
default:
return '';
// code block
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index b0c004fd..3eed01c6 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -20,13 +20,15 @@ import ExportFileModal from '../Modals/ExportFileModal';
const menuIcon = require('../../assets/images/menu.png');
const exportIcon = require('../../assets/images/file-export.png');
-const browserIcon = require('../../assets/images/google-chrome.png');
-const codeIcon = require('../../assets/images/visual-studio-code.png');
-const homeIcon = require('../../assets/images/home.png');
+// const browserIcon = require('../../assets/images/google-chrome.png');
+// const codeIcon = require('../../assets/images/visual-studio-code.png');
+// const homeIcon = require('../../assets/images/home.png');
const NavBar = ({ inAboutPage }) => {
const [
- { fileTree, isFileDirectoryOpen, projectUrl, rightPanelDisplay },
+ {
+ fileTree, isFileDirectoryOpen, projectUrl, rightPanelDisplay,
+ },
dispatchToGlobal,
] = useContext(GlobalContext);
const [isExportModalOpen, setIsExportModalOpen] = useState(false);
@@ -37,21 +39,21 @@ const NavBar = ({ inAboutPage }) => {
};
/* switches between code and browser view */
- const handleEditorToggle = () => {
- if (!inAboutPage) dispatchToGlobal(toggleRightPanel('codeEditorView'));
- };
+ // const handleEditorToggle = () => {
+ // if (!inAboutPage) dispatchToGlobal(toggleRightPanel('codeEditorView'));
+ // };
/* switches between code and browser view */
- const handleBrowserToggle = () => {
- if (inAboutPage) return;
- if (rightPanelDisplay === 'browserView' && projectUrl) {
- dispatchToGlobal(resetToProjectUrl());
- }
- if (!projectUrl) {
- dispatchToGlobal(setProjectUrl('https://google.com'));
- }
- dispatchToGlobal(toggleRightPanel('browserView'));
- };
+ // const handleBrowserToggle = () => {
+ // if (inAboutPage) return;
+ // if (rightPanelDisplay === 'browserView' && projectUrl) {
+ // dispatchToGlobal(resetToProjectUrl());
+ // }
+ // if (!projectUrl) {
+ // dispatchToGlobal(setProjectUrl('https://google.com'));
+ // }
+ // dispatchToGlobal(toggleRightPanel('browserView'));
+ // };
/* exports the file (when true) */
const openExportModal = () => {
@@ -60,19 +62,21 @@ const NavBar = ({ inAboutPage }) => {
};
/*returns to project loader screen */
- const handleClickHome = () => {
- dispatchToGlobal(loadProject(false));
- };
+ // const handleClickHome = () => {
+ // dispatchToGlobal(loadProject(false));
+ // };
/*
* renders: buttons + icons for navbar, exportFileModal, boxes to open new folder and enter url, file directory
*/
return (
+ {/* File Explorer */}
+ {/* Export */}
*/}
{isFileDirectoryOpen &&
);
diff --git a/src/components/OpenFolder/OpenFolderButton.jsx b/src/components/OpenFolder/OpenFolderButton.jsx
index 9c67d90c..2ef93373 100644
--- a/src/components/OpenFolder/OpenFolderButton.jsx
+++ b/src/components/OpenFolder/OpenFolderButton.jsx
@@ -15,11 +15,15 @@ import {
} from '../../context/actions/globalActions';
import { GlobalContext } from '../../context/reducers/globalReducer';
+const { ipcRenderer } = require('electron');
+const os = require('os');
const folderOpenIcon = require('../../assets/images/folder-open.png');
-const { remote } = window.require('electron');
-const electronFs = remote.require('fs');
-const { dialog } = remote;
+// Change execute command based on os platform
+let execute = '\n';
+if (os.platform() === 'win32') {
+ execute = '\r';
+}
const OpenFolder = () => {
const [{ isProjectLoaded, isFileDirectoryOpen, isTestModalOpen }, dispatchToGlobal] = useContext(
@@ -27,19 +31,11 @@ const OpenFolder = () => {
);
const handleOpenFolder = () => {
- const directory = dialog.showOpenDialog({
- properties: ['openDirectory', 'createDirectory'],
- filters: [
- { name: 'Javascript Files', extensions: ['js', 'jsx'] },
- { name: 'Style', extensions: ['css'] },
- { name: 'Html', extensions: ['html'] },
- ],
- message: 'Please select your project folder',
- });
+ const directory = ipcRenderer.sendSync('OpenFolderButton.dialog');
if (directory && directory[0]) {
let directoryPath = directory[0];
- //replace backslashes for Windows OS
+ // replace backslashes for Windows OS
directoryPath = directoryPath.replace(/\\/g, '/');
dispatchToGlobal(setProjectFilePath(directoryPath));
dispatchToGlobal(createFileTree(generateFileTreeObject(directoryPath)));
@@ -47,6 +43,9 @@ const OpenFolder = () => {
dispatchToGlobal(setTestCase(''));
if (!isTestModalOpen) dispatchToGlobal(toggleModal());
if (!isFileDirectoryOpen) dispatchToGlobal(toggleFileDirectory());
+
+ // Re-direct terminal directory to user selected directory
+ ipcRenderer.send('terminal.toTerm', `cd "${directoryPath}"${execute}`);
}
};
@@ -61,7 +60,8 @@ const OpenFolder = () => {
};
const generateFileTreeObject = (directoryPath) => {
- const fileArray = electronFs.readdirSync(directoryPath).map((fileName) => {
+ const filePaths = ipcRenderer.sendSync('Universal.readDir', directoryPath);
+ const fileArray = filePaths.map((fileName) => {
// replace backslashes for Windows OS
directoryPath = directoryPath.replace(/\\/g, '/');
const filePath = `${directoryPath}/${fileName}`;
@@ -74,8 +74,8 @@ const OpenFolder = () => {
populateFilePathMap(file);
// generateFileTreeObj will be recursively called if it is a folder
- const fileData = electronFs.statSync(file.filePath);
- if (file.fileName !== 'node_modules' && file.fileName !== '.git' && fileData.isDirectory()) {
+ const isDirectory = ipcRenderer.sendSync('OpenFolderButton.isDirectory', filePath);
+ if (file.fileName !== 'node_modules' && file.fileName !== '.git' && isDirectory) {
file.files = generateFileTreeObject(file.filePath);
}
return file;
diff --git a/src/components/Terminal/TerminalView.tsx b/src/components/Terminal/TerminalView.tsx
new file mode 100644
index 00000000..69745a14
--- /dev/null
+++ b/src/components/Terminal/TerminalView.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, ChangeEvent } from 'react';
+import { XTerm } from 'xterm-for-react';
+import { TerminalType } from '../../utils/terminalTypes';
+
+const { Terminal } = require('xterm');
+const ipc = require('electron').ipcRenderer;
+
+const terminalArgs: TerminalType = {
+ fontSize: 15,
+ // Currently rows are hardcoded, next step is to make terminal sizing dynamic.
+ rows: 30,
+ fontFamily: 'monospace',
+ theme: {
+ background: '#002a36',
+ },
+};
+
+const term = new Terminal(terminalArgs);
+
+const TerminalView = () => {
+ useEffect(() => {
+ // console.log(global.projectFilePath);
+ term.open(document.getElementsByClassName('terminal')[0]);
+ // when we have input events (e), we would send the data to the main processor
+ term.onData((e: ChangeEvent) => {
+ ipc.send('terminal.toTerm', e);
+ });
+ // when incoming Data comes back to the main process, this ipc renderer
+ // will take it and writes it to xterm monitor
+ ipc.on('terminal.incData', (event, data: string) => {
+ term.write(data);
+ });
+ }, []);
+
+ return
-
diff --git a/src/components/TestMenu/HooksTestMenu.tsx b/src/components/TestMenu/HooksTestMenu.tsx
index e69b7b64..e206b59a 100644
--- a/src/components/TestMenu/HooksTestMenu.tsx
+++ b/src/components/TestMenu/HooksTestMenu.tsx
@@ -7,6 +7,9 @@ import {
toggleRightPanel,
setValidCode,
toggleExportBool,
+ setTestCase,
+ toggleModal,
+ setTabIndex,
} from '../../context/actions/globalActions';
import styles from './TestMenu.module.scss';
import { addHookUpdates, createNewHooksTest } from '../../context/actions/hooksTestCaseActions';
@@ -22,7 +25,7 @@ const HooksTestMenu = () => {
HooksTestCaseContext
);
const { title, isModalOpen, openModal, openScriptModal, closeModal } = useToggleModal('hooks');
- const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext(GlobalContext);
+ const [{ projectFilePath, file, exportBool, isTestModalOpen }, dispatchToGlobal] = useContext(GlobalContext);
const generateTest = useGenerateTest('hooks', projectFilePath);
useEffect(() => {
@@ -41,6 +44,11 @@ const HooksTestMenu = () => {
dispatchToGlobal(updateFile(generateTest({ hooksTestStatement, hooksStatements })));
dispatchToGlobal(toggleRightPanel('codeEditorView'));
dispatchToGlobal(setFilePath(''));
+ dispatchToGlobal(setTabIndex(0));
+ };
+
+ const openNewTestModal = () => {
+ if (!isTestModalOpen) dispatchToGlobal(toggleModal());
};
if (exportBool) {
diff --git a/src/components/TestMenu/PuppeteerTestMenu.tsx b/src/components/TestMenu/PuppeteerTestMenu.tsx
index 7b36ea9b..2c3ac090 100644
--- a/src/components/TestMenu/PuppeteerTestMenu.tsx
+++ b/src/components/TestMenu/PuppeteerTestMenu.tsx
@@ -6,6 +6,9 @@ import {
setFilePath,
updateFile,
setValidCode,
+ setTestCase,
+ toggleModal,
+ setTabIndex,
} from '../../context/actions/globalActions';
import styles from './TestMenu.module.scss';
import Modal from '../Modals/Modal';
@@ -24,7 +27,7 @@ const PuppeteerTestMenu = () => {
const { title, isModalOpen, openModal, openScriptModal, closeModal } = useToggleModal(
'puppeteer'
);
- const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext(GlobalContext);
+ const [{ projectFilePath, file, exportBool, isTestModalOpen }, dispatchToGlobal] = useContext(GlobalContext);
const generateTest = useGenerateTest('puppeteer', projectFilePath);
useEffect(() => {
@@ -46,7 +49,13 @@ const PuppeteerTestMenu = () => {
dispatchToGlobal(updateFile(generateTest({ puppeteerStatements })));
dispatchToGlobal(toggleRightPanel('codeEditorView'));
dispatchToGlobal(setFilePath(''));
+ dispatchToGlobal(setTabIndex(0))
};
+
+ const openNewTestModal = () => {
+ if (!isTestModalOpen) dispatchToGlobal(toggleModal());
+ };
+
if (!file && exportBool) dispatchToGlobal(updateFile(generateTest({ puppeteerStatements })));
return (
diff --git a/src/components/TestMenu/ReactTestMenu.jsx b/src/components/TestMenu/ReactTestMenu.jsx
index f235f913..dbdf164c 100644
--- a/src/components/TestMenu/ReactTestMenu.jsx
+++ b/src/components/TestMenu/ReactTestMenu.jsx
@@ -11,6 +11,9 @@ import {
setFilePath,
toggleRightPanel,
setValidCode,
+ setTestCase,
+ toggleModal,
+ setTabIndex,
} from '../../context/actions/globalActions';
import { ReactTestCaseContext } from '../../context/reducers/reactTestCaseReducer';
import { useToggleModal } from './testMenuHooks';
@@ -23,7 +26,7 @@ const ReactTestMenu = () => {
const { title, isModalOpen, openModal, openScriptModal, closeModal } = useToggleModal('react');
const [{ mockData }, dispatchToMockData] = useContext(MockDataContext);
const [reactTestCase, dispatchToReactTestCase] = useContext(ReactTestCaseContext);
- const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext(GlobalContext);
+ const [{ projectFilePath, file, exportBool, isTestModalOpen }, dispatchToGlobal] = useContext(GlobalContext);
const generateTest = useGenerateTest('react', projectFilePath);
useEffect(() => {
@@ -42,6 +45,11 @@ const ReactTestMenu = () => {
dispatchToGlobal(updateFile(generateTest(reactTestCase, mockData)));
dispatchToGlobal(toggleRightPanel('codeEditorView'));
dispatchToGlobal(setFilePath(''));
+ dispatchToGlobal(setTabIndex(0));
+ };
+
+ const openNewTestModal = () => {
+ if (!isTestModalOpen) dispatchToGlobal(toggleModal());
};
if (!file && exportBool) dispatchToGlobal(updateFile(generateTest(reactTestCase, mockData)));
diff --git a/src/components/TestMenu/ReduxTestMenu.tsx b/src/components/TestMenu/ReduxTestMenu.tsx
index 5d13c395..e3d9fa8c 100644
--- a/src/components/TestMenu/ReduxTestMenu.tsx
+++ b/src/components/TestMenu/ReduxTestMenu.tsx
@@ -6,6 +6,9 @@ import {
toggleRightPanel,
setValidCode,
openBrowserDocs,
+ setTestCase,
+ toggleModal,
+ setTabIndex,
} from '../../context/actions/globalActions';
import {
addAsync,
@@ -25,7 +28,7 @@ const ReduxTestMenu = () => {
ReduxTestCaseContext
);
const { title, isModalOpen, openModal, openScriptModal, closeModal } = useToggleModal('redux');
- const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext(GlobalContext);
+ const [{ projectFilePath, file, exportBool, isTestModalOpen }, dispatchToGlobal] = useContext(GlobalContext);
const generateTest = useGenerateTest('redux', projectFilePath);
// Redux testing docs url
const reduxUrl = 'https://redux.js.org/recipes/writing-tests';
@@ -58,6 +61,11 @@ const ReduxTestMenu = () => {
dispatchToGlobal(updateFile(generateTest({ reduxStatements, reduxTestStatement })));
dispatchToGlobal(toggleRightPanel('codeEditorView'));
dispatchToGlobal(setFilePath(''));
+ dispatchToGlobal(setTabIndex(0));
+ };
+
+ const openNewTestModal = () => {
+ if (!isTestModalOpen) dispatchToGlobal(toggleModal());
};
if (!file && exportBool)
diff --git a/src/components/TestMenu/testMenuHooks.js b/src/components/TestMenu/testMenuHooks.js
index 517629ef..6415242b 100644
--- a/src/components/TestMenu/testMenuHooks.js
+++ b/src/components/TestMenu/testMenuHooks.js
@@ -1,8 +1,12 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
+import { GlobalContext } from '../../context/reducers/globalReducer';
+import { setTabIndex } from '../../context/actions/globalActions';
export function useToggleModal(test) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [title, setTitle] = useState(test);
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [{ isFileDirectoryOpen }, dispatchToGlobal] = useContext(GlobalContext);
const openModal = () => {
setTitle('New Test');
@@ -12,6 +16,7 @@ export function useToggleModal(test) {
const openScriptModal = () => {
setTitle(title);
setIsModalOpen(true);
+ dispatchToGlobal(setTabIndex(2));
};
const closeModal = () => {
@@ -19,14 +24,16 @@ export function useToggleModal(test) {
setTitle(test);
};
- return { title, isModalOpen, openModal, openScriptModal, closeModal };
+ return {
+ title, isModalOpen, openModal, openScriptModal, closeModal
+ };
}
export const validateInputs = (testSuite, testCaseState) => {
+ let endpoint, assertion;
switch (testSuite) {
case 'endpoint':
const { serverFilePath, addDB, dbFilePath, endpointStatements } = testCaseState;
- let endpoint, assertion;
if (!serverFilePath || (addDB && !dbFilePath)) return false;
for (endpoint of endpointStatements) {
if (!endpoint.method || !endpoint.route) return false;
diff --git a/src/context/actions/globalActions.js b/src/context/actions/globalActions.js
index f7dd40ef..ac301eb5 100644
--- a/src/context/actions/globalActions.js
+++ b/src/context/actions/globalActions.js
@@ -19,6 +19,7 @@ export const actionTypes = {
TOGGLE_EXPORT_BOOL: 'TOGGLE_EXPORT_BOOL',
SET_FILE_PATH: 'SET_FILE_PATH',
SET_VALID_CODE: 'SET_VALID_CODE',
+ SET_TAB_INDEX: 'SET_TAB_INDEX',
};
export const setProjectUrl = (url) => ({
@@ -106,3 +107,8 @@ export const setValidCode = (validCode) => ({
type: actionTypes.SET_VALID_CODE,
validCode,
});
+
+export const setTabIndex = (tabIndex) => ({
+ type: actionTypes.SET_TAB_INDEX,
+ tabIndex,
+})
diff --git a/src/context/reducers/accTestCaseReducer.ts b/src/context/reducers/accTestCaseReducer.ts
index 51fc807f..3aeadce4 100644
--- a/src/context/reducers/accTestCaseReducer.ts
+++ b/src/context/reducers/accTestCaseReducer.ts
@@ -1,12 +1,11 @@
-import { createContext } from 'react';
-import { AccTestCaseState, Action} from '../../utils/accTypes';
+import { createContext } from 'react';
+import { AccTestCaseState, Action } from '../../utils/accTypes';
import { actionTypes } from '../actions/accTestCaseActions';
export const AccTestCaseContext:any = createContext([]);
export const accTestCaseState: AccTestCaseState = {
modalOpen: false,
-
describeId: 1,
itId: 1,
statementId: 1,
diff --git a/src/context/reducers/globalReducer.js b/src/context/reducers/globalReducer.js
index 040301cb..64f691c7 100644
--- a/src/context/reducers/globalReducer.js
+++ b/src/context/reducers/globalReducer.js
@@ -4,7 +4,7 @@ import { actionTypes } from '../actions/globalActions';
export const GlobalContext = createContext(null);
export const globalState = {
- url: null,
+ url: "http://www.google.com/",
projectUrl: null,
isProjectLoaded: false,
fileTree: null,
@@ -23,6 +23,8 @@ export const globalState = {
fileName: '',
filePath: '',
validCode: true,
+ // added new state for tab index
+ tabIndex: 0,
};
export const globalReducer = (state, action) => {
@@ -110,7 +112,7 @@ export const globalReducer = (state, action) => {
...state,
isTestModalOpen: !state.isTestModalOpen,
};
- //
+
case actionTypes.UPDATE_FILE:
const file = action.testString;
return {
@@ -123,7 +125,7 @@ export const globalReducer = (state, action) => {
...state,
url: docsUrl,
isRightPanelOpen: true,
- rightPanelDisplay: 'browserView',
+ tabIndex: 1,
};
case actionTypes.RESET_TO_PROJECT_URL:
// formerly NEW_TEST_CLOSE_BROWSER_DOCS
@@ -150,7 +152,17 @@ export const globalReducer = (state, action) => {
...state,
validCode,
};
+
+ case actionTypes.SET_TAB_INDEX:
+ const tabIndex = action.tabIndex;
+ return {
+ ...state,
+ tabIndex,
+ }
default:
return state;
+
+
}
+
};
diff --git a/src/context/useGenerateTest.jsx b/src/context/useGenerateTest.jsx
index 9649f394..5ca4f667 100644
--- a/src/context/useGenerateTest.jsx
+++ b/src/context/useGenerateTest.jsx
@@ -1,18 +1,18 @@
/* eslint-disable */
-const remote = window.require('electron').remote;
-const fs = remote.require('fs');
-const path = remote.require('path');
-const beautify = remote.require('js-beautify');
+const { ipcRenderer } = require('electron');
+const beautify = require('js-beautify');
function useGenerateTest(test, projectFilePath) {
return (testState, mockDataState) => {
let testFileCode = '';
- // import React from "react";
- /* ------------------------------------------ REACT IMPORT + TEST STATEMENTS ------------------------------------------ */
+
+/* ------------------------------------------ REACT IMPORT + TEST STATEMENTS ------------------------------------------ */
// React Import Statements
const addReactImportStatements = () => {
- testFileCode += `import { render, fireEvent } from '@testing-library/react';
+ testFileCode += `
+ import React from 'react';
+ import { render, fireEvent } from '@testing-library/react';
import { build, fake } from 'test-data-bot';
import '@testing-library/jest-dom/extend-expect'
\n`;
@@ -21,9 +21,10 @@ function useGenerateTest(test, projectFilePath) {
// React Component Import Statement (Render Card)
const addComponentImportStatement = () => {
const componentPath = reactTestCase.statements.componentPath;
- let filePath = path.relative(projectFilePath, componentPath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, componentPath);
filePath = filePath.replace(/\\/g, '/');
- testFileCode += `import ${reactTestCase.statements.componentName} from '../${filePath}';`;
+ const formattedComponentName = reactTestCase.statements.componentName.replace(/\.jsx?/,'')
+ testFileCode += `import ${formattedComponentName} from '../${filePath}';`;
};
const addDescribeBlocks = () => {
@@ -82,7 +83,8 @@ function useGenerateTest(test, projectFilePath) {
// Render Jest Test Code
const addRender = (statement, methods) => {
let props = createRenderProps(statement.props);
- testFileCode += `const {${methods}} = render(<${reactTestCase.statements.componentName} ${props}/>);`;
+ const formattedComponentName = reactTestCase.statements.componentName.replace(/\.jsx?/,'');
+ testFileCode += `const {${methods}} = render(<${formattedComponentName} ${props}/>);`;
};
// Render Props Jest Test Code
@@ -92,7 +94,7 @@ function useGenerateTest(test, projectFilePath) {
}, '');
};
- /* ------------------------------------------ REDUX IMPORT + TEST STATEMENTS ------------------------------------------ */
+/* ------------------------------------------ REDUX IMPORT + TEST STATEMENTS ------------------------------------------ */
// Redux Import Statements
function addReduxImportStatements() {
@@ -226,18 +228,29 @@ function useGenerateTest(test, projectFilePath) {
}
}
- /* ------------------------------------------ HOOKS & CONTEXT IMPORT + TEST STATEMENTS ------------------------------------------ */
+/* ------------------------------------------ HOOKS & CONTEXT IMPORT + TEST STATEMENTS ------------------------------------------ */
// Hooks & Context Import Statements
const addHooksImportStatements = () => {
- hooksTestCase.hooksStatements.forEach((statement) => {
- switch (statement.type) {
- case 'hooks':
- return addRenderHooksImportStatement(), createPathToHooks(statement);
- default:
- return statement;
- }
- });
+ if (Array.isArray(hooksTestCase)) {
+ hooksTestCase.forEach((statement) => {
+ switch (statement.type) {
+ case 'hooks':
+ return addRenderHooksImportStatement(), createPathToHooks(statement);
+ default:
+ return statement;
+ }
+ })
+ } else if (typeof hooksTestCase === 'object') {
+ hooksTestCase.hooksStatements.forEach((statement) => {
+ switch (statement.type) {
+ case 'hooks':
+ return addRenderHooksImportStatement(), createPathToHooks(statement);
+ default:
+ return statement;
+ }
+ });
+ }
testFileCode += '\n';
};
@@ -269,19 +282,31 @@ function useGenerateTest(test, projectFilePath) {
// Hooks & Context Test Statements
const addHooksDescribeBlock = () => {
testFileCode += `\nafterEach(cleanup);\ndescribe('${hooksTestCase.hooksTestStatement}', () => {`;
- hooksTestCase.hooksStatements.forEach((statement) => {
+ if (Array.isArray(hooksTestCase)) {
+ hooksTestCase.forEach((statement) => {
switch (statement.type) {
case 'hooks':
return addHookUpdates(statement);
default:
return statement;
}
- });
+ });
+ } else if (typeof hooksTestCase === 'object') {
+ hooksTestCase.hooksStatements.forEach((statement) => {
+ switch (statement.type) {
+ case 'hooks':
+ return addHookUpdates(statement);
+ default:
+ return statement;
+ }
+ });
+ }
+
testFileCode += '});';
testFileCode += '\n';
};
- /* ------------------------------------------ ENDPOINT IMPORT + TEST STATEMENTS ------------------------------------------ */
+/* ------------------------------------------ ENDPOINT IMPORT + TEST STATEMENTS ------------------------------------------ */
// Endpoint Import Statements
const addEndpointImportStatements = () => {
@@ -302,7 +327,7 @@ function useGenerateTest(test, projectFilePath) {
});
};
- /* ------------------------------------------ PUPPETEER IMPORT + TEST STATEMENTS ------------------------------------------ */
+/* ------------------------------------------ PUPPETEER IMPORT + TEST STATEMENTS ------------------------------------------ */
/* getLargestContentfulPaint()
- creating a new PerformanceObserver object which will call the callback function when observed performance events happen
@@ -356,14 +381,14 @@ function useGenerateTest(test, projectFilePath) {
});
};
- /* ------------------------------------------ FILEPATHS ------------------------------------------ */
+/* ------------------------------------------ FILEPATHS ------------------------------------------ */
// Actions Filepath
// creates import statement for action creators
const createPathToActions = (statement) => {
let filePath = null;
if (statement.filePath) {
- filePath = path.relative(projectFilePath, statement.filePath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, statement.filePath);
filePath = filePath.replace(/\\/g, '/');
}
if (!testFileCode.includes(`import * as actions from from`) && filePath) {
@@ -375,7 +400,7 @@ function useGenerateTest(test, projectFilePath) {
function createPathToReducers(statement) {
let filePath = null;
if (statement.reducersFilePath) {
- filePath = path.relative(projectFilePath, statement.reducersFilePath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, statement.reducersFilePath);
filePath = filePath.replace(/\\/g, '/');
}
if (
@@ -393,7 +418,7 @@ function useGenerateTest(test, projectFilePath) {
let filePath = null;
let bool = false;
if (statement.typesFilePath) {
- filePath = path.relative(projectFilePath, statement.typesFilePath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, statement.typesFilePath);
filePath = filePath.replace(/\\/g, '/');
bool = areActionTypesDeclaredInSameFileAsActionCreators(statement.typesFilePath);
}
@@ -409,7 +434,7 @@ function useGenerateTest(test, projectFilePath) {
}
// This function returns true when actiontypes are declared in the same file as the action creators like with this app
const areActionTypesDeclaredInSameFileAsActionCreators = (file) => {
- const page = fs.readFileSync(file);
+ const page = ipcRenderer.sendSync('Universal.readFile', file);
if (page.includes(`export const actionTypes`)) return true;
else return false;
};
@@ -419,7 +444,7 @@ function useGenerateTest(test, projectFilePath) {
let filePath = null;
console.log(filePath);
if (statement.middlewaresFilePath) {
- filePath = path.relative(projectFilePath, statement.middlewaresFilePath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, statement.middlewaresFilePath);
filePath = filePath.replace(/\\/g, '/');
}
@@ -438,16 +463,37 @@ function useGenerateTest(test, projectFilePath) {
// str += `${curr}, `;
// return str;
// }, '');
- const { hooksStatements } = hooksTestCase;
- const hookImports = hooksStatements.reduce((str, { hook }) => {
- str += `${hook}, `;
- return str;
- }, '');
- if (!testFileCode.includes(`import { ${hooksStatements[0].hook}`) && statement.hookFilePath) {
- let filePath = path.relative(projectFilePath, statement.hookFilePath);
- filePath = filePath.replace(/\\/g, '/');
- testFileCode += `import { ${hookImports} } from '../${filePath}';`;
+ // const { hooksStatements } = hooksTestCase;
+ // const hooksStatements = hooksTestCase.hooksStatements;
+
+
+ if (Array.isArray(hooksTestCase)) {
+ const hookImports = hooksTestCase.reduce((str, { hook }) => {
+ str += `${hook}, `;
+ return str;
+ }, '');
+
+ if (!testFileCode.includes(`import { ${hooksTestCase[0].hook}`) && statement.hookFilePath) {
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, statement.hookFilePath);
+ filePath = filePath.replace(/\\/g, '/');
+
+ testFileCode += `import { ${hookImports} } from '../${filePath}';`;
+ }
+
+ } else if (typeof hooksTestCase === 'object') {
+ const hookImports = hooksTestCase.hooksStatements.reduce((str, { hook }) => {
+ str += `${hook}, `;
+ return str;
+ }, '');
+
+ if (!testFileCode.includes(`import { ${hooksTestCase.hooksStatements[0].hook}`) && statement.hookFilePath) {
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, statement.hookFilePath);
+ filePath = filePath.replace(/\\/g, '/');
+
+ testFileCode += `import { ${hookImports} } from '../${filePath}';`;
+ }
+
}
}
@@ -465,14 +511,15 @@ function useGenerateTest(test, projectFilePath) {
// Endpoint Filepath
const createPathToEndFiles = (serverFilePath, dbFilePath, addDB) => {
if (serverFilePath) {
- let filePath = path.relative(projectFilePath, serverFilePath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, serverFilePath);
filePath = filePath.replace(/\\/g, '/');
testFileCode = `const app = require('../${filePath}');
- const supertest = require('supertest')
+ const supertest = require('supertest');
+ const regeneratorRuntime = require('regenerator-runtime');
const request = supertest(app)\n`;
} else testFileCode = 'Please Select A Server!';
if (dbFilePath) {
- let filePath = path.relative(projectFilePath, dbFilePath);
+ let filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, dbFilePath);
filePath = filePath.replace(/\\/g, '/');
switch (addDB) {
@@ -494,7 +541,7 @@ function useGenerateTest(test, projectFilePath) {
}
};
- /* ------------------------------------------ MOCK DATA + METHODS ------------------------------------------ */
+/* ------------------------------------------ MOCK DATA + METHODS ------------------------------------------ */
const addMockData = () => {
mockData.forEach((mockDatum) => {
@@ -514,7 +561,7 @@ function useGenerateTest(test, projectFilePath) {
}, '');
};
- /* ------------------------------------------ TEST STATEMENTS ------------------------------------------ */
+/* ------------------------------------------ TEST STATEMENTS ------------------------------------------ */
// Action Jest Test Code
const addAction = (action) => {
@@ -703,7 +750,7 @@ function useGenerateTest(test, projectFilePath) {
// // Endpoint Jest Test Code
const addEndpoint = (statement) => {
- testFileCode += `\n test('${statement.testName}', async () => {\n const response = await request.${statement.method}('${statement.route}')`;
+ testFileCode += `\n test('${statement.testName}', async () => {\n const response = await request.${statement.method}('${statement.route}');`;
testFileCode += statement.postData
? `.send( ${statement.postData.trim()})\n.set({'Content-Type': 'application/json',`
: statement.headers.length
@@ -722,7 +769,7 @@ function useGenerateTest(test, projectFilePath) {
.replace(/\(([^)]+)\)/, '')
.split(' ')
.join('');
- testFileCode += `expect(response.${expectedResponse.toLowerCase()})`;
+ testFileCode += `\n expect(response.${expectedResponse.toLowerCase()})`;
testFileCode += not ? `.not.${matcher}(${value});` : `.${matcher}(${value});`;
});
testFileCode += '});';
@@ -789,7 +836,7 @@ function useGenerateTest(test, projectFilePath) {
const addAccImportStatements = () => {
let { filePath, fileName } = accTestCase;
- filePath = path.relative(projectFilePath, filePath);
+ filePath = ipcRenderer.sendSync('Universal.path', projectFilePath, filePath);
filePath = filePath.replace(/\\/g, '/');
testFileCode += `
@@ -965,7 +1012,7 @@ function useGenerateTest(test, projectFilePath) {
`;
});
};
-
+
const addAccPuppeteer = () => {
testFileCode += `
const puppeteer = require('puppeteer');
diff --git a/src/pages/ProjectLoader/ProjectLoader.jsx b/src/pages/ProjectLoader/ProjectLoader.jsx
index cf4aa153..f8cde6dc 100644
--- a/src/pages/ProjectLoader/ProjectLoader.jsx
+++ b/src/pages/ProjectLoader/ProjectLoader.jsx
@@ -55,22 +55,28 @@ const ProjectLoader = () => {
);
diff --git a/src/pages/RightPanel/RightPanel.jsx b/src/pages/RightPanel/RightPanel.jsx
index 0eb091e4..f67eaa87 100644
--- a/src/pages/RightPanel/RightPanel.jsx
+++ b/src/pages/RightPanel/RightPanel.jsx
@@ -1,24 +1,50 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
import styles from './RightPanel.module.scss';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
import EditorView from '../../components/EditorView/EditorView';
import BrowserView from '../../components/BrowserView/BrowserView';
import { GlobalContext } from '../../context/reducers/globalReducer';
-import { closeRightPanel } from '../../context/actions/globalActions';
+import { closeRightPanel, setTabIndex } from '../../context/actions/globalActions';
+import TerminalView from '../../components/Terminal/TerminalView';
+// import terminalStyles from '../../components/Terminal/TerminalView.module.scss';
const closeIcon = require('../../assets/images/close.png');
+// add tabviews (convert the code preview and browser preview) - mintyBois 4/16
+// eslint-disable
+
const RightPanel = () => {
- const [{ rightPanelDisplay, url }, dispatchToGlobal] = useContext(GlobalContext);
+ const [{ rightPanelDisplay, url, tabIndex }, dispatchToGlobal] = useContext(GlobalContext);
+
const handleCloseRightPanelView = () => {
dispatchToGlobal(closeRightPanel());
};
+ // Tabbed View
+
return (
-
-
+
+ {/* Enter Starting URL */}
+ {/*
*/}
+
+ {/* Open Project Directory */}
01
Enter test site's URL
-
+ -
- 02
+ {/* 02 */}
Select your application
+
+ {/* Get started */}
+ {/*
*/}
-
+
- 
+ {/* */}
+
+ dispatchToGlobal(setTabIndex(newValue))} centered>
+
- {url && rightPanelDisplay === 'browserView' ?
);
};
diff --git a/src/pages/RightPanel/RightPanel.module.scss b/src/pages/RightPanel/RightPanel.module.scss
index f51f1d58..557844ec 100644
--- a/src/pages/RightPanel/RightPanel.module.scss
+++ b/src/pages/RightPanel/RightPanel.module.scss
@@ -9,4 +9,4 @@
align-self: flex-end;
margin-right: .5rem;
cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/src/pages/TestFile/TestFile.jsx b/src/pages/TestFile/TestFile.jsx
index 39cd8822..8417f450 100644
--- a/src/pages/TestFile/TestFile.jsx
+++ b/src/pages/TestFile/TestFile.jsx
@@ -2,6 +2,7 @@
import React, { useContext, useReducer, Fragment } from 'react';
import ReactModal from 'react-modal';
import styles from '../../components/Modals/ExportFileModal.module.scss';
+import cn from 'classnames';
// may be able to delete toggleReact, etc. from their respective action files
import ReactTestCase from '../../components/TestCase/ReactTestCase';
@@ -105,7 +106,14 @@ const TestFile = () => {
style={modalStyles}
>
+
+ {/* Browser Tab */}
+
+
+ {/* Test Terminal */}
+
+
-
Test
+Test
+What would you like to test?
diff --git a/src/utils/terminalTypes.ts b/src/utils/terminalTypes.ts new file mode 100644 index 00000000..105db0fa --- /dev/null +++ b/src/utils/terminalTypes.ts @@ -0,0 +1,8 @@ +export interface TerminalType { + fontSize: number; + rows: number; + fontFamily?: string; + theme?: { + background?: string; + }; +} diff --git a/tsconfig.json b/tsconfig.json index 1b81a0c9..5f094ed9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,9 +21,9 @@ "noFallthroughCasesInSwitch": true }, "include": [ - "src", + "src/**/*", "src/context/__tests__", - "__tests__/hello.test.js", - "tests/spec.integra.js" + "__tests__/hello.test.js", + "tests/spec.integra.js" ] }