Merge pull request #26 from oslabs-beta/staging

Staging to Main Typescript Refactoring for Acc Test Suite

Author: astaiglesia

src/components/AccTestComponent/DescribeRenderer/DescribeRenderer.tsx

@@ -1,9 +1,10 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, ChangeEvent } from 'react';
 import cn from 'classnames';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import ItRenderer from '../ItRenderer/ItRenderer';
 import styles from './DescribeRenderer.module.scss';
 import { deleteDescribeBlock, addItStatement } from '../../../context/actions/accTestCaseActions';
+import { AccTestCaseState } from '../../../utils/accTypes';
 
 const DescribeRenderer = ({
   dispatcher,
@@ -12,25 +13,25 @@ const DescribeRenderer = ({
   handleChangeDescribeText,
   handleChangeItStatementText,
   type,
-}) => {
-  const testDescription = useRef(null);
+}): AccTestCaseState => {
+  const testDescription = useRef<HTMLInputElement>(null!);
 
   useEffect(() => {
     testDescription.current.focus();
   }, []);
 
-  const deleteDescribeBlockHandleClick = (e) => {
+  const deleteDescribeBlockHandleClick = (e: ChangeEvent) => {
     e.stopPropagation();
     const describeId = e.target.id;
     dispatcher(deleteDescribeBlock(describeId));
   };
 
-  const addItStatementHandleClick = (e) => {
+  const addItStatementHandleClick = (e: ChangeEvent) => {
     const describeId = e.target.id;
     dispatcher(addItStatement(describeId));
   };
 
-  return describeBlocks.allIds.map((id, i) => (
+  return describeBlocks.allIds.map((id: string, i: number) => (
     <Draggable
       key={id}
       draggableId={id}

src/components/AccTestComponent/ItRenderer/ItRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { ChangeEvent, useContext } from 'react';
 import cn from 'classnames';
 import { Draggable } from 'react-beautiful-dnd';
 import { AccTestCaseContext } from '../../../context/reducers/accTestCaseReducer';
@@ -12,20 +12,19 @@ import CustomInput from '../CustomInput/CustomInput';
 import styles from './ItRenderer.module.scss';
 
 const ItRenderer = ({
-  type,
   itStatements,
   describeId,
   handleChangeItStatementText,
 }) => {
 
   const [, dispatchToAccTestCase] = useContext(AccTestCaseContext);
 
-  const deleteItStatementHandleClick = (e) => {
+  const deleteItStatementHandleClick = (e: ChangeEvent) => {
     const itId = e.target.id;
     dispatchToAccTestCase(deleteItStatement(describeId, itId));
   };
 
-  return itStatements.allIds[describeId].map((id, i) => (
+  return itStatements.allIds[describeId].map((id: string, i:number) => (
     <Draggable
       draggableId={id}
       index={i}

src/components/TestCase/AccTestCase.jsx src/components/TestCase/AccTestCase.tsxsrc/components/TestCase/AccTestCase.jsx renamed to src/components/TestCase/AccTestCase.tsx

@@ -1,6 +1,6 @@
-import React, { useContext, useReducer } from 'react';
+import React, { useContext, ChangeEvent } from 'react';
 import cn from 'classnames';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import styles from './TestCase.module.scss';
 import {
   updateDescribeText,
@@ -17,8 +17,6 @@ import DecribeRenderer from '../AccTestComponent/DescribeRenderer/DescribeRender
 import { updateImportFilePath } from '../../context/actions/accTestCaseActions';
 import {
   AccTestCaseContext,
-  accTestCaseState,
-  accTestCaseReducer,
 } from '../../context/reducers/accTestCaseReducer';
 
 const AccTestCase = () => {
@@ -28,28 +26,28 @@ const AccTestCase = () => {
 
   const { describeBlocks, itStatements } = accTestCase;
 
-  const [{ filePathMap }] = useContext(GlobalContext);
+  const [{ filePathMap }] = useContext<any>(GlobalContext);
 
-  const handleChangeDescribeText = (e) => {
+  const handleChangeDescribeText = (e: ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     const describeId = e.target.id;
     dispatchToAccTestCase(updateDescribeText(text, describeId));
   };
 
-  const handleChangeItStatementText = (e) => {
+  const handleChangeItStatementText = (e: ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     const itId = e.target.id;
     dispatchToAccTestCase(updateItStatementText(text, itId));
   };
 
-  const reorder = (list, startIndex, endIndex) => {
+  const reorder = (list: Array<any>, startIndex: number, endIndex: number) => {
     const result = Array.from(list);
     const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
     return result;
   };
 
-  const onDragEnd = (result) => {
+  const onDragEnd = (result: DropResult) => {
     // edge cases: dropped to a non-destination, or dropped where it was grabbed (no change)
     if (!result.destination) return;
     if (result.destination.index === result.source.index) return;

src/components/TestMenu/AccTestMenu.tsx

@@ -22,7 +22,7 @@ const AccTestMenu = () => {
   // initialize hooks
   const { title, isModalOpen, openModal, openScriptModal, closeModal } = useToggleModal('acc');
   const [accTestCase, dispatchToAccTestCase] = useContext(AccTestCaseContext);
-  const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext(GlobalContext);
+  const [{ projectFilePath, file, exportBool }, dispatchToGlobal] = useContext<any>(GlobalContext);
   const generateTest = useGenerateTest('acc', projectFilePath);
 
   // setValidCode to true on load. 

src/context/actions/accTestCaseActions.js src/context/actions/accTestCaseActions.tssrc/context/actions/accTestCaseActions.js renamed to src/context/actions/accTestCaseActions.ts

@@ -17,7 +17,6 @@ export const actionTypes = {
 
   UPDATE_FILE_PATH: 'UPDATE_FILE_PATH',
 
-  // not yet implemented:
   TOGGLE_ACC: 'TOGGLE_ACC',
 };
 
@@ -29,44 +28,44 @@ export const addDescribeBlock = () => {
   };
 };
 
-export const deleteDescribeBlock = (describeId) => {
+export const deleteDescribeBlock = (describeId: string) => {
   return {
     type: actionTypes.DELETE_DESCRIBE_BLOCK,
     describeId,
   };
 };
 
-export const updateDescribeText = (text, describeId) => ({
+export const updateDescribeText = (text: string, describeId: string) => ({
   type: actionTypes.UPDATE_DESCRIBE_TEXT,
   text,
   describeId,
 });
 
-export const updateDescribeOrder = (reorderedDescribe) => {
+export const updateDescribeOrder = (reorderedDescribe: Array<string>) => {
   return {
     type: actionTypes.UPDATE_DESCRIBE_ORDER,
     reorderedDescribe,
   };
 };
 
-export const addItStatement = (describeId) => ({
+export const addItStatement = (describeId: string) => ({
   type: actionTypes.ADD_ITSTATEMENT,
   describeId,
 });
 
-export const deleteItStatement = (describeId, itId) => ({
+export const deleteItStatement = (describeId: string, itId: string) => ({
   type: actionTypes.DELETE_ITSTATEMENT,
   describeId,
   itId,
 });
 
-export const updateItStatementText = (text, itId) => ({
+export const updateItStatementText = (text: string, itId: string) => ({
   type: actionTypes.UPDATE_ITSTATEMENT_TEXT,
   itId,
   text,
 });
 
-export const updateItStatementOrder = (reorderedIt, describeId) => {
+export const updateItStatementOrder = (reorderedIt: Array<string>, describeId: string) => {
   return {
     type: actionTypes.UPDATE_ITSTATEMENT_ORDER,
     reorderedIt,
@@ -86,7 +85,7 @@ export const closeInfoModal = () => {
   return { type: actionTypes.CLOSE_INFO_MODAL };
 };
 
-export const updateImportFilePath = (fileName, filePath) => ({
+export const updateImportFilePath = (fileName: string, filePath: string) => ({
   type: actionTypes.UPDATE_FILE_PATH,
   fileName,
   filePath,

…c/context/reducers/accTestCaseReducer.js …c/context/reducers/accTestCaseReducer.tssrc/context/reducers/accTestCaseReducer.js renamed to src/context/reducers/accTestCaseReducer.ts src/context/reducers/accTestCaseReducer.js renamed to src/context/reducers/accTestCaseReducer.ts

@@ -1,17 +1,18 @@
-import { createContext } from 'react';
+import { createContext } from 'react'; 
+import { AccTestCaseState, Action} from '../../utils/accTypes';
 import { actionTypes } from '../actions/accTestCaseActions';
 
-export const AccTestCaseContext = createContext([]);
+export const AccTestCaseContext:any = createContext([]);
 
-export const accTestCaseState = {
+export const accTestCaseState: AccTestCaseState = {
   modalOpen: false,
 
   describeId: 1,
   itId: 1,
   statementId: 1,
   propId: 1,
-  describeBlocks: {
-    byId: {
+  describeBlocks:  {
+    byId:  {
       describe0: {
         id: 'describe0',
         text: '',
@@ -37,22 +38,22 @@ export const accTestCaseState = {
 
 /* ---------------------------- Helper Functions ---------------------------- */
 
-const createDescribeBlock = (describeId) => {
+const createDescribeBlock = (describeId: string) => {
   return {
     id: describeId,
     text: '',
   };
 };
 
-const createItStatement = (describeId, itId) => ({
+const createItStatement = (describeId: string , itId: string) => ({
   id: itId,
   describeId,
   text: '',
 });
 
 /* ------------------------- Accessibility Test Case Reducer ------------------------ */
 
-export const accTestCaseReducer = (state, action) => {
+export const accTestCaseReducer = (state: AccTestCaseState, action: Action) => {
   Object.freeze(state);
 
   let describeBlocks;
@@ -97,10 +98,10 @@ export const accTestCaseReducer = (state, action) => {
       // delete it from describeBlocks.byId
       delete newDescById[describeId];
       // delete it from describeBlocks.allIds
-      const newDescAllIds = describeBlocks.allIds.filter((id) => id !== describeId);
+      const newDescAllIds = describeBlocks.allIds.filter((id: string) => id !== describeId);
 
       // delete from itStatements.byId
-      itStatements.allIds[describeId].forEach((itId) => {
+      itStatements.allIds[describeId].forEach((itId: number) => {
         delete newItById[itId];
       });
       // delete from itStatements.allIds
@@ -172,7 +173,7 @@ export const accTestCaseReducer = (state, action) => {
       const { itId, describeId } = action;
       const byId = { ...itStatements.byId };
       delete byId[itId];
-      const newAllIds = itStatements.allIds[describeId].filter((id) => id !== itId);
+      const newAllIds = itStatements.allIds[describeId].filter((id: number) => id !== itId);
 
       return {
         ...state,

src/context/reducers/endpointTestCaseReducer.ts

@@ -66,7 +66,7 @@ const deepCopy = (endpointStatements: EndpointObj[]) => {
 
 export const endpointTestCaseReducer = (state: EndpointTestCaseState, action: Action) => {
   Object.freeze(state);
-  let endpointStatements = [...state.endpointStatements];
+  let endpointStatements: Array<any> = [...state.endpointStatements];
 
   switch (action.type) {
     case actionTypes.ADD_ENDPOINT:
@@ -106,7 +106,7 @@ export const endpointTestCaseReducer = (state: EndpointTestCaseState, action: Ac
         endpointStatements,
       };
     case actionTypes.UPDATE_SERVER_FILEPATH:
-      const { serverFilePath, serverFileName } = action;
+      const { serverFilePath, serverFileName }  = action;
       return {
         ...state,
         serverFilePath,

src/context/reducers/hooksTestCaseReducer.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 // import { actionTypes } from '../actions/hooksTestCaseActions';
-import { HooksTestCaseState, Assertion, Action, Hooks, Callback } from '../../utils/hooksTypes';
+import { HooksTestCaseState, Assertion, HooksAction, Hooks, Callback } from '../../utils/hooksTypes';
 
 export const HooksTestCaseContext: any = createContext(null);
 
@@ -62,6 +62,8 @@ export const hooksTestCaseState: HooksTestCaseState = {
   hooksTestStatement: '',
   hooksStatements: [],
   statementId: 0,
+  hookFileName: '',
+  hookFilePath: '',
 };
 
 // const createContexts = (statementId: number) => ({
@@ -106,7 +108,7 @@ const deepCopy = (hooksStatements: Hooks[]) => {
   return fullCopy;
 };
 
-export const hooksTestCaseReducer = (state: HooksTestCaseState, action: Action) => {
+export const hooksTestCaseReducer = (state: HooksTestCaseState, action: HooksAction) => {
   Object.freeze(state);
   let hooksStatements = [...state.hooksStatements];