diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ea74aa6b8..6402f8a48 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -15,6 +15,9 @@ If you notice any bugs in the app, see some code that can be improved, or have f If you want to open a PR that fixes a bug or adds a feature, then we can't thank you enough! It is definitely appreciated if an issue has been created before-hand so it can be discussed first. +## Unit Tests +Please refer to [Tests Guide](TESTS.md) + ### Working on issues Please feel free to take on any issue that's currently open. Feel free to resolve any issue that you would enjoy working on even if it happens to be a low priority. diff --git a/TESTS.md b/TESTS.md new file mode 100644 index 000000000..e42df2e51 --- /dev/null +++ b/TESTS.md @@ -0,0 +1,84 @@ +# Test Guidelines +We're using [Jest](https://facebook.github.io/jest/) and [Enzyme](https://github.com/airbnb/enzyme) for our unit tests. + +First of all, what we want with our unit tests is to ensure that our components behave the way we want. We're testing each component as a single unit. You should test your components isolated from the rest of the application (no redux involved for example) + +## An Example + +Let's say we have a component like + +```js +class TheComponent extends React.Component { + foo = name => { + return `the ${name}`; + } + render() { + return( + + { + this.props.isOpen && + Foo + } + {this.props.name} + {this.foo()} + + ); + } +} +``` + +We would expect a couple of scenarios that test: +1. `the component should render the Bar component when isOpen is truthy` +2. `the component should not render the Bar component when isOpen is falsy` +3. `the method foo should return 'the NAME'` + +As you can see, we didn't include a scenario that says something like `the component should render the name prop`, that's because testing that scenario will be like testing if React works. So please, avoid that kind of tests. + +## Tests folder structure + +All the test files live under `/__tests__/`. In that folder you'll find everything you need to keep working on tests of create new ones. If you're adding a test for a component, you should find/create its file under `/__tests__/components/the-component.js` + +## Tests file conventions + +A test file should look like: + +```js +import React from 'react'; +import { shallow } from 'enzyme'; +import { TheComponent, Bar } from 'components'; // this may change depending on WHAT you want to test. utils, actions, components, etc... + +// Default props of the component +const defaultProps = { + isOpen: false, + name: 'foo' +}; + +describe('', () => { // Usually, is the name of the component. + it('should render the Bar component when isOpen is truthy', () => { + const wrapper = shallow( + + ); + + expect(wrapper.find(Bar).length).toBe(1); + }); + + it('should not render the Bar component when isOpen is falsy', () => { ... }); + + it('should return 'the NAME' when foo received "name" as a param', () => { ... }); + + // ...add more tests accordingly + +}); +``` + +## Considerations +1. Try to always use `shallow` instead of `render`, it's faster and only renders your component 1 level deep (real unit tests) +2. Use the `defaultProps` object so you don't have to write all the props for each test +3. Try to not nest `describe` blocks unless it's absolutely necessary +4. Don't test unecessary stuff like we mentioned above +5. Every `it` must start with `should...` to keep things consistent + +If you still have questions, don't hesitate to ask.