From 6abb5f1449b582f50796c71bbf20d8e4aac2f4de Mon Sep 17 00:00:00 2001 From: Simon Fondrie-Teitler Date: Thu, 18 May 2017 23:20:16 -0400 Subject: [refactor] refactor and add tests for Center and Confirmation As a couple of initial, example tests, Center and Confirmation were refactored and tests were set up and added with mocha, enzyme and chai. Spinner was also refactored. --- ui/.babelrc | 3 ++ ui/app/components/center.js | 43 +++++++++--------------- ui/app/components/confirmation.js | 68 ++++++++++++++++++++------------------ ui/app/components/spinner/index.js | 19 +++++------ ui/package.json | 8 +++-- ui/test/components/center.js | 43 ++++++++++++++++++++++++ ui/test/components/confirmation.js | 57 ++++++++++++++++++++++++++++++++ 7 files changed, 168 insertions(+), 73 deletions(-) create mode 100644 ui/.babelrc create mode 100644 ui/test/components/center.js create mode 100644 ui/test/components/confirmation.js (limited to 'ui') diff --git a/ui/.babelrc b/ui/.babelrc new file mode 100644 index 00000000..86c445f5 --- /dev/null +++ b/ui/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react"] +} diff --git a/ui/app/components/center.js b/ui/app/components/center.js index 5e47d0cc..e7e074af 100644 --- a/ui/app/components/center.js +++ b/ui/app/components/center.js @@ -3,38 +3,27 @@ // import React from 'react' +import PropTypes from 'prop-types' -class Center extends React.Component { +const Center = props => ( +
+
+ {props.children} +
+
+) - static get defaultProps() {return{ - width: null, - direction: 'both', - }} - - constructor(props) { - super(props) - } - - render() { - let style = null - if (this.props.width) { - style = {width: this.props.width + 'px'} - } - let className = "center-container center-" + this.props.direction - return ( -
-
- {this.props.children} -
-
- ) - } +Center.defaultProps = { + width: null, + direction: 'both' } Center.propTypes = { - children: React.PropTypes.oneOfType([ - React.PropTypes.element, - React.PropTypes.arrayOf(React.PropTypes.element) + children: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.arrayOf( + PropTypes.element + ) ]) } diff --git a/ui/app/components/confirmation.js b/ui/app/components/confirmation.js index 69186162..deceb47b 100644 --- a/ui/app/components/confirmation.js +++ b/ui/app/components/confirmation.js @@ -3,41 +3,43 @@ // import React from 'react' -import {Button, ButtonGroup, ButtonToolbar, Glyphicon, Modal} - from 'react-bootstrap' +import {Button, ButtonToolbar, Modal} from 'react-bootstrap' +import PropTypes from 'prop-types' -export default class Confirmation extends React.Component { +const Confirmation = props => ( + + + + {props.title} + + + + + + + + + +) - static get defaultProps() {return{ - title: "Are you sure?", - onCancel: null, - onAccept: null, - acceptStr: 'Accept', - cancelStr: 'Cancel' - }} - - constructor(props) { - super(props) - } +Confirmation.defaultProps = { + title: "Are you sure?", + onCancel: null, + onAccept: null, + acceptStr: 'Accept', + cancelStr: 'Cancel' +} - render() { - return ( - - - {this.props.title} - - - - - - - - - ) - } +Confirmation.propTypes = { + className: PropTypes.string, + onCancel: PropTypes.func.isRequired, + onAccept: PropTypes.func.isRequired, + acceptStr: PropTypes.string, + cancelStr: PropTypes.string } +export default Confirmation diff --git a/ui/app/components/spinner/index.js b/ui/app/components/spinner/index.js index ffc32850..6cd34770 100644 --- a/ui/app/components/spinner/index.js +++ b/ui/app/components/spinner/index.js @@ -1,15 +1,12 @@ import React from 'react'; import './spinner.css'; -class Spinner extends React.Component { - render() { - let props = {} - return
-
-
-
-
- } -} +const Spinner = props => ( +
+
+
+
+
+) -export default Spinner \ No newline at end of file +export default Spinner diff --git a/ui/package.json b/ui/package.json index ed99e955..4749b985 100644 --- a/ui/package.json +++ b/ui/package.json @@ -17,13 +17,16 @@ "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", "bootstrap": "^3.3.7", + "chai": "^3.5.0", + "chai-enzyme": "^0.6.1", "copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.1", "less": "^2.7.1", "less-loader": "^2.2.3", + "mocha": "^3.4.1", "react": "^15.3.2", - "react-dom": "^15.3.2", "react-bootstrap": "^0.30.5", + "react-dom": "^15.3.2", "style-loader": "^0.13.1", "webpack": "^1.13.1", "zxcvbn": "^4.4.0" @@ -32,6 +35,7 @@ "ui": "chromium-browser \"http://localhost:7070/#$(cat ~/.config/leap/authtoken)\"", "watch": "NODE_ENV=development webpack --watch", "build": "NODE_ENV=development webpack", - "build:production": "NODE_ENV=production webpack" + "build:production": "NODE_ENV=production webpack", + "test": "mocha --compilers js:babel-core/register ./test/**/*.js" } } diff --git a/ui/test/components/center.js b/ui/test/components/center.js new file mode 100644 index 00000000..e9242e7d --- /dev/null +++ b/ui/test/components/center.js @@ -0,0 +1,43 @@ +import React from 'react'; +import {shallow} from 'enzyme'; +import chaiEnzyme from 'chai-enzyme' +import chai, { expect } from 'chai' +import Center from '../../app/components/center'; + + +describe('Center Component', () => { + + chai.use(chaiEnzyme()) + + it('has reasonable defaults', () => { + const center = shallow( +
+ test +
+ ) + + expect(center.hasClass("center-both")) + + expect(center.find(".center-item")).to.not.have.style('width') + }) + + it('has a width parameter on the inner div', () => { + const center = shallow( +
+ test +
+ ) + + expect(center.find(".center-item")).to.have.style('width').equal('10px') + }) + + it('sets direction parameter in the class name', () => { + const center = shallow( +
+ test +
+ ) + + expect(center).to.have.className("center-vertically") + }) +}) diff --git a/ui/test/components/confirmation.js b/ui/test/components/confirmation.js new file mode 100644 index 00000000..a563fb3f --- /dev/null +++ b/ui/test/components/confirmation.js @@ -0,0 +1,57 @@ +import React from 'react'; +import {shallow} from 'enzyme'; +import chaiEnzyme from 'chai-enzyme' +import Confirmation from '../../app/components/confirmation'; +import chai, { expect } from 'chai' + + +describe('Confirmation Component', () => { + + const simpleFunction0 = () => {return 0} + const simpleFunction1 = () => {return 1} + + it('Passed functionss run on click', () => { + const confirmation = shallow( + + ) + + expect(confirmation.find('Button').get(0).props.onClick()).to.equal(simpleFunction0()) + expect(confirmation.find('Button').get(1).props.onClick()).to.equal(simpleFunction1()) + }) + + it('sets defaults correctly', () => { + const confirmation = shallow( + + ) + + expect(confirmation.find("ModalTitle").first().children()).to.have.text("Are you sure?") + expect(confirmation.find('Button').at(0).children().first()).to.have.text("Accept") + expect(confirmation.find('Button').at(1).children().first()).to.have.text("Cancel") + }) + + it('overwrites defaults correctly', () => { + const testTitle = "Test Title" + const testAcceptStr = "Test accept string" + const testCancelStr = "Test cancel string" + + const confirmation = shallow( + + ) + + expect(confirmation.find("ModalTitle").first().children()).to.have.text(testTitle) + expect(confirmation.find('Button').at(0).children().first()).to.have.text(testAcceptStr) + expect(confirmation.find('Button').at(1).children().first()).to.have.text(testCancelStr) + }) +}) -- cgit v1.2.3