Skip to content

Commit

Permalink
Add username / password fields to UserRegistration component
Browse files Browse the repository at this point in the history
  • Loading branch information
hotblac committed Jul 28, 2018
1 parent 2fa7b7a commit 2c3199c
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 3 deletions.
11 changes: 10 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ import './App.css';
import {UserRegistration} from "./UserRegistration";

class App extends Component {

constructor(props) {
super(props);
}

handleUserRegistration = (username, password) => {
alert('New user registered: ' + username);
}

render() {
return (
<div className="App">
Expand All @@ -14,7 +23,7 @@ class App extends Component {
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<UserRegistration/>
<UserRegistration onSubmit={this.handleUserRegistration}/>
</div>
);
}
Expand Down
27 changes: 26 additions & 1 deletion src/UserRegistration.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
import React, { Component } from 'react';

export class UserRegistration extends Component {

constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
}

handleInputChange = (event) => {
const target = event.target;
this.setState({
[target.name]: target.value
});
};

handleSubmit = () => {
this.props.onSubmit(this.state.username, this.state.password);
};

render() {
return (
<div>TODO</div>
<div>
<input name="username" type={'text'} className={'username'} onChange={this.handleInputChange}/>
<input name="password" type={'password'} className={'password'} onChange={this.handleInputChange}/>
<button onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}
34 changes: 33 additions & 1 deletion src/UserRegistration.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,40 @@ import { shallow } from 'enzyme';
import {UserRegistration} from "./UserRegistration";

describe ('<UserRegistration/>', () => {

const username = 'username';
const password = 'password';
const onSubmit = jest.fn();

it('renders', () => {
const wrapper = shallow(<UserRegistration />);
const wrapper = shallow(<UserRegistration/>);
expect(wrapper).toBeDefined();
});

it('notifies caller of username and password', () => {
const wrapper = shallow(<UserRegistration onSubmit={onSubmit}/>);
const usernameField = wrapper.find('input.username');
const passwordField = wrapper.find('input.password');
const submitButton = wrapper.find('button');

usernameField.simulate('change', stubEvent(usernameField, username));
passwordField.simulate('change', stubEvent(passwordField, password));
submitButton.simulate('click');

expect(onSubmit).toBeCalledWith(username, password);
});
});

/**
* Stubbed event object suitable for event simulatrion.
* As we use shallow rendering, we don't get real DOM events.
* This assumes that we use the named input handler pattern:
* @link https://reactjs.org/docs/forms.html#handling-multiple-inputs
*/
function stubEvent(node, value) {
const name = node.prop('name');
return {target: {
name: name,
value: value
}};
};

0 comments on commit 2c3199c

Please sign in to comment.