TouchInstinct
/
formsy-react
302
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pull request for isChanged

This commit is contained in:
christianalfoni 2015-05-22 13:21:03 +02:00
parent cca4973382
commit 23f91c4373
4 changed files with 111 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/index.html
View File

@ -3,6 +3,7 @@
<title>Formsy Test</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>

34
build/test.js
View File

@ -1,4 +1,36 @@
var React = require('react');
var Formsy = require('./../src/main.js');
// Write your test code here
var Input = React.createClass({
mixins: [Formsy.Mixin],
render: function () {
return <input disabled={this.isFormDisabled()} />
}
});
var FormApp = React.createClass({
getInitialState: function () {
return {
bool: true
};
},
flip: function () {
this.setState({
bool: !this.state.bool
});
},
render: function () {
return (
<Formsy.Form disabled={this.state.bool}>
{this.state.bool ?
<Input name="foo" /> :
<Input name="bar" />
}
</Formsy.Form>
);
}
});
React.render(<FormApp />, document.getElementById('app'));

62
specs/Formsy-spec.jsx
View File

@ -613,4 +613,66 @@ describe('Formsy', function () {
expect(input.getValue()).toBe(true);
});
});
describe('.isChanged()', function() {
var onChange;
var TestInput = React.createClass({
mixins: [Formsy.Mixin],
changeValue: function (event) {
this.setValue(event.target.value);
},
render: function () {
return <input value={ this.getValue() } onChange={ this.changeValue } />
}
});
var TestForm = React.createClass({
getDefaultProps: function() {
return {
inputs: [],
};
},
render: function () {
var builtInputs = [];
var inputs = this.props.inputs;
for (var i=0; i < inputs.length; i++) {
var input = inputs[i];
builtInputs.push(<TestInput { ...input } key={ input.name } />);
}
return <Formsy.Form ref='formsy' onChange={ onChange }>
{ builtInputs }
{ this.props.children }
</Formsy.Form>;
}
});
beforeEach(function() {
onChange = jasmine.createSpy("onChange");
});
it('initially returns false', function() {
var form = TestUtils.renderIntoDocument(<TestForm inputs={ [{name: 'one', value: 'foo'}] }/>);
expect(form.refs.formsy.isChanged()).toEqual(false);
expect(onChange).not.toHaveBeenCalled();
});
it('returns true when changed', function() {
var form = TestUtils.renderIntoDocument(<TestForm inputs={ [{name: 'one', value: 'foo'}] }/>);
var input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
TestUtils.Simulate.change(input.getDOMNode(), {target: {value: 'bar'}});
expect(form.refs.formsy.isChanged()).toEqual(true);
expect(onChange).toHaveBeenCalledWith({one: 'bar'}, true);
});
it('returns false if changes are undone', function() {
var form = TestUtils.renderIntoDocument(<TestForm inputs={ [{name: 'one', value: 'foo'}] }/>);
var input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
TestUtils.Simulate.change(input.getDOMNode(), {target: {value: 'bar'}});
expect(onChange).toHaveBeenCalledWith({one: 'bar'}, true);
TestUtils.Simulate.change(input.getDOMNode(), {target: {value: 'foo'}});
expect(form.refs.formsy.isChanged()).toEqual(false);
expect(onChange).toHaveBeenCalledWith({one: 'foo'}, false);
});
});
});

16
src/main.js
View File

@ -123,6 +123,20 @@ Formsy.Form = React.createClass({
}.bind(this));
},
// Checks if the values have changed from their initial value
isChanged: function() {
return !utils.isSame(this.getPristineValues(), this.getCurrentValues());
},
getPristineValues: function() {
var inputs = this.inputs;
return Object.keys(inputs).reduce(function (data, name) {
var component = inputs[name];
data[name] = component.props.value;
return data;
}, {});
},
// Go through errors from server and grab the components
// stored in the inputs map. Change their state to invalid
// and set the serverError message
@ -213,7 +227,7 @@ Formsy.Form = React.createClass({
// Trigger onChange
if (this.state.canChange) {
this.props.onChange(this.getCurrentValues());
this.props.onChange(this.getCurrentValues(), this.isChanged());
}
var validation = this.runValidation(component);