Merge pull request #29 from oslabs-beta/Hooks-Test-Fix

TypeScript Additions

Author: JIB3377

public/electron.js

@@ -46,13 +46,16 @@ function createWindow() {
   mainWindow.on('closed', () => (mainWindow = null));
 
   // PTY PROCESS FOR IN APP TERMINAL
-  const ptyProcess = pty.spawn(shell, [], {
+  let ptyArgs = {
     name: 'xterm-color',
     cols: 80,
     rows: 80,
     cwd: process.env.HOME,
     env: process.env,
-  });
+  }
+
+
+  const ptyProcess = pty.spawn(shell, [], ptyArgs);
   // with ptyProcess, we want to send incoming data to the channel terminal.incData
   ptyProcess.on('data', (data) => {
     mainWindow.webContents.send('terminal.incData', data);

…omponents/Terminal/TerminalGenerator.jsx src/components/Terminal/TerminalView.tsxsrc/components/Terminal/TerminalGenerator.jsx renamed to src/components/Terminal/TerminalView.tsx src/components/Terminal/TerminalGenerator.jsx renamed to src/components/Terminal/TerminalView.tsx

@@ -1,35 +1,39 @@
-import React, { useEffect } from 'react';
+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 term = new Terminal({
+
+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 TerminalGenerator = () => {
+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) => {
+    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) => {
+    ipc.on('terminal.incData', (event, data: string) => {
       term.write(data);
     });
   }, []);
 
-  return <XTerm className='terminal' />;
+  return <XTerm className="terminal" />;
 };
 
-export default TerminalGenerator;
+export default TerminalView;

src/context/reducers/accTestCaseReducer.ts

@@ -6,7 +6,6 @@ export const AccTestCaseContext:any = createContext([]);
 
 export const accTestCaseState: AccTestCaseState = {
   modalOpen: false,
-
   describeId: 1,
   itId: 1,
   statementId: 1,

src/pages/RightPanel/RightPanel.jsx

@@ -6,7 +6,7 @@ import EditorView from '../../components/EditorView/EditorView';
 import BrowserView from '../../components/BrowserView/BrowserView';
 import { GlobalContext } from '../../context/reducers/globalReducer';
 import { closeRightPanel, setTabIndex } from '../../context/actions/globalActions';
-import TerminalGenerator from '../../components/Terminal/TerminalGenerator';
+import TerminalView from '../../components/Terminal/TerminalView';
 // import terminalStyles from '../../components/Terminal/TerminalView.module.scss';
 const closeIcon = require('../../assets/images/close.png');
 
@@ -43,7 +43,7 @@ const RightPanel = () => {
       </div>
       {/* Test Terminal */}
       <div hidden={tabIndex !== 2} >
-        <TerminalGenerator />
+        <TerminalView />
       </div>
     </div>
   );

src/utils/ptyTypes.ts

@@ -0,0 +1,7 @@
+export interface PtyArgs {
+  name: string,
+  cols: number,
+  rows: number,
+  cwd: string,
+  env: Object,
+}

src/utils/terminalTypes.ts

@@ -0,0 +1,8 @@
+export interface TerminalType {
+  fontSize: number;
+  rows: number;
+  fontFamily?: string;
+  theme?: {
+    background?: string;
+  };
+}

tsconfig.json

@@ -21,7 +21,7 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": [
-    "src",
+    "src/**/*",
     "src/context/__tests__",
     "__tests__/hello.test.js",   
     "tests/spec.integra.js"