Merge pull request #61 from fredosauce/working

Finished Enzyme test cases

Author: andrewjcho84

.travis.yml

@@ -1,3 +1,13 @@
 language: node_js
 node_js:
-  - 10
+  - "10"
+dist: trusty
+cache:
+  directories:
+    - node_modules
+install: 
+  - npm install
+  - npm run prod-build
+script: 
+  - npm run test
+

__tests__/__snapshots__/enzyme.test.tsx.snap

@@ -1,9 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Enzyme testing suite renders snapshots, too 1`] = `
-<div>
-  <h1>
-    Hello, Enzyme!
-  </h1>
+exports[`Test the BottomTabs component Matches snapshot 1`] = `
+<div
+  className="makeStyles-root-1"
+>
+  <Styled(MuiBox)
+    display="flex"
+    justifyContent="space-between"
+  >
+    <WithStyles(ForwardRef(Tabs))
+      classes={
+        Object {
+          "indicator": "makeStyles-tabsIndicator-4",
+          "root": "makeStyles-tabsRoot-3",
+        }
+      }
+      onChange={[Function]}
+      value={0}
+    >
+      <WithStyles(ForwardRef(Tab))
+        classes={
+          Object {
+            "root": "makeStyles-tabRoot-5",
+            "selected": "makeStyles-tabSelected-6",
+          }
+        }
+        disableRipple={true}
+        label="Code Preview"
+      />
+    </WithStyles(ForwardRef(Tabs))>
+  </Styled(MuiBox)>
+  <CodePreview />
+</div>
+`;
+
+exports[`Test the CanvasContainer component Matches snapshot 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "lightgrey",
+      "border": "2px Solid grey",
+      "width": "100%",
+    }
+  }
+>
+  <Canvas />
 </div>
 `;

__tests__/componentReducer.test.ts

@@ -162,13 +162,16 @@ describe('Testing componentReducer functionality', function () {
   describe('RESET STATE reducer', () => {
     it('should reset project to initial state', () => {
       const action: Action = {
-        type: 'RESET STATE'
+        type: 'RESET STATE',
+        payload: ''
       }
       state = reducer(state, action);
       // expect default project to have empty string as name
-      expect(state.name).toEqual('');
+      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,12 +1,41 @@
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import React from 'react';
 
-describe('Enzyme testing suite', () => {
+import MainContainer from '../app/src/containers/MainContainer';
+import BottomPanel from '../app/src/components/bottom/BottomPanel';
+import BottomTabs from '../app/src/components/bottom/BottomTabs';
+import CodePreview from '../app/src/components/bottom/CodePreview';
+import CanvasContainer from '../app/src/components/main/CanvasContainer';
+import Canvas from '../app/src/components/main/Canvas';
 
-  it('renders snapshots, too', () => {
-    const wrapper = shallow(<div>
-      <h1>Hello, Enzyme!</h1>
-    </div>)
-    expect(wrapper).toMatchSnapshot()
+
+describe('Test the CanvasContainer component', () => {
+  const target = shallow(<CanvasContainer />);
+  it('Matches snapshot', () => {
+    expect(target).toMatchSnapshot()
+  })
+  it('Contains Canvas component', () => {
+    expect(target.contains(<Canvas />)).toBe(true);
+  })
+})
+
+describe('Test the MainContainer component', () => {
+  const target = shallow(<MainContainer />);
+  it('Contains CanvasContainer component', () => {
+    expect(target.contains(<CanvasContainer />)).toBe(true);
+  })
+  it('Contains BottomPanel component', () => {
+    expect(target.contains(<BottomPanel />)).toBe(true);
   })
-})
+})
+
+describe('Test the BottomTabs component', () => {
+  const target = shallow(<BottomTabs />);
+  it('Matches snapshot', () => {
+    expect(target).toMatchSnapshot()
+  })
+  it('Contains a CodePreview component', () => {
+    expect(target.contains(<CodePreview />)).toBe(true);
+  })
+})
+

__tests__/userAuth.test.ts

@@ -0,0 +1,47 @@
+import { sessionIsCreated, newUserIsCreated } from '../app/src/helperFunctions/auth';
+
+describe('Login Tests', () => {
+  jest.setTimeout(10000);
+  let username;
+  let password; 
+
+  // Called under SignIn.tsx
+  describe('sessionIsCreated', async () => {
+    it('returns the message \'No Username Input\' when no username is entered', async () => {
+      username = '';
+      password = 'codesmith1!'
+      const result = await sessionIsCreated(username, password).then((loginStatus) => loginStatus);
+      expect(result).toEqual('No Username Input');
+    })
+
+    it('returns the message \'No Password Input\' when no password is entered', async () => {
+      username = 'reactyp3test';
+      password = ''
+      const result = await sessionIsCreated(username, password).then((loginStatus) => loginStatus);
+      expect(result).toEqual('No Password Input');
+    })
+
+    it('returns the message \'Invalid Username\' when username does not exist', async () => {
+      username = 'l!b'; //breaks the 4 character minimum and no special characters
+      password = 'test';
+      const result = await sessionIsCreated(username, password).then((loginStatus) => loginStatus);
+      expect(result).toEqual('Invalid Username');
+    })
+
+    it('returns the message \'Incorrect Password\' when password does not match', async () => {
+      username = 'reactyp3test';
+      password = 'incorrect';
+      const result = await sessionIsCreated(username, password).then((loginStatus) => loginStatus);
+      expect(result).toEqual('Incorrect Password');
+    })
+
+    it('returns the message \'Success\' when the user passes all auth checks', async () => {
+      username = 'reactyp3test';
+      password = 'codesmith1!'; 
+      const result = await sessionIsCreated(username, password).then((loginStatus) => loginStatus);
+      expect(result).toEqual('Success');
+    })
+  })
+
+})
+

app/src/helperFunctions/auth.ts

@@ -1,3 +1,5 @@
+const fetch = require("node-fetch");
+
 const isDev = process.env.NODE_ENV === 'development';
 let serverURL = 'https://reactype.herokuapp.com';
 if (isDev) {
@@ -33,7 +35,6 @@ export const sessionIsCreated = (
       }
     })
     .catch(err => {
-      console.log('Error while trying to login', err);
       return 'Error';
     });
   return result;
@@ -69,7 +70,6 @@ export const newUserIsCreated = (
       return data; // response is either Email Taken or Username Taken, refer to userController.createUser
     })
     .catch(err => {
-      console.log(err);
       return 'Error';
     });
   return result;

package.json

@@ -72,8 +72,12 @@
         "diagnostics": false
       }
     },
-    "setupFilesAfterEnv": ["<rootDir>/app/setupTests.ts"],
-    "snapshotSerializers": ["enzyme-to-json/serializer"]
+    "setupFilesAfterEnv": [
+      "<rootDir>/app/setupTests.ts"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   },
   "bugs": {
     "url": "https://github.com/open-source-labs/ReacType/issues"
@@ -106,6 +110,7 @@
     "immutable": "^4.0.0-rc.12",
     "js-cookie": "^2.2.1",
     "localforage": "^1.7.2",
+    "node-fetch": "^2.6.0",
     "prettier": "^1.19.1",
     "prop-types": "^15.6.2",
     "react": "^16.13.0",
@@ -123,6 +128,7 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@testing-library/react": "^10.4.6",
     "@types/chai": "^4.2.11",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",