Merge pull request #6 from oslabs-beta/toolkit-integration

Update todos and comments

Author: Parkreiner

__tests__/composerTests.js

@@ -1,10 +1,16 @@
+/**
+ * @file This entire file has been commented out, since all testing was done in
+ * Enzyme, which is quickly losing relevance and is no longer the best tool for
+ * testing frontend applications, especially React applications.
+ *
+ * @todo For the next tester, recommended that logic be migrated over to
+ * React Testing Library.
+ */
+
 /* eslint-disable react/jsx-props-no-spreading */
 // import React from 'react';
 // import ProtocolSelect from '../src/client/components/composer/NewRequest/ProtocolSelect.jsx';
 
-// Commented out this file since it is using Enzyme, which has been falling out of favor and currently does not work for this app version
-// TODO: for the next tester, recommended to migrate to React Testing Library
-
 // import { configure, shallow } from 'enzyme';
 // import Adapter from 'enzyme-adapter-react-16';
 

__tests__/httpTest.js

@@ -1,11 +1,15 @@
 import ReqResCtrl from '../src/client/controllers/reqResController';
 
-// TODO: Integration tests with the actual API. The controller calls api.send and api.recieve
-// without attachement to the API, the tests in this file don't perform anything.
-// Additionally, add a testing file for graphQLController. This is currently untested
-// and is a dependency for reqResController.
-
-/**@todo refactor for new state structure with redux slices */
+/**
+ * @todo Integration tests with the actual API. The controller calls api.send
+ * and api.recieve without attachement to the API, the tests in this file don't
+ * perform anything.
+ *
+ * Additionally, add a testing file for graphQLController. This is currently
+ * untested and is a dependency for reqResController.
+ *
+ * @todo Refactor for new state structure with redux slices
+ */
 
 describe('REST API Requests', () => {
   let state;

__tests__/openAPIParserTest.js

@@ -1,20 +1,23 @@
 const fs = require('fs');
 const path = require('path');
 
-import openapiParserFunc from '../main_process/openapiParser'
+import openapiParserFunc from '../main_process/openapiParser';
 
-// TODO: Test actual contents of the parser
+/** @todo Test the actual contents of the parser */
+describe('openAPI Parser tests', () => {
+  const file = fs.readFileSync(
+    path.resolve(__dirname + '/../test/openAPITestDefinition.yaml')
+  );
 
-describe('openAPI Parser tests',()=>{
-  const file = fs.readFileSync(path.resolve(__dirname + '/../test/openAPITestDefinition.yaml'))
-
-  it('should be able to parse a yaml file',()=>{
-    const { openapiMetadata, openapiReqArray } = openapiParserFunc(String(file))
+  it('should be able to parse a yaml file', () => {
+    const { openapiMetadata, openapiReqArray } = openapiParserFunc(
+      String(file)
+    );
     expect(openapiMetadata).toBeDefined();
     expect(openapiReqArray).toBeDefined();
-  })
+  });
 
-  it('should error on undefined input',()=>{
+  it('should error on undefined input', () => {
     expect(openapiParserFunc(null)).toThrow(ReferenceError);
-  })
-});
+  });
+});

main.js

@@ -30,7 +30,7 @@
 // Import parts of electron to use
 // app - Control your application's event lifecycle
 // ipcMain - Communicate asynchronously from the main process to renderer processes
-
+// ** Entry point for Electron **
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron');
 
 const { autoUpdater } = require('electron-updater');
@@ -204,7 +204,12 @@ function createWindow() {
 app.on('ready', () => {
   createWindow();
   if (!isDev) {
-    // TODO: this is crucial code! run express server if production mode
+    /**
+     * Note: Even though Express is not used for the duration of the block, this
+     * is crucial code, and while VS Code will flag it as not being used, it
+     * should not be removed. Express server is used in production mode as there
+     * is no dev server.
+     */
     const express = require('./src/server/server');
     autoUpdater.checkForUpdates();
   }
@@ -304,7 +309,7 @@ app.on('activate', () => {
 
 ipcMain.on('import-from-github', async (event, args) => {
   async function popOverwrite(collection) {
-    // TODO: add in mod date, is Yes No ordering correct on popup?
+    /** @todo add in mod date, is Yes No ordering correct on popup?  */
     const options = {
       type: 'question',
       buttons: ['No', 'Yes'],

main_process/openapiParser.js

@@ -1,6 +1,9 @@
 const YAML = require('yamljs');
 
-// TODO: Validation, Callbacks
+/**
+ * @todo The previous todo just said "Validation, Callbacks". That's it. Maybe
+ * it means to add validation and to refactor this to add support for callbacks?
+ */
 const openapiParserFunc = (input) => {
   if (input === undefined || input === null)
     ReferenceError('OpenAPI Document not found.');

src/client/components/App.tsx

@@ -21,14 +21,13 @@ import ErrorBoundary from './utilities/ErrorBoundary/ErrorBoundary';
 
 // Import styling
 /**
+ * @todo
  * Note to future devs:
- * Our team is finishing our work on this app, and part of our stretch goals
- * were to migrate all of the existing components to use Material UI. We made
- * this decision for a few reasons:
+ * Our team was not able to complete migrating all of the existing components
+ * to use Material UI. This should be finished for a couple of reasons:
  *
- * (1) There are a toooon of people who work on this application. It needs
- * consistent styling, and making changes to the SASS files can really
- * complicate development of the app.
+ * (1) This application needs consistent styling, and making changes to the
+ * SASS files can really complicate development of the app.
  *
  * (2) Material UI is very easy to use and very supported. If you know React and
  * a touch of CSS, you'll be able to quickly make visually-compatible components

src/client/components/main/GRPCComposer.tsx

@@ -3,7 +3,11 @@ import { v4 as uuid } from 'uuid';
 // Import controllers
 import historyController from '../../controllers/historyController';
 // Import local components
-// TODO: refactor all of the below components to use MUI, place them in a new "components" folder
+
+/**
+ * @todo Refactor all of the below components to use MUI, place them in a new
+ * "components" folder
+ */
 import GRPCTypeAndEndpointEntryForm from './new-request/GRPCTypeAndEndpointEntryForm';
 import HeaderEntryForm from './new-request/HeaderEntryForm';
 import GRPCProtoEntryForm from './new-request/GRPCProtoEntryForm.jsx';
@@ -148,7 +152,7 @@ export default function GRPCComposer(props) {
     };
 
     // add request to history
-    // TODO: fix TS error
+    /** @todo Fix TS error */
     historyController.addHistoryToIndexedDb(reqRes);
     reqResItemAdded(reqRes);
 
@@ -190,7 +194,7 @@ export default function GRPCComposer(props) {
         className="is-flex-grow-3 add-vertical-scroll"
         style={{ overflowX: 'hidden' }}
       >
-        {/* TODO: fix TSX typing errors */}
+        {/**@todo Fix TSX typing errors */}
         <GRPCTypeAndEndpointEntryForm
           newRequestFields={newRequestFields}
           newRequestHeaders={newRequestHeaders}

src/client/components/main/GraphQLComposer.tsx

@@ -5,7 +5,10 @@ import { v4 as uuid } from 'uuid';
 import historyController from '../../controllers/historyController';
 // Import local components
 
-// TODO: refactor all of the below components to use MUI, place them in a new "components" folder
+/**
+ * @todo Refactor all of the below components to use MUI, place them in a new
+ * "components" folder
+ */
 import HeaderEntryForm from './new-request/HeaderEntryForm.jsx';
 import GraphQLMethodAndEndpointEntryForm from './new-request/GraphQLMethodAndEndpointEntryForm';
 import CookieEntryForm from './new-request/CookieEntryForm';

src/client/components/main/OpenAPIComposer.tsx

@@ -3,7 +3,11 @@ import { v4 as uuid } from 'uuid';
 // Import controllers
 import historyController from '../../controllers/historyController';
 // Import local components
-// TODO: refactor all of the below components to use MUI, place them in a new "components" folder
+
+/**
+ * @todo Refactor all of the below components to use MUI, place them in a new
+ * "components" folder
+ */
 import NewRequestButton from './new-request/NewRequestButton.jsx';
 import OpenAPIEntryForm from './new-request/OpenAPIEntryForm';
 import OpenAPIDocumentEntryForm from './new-request/OpenAPIDocumentEntryForm.jsx';
@@ -97,7 +101,7 @@ export default function OpenAPIComposer(props) {
       };
 
       // add request to history
-      // TODO: fix TS type error
+      /** @todo Fix TS type error */
       historyController.addHistoryToIndexedDb(reqRes);
       reqResItemAdded(reqRes);
 
@@ -134,7 +138,7 @@ export default function OpenAPIComposer(props) {
         className="is-flex-grow-3 add-vertical-scroll"
         style={{ overflowX: 'hidden' }}
       >
-        {/* TODO: fix TS type error */}
+        {/** @todo fix TS type error */}
         <OpenAPIEntryForm
           newRequestFields={newRequestFields}
           newRequestHeaders={newRequestHeaders}

src/client/components/main/WebRTCComposer.tsx

@@ -3,7 +3,11 @@ import { v4 as uuid } from 'uuid';
 // Import controllers
 import historyController from '../../controllers/historyController';
 // Import local components
-// TODO: refactor all of the below components to use MUI, place them in a new "components" folder
+
+/**
+ * @todo Refactor all of the below components to use MUI, place them in a new
+ * "components" folder
+ */
 import WebRTCSessionEntryForm from './new-request/WebRTCSessionEntryForm.jsx';
 import WebRTCServerEntryForm from './new-request/WebRTCServerEntryForm.jsx';
 import NewRequestButton from './new-request/NewRequestButton.jsx';
@@ -85,7 +89,7 @@ export default function WebRTCComposer(props) {
     };
 
     // add request to history
-    // TODO: fix this TS type error
+    /** @todo Fix this TS type error  */
     historyController.addHistoryToIndexedDb(reqRes);
     reqResItemAdded(reqRes);
 
@@ -115,7 +119,7 @@ export default function WebRTCComposer(props) {
         className="is-flex-grow-3 add-vertical-scroll"
         style={{ overflowX: 'hidden' }}
       >
-        {/* TODO: fix TSX type error */}
+        {/** @todo Fix TSX type error */}
         <WebRTCSessionEntryForm
           newRequestFields={newRequestFields}
           newRequestHeaders={newRequestHeaders}