Merge pull request #9 from khuongdn16/supertest

Fixed all existing tests and added graphql project test file

__tests__/componentReducer.test.ts

@@ -3,7 +3,7 @@ import { State, Action } from '../app/src/interfaces/InterfacesNew';
 
 import initialState from '../app/src/context/initialState';
 
-describe('Testing componentReducer functionality', function () {
+describe('Testing componentReducer functionality', () => {
   let state: State = initialState;
 
   // TEST 'ADD COMPONENT'
@@ -12,18 +12,18 @@ describe('Testing componentReducer functionality', function () {
       const action: Action = {
         type: 'ADD COMPONENT',
         payload: {
-          componentName: "TestRegular",
-          root: false
-        }
-      }
+          componentName: 'TestRegular',
+          root: false,
+        },
+      };
       state = reducer(state, action);
       // expect state.components array to have length 2
       const length = state.components.length;
       expect(length).toEqual(2);
       // expect new component name to match name of last elem in state.components array
       expect(state.components[length - 1].name).toEqual(action.payload.componentName);
-    })
-  })
+    });
+  });
 
   // TEST 'ADD CHILD'
   describe('ADD CHILD reducer', () => {
@@ -33,9 +33,9 @@ describe('Testing componentReducer functionality', function () {
         payload: {
           type: 'Component',
           typeId: 2,
-          childId: null
-        }
-      }
+          childId: null,
+        },
+      };
       // switch focus to very first root component
       state.canvasFocus = { componentId: 1, childId: null };
       state = reducer(state, action);
@@ -49,8 +49,8 @@ describe('Testing componentReducer functionality', function () {
       const addedChild = state.components.find(comp => comp.id === newParent.children[1].typeId);
       // expect new child typeId to correspond to component with name 'TestRegular'
       expect(addedChild.name).toEqual('TestRegular');
-    })
-  })
+    });
+  });
 
   // TEST 'CHANGE POSITION'
   describe('CHANGE POSITION reducer ', () => {
@@ -60,43 +60,43 @@ describe('Testing componentReducer functionality', function () {
         payload: {
           type: 'HTML Element',
           typeId: 9,
-          childId: null
-        }
-      }
+          childId: null,
+        },
+      };
       state = reducer(state, actionHtml);
       const actionChangePos: Action = {
         type: 'CHANGE POSITION',
         payload: {
           currentChildId: 1,
-          newParentChildId: null
-        }
-      }
+          newParentChildId: null,
+        },
+      };
       state = reducer(state, actionChangePos);
       const changeParent = state.components.find(comp => comp.id === state.canvasFocus.componentId);
       const changeParentChildLength = changeParent.children.length;
       // expect last child of parent to be moved Component element
-      expect(changeParent.children[changeParentChildLength-1].type).toEqual('Component');
+      expect(changeParent.children[changeParentChildLength - 1].type).toEqual('Component');
       // expect last child of parent to have current child ID of payload
-      expect(changeParent.children[changeParentChildLength-1].childId).toEqual(1);
-    })
-  })
+      expect(changeParent.children[changeParentChildLength - 1].childId).toEqual(1);
+    });
+  });
 
   // TEST 'DELETE CHILD'
   describe('DELETE CHILD reducer', () => {
     it('should delete child of focused top-level component', () => {
       // canvas still focused on childId: 2, which is an HTML element
       const action: Action = {
-        type: 'DELETE CHILD'
-      }
+        type: 'DELETE CHILD',
+      };
       state = reducer(state, action);
       // expect only one remaining child
       const delParent = state.components.find(comp => comp.id === state.canvasFocus.componentId);
       // expect remaining child to have type 'Component' and to be preceded by separator
       expect(delParent.children.length).toEqual(2);
-      expect(delParent.children[delParent.children.length -1].type).toEqual('Component');
-      expect(delParent.children[delParent.children.length -2].name).toEqual('separator');
-    })
-  })
+      expect(delParent.children[delParent.children.length - 1].type).toEqual('Component');
+      expect(delParent.children[delParent.children.length - 2].name).toEqual('separator');
+    });
+  });
 
   // TEST 'CHANGE FOCUS'
   describe('CHANGE FOCUS reducer', () => {
@@ -105,14 +105,14 @@ describe('Testing componentReducer functionality', function () {
         type: 'CHANGE FOCUS',
         payload: {
           componentId: 2,
-          childId: null
-        }
-      }
+          childId: null,
+        },
+      };
       state = reducer(state, action);
       expect(state.canvasFocus.componentId).toEqual(2);
       expect(state.canvasFocus.childId).toEqual(null);
-    })
-  })
+    });
+  });
 
   // TEST 'UPDATE CSS'
   describe('UPDATE CSS reducer', () => {
@@ -121,59 +121,58 @@ describe('Testing componentReducer functionality', function () {
         type: 'UPDATE CSS',
         payload: {
           style: {
-            backgroundColor: 'gray'
-          }
-        }
-      }
+            backgroundColor: 'gray',
+          },
+        },
+      };
       state = reducer(state, action);
       const styledComp = state.components.find(comp => comp.id === state.canvasFocus.componentId);
       // expect the style property on targeted comp to equal style property in payload
       expect(styledComp.style.backgroundColor).toEqual(action.payload.style.backgroundColor);
-    })
-  })
+    });
+  });
 
   // TEST 'UPDATE PROJECT NAME'
   describe('UPDATE PROJECT NAME reducer', () => {
     it('should update project with specified name', () => {
       const action: Action = {
         type: 'UPDATE PROJECT NAME',
-        payload: 'TESTNAME'
-      }
+        payload: 'TESTNAME',
+      };
       state = reducer(state, action);
       // expect state name to equal payload
       expect(state.name).toEqual(action.payload);
-    })
-  })
+    });
+  });
 
   // TEST 'CHANGE PROJECT TYPE'
   describe('CHANGE PROJECT TYPE reducer', () => {
     it('should change project type to specified type', () => {
       const action: Action = {
         type: 'CHANGE PROJECT TYPE',
         payload: {
-          projectType: 'Classic React'
-        }
+          projectType: 'Classic React',
+        },
       };
       state = reducer(state, action);
       expect(state.projectType).toEqual(action.payload.projectType);
-    })
-  })
+    });
+  });
 
   // TEST 'RESET STATE'
   describe('RESET STATE reducer', () => {
     it('should reset project to initial state', () => {
       const action: Action = {
         type: 'RESET STATE',
-        payload: ''
-      }
+        payload: '',
+      };
       state = reducer(state, action);
       // expect default project to have empty string as name
       expect(state.name).toEqual('TESTNAME');
       // expect default project to only have one component in components array
       expect(state.components.length).toEqual(1);
       // expect lone component to have no children :(
       expect(state.components[0].children.length).toEqual(0);
-    })
-  })
-
-})
+    });
+  });
+});

__tests__/enzyme.test.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow, render, mount } from 'enzyme';
 import React from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -18,6 +18,7 @@ import NavBar from '../app/src/components/top/NavBar';
 import MenuItem from '@material-ui/core/MenuItem';
 import Tab from '@material-ui/core/Tab';
 import RightContainer from '../app/src/containers/RightContainer';
+import LoginButton from '../app/src/components/right/LoginButton';
 
 /* If there is an error with unmatched snapshots because of intentionally modified codes, delete the contents in enzyme.test.tsx.snap to record new codes as blueprints */
 
@@ -108,11 +109,14 @@ describe('Test AppContainer container', () => {
   });
   // testing for a RightContainer
   it('Should render RightContainer', () => {
+    // This test doesnt work eventhough the component renders
+    // expect(
+    //   target.contains(
+    //     <RightContainer isThemeLight={props.isThemeLight}/>
+    //   )).toBe(true);
     expect(
-      target.contains(
-        <RightContainer />,
-      ),
-    ).toBe(true);
+        target.find(RightContainer)
+      ).toHaveLength(1);
 });
 
 // testing for NavBar component
@@ -121,37 +125,34 @@ describe('Test NavBar component', () => {
     setTheme: jest.fn(),
     isThemeLight: jest.fn(),
   };
-  const target = shallow(
+  const target = shallow (
     <NavBar setTheme={props.setTheme} isThemeLight={props.isThemeLight} />
   );
   // testing for 4 generic buttons in NavBar
-  it('Should render 4 buttons: "Clear Canvas", "Export", "Dark Mode", "Login"', () => {
-    expect(target.find('.navbarButton')).toHaveLength(4);
+  it('Should render 2 buttons: "Clear Canvas", "Dark Mode"', () => {
+    expect(target.find('.navbarButton')).toHaveLength(2);
     expect(
       target
         .find('.navbarButton')
         .at(0)
         .text(),
     ).toEqual('Clear Canvas');
-     expect(
-       target
-         .find('.navbarButton')
-         .at(1)
-         .text(),
-     ).toEqual('Export');
       expect(
       target
         .find('.navbarButton')
-        .at(2)
+        .at(1)
         .text(),
     ).toEqual('Dark Mode');
-     expect(
-       target
-         .find('.navbarButton')
-         .at(3)
-         .text(),
-     ).toEqual('Login');
+
   });
+
+  it('Should render "Login" button', () => {
+    const wrapper = shallow( <LoginButton />);
+    expect(wrapper).toHaveLength(1);
+    expect(
+        wrapper
+        .find('.navbarButton')
+    ).toHaveLength(1);
 });
 
 describe('Test LeftContainer container', () => {
@@ -161,5 +162,3 @@ describe('Test LeftContainer container', () => {
     expect(target.find(<HTMLPanel />)).toBeDefined();
   });
 });
-
-