feat(Add test to project):

Author: hutber

designs/3ecb4351-3275-4f70-8433-db54a0ddfcf2.jpg

@@ -6,7 +6,8 @@
 		"start": "razzle start",
 		"build": "razzle build",
 		"api": "nodemon ./api/app.js",
-		"test": "test --env=jsdom",
+		"test": "jest test --env=jsdom  --colors --watch",
+		"report": "jest test --env=jsdom  --colors --coverage",
 		"test:watch": "razzle test --env=jsdom",
 		"start:prod": "NODE_ENV=production node build/server.js",
 		"lint-scripts": "eslint './{src/**,test/**,config/**,.}/*.js'",
@@ -41,6 +42,7 @@
 		"body-parser": "^1.18.3",
 		"boom": "^7.2.2",
 		"cors": "^2.8.4",
+		"enzyme-adapter-react-16": "^1.7.1",
 		"errorhandler": "^1.5.0",
 		"express": "4.16.4",
 		"express-boom": "^2.0.0",
@@ -58,6 +60,7 @@
 		"react-redux": "^5.0.4",
 		"react-router-dom": "^4.3.1",
 		"react-router-scroll-top": "^0.1.1",
+		"react-test-renderer": "^16.7.0",
 		"redux": "^3.6.0",
 		"redux-logger": "^3.0.6",
 		"redux-thunk": "^2.2.0",
@@ -66,13 +69,16 @@
 	"devDependencies": {
 		"connected-react-router": "^4.3.0",
 		"cz-conventional-changelog": "^2.1.0",
+		"enzyme": "^3.8.0",
+		"enzyme-to-json": "^3.3.5",
 		"eslint-config-airbnb": "^17.1.0",
 		"eslint-config-prettier": "^3.3.0",
 		"eslint-plugin-import": "^2.14.0",
 		"eslint-plugin-jsx-a11y": "^6.1.2",
 		"eslint-plugin-prettier": "^3.0.0",
 		"eslint-plugin-react": "^7.11.1",
 		"husky": "^1.2.0",
+		"jest": "^23.6.0",
 		"lint-staged": "^8.1.0",
 		"prettier": "^1.15.2",
 		"prop-types": "^15.6.2",
@@ -86,5 +92,11 @@
 		"commitizen": {
 			"path": "./node_modules/cz-conventional-changelog"
 		}
+	},
+	"snapshotSerializers": [
+		"enzyme-to-json/serializer"
+	],
+	"jest": {
+		"setupFiles": ["<rootDir>src/setupTests.js"]
 	}
 }

designs/4874bc0b-4d4c-416b-80a1-d4a95e50932d.jpg

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'react-router-dom/Link'
+
+//Material UI
+import { withStyles } from '@material-ui/core/styles'
+
+import paths from '../../../config/paths'
+
+//Styles
+import styles from './style'
+
+class GuttersGrid extends React.Component {
+	render() {
+		const { classes } = this.props
+
+		return (
+			<nav className={classes.content}>
+				<Link to={paths.signin.home}>Login</Link>
+			</nav>
+		)
+	}
+}
+
+GuttersGrid.propTypes = {
+	classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(GuttersGrid)

package-lock.json

@@ -0,0 +1,3 @@
+export default theme => ({
+	content: {}
+})

package.json

@@ -8,6 +8,7 @@ import styles from './style'
 
 //Components
 import Question from '../../components/Question'
+import Menu from '../../components/Menu'
 
 class GuttersGrid extends React.Component {
 	render() {
@@ -23,7 +24,7 @@ class GuttersGrid extends React.Component {
 						<Question />
 					</Grid>
 					<Grid item xs={4}>
-						three
+						<Menu />
 					</Grid>
 				</Grid>
 			</section>

src/common/components/Menu/index.js

@@ -6,6 +6,8 @@ export default theme => ({
 		color: 'var(--base)',
 		height: '100vh',
 		width: '100vw',
+		maxWidth: 1140,
+		margin: '0 auto',
 		overflow: 'hidden'
 	},
 	grid: {

src/common/components/Menu/style.js

@@ -2,6 +2,7 @@
 
 html,
 #root {
-  margin: 0;
+  margin: 0 auto;
   padding: 0;
+  background: var(--viewportColour);
 }

src/common/containers/Home/index.js

@@ -0,0 +1,5 @@
+// setup file
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })