Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The contracts between the components and the container are enforced by the specs
// containers/form_container.js
import Form from '../components/form_component';
export const mapStateToProps = state => ({ username: state.username });
export default connect(mapStateToProps)(Form);
// components/form_component.js
import PropTypes from 'prop-types';
import React from 'react';
const Form = class extends React.Component {
render() {
<FinalConfirmation {...this.props} />
};
};
Form.propTypes = {
username: PropTypes.string.isRequired,
};
export default Form;
// components/final_confirmation_component.js
import PropTypes from 'prop-types';
import React from 'react';
const FinalConfirmation = class extends React.Component {
render() {
<p id="username">
Username: {this.props.username}
</p>;
};
};
FinalConfirmation.propTypes = {
username: PropTypes.string.isRequired,
};
export default FinalConfirmation;
// spec/containers/form_container_spec.js
import PropTypes from 'prop-types';
import { mapStateToProps } from '../../containers/form_container';
import Form from '../../components/form_component';
let error;
let props;
describe('form container', () => {
beforeAll(done => {
const state = { username: 'adamadeus' };
props = mapStateToProps(state);
});
it('should pass through the username', () =>
expect(props.username).to.equal('amadeus'));
it('should pass down valid props', () =>
expect(() => PropTypes.checkPropTypes(Form.propTypes, props)).not.to.throw());
});
});
// spec/components/form_component_spec.js
import { shallow } from 'enzyme';
import PropTypes from 'prop-types';
import Form from '../../components/form_component';
import FinalConfirmation from '../../components/final_confirmation';
let childProps;
let component;
let error;
describe('Form component', () => {
describe('final confirmation', () => {
beforeAll(done => {
const props = { username: 'amadeus' };
component = shallow(<Form {...props}/>);
childProps = component.find(FinalConfirmation).props();
});
it('should pass down the username', () =>
expect(childProps.username).to.equal('amadeus'));
it('should pass down valid props', () =>
expect(() => PropTypes.checkPropTypes(FinalConfirmation.propTypes, childProps)).not.to.throw());
});
});
// spec/components/final_confirmation_component_spec.js
import { shallow } from 'enzyme';
import FinalConfirmation from '../../components/final_confirmation_component';
describe('FinalConfirmation component', => {
it('should confirm the username', () => {
const props = { username: 'amadeus' };
const component = shallow(<FinalConfirmation {...props}/>);
expect(component.find('p#username').text()).to.equal('Username: amadeus');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.