From a0f4fcec90af5f81b9a55405c5588a5d08604da7 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen Date: Fri, 14 Apr 2017 11:41:20 +0200 Subject: [PATCH] General Maintenance (#131) --- .eslintrc | 16 +- example/.eslintrc | 6 + example/package.json | 54 ++--- example/src/Form.js | 169 ++++++++------- example/src/index.js | 99 ++++----- example/webpack.config.dev.js | 11 +- example/webpack.config.prod.js | 11 +- package.json | 5 +- src/AutoComplete.js | 45 ++-- src/Checkbox.js | 41 ++-- src/DatePicker.js | 38 ++-- src/RadioButtonGroup.js | 23 +- src/SelectField.js | 36 ++-- src/Slider.js | 32 +-- src/TextField.js | 35 ++- src/TimePicker.js | 38 ++-- src/Toggle.js | 28 +-- src/__tests__/AutoComplete.spec.js | 256 ++++++++++++---------- src/__tests__/Checkbox.spec.js | 97 +++++---- src/__tests__/DatePicker.spec.js | 192 ++++++++++------- src/__tests__/RadioButtonGroup.spec.js | 197 ++++++++++------- src/__tests__/SelectField.spec.js | 286 +++++++++++++++---------- src/__tests__/Slider.spec.js | 154 +++++++------ src/__tests__/TextField.spec.js | 210 ++++++++++-------- src/__tests__/TimePicker.spec.js | 192 ++++++++++------- src/__tests__/Toggle.spec.js | 120 ++++++----- src/__tests__/setup.js | 8 +- src/createComponent.js | 12 +- src/index.js | 22 +- src/mapError.js | 15 +- 30 files changed, 1361 insertions(+), 1087 deletions(-) create mode 100755 example/.eslintrc diff --git a/.eslintrc b/.eslintrc index d65c876..5e603ec 100755 --- a/.eslintrc +++ b/.eslintrc @@ -1,17 +1,3 @@ { - "extends": "eslint-config-rackt", - "parser": "babel-eslint", - "env": { - "browser": true, - "mocha": true, - "node": true - }, - "rules": { - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/jsx-no-undef": 2 - }, - "plugins": [ - "react" - ] + "extends": "react-app" } diff --git a/example/.eslintrc b/example/.eslintrc new file mode 100755 index 0000000..556e297 --- /dev/null +++ b/example/.eslintrc @@ -0,0 +1,6 @@ +{ + "extends": "react-app", + "rules": { + "import/no-webpack-loader-syntax": 0 + } +} diff --git a/example/package.json b/example/package.json index c0a80b0..39d3e5c 100644 --- a/example/package.json +++ b/example/package.json @@ -9,41 +9,41 @@ "prepublish": "npm run lint && npm run build" }, "dependencies": { - "babel-polyfill": "^6.16.0", - "html-loader": "^0.4.4", + "babel-polyfill": "^6.23.0", + "html-loader": "^0.4.5", "json-loader": "^0.5.4", - "markdown-loader": "^0.1.7", - "material-ui": "^0.16.4", + "markdown-loader": "^2.0.0", + "material-ui": "^0.17.3", "raw-loader": "^0.5.1", - "react": "^15.4.1", - "react-dom": "^15.4.1", - "react-redux": "^4.4.6", + "react": "^15.5.4", + "react-dom": "^15.5.4", + "react-redux": "^5.0.4", "react-tap-event-plugin": "^2.0.1", "redux": "^3.6.0", - "redux-form": "^6.4.3", + "redux-form": "^6.6.3", "redux-form-material-ui": "file:../", - "redux-form-website-template": "0.0.39" + "redux-form-website-template": "0.0.41" }, "devDependencies": { - "babel-core": "^6.18.2", - "babel-eslint": "^7.1.1", - "babel-loader": "^6.2.8", - "babel-preset-es2015": "^6.18.0", - "babel-preset-react": "^6.16.0", - "babel-preset-stage-2": "^6.18.0", - "cross-env": "^3.1.3", - "eslint": "^3.11.1", + "babel-core": "^6.24.1", + "babel-eslint": "^7.2.2", + "babel-loader": "^6.4.1", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babel-preset-stage-2": "^6.24.1", + "cross-env": "^4.0.0", + "eslint": "^3.19.0", "eslint-config-rackt": "^1.1.1", - "eslint-loader": "^1.6.1", - "eslint-plugin-babel": "^4.0.0", - "eslint-plugin-react": "^6.7.1", + "eslint-loader": "^1.7.1", + "eslint-plugin-babel": "^4.1.1", + "eslint-plugin-react": "^6.10.3", "eventsource-polyfill": "^0.9.6", - "express": "^4.13.3", - "extract-text-webpack-plugin": "^1.0.1", - "redbox-react": "^1.3.3", - "rimraf": "^2.4.3", - "webpack": "^1.13.3", - "webpack-dev-middleware": "^1.8.4", - "webpack-hot-middleware": "^2.13.2" + "express": "^4.15.2", + "extract-text-webpack-plugin": "^2.1.0", + "redbox-react": "^1.3.6", + "rimraf": "^2.6.1", + "webpack": "^2.3.3", + "webpack-dev-middleware": "^1.10.1", + "webpack-hot-middleware": "^2.18.0" } } diff --git a/example/src/Form.js b/example/src/Form.js index 82ab44b..ded4d81 100644 --- a/example/src/Form.js +++ b/example/src/Form.js @@ -1,8 +1,9 @@ -import React, { Component } from 'react' -import { Field, reduxForm } from 'redux-form' -import { RadioButton } from 'material-ui/RadioButton' -import MenuItem from 'material-ui/MenuItem' -import { AutoComplete as MUIAutoComplete } from 'material-ui' +import React, {Component} from 'react'; +import {connect} from 'react-redux'; +import {Field, reduxForm, formValueSelector} from 'redux-form'; +import {RadioButton} from 'material-ui/RadioButton'; +import MenuItem from 'material-ui/MenuItem'; +import {AutoComplete as MUIAutoComplete} from 'material-ui'; import { AutoComplete, Checkbox, @@ -12,72 +13,68 @@ import { SelectField, Slider, TextField, - Toggle -} from 'redux-form-material-ui' + Toggle, +} from 'redux-form-material-ui'; // validation functions -const required = value => value == null ? 'Required' : undefined -const email = value => value && - !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? 'Invalid email' : undefined -const tooManyPizzas = value => value > 15 ? 'Are you mad?' : undefined +const required = value => (value == null ? 'Required' : undefined); +const email = value => + (value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) + ? 'Invalid email' + : undefined); +const tooManyPizzas = value => (value > 15 ? 'Are you mad?' : undefined); class Form extends Component { - - constructor(props) { - super(props) - this.onSlideChange = this.onSlideChange.bind(this) - this.state = { pizzas: 0 } - } - componentDidMount() { - this.refs.name // the Field + this.refs.name // the Field .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField - .focus() // on TextField - } - - onSlideChange(value) { - this.setState({ pizzas: value }) + .focus(); // on TextField } render() { - const { handleSubmit, pristine, reset, submitting } = this.props + const {handleSubmit, pristine, numPizzas, reset, submitting} = this.props; return (
- + ref="name" + withRef + />
- + validate={[required, email]} + />
- - + +
How many pizzas do you want?
+
{numPizzas}
- warn={tooManyPizzas}/> + warn={tooManyPizzas} + />
- - - + validate={required} + > + + +
- +
- { - console.log('onCheck ', value ) // eslint-disable-line no-console - }} - label="Pepperoni"/> +
- +
- +
- { - console.log('date changed ', value) // eslint-disable-line no-console - }} hintText="Day of delivery?" - validate={required}/> + validate={required} + />
- { - console.log('time changed ', value) // eslint-disable-line no-console - }} + // and redux-form defaults to '' hintText="At what time?" - validate={required}/> + validate={required} + />
+ multiLine + rows={2} + />
{ - console.log('AutoComplete ', value) // eslint-disable-line no-console - }} - dataSource={[ 'Cheddar', 'Mozzarella', 'Parmesan', 'Provolone' ]} - /> + dataSource={['Cheddar', 'Mozzarella', 'Parmesan', 'Provolone']} + />
+ {id: 0, name: 'Facebook'}, + {id: 1, name: 'Yelp'}, + {id: 2, name: 'TV Ad'}, + {id: 3, name: 'Friend'}, + {id: 4, name: 'Other'}, + ]} + />
- +
- ) + ); } } -export default reduxForm({ +const selector = formValueSelector('example'); + +Form = connect(state => ({ + numPizzas: selector(state, 'pizzas'), +}))(Form); + +Form = reduxForm({ form: 'example', initialValues: { delivery: 'delivery', name: 'Jane Doe', - cheese: 'Cheddar' - } -})(Form) + cheese: 'Cheddar', + pizzas: 1, + }, +})(Form); + +export default Form; diff --git a/example/src/index.js b/example/src/index.js index 03f5f41..661fe7a 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,85 +1,80 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import injectTapEventPlugin from 'react-tap-event-plugin' -import { Provider } from 'react-redux' -import { createStore, combineReducers } from 'redux' -import { reducer as reduxFormReducer } from 'redux-form' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import { - Code, - Markdown, - Values -} from 'redux-form-website-template' -injectTapEventPlugin() -const dest = document.getElementById('content') +import React from 'react'; +import ReactDOM from 'react-dom'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import {Provider} from 'react-redux'; +import {createStore, combineReducers} from 'redux'; +import {reducer as reduxFormReducer} from 'redux-form'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import {Code, Markdown, Values} from 'redux-form-website-template'; +injectTapEventPlugin(); +const dest = document.getElementById('content'); const reducer = combineReducers({ - form: reduxFormReducer // mounted under "form" -}) -const store = - (window.devToolsExtension ? window.devToolsExtension()(createStore) : createStore)(reducer) + form: reduxFormReducer, // mounted under "form" +}); +const store = (window.devToolsExtension + ? window.devToolsExtension()(createStore) + : createStore)(reducer); const showResults = values => new Promise(resolve => { - setTimeout(() => { // simulate server latency - window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`) - resolve() - }, 500) - }) + setTimeout(() => { + // simulate server latency + window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`); + resolve(); + }, 500); + }); let render = () => { - const Form = require('./Form').default - const readme = require('./Example.md') - const raw = require('!!raw!./Form') + const Form = require('./Form').default; + const readme = require('./Example.md'); + const raw = require('!!raw-loader!./Form'); ReactDOM.render(
- +

Form

-
+ - +

Code

Form.js

- +
, - dest - ) -} + dest, + ); +}; if (module.hot) { // Support hot reloading of components // and display an overlay for runtime errors - const renderApp = render - const renderError = (error) => { - console.error('ERROR:', error) // eslint-disable-line no-console - const RedBox = require('redbox-react') - ReactDOM.render( - , - dest - ) - } + const renderApp = render; + const renderError = error => { + console.error('ERROR:', error); // eslint-disable-line no-console + const RedBox = require('redbox-react'); + ReactDOM.render(, dest); + }; render = () => { try { - renderApp() + renderApp(); } catch (error) { - renderError(error) + renderError(error); } - } + }; const rerender = () => { - setTimeout(render) - } - module.hot.accept('./Form', rerender) - module.hot.accept('./Example.md', rerender) - module.hot.accept('!!raw!./Form', rerender) + setTimeout(render); + }; + module.hot.accept('./Form', rerender); + module.hot.accept('./Example.md', rerender); + module.hot.accept('!!raw-loader!./Form', rerender); } -render() +render(); diff --git a/example/webpack.config.dev.js b/example/webpack.config.dev.js index 86f500a..f06e949 100644 --- a/example/webpack.config.dev.js +++ b/example/webpack.config.dev.js @@ -15,21 +15,18 @@ module.exports = { publicPath: '/dist/' }, plugins: [ - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin() ], resolve: { - modulesDirectories: [ - 'src', - 'node_modules' - ], - extensions: [ '', '.json', '.js' ] + modules: [ 'src', 'node_modules' ], + extensions: [ '.json', '.js' ] }, module: { loaders: [ { test: /\.jsx?/, - loaders: [ 'babel', 'eslint' ], + loaders: [ 'babel-loader', 'eslint-loader' ], include: path.join(__dirname, 'src') }, { diff --git a/example/webpack.config.prod.js b/example/webpack.config.prod.js index cea981a..1d91fe1 100644 --- a/example/webpack.config.prod.js +++ b/example/webpack.config.prod.js @@ -13,7 +13,7 @@ module.exports = { publicPath: '/dist/' }, plugins: [ - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') @@ -26,17 +26,14 @@ module.exports = { }) ], resolve: { - modulesDirectories: [ - 'src', - 'node_modules' - ], - extensions: [ '', '.json', '.js' ] + modules: [ 'src', 'node_modules' ], + extensions: [ '.json', '.js' ] }, module: { loaders: [ { test: /\.js$/, - loaders: [ 'babel' ], + loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') }, { diff --git a/package.json b/package.json index 7761aae..eb1c9a3 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,10 @@ "codecov.io": "^0.1.6", "cross-env": "^4.0.0", "eslint": "^3.19.0", - "eslint-config-rackt": "^1.1.1", + "eslint-config-react-app": "^0.6.2", + "eslint-plugin-flowtype": "^2.30.4", + "eslint-plugin-import": "^2.2.0", + "eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-react": "^6.10.3", "expect": "^1.20.2", "expect-jsx": "^3.0.0", diff --git a/src/AutoComplete.js b/src/AutoComplete.js index 153a421..4b169d7 100644 --- a/src/AutoComplete.js +++ b/src/AutoComplete.js @@ -1,23 +1,24 @@ -import AutoComplete from 'material-ui/AutoComplete' -import createComponent from './createComponent' -import mapError from './mapError' +import AutoComplete from 'material-ui/AutoComplete'; +import createComponent from './createComponent'; +import mapError from './mapError'; -export default createComponent( - AutoComplete, - ({ input: { value, ...inputProps }, onNewRequest: onNewRequestFunc, dataSourceConfig, ...props }) => ({ - ...mapError(props), - ...inputProps, - searchText: dataSourceConfig ? value[dataSourceConfig.text] : value, - onNewRequest: value => { - inputProps.onChange( - typeof value === 'object' ? value[props.dataSourceConfig.value] : value - ) - if(onNewRequestFunc && typeof onNewRequestFunc === 'function') { - onNewRequestFunc(value) - } - }, - onUpdateInput: value => { - inputProps.onChange(value) - }, - onBlur: () => {} - })) +export default createComponent(AutoComplete, ({ + input: {onChange, value}, + onNewRequest, + dataSourceConfig, + ...props +}) => ({ + ...mapError(props), + dataSourceConfig, + searchText: dataSourceConfig ? value[dataSourceConfig.text] : value, + onNewRequest: value => { + onChange( + typeof value === 'object' && dataSourceConfig + ? value[dataSourceConfig.value] + : value, + ); + if (onNewRequest) { + onNewRequest(value); + } + }, +})); diff --git a/src/Checkbox.js b/src/Checkbox.js index ad34213..eb4ab20 100755 --- a/src/Checkbox.js +++ b/src/Checkbox.js @@ -1,26 +1,19 @@ -import Checkbox from 'material-ui/Checkbox' -import createComponent from './createComponent' +import Checkbox from 'material-ui/Checkbox'; +import createComponent from './createComponent'; -export default createComponent( - Checkbox, - ({ - input: { - onChange, - value, - ...inputProps - }, - meta, // eslint-disable-line no-unused-vars - onCheck: onCheckFunc, - ...props - }) => ({ - ...inputProps, - ...props, - checked: value ? true : false, - onCheck: (event, isInputChecked) => { - onChange(isInputChecked) - if(onCheckFunc && typeof onCheckFunc === 'function') { - onCheckFunc(isInputChecked) - } +export default createComponent(Checkbox, ({ + input: {onChange, value, ...inputProps}, + meta, + onCheck, + ...props +}) => ({ + ...inputProps, + ...props, + checked: value ? true : false, + onCheck: (event, isInputChecked) => { + onChange(isInputChecked); + if (onCheck) { + onCheck(isInputChecked); } - }) -) + }, +})); diff --git a/src/DatePicker.js b/src/DatePicker.js index bcaf9fb..46b3c38 100755 --- a/src/DatePicker.js +++ b/src/DatePicker.js @@ -1,24 +1,18 @@ -import DatePicker from 'material-ui/DatePicker' -import createComponent from './createComponent' -import mapError from './mapError' +import DatePicker from 'material-ui/DatePicker'; +import createComponent from './createComponent'; +import mapError from './mapError'; -export default createComponent( - DatePicker, - ({ - input: { - onBlur, // eslint-disable-line no-unused-vars - ...inputProps - }, - onChange: onChangeFunc, - ...props - }) => ({ - ...inputProps, - ...mapError(props), - onChange: (event, value) => { - inputProps.onChange(value) - if(onChangeFunc && typeof onChangeFunc === 'function') { - onChangeFunc(value) - } +export default createComponent(DatePicker, ({ + input: {onBlur, ...inputProps}, + onChange, + ...props +}) => ({ + ...inputProps, + ...mapError(props), + onChange: (event, value) => { + inputProps.onChange(value); + if (onChange) { + onChange(value); } - }) -) + }, +})); diff --git a/src/RadioButtonGroup.js b/src/RadioButtonGroup.js index 7553692..ea9598f 100755 --- a/src/RadioButtonGroup.js +++ b/src/RadioButtonGroup.js @@ -1,9 +1,18 @@ -import { RadioButtonGroup } from 'material-ui/RadioButton' -import createComponent from './createComponent' -import mapError from './mapError' +import {RadioButtonGroup} from 'material-ui/RadioButton'; +import createComponent from './createComponent'; +import mapError from './mapError'; -const mapValueToValueSelected = ({ input: { ...inputProps }, ...props }, errorProp) => { - return mapError({ ...props, input: { ...inputProps, valueSelected: inputProps.value } }, errorProp) -} +const mapValueToValueSelected = ( + {input: {...inputProps}, ...props}, + errorProp, +) => { + return mapError( + { + ...props, + input: {...inputProps, valueSelected: inputProps.value}, + }, + errorProp, + ); +}; -export default createComponent(RadioButtonGroup, mapValueToValueSelected) +export default createComponent(RadioButtonGroup, mapValueToValueSelected); diff --git a/src/SelectField.js b/src/SelectField.js index d2a05bc..5ee91f1 100755 --- a/src/SelectField.js +++ b/src/SelectField.js @@ -1,18 +1,20 @@ -import SelectField from 'material-ui/SelectField' -import createComponent from './createComponent' -import mapError from './mapError' +import SelectField from 'material-ui/SelectField'; +import createComponent from './createComponent'; +import mapError from './mapError'; -export default createComponent( - SelectField, - ({ input: { onChange,value, onBlur, ...inputProps }, onChange:onChangeFromField, ...props }) => ({ - ...mapError(props), - ...inputProps, - value: value, - onChange: (event, index, value) => { - onChange(value) - if(onChangeFromField) { - onChangeFromField(value) - } - }, - onBlur: () => onBlur(value) - })) +export default createComponent(SelectField, ({ + input: {onChange, value, onBlur, ...inputProps}, + onChange: onChangeFromField, + ...props +}) => ({ + ...mapError(props), + ...inputProps, + value: value, + onChange: (event, index, value) => { + onChange(value); + if (onChangeFromField) { + onChangeFromField(value); + } + }, + onBlur: () => onBlur(value), +})); diff --git a/src/Slider.js b/src/Slider.js index 6f4c05c..b120557 100755 --- a/src/Slider.js +++ b/src/Slider.js @@ -1,17 +1,17 @@ -import Slider from 'material-ui/Slider' -import createComponent from './createComponent' -import mapError from './mapError' +import Slider from 'material-ui/Slider'; +import createComponent from './createComponent'; +import mapError from './mapError'; -export default createComponent( - Slider, - ({ input: { onDragStart, onChange, ...inputProps }, onChange:onChangeFromField, ...props }) => // eslint-disable-line no-unused-vars - ({ - ...mapError({ ...props, input: inputProps }, 'error'), - onChange: (event, value) => { - onChange(value) - if(onChangeFromField) { - onChangeFromField(value) - } - } - }) -) +export default createComponent(Slider, ({ + input: {onDragStart, onChange, ...inputProps}, + onChange: onChangeFromField, + ...props +}) => ({ // eslint-disable-line no-unused-vars + ...mapError({...props, input: inputProps}, 'error'), + onChange: (event, value) => { + onChange(value); + if (onChangeFromField) { + onChangeFromField(value); + } + }, +})); diff --git a/src/TextField.js b/src/TextField.js index ed760f2..6390ab5 100755 --- a/src/TextField.js +++ b/src/TextField.js @@ -1,22 +1,17 @@ -import TextField from 'material-ui/TextField' -import createComponent from './createComponent' -import mapError from './mapError' +import TextField from 'material-ui/TextField'; +import createComponent from './createComponent'; +import mapError from './mapError'; -export default createComponent( - TextField, - ({ - input: { - ...inputProps - }, - defaultValue, - ...props - }) => { - if(inputProps.value === '') { - inputProps.value = defaultValue || inputProps.value - } - return { - ...inputProps, - ...mapError(props) - } +export default createComponent(TextField, ({ + input: {...inputProps}, + defaultValue, + ...props +}) => { + if (inputProps.value === '') { + inputProps.value = defaultValue || inputProps.value; } -) + return { + ...inputProps, + ...mapError(props), + }; +}); diff --git a/src/TimePicker.js b/src/TimePicker.js index 876dbeb..e62befc 100644 --- a/src/TimePicker.js +++ b/src/TimePicker.js @@ -1,24 +1,18 @@ -import TimePicker from 'material-ui/TimePicker' -import createComponent from './createComponent' -import mapError from './mapError' +import TimePicker from 'material-ui/TimePicker'; +import createComponent from './createComponent'; +import mapError from './mapError'; -export default createComponent( - TimePicker, - ({ - input: { - onBlur, // eslint-disable-line no-unused-vars - ...inputProps - }, - onChange: onChangeFunc, - ...props - }) => ({ - ...inputProps, - ...mapError(props), - onChange: (event, value) => { - inputProps.onChange(value) - if(onChangeFunc && typeof onChangeFunc === 'function') { - onChangeFunc(value) - } +export default createComponent(TimePicker, ({ + input: {onBlur, ...inputProps}, + onChange, + ...props +}) => ({ + ...inputProps, + ...mapError(props), + onChange: (event, value) => { + inputProps.onChange(value); + if (onChange) { + onChange(value); } - }) -) + }, +})); diff --git a/src/Toggle.js b/src/Toggle.js index f802e39..ebc812c 100755 --- a/src/Toggle.js +++ b/src/Toggle.js @@ -1,18 +1,12 @@ -import Toggle from 'material-ui/Toggle' -import createComponent from './createComponent' +import Toggle from 'material-ui/Toggle'; +import createComponent from './createComponent'; -export default createComponent( - Toggle, - ({ - input: { - onChange, - ...inputProps - }, - meta, // eslint-disable-line no-unused-vars - ...props - }) => ({ - ...inputProps, - ...props, - onToggle: onChange - }) -) +export default createComponent(Toggle, ({ + input: {onChange, ...inputProps}, + meta, + ...props +}) => ({ + ...inputProps, + ...props, + onToggle: onChange, +})); diff --git a/src/__tests__/AutoComplete.spec.js b/src/__tests__/AutoComplete.spec.js index d9a1808..c38bd36 100644 --- a/src/__tests__/AutoComplete.spec.js +++ b/src/__tests__/AutoComplete.spec.js @@ -1,134 +1,174 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect, { createSpy } from 'expect' -import expectJsx from 'expect-jsx' -import AutoComplete from 'material-ui/AutoComplete' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUIAutoComplete from '../AutoComplete' +import expect, {createSpy} from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import AutoComplete from 'material-ui/AutoComplete'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUIAutoComplete from '../AutoComplete'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('AutoComplete', () => { - - const dataSource = [ - 'One', - 'Two', - 'Three' - ] + const dataSource = ['One', 'Two', 'Three']; it('has a display name', () => { - expect(ReduxFormMaterialUIAutoComplete.displayName) - .toBe('ReduxFormMaterialUIAutoComplete') - }) + expect(ReduxFormMaterialUIAutoComplete.displayName).toBe( + 'ReduxFormMaterialUIAutoComplete', + ); + }); it('renders an AutoComplete', () => { - expect(new ReduxFormMaterialUIAutoComplete({ - dataSource, - input: { - name: 'myAutoComplete', - value: 'Foo', - onBlur: noop - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIAutoComplete({ + dataSource, + input: { + name: 'myAutoComplete', + value: 'Foo', + onBlur: noop, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders an AutoComplete with no error when not touched', () => { - expect(new ReduxFormMaterialUIAutoComplete({ - dataSource, - input: { - name: 'myAutoComplete', - value: 'Foo', - onBlur: noop - }, - meta: { - error: 'FooError' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIAutoComplete({ + dataSource, + input: { + name: 'myAutoComplete', + value: 'Foo', + onBlur: noop, + }, + meta: { + error: 'FooError', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders an AutoComplete with an error', () => { - expect(new ReduxFormMaterialUIAutoComplete({ - dataSource, - input: { - name: 'myAutoComplete', - value: 'Foo', - onBlur: noop - }, - meta: { - error: 'FooError', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIAutoComplete({ + dataSource, + input: { + name: 'myAutoComplete', + value: 'Foo', + onBlur: noop, + }, + meta: { + error: 'FooError', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders an AutoComplete with no warning when not touched', () => { - expect(new ReduxFormMaterialUIAutoComplete({ - dataSource, - input: { - name: 'myAutoComplete', - value: 'Foo' - }, - meta: { - warning: 'FooWarning' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIAutoComplete({ + dataSource, + input: { + name: 'myAutoComplete', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders an AutoComplete with an warning', () => { - expect(new ReduxFormMaterialUIAutoComplete({ - dataSource, - input: { - name: 'myAutoComplete', - value: 'Foo' - }, - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIAutoComplete({ + dataSource, + input: { + name: 'myAutoComplete', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('maps onNewRequest properly', () => { - const onChange = createSpy() + const onChange = createSpy(); const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const autocomplete = TestUtils.findRenderedComponentWithType(dom, AutoComplete) - expect(onChange).toNotHaveBeenCalled() - autocomplete.props.onNewRequest('TheValue') - expect(onChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith('TheValue') - }) + const autocomplete = TestUtils.findRenderedComponentWithType( + dom, + AutoComplete, + ); + expect(onChange).toNotHaveBeenCalled(); + autocomplete.props.onNewRequest('TheValue'); + expect(onChange).toHaveBeenCalled().toHaveBeenCalledWith('TheValue'); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = - TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIAutoComplete) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUIAutoComplete, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/Checkbox.spec.js b/src/__tests__/Checkbox.spec.js index ba34ef7..158d873 100644 --- a/src/__tests__/Checkbox.spec.js +++ b/src/__tests__/Checkbox.spec.js @@ -1,50 +1,73 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect from 'expect' -import expectJsx from 'expect-jsx' -import Checkbox from 'material-ui/Checkbox' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUICheckbox from '../Checkbox' +import expect from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import Checkbox from 'material-ui/Checkbox'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUICheckbox from '../Checkbox'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('Checkbox', () => { it('has a display name', () => { - expect(ReduxFormMaterialUICheckbox.displayName).toBe('ReduxFormMaterialUICheckbox') - }) + expect(ReduxFormMaterialUICheckbox.displayName).toBe( + 'ReduxFormMaterialUICheckbox', + ); + }); it('renders an unchecked Checkbox', () => { - expect(new ReduxFormMaterialUICheckbox({ - input: { - name: 'myCheckbox', - onChange: noop - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUICheckbox({ + input: { + name: 'myCheckbox', + onChange: noop, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a checked Checkbox', () => { - expect(new ReduxFormMaterialUICheckbox({ - input: { - name: 'myCheckbox', - onChange: noop, - value: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUICheckbox({ + input: { + name: 'myCheckbox', + onChange: noop, + value: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUICheckbox) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUICheckbox, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/DatePicker.spec.js b/src/__tests__/DatePicker.spec.js index fe6637b..2f801ad 100644 --- a/src/__tests__/DatePicker.spec.js +++ b/src/__tests__/DatePicker.spec.js @@ -1,102 +1,136 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect, { createSpy } from 'expect' -import expectJsx from 'expect-jsx' -import DatePicker from 'material-ui/DatePicker' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUIDatePicker from '../DatePicker' +import expect, {createSpy} from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import DatePicker from 'material-ui/DatePicker'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUIDatePicker from '../DatePicker'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('DatePicker', () => { it('has a display name', () => { - expect(ReduxFormMaterialUIDatePicker.displayName).toBe('ReduxFormMaterialUIDatePicker') - }) + expect(ReduxFormMaterialUIDatePicker.displayName).toBe( + 'ReduxFormMaterialUIDatePicker', + ); + }); it('renders a DatePicker with no value', () => { - expect(new ReduxFormMaterialUIDatePicker({ - input: { - name: 'myDatePicker', - onChange: noop - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIDatePicker({ + input: { + name: 'myDatePicker', + onChange: noop, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a DatePicker with a value', () => { - const value = new Date('2016-01-01') - expect(new ReduxFormMaterialUIDatePicker({ - input: { - name: 'myDatePicker', - onChange: noop, - value - } - }).render()) - .toEqualJSX() - }) + const value = new Date('2016-01-01'); + expect( + new ReduxFormMaterialUIDatePicker({ + input: { + name: 'myDatePicker', + onChange: noop, + value, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a DatePicker with an error', () => { - const value = new Date('2016-01-01') - expect(new ReduxFormMaterialUIDatePicker({ - input: { - name: 'myDatePicker', - value - }, - meta: { - error: 'FooError', - touched: true - } - }).render()) - .toEqualJSX() - }) + const value = new Date('2016-01-01'); + expect( + new ReduxFormMaterialUIDatePicker({ + input: { + name: 'myDatePicker', + value, + }, + meta: { + error: 'FooError', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a DatePicker with an warning', () => { - const value = new Date('2016-01-01') - expect(new ReduxFormMaterialUIDatePicker({ - input: { - name: 'myDatePicker', - value - }, - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + const value = new Date('2016-01-01'); + expect( + new ReduxFormMaterialUIDatePicker({ + input: { + name: 'myDatePicker', + value, + }, + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('maps onChange properly', () => { - const onChange = createSpy() - const first = new Date('2016-01-01') - const second = new Date('2016-02-29') + const onChange = createSpy(); + const first = new Date('2016-01-01'); + const second = new Date('2016-02-29'); const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const datePicker = TestUtils.findRenderedComponentWithType(dom, DatePicker) - expect(onChange).toNotHaveBeenCalled() - datePicker.props.onChange(undefined, second) - expect(onChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith(second) - }) + const datePicker = TestUtils.findRenderedComponentWithType(dom, DatePicker); + expect(onChange).toNotHaveBeenCalled(); + datePicker.props.onChange(undefined, second); + expect(onChange).toHaveBeenCalled().toHaveBeenCalledWith(second); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIDatePicker) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUIDatePicker, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/RadioButtonGroup.spec.js b/src/__tests__/RadioButtonGroup.spec.js index 211682f..1e0bdff 100644 --- a/src/__tests__/RadioButtonGroup.spec.js +++ b/src/__tests__/RadioButtonGroup.spec.js @@ -1,96 +1,139 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect from 'expect' -import expectJsx from 'expect-jsx' -import { RadioButtonGroup } from 'material-ui/RadioButton' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import ReduxFormMaterialUIRadioButtonGroup from '../RadioButtonGroup' +import expect from 'expect'; +import expectJsx from 'expect-jsx'; +import {RadioButtonGroup} from 'material-ui/RadioButton'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUIRadioButtonGroup from '../RadioButtonGroup'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('RadioButtonGroup', () => { it('has a display name', () => { - expect(ReduxFormMaterialUIRadioButtonGroup.displayName) - .toBe('ReduxFormMaterialUIRadioButtonGroup') - }) + expect(ReduxFormMaterialUIRadioButtonGroup.displayName).toBe( + 'ReduxFormMaterialUIRadioButtonGroup', + ); + }); it('renders a RadioButtonGroup', () => { - expect(new ReduxFormMaterialUIRadioButtonGroup({ - input: { - name: 'myRadio', - value: 'Foo' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIRadioButtonGroup({ + input: { + name: 'myRadio', + value: 'Foo', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a RadioButtonGroup with no error when not touched', () => { - expect(new ReduxFormMaterialUIRadioButtonGroup({ - input: { - name: 'myRadio', - value: 'Foo' - }, - meta: { - error: 'FooError' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIRadioButtonGroup({ + input: { + name: 'myRadio', + value: 'Foo', + }, + meta: { + error: 'FooError', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a RadioButtonGroup with an error', () => { - expect(new ReduxFormMaterialUIRadioButtonGroup({ - input: { - name: 'myRadio', - value: 'Foo' - }, - meta: { - error: 'FooError', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIRadioButtonGroup({ + input: { + name: 'myRadio', + value: 'Foo', + }, + meta: { + error: 'FooError', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a RadioButtonGroup with no warning when not touched', () => { - expect(new ReduxFormMaterialUIRadioButtonGroup({ - input: { - name: 'myRadio', - value: 'Foo' - }, - meta: { - warning: 'FooWarning' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIRadioButtonGroup({ + input: { + name: 'myRadio', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a RadioButtonGroup with an warning', () => { - expect(new ReduxFormMaterialUIRadioButtonGroup({ - input: { - name: 'myRadio', - value: 'Foo' - }, - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIRadioButtonGroup({ + input: { + name: 'myRadio', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = - TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIRadioButtonGroup) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUIRadioButtonGroup, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/SelectField.spec.js b/src/__tests__/SelectField.spec.js index d9d00c2..8ff266c 100644 --- a/src/__tests__/SelectField.spec.js +++ b/src/__tests__/SelectField.spec.js @@ -1,159 +1,211 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect, { createSpy } from 'expect' -import expectJsx from 'expect-jsx' -import SelectField from 'material-ui/SelectField' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUISelectField from '../SelectField' - -expect.extend(expectJsx) +import expect, {createSpy} from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import SelectField from 'material-ui/SelectField'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUISelectField from '../SelectField'; + +expect.extend(expectJsx); describe('SelectField', () => { it('has a display name', () => { - expect(ReduxFormMaterialUISelectField.displayName) - .toBe('ReduxFormMaterialUISelectField') - }) + expect(ReduxFormMaterialUISelectField.displayName).toBe( + 'ReduxFormMaterialUISelectField', + ); + }); it('renders a SelectField', () => { - expect(new ReduxFormMaterialUISelectField({ - input: { - name: 'mySelect', - value: 'Foo' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISelectField({ + input: { + name: 'mySelect', + value: 'Foo', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a SelectField with no error when not touched', () => { - expect(new ReduxFormMaterialUISelectField({ - input: { - name: 'mySelect', - value: 'Foo' - }, - meta: { - error: 'FooError' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISelectField({ + input: { + name: 'mySelect', + value: 'Foo', + }, + meta: { + error: 'FooError', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a SelectField with an error', () => { - expect(new ReduxFormMaterialUISelectField({ - input: { - name: 'mySelect', - value: 'Foo' - }, - meta: { - error: 'FooError', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISelectField({ + input: { + name: 'mySelect', + value: 'Foo', + }, + meta: { + error: 'FooError', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a SelectField with no warning when not touched', () => { - expect(new ReduxFormMaterialUISelectField({ - input: { - name: 'mySelect', - value: 'Foo' - }, - meta: { - warning: 'FooWarning' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISelectField({ + input: { + name: 'mySelect', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a SelectField with an warning', () => { - expect(new ReduxFormMaterialUISelectField({ - input: { - name: 'mySelect', - value: 'Foo' - }, - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISelectField({ + input: { + name: 'mySelect', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('maps onChange properly', () => { - const onChange = createSpy() + const onChange = createSpy(); const dom = TestUtils.renderIntoDocument( - - - ) - - const select = TestUtils.findRenderedComponentWithType(dom, SelectField) - expect(onChange).toNotHaveBeenCalled() - select.props.onChange(undefined, 42, 'TheValue') - expect(onChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith('TheValue') - }) + + , + ); + + const select = TestUtils.findRenderedComponentWithType(dom, SelectField); + expect(onChange).toNotHaveBeenCalled(); + select.props.onChange(undefined, 42, 'TheValue'); + expect(onChange).toHaveBeenCalled().toHaveBeenCalledWith('TheValue'); + }); it('maps onChange from Field property properly', () => { - const reduxFormOnChange = createSpy() - const fieldOnChange = createSpy() + const reduxFormOnChange = createSpy(); + const fieldOnChange = createSpy(); const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const select = TestUtils.findRenderedComponentWithType(dom, SelectField) + const select = TestUtils.findRenderedComponentWithType(dom, SelectField); - expect(reduxFormOnChange).toNotHaveBeenCalled() - expect(fieldOnChange).toNotHaveBeenCalled() + expect(reduxFormOnChange).toNotHaveBeenCalled(); + expect(fieldOnChange).toNotHaveBeenCalled(); - select.props.onChange(undefined, 42, 'TheValue') + select.props.onChange(undefined, 42, 'TheValue'); expect(reduxFormOnChange) .toHaveBeenCalled() - .toHaveBeenCalledWith('TheValue') - expect(fieldOnChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith('TheValue') - }) + .toHaveBeenCalledWith('TheValue'); + expect(fieldOnChange).toHaveBeenCalled().toHaveBeenCalledWith('TheValue'); + }); it('calls onBlur with currently selected value', () => { - const fieldOnBlur = createSpy() + const fieldOnBlur = createSpy(); const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const select = TestUtils.findRenderedComponentWithType(dom, SelectField) + const select = TestUtils.findRenderedComponentWithType(dom, SelectField); - expect(fieldOnBlur).toNotHaveBeenCalled() + expect(fieldOnBlur).toNotHaveBeenCalled(); - select.props.onBlur() + select.props.onBlur(); - expect(fieldOnBlur) - .toHaveBeenCalled() - .toHaveBeenCalledWith('Foo') - }) + expect(fieldOnBlur).toHaveBeenCalled().toHaveBeenCalledWith('Foo'); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) - - const element = - TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUISelectField) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + + , + ); + + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUISelectField, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/Slider.spec.js b/src/__tests__/Slider.spec.js index 7b2e762..09ca95e 100644 --- a/src/__tests__/Slider.spec.js +++ b/src/__tests__/Slider.spec.js @@ -1,96 +1,108 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect, { createSpy } from 'expect' -import expectJsx from 'expect-jsx' -import Slider from 'material-ui/Slider' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUISlider from '../Slider' +import expect, {createSpy} from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import Slider from 'material-ui/Slider'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUISlider from '../Slider'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('Slider', () => { it('has a display name', () => { - expect(ReduxFormMaterialUISlider.displayName) - .toBe('ReduxFormMaterialUISlider') - }) + expect(ReduxFormMaterialUISlider.displayName).toBe( + 'ReduxFormMaterialUISlider', + ); + }); it('renders a Slider', () => { - expect(new ReduxFormMaterialUISlider({ - input: { - name: 'mySlider', - value: 0.5, - onDragStart: noop - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISlider({ + input: { + name: 'mySlider', + value: 0.5, + onDragStart: noop, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a Slider with no error when not touched', () => { - expect(new ReduxFormMaterialUISlider({ - input: { - name: 'mySlider', - value: 0.5, - onDragStart: noop - }, - meta: { - error: 'FooError' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISlider({ + input: { + name: 'mySlider', + value: 0.5, + onDragStart: noop, + }, + meta: { + error: 'FooError', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a Slider with no warning when not touched', () => { - expect(new ReduxFormMaterialUISlider({ - input: { - name: 'mySlider', - value: 0.5, - onDragStart: noop - }, - meta: { - warning: 'FooWarning' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUISlider({ + input: { + name: 'mySlider', + value: 0.5, + onDragStart: noop, + }, + meta: { + warning: 'FooWarning', + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('maps onChange properly', () => { - const onChange = createSpy() - const fieldOnChange = createSpy() + const onChange = createSpy(); + const fieldOnChange = createSpy(); const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const slider = TestUtils.findRenderedComponentWithType(dom, Slider) + const slider = TestUtils.findRenderedComponentWithType(dom, Slider); - expect(onChange).toNotHaveBeenCalled() - expect(fieldOnChange).toNotHaveBeenCalled() + expect(onChange).toNotHaveBeenCalled(); + expect(fieldOnChange).toNotHaveBeenCalled(); - slider.props.onChange(undefined, 0.9) + slider.props.onChange(undefined, 0.9); - expect(onChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith(0.9) + expect(onChange).toHaveBeenCalled().toHaveBeenCalledWith(0.9); - expect(fieldOnChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith(0.9) - }) + expect(fieldOnChange).toHaveBeenCalled().toHaveBeenCalledWith(0.9); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = - TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUISlider) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUISlider, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/TextField.spec.js b/src/__tests__/TextField.spec.js index 2b1931e..2184747 100644 --- a/src/__tests__/TextField.spec.js +++ b/src/__tests__/TextField.spec.js @@ -1,113 +1,141 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect from 'expect' -import expectJsx from 'expect-jsx' -import TextField from 'material-ui/TextField' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import ReduxFormMaterialUITextField from '../TextField' +import expect from 'expect'; +import expectJsx from 'expect-jsx'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import TextField from 'material-ui/TextField'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUITextField from '../TextField'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('TextField', () => { it('has a display name', () => { - expect(ReduxFormMaterialUITextField.displayName) - .toBe('ReduxFormMaterialUITextField') - }) + expect(ReduxFormMaterialUITextField.displayName).toBe( + 'ReduxFormMaterialUITextField', + ); + }); it('renders a TextField', () => { - expect(new ReduxFormMaterialUITextField({ - input: { - name: 'myText', - value: 'Foo' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITextField({ + input: { + name: 'myText', + value: 'Foo', + }, + }).render(), + ).toEqualJSX(); + }); it('renders a TextField with no error when not touched', () => { - expect(new ReduxFormMaterialUITextField({ - input: { - name: 'myText', - value: 'Foo' - }, - meta: { - error: 'FooError' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITextField({ + input: { + name: 'myText', + value: 'Foo', + }, + meta: { + error: 'FooError', + }, + }).render(), + ).toEqualJSX(); + }); it('renders a TextField with an error', () => { - expect(new ReduxFormMaterialUITextField({ - input: { - name: 'myText', - value: 'Foo' - }, - meta: { - error: 'FooError', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITextField({ + input: { + name: 'myText', + value: 'Foo', + }, + meta: { + error: 'FooError', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a TextField with no warning when not touched', () => { - expect(new ReduxFormMaterialUITextField({ - input: { - name: 'myText', - value: 'Foo' - }, - meta: { - warning: 'FooWarning' - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITextField({ + input: { + name: 'myText', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + }, + }).render(), + ).toEqualJSX(); + }); it('renders a TextField with an warning', () => { - expect(new ReduxFormMaterialUITextField({ - input: { - name: 'myText', - value: 'Foo' - }, - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITextField({ + input: { + name: 'myText', + value: 'Foo', + }, + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('should render with defaultValue', () => { - expect(new ReduxFormMaterialUITextField({ - input: { - name: 'myText', - value: '' - }, - defaultValue: '5', - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITextField({ + input: { + name: 'myText', + value: '', + }, + defaultValue: '5', + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = - TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUITextField) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUITextField, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); - it('focuses when field gets active prop', () => { - - }) -}) + it('focuses when field gets active prop', () => {}); +}); diff --git a/src/__tests__/TimePicker.spec.js b/src/__tests__/TimePicker.spec.js index 52db6fa..1d2c2a0 100644 --- a/src/__tests__/TimePicker.spec.js +++ b/src/__tests__/TimePicker.spec.js @@ -1,102 +1,136 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect, { createSpy } from 'expect' -import expectJsx from 'expect-jsx' -import TimePicker from 'material-ui/TimePicker' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUITimePicker from '../TimePicker' +import expect, {createSpy} from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import TimePicker from 'material-ui/TimePicker'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUITimePicker from '../TimePicker'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('TimePicker', () => { it('has a display name', () => { - expect(ReduxFormMaterialUITimePicker.displayName).toBe('ReduxFormMaterialUITimePicker') - }) + expect(ReduxFormMaterialUITimePicker.displayName).toBe( + 'ReduxFormMaterialUITimePicker', + ); + }); it('renders a TimePicker with no value', () => { - expect(new ReduxFormMaterialUITimePicker({ - input: { - name: 'myTimePicker', - onChange: noop - } - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUITimePicker({ + input: { + name: 'myTimePicker', + onChange: noop, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a TimePicker with a value', () => { - const value = new Date('2016-01-01') - expect(new ReduxFormMaterialUITimePicker({ - input: { - name: 'myTimePicker', - onChange: noop, - value - } - }).render()) - .toEqualJSX() - }) + const value = new Date('2016-01-01'); + expect( + new ReduxFormMaterialUITimePicker({ + input: { + name: 'myTimePicker', + onChange: noop, + value, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a TimePicker with an error', () => { - const value = new Date('2016-01-01') - expect(new ReduxFormMaterialUITimePicker({ - input: { - name: 'myTimePicker', - value - }, - meta: { - error: 'FooError', - touched: true - } - }).render()) - .toEqualJSX() - }) + const value = new Date('2016-01-01'); + expect( + new ReduxFormMaterialUITimePicker({ + input: { + name: 'myTimePicker', + value, + }, + meta: { + error: 'FooError', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a TimePicker with an warning', () => { - const value = new Date('2016-01-01') - expect(new ReduxFormMaterialUITimePicker({ - input: { - name: 'myTimePicker', - value - }, - meta: { - warning: 'FooWarning', - touched: true - } - }).render()) - .toEqualJSX() - }) + const value = new Date('2016-01-01'); + expect( + new ReduxFormMaterialUITimePicker({ + input: { + name: 'myTimePicker', + value, + }, + meta: { + warning: 'FooWarning', + touched: true, + }, + }).render(), + ).toEqualJSX( + , + ); + }); it('maps onChange properly', () => { - const onChange = createSpy() - const first = new Date('August 22, 2016 10:15:00') - const second = new Date('August 22, 2016 11:20:00') + const onChange = createSpy(); + const first = new Date('August 22, 2016 10:15:00'); + const second = new Date('August 22, 2016 11:20:00'); const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const timePicker = TestUtils.findRenderedComponentWithType(dom, TimePicker) - expect(onChange).toNotHaveBeenCalled() - timePicker.props.onChange(undefined, second) - expect(onChange) - .toHaveBeenCalled() - .toHaveBeenCalledWith(second) - }) + const timePicker = TestUtils.findRenderedComponentWithType(dom, TimePicker); + expect(onChange).toNotHaveBeenCalled(); + timePicker.props.onChange(undefined, second); + expect(onChange).toHaveBeenCalled().toHaveBeenCalledWith(second); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUITimePicker) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUITimePicker, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/Toggle.spec.js b/src/__tests__/Toggle.spec.js index 5627e25..88463c7 100644 --- a/src/__tests__/Toggle.spec.js +++ b/src/__tests__/Toggle.spec.js @@ -1,64 +1,86 @@ -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import expect from 'expect' -import expectJsx from 'expect-jsx' -import Toggle from 'material-ui/Toggle' -import getMuiTheme from 'material-ui/styles/getMuiTheme' -import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' -import noop from 'lodash.noop' -import ReduxFormMaterialUIToggle from '../Toggle' +import expect from 'expect'; +import expectJsx from 'expect-jsx'; +import noop from 'lodash.noop'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import Toggle from 'material-ui/Toggle'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReduxFormMaterialUIToggle from '../Toggle'; -expect.extend(expectJsx) +expect.extend(expectJsx); describe('Toggle', () => { it('has a display name', () => { - expect(ReduxFormMaterialUIToggle.displayName) - .toBe('ReduxFormMaterialUIToggle') - }) + expect(ReduxFormMaterialUIToggle.displayName).toBe( + 'ReduxFormMaterialUIToggle', + ); + }); it('renders an untoggled Toggle', () => { - expect(new ReduxFormMaterialUIToggle({ - input: { - name: 'myToggle', - onChange: noop - }, - defaultToggled: false - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIToggle({ + input: { + name: 'myToggle', + onChange: noop, + }, + defaultToggled: false, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a toggled Toggle', () => { - expect(new ReduxFormMaterialUIToggle({ - input: { - name: 'myToggle', - onChange: noop - }, - defaultToggled: true - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIToggle({ + input: { + name: 'myToggle', + onChange: noop, + }, + defaultToggled: true, + }).render(), + ).toEqualJSX( + , + ); + }); it('renders a controlled Toggle', () => { - expect(new ReduxFormMaterialUIToggle({ - input: { - name: 'myToggle', - onChange: noop - }, - toggled: true - }).render()) - .toEqualJSX() - }) + expect( + new ReduxFormMaterialUIToggle({ + input: { + name: 'myToggle', + onChange: noop, + }, + toggled: true, + }).render(), + ).toEqualJSX( + , + ); + }); it('provides getRenderedComponent', () => { const dom = TestUtils.renderIntoDocument( - - - ) + + , + ); - const element = - TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIToggle) - expect(element.getRenderedComponent).toBeA('function') - expect(element.getRenderedComponent()).toExist() - }) -}) + const element = TestUtils.findRenderedComponentWithType( + dom, + ReduxFormMaterialUIToggle, + ); + expect(element.getRenderedComponent).toBeA('function'); + expect(element.getRenderedComponent()).toExist(); + }); +}); diff --git a/src/__tests__/setup.js b/src/__tests__/setup.js index c2e0f0c..b9b8aea 100644 --- a/src/__tests__/setup.js +++ b/src/__tests__/setup.js @@ -1,5 +1,5 @@ -import { jsdom } from 'jsdom' +import {jsdom} from 'jsdom'; -global.document = jsdom('') -global.window = document.defaultView -global.navigator = global.window.navigator +global.document = jsdom(''); +global.window = document.defaultView; +global.navigator = global.window.navigator; diff --git a/src/createComponent.js b/src/createComponent.js index b656313..2df0540 100755 --- a/src/createComponent.js +++ b/src/createComponent.js @@ -1,4 +1,4 @@ -import { Component, createElement } from 'react' +import {Component, createElement} from 'react'; /** * Creates a component class that renders the given Material UI component @@ -10,16 +10,16 @@ import { Component, createElement } from 'react' export default function createComponent(MaterialUIComponent, mapProps) { class InputComponent extends Component { getRenderedComponent() { - return this.refs.component + return this.refs.component; } render() { return createElement(MaterialUIComponent, { ...mapProps(this.props), - ref: 'component' - }) + ref: 'component', + }); } } - InputComponent.displayName = `ReduxFormMaterialUI${MaterialUIComponent.name}` - return InputComponent + InputComponent.displayName = `ReduxFormMaterialUI${MaterialUIComponent.name}`; + return InputComponent; } diff --git a/src/index.js b/src/index.js index 5fb5be7..91e2887 100755 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,12 @@ -import RadioButtonGroup from './RadioButtonGroup' -import TextField from './TextField' -import DatePicker from './DatePicker' -import TimePicker from './TimePicker' -import Checkbox from './Checkbox' -import Slider from './Slider' -import Toggle from './Toggle' -import SelectField from './SelectField' -import AutoComplete from './AutoComplete' +import AutoComplete from './AutoComplete'; +import Checkbox from './Checkbox'; +import DatePicker from './DatePicker'; +import RadioButtonGroup from './RadioButtonGroup'; +import SelectField from './SelectField'; +import Slider from './Slider'; +import TextField from './TextField'; +import TimePicker from './TimePicker'; +import Toggle from './Toggle'; export { AutoComplete, @@ -17,5 +17,5 @@ export { SelectField, Slider, TextField, - Toggle -} + Toggle, +}; diff --git a/src/mapError.js b/src/mapError.js index 9c090b4..158fb06 100755 --- a/src/mapError.js +++ b/src/mapError.js @@ -1,4 +1,13 @@ -const mapError = ({ meta: { touched, error, warning } = {}, input: { ...inputProps }, ...props }, errorProp = 'errorText') => - touched && (error || warning) ? { ...props, ...inputProps, [errorProp]: error || warning } : { ...inputProps, ...props } +const mapError = ( + {meta: {touched, error, warning} = {}, input: {...inputProps}, ...props}, + errorProp = 'errorText', +) => + (touched && (error || warning) + ? { + ...props, + ...inputProps, + [errorProp]: error || warning, + } + : {...inputProps, ...props}); -export default mapError +export default mapError;