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 violated by the modules, but this is not detected by the specs
// containers/form_container.js
import Form from '../components/form_component';
// The container passes a 'username' prop (type: string) to Form
export const mapStateToProps = state => ({ username: state.username });
export connect(mapStateToProps)(Form);
// components/form_component.js
import PropTypes from 'prop-types';
import React from 'react';
import FinalConfirmation from './final_confirmation_component';
const Form = class extends React.Component {
render() {
// Form passes whatever props it receives to FinalConfirmation
<FinalConfirmation {...this.props} />
};
};
// Form expects to receive an 'email' prop (type: string) from the container
Form.propTypes = {
email: 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.user.name}
</p>
};
};
// FinalConfirmation expects to receive a 'username' prop (type: object) from Form
FinalConfirmation.propTypes = {
username: PropTypes.shape({
name: PropTypes.string.isRequired,
});
};
export default FinalConfirmation;
// spec/containers/form_container_spec.js
import { mapStateToProps } from '../../containers/form_container';
// The test will pass despite sending unexpected props to Form
describe('form container', () => {
it('should pass down the email', () => {
const state = { username: 'adamadeus' };
const props = mapStateToProps(state);
expect(props.username).to.equal('amadeus');
});
});;
// spec/components/form_component_spec.js
import { shallow } from 'enzyme';
import Form from '../../components/form_component';
// The test will pass despite sending unexpected props to FinalConfirmation
describe('Form component', => {
describe('final confirmation', () => {
it('should pass down the username', () => {
const props = { email: 'amadeus@example.com' };
const component = shallow(<Form {...props}/>);
expect(component.find('FinalConfirmation').props().email).to.equal('amadeus@example.com');
});
});
});
// spec/components/final_confirmation_spec.js
import { shallow } from 'enzyme';
import FinalConfirmation from '../../components/final_confirmation_component';
// The test will pass because the test, unlike Form, sends the expected props to FinalComponent
describe('FinalConfirmation component', => {
it('should confirm the username', () => {
const props = { user: { name: '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.