Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-Authored-By: Jérémie Picard <[email protected]>
  • Loading branch information
FBerthelot and Osirisxxl authored Jun 6, 2019
1 parent b3115bb commit 5d05ad7
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions website/docs/philosophy.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ Before introducing the way you can test your front-end application, we need to s
Component-test-utils assumes these approximative definitions well-fitted for component testing:

- _Unit Test_: Test that stay in memory. (No access to: HTTP, File System, ...)
- _Integration test_: Test that can access to other things than memory (Network).
- _Integration test_: Test that can access to other things than memory (Network, I/O).
- _End to End test_: It's basically an integration test with a special rule. No Mock or Stub allowed.

You can do both unit and integration test with component test-utils.
The only test type you cannot do is end-to-end testing because component-test-util is basically a mock of your favorite framework.
The only test type you cannot do is end-to-end testing because component-test-utils is basically a mock of your favorite framework.

### Component

Expand All @@ -31,9 +31,9 @@ This component can receive parameters just like a function. Usually those parame

Those props can produce a different view according to the props value.

So no matter the framework you use, the easiest to write is to test how the view is rendered according to the props you give.
As the render only depends on the props, no matter the framework you use, the easiest is to write tests to assert the view is rendered according to the props you give.

This can easily achieved with component-test-utils. For example, if you consider testing a like button:
This can easily be achieved with component-test-utils. For example, if you consider testing a like button:

```js
describe('like button component', () => {
Expand All @@ -53,16 +53,16 @@ describe('like button component', () => {

### Statefull component

Unfortunately, component is a bit more complex sometimes. Sometimes component have is own state.
Let's taking the previous example, imagine the like button as different style if user have liked and if it's not.
Unfortunately, components can sometimes be a bit more complex. For example when they have their own state.
Considering the previous example, imagine the like button has different styles depending on whether or not the user have liked the content related.

As component-test-utils consider component as a black box, you cannot modify or access internal state of your component.
As component-test-utils consider component as a black box, you cannot modify or access its internal state.

Instead, you have to trigger event from the view itself !
Instead, you have to trigger an event from the view itself !

![Statefull component](/img/component_state.gif)

For example, if you want testing the different styling of your like button :
For example, if you want to test the different styles of your like button :

```javascript
describe('like button style', () => {
Expand All @@ -81,7 +81,7 @@ describe('like button style', () => {

component.querySelector('button').dispatchEvent('click');

expect(component.html().querySelector('button').props.class).not.toContain(
expect(component.html().querySelector('button').props.class).toContain(
'liked'
);
});
Expand All @@ -90,7 +90,7 @@ describe('like button style', () => {

### Component can emit event

**Important: As only react is supported right now, theses feature are not yet implemented because react don't need it**
**Important: React being the only rendering library supported for now, these features are not implemented yet as they're not needed in react**

As component

Expand All @@ -100,7 +100,7 @@ As component
describe('like button - onLike event', () => {
it('should emit onClick Event', () => {
const spy = createSpy();
// const spy = jest.fn(); on jest
// const spy = jest.fn(); using jest
const component = shallow(Component, {events: {onLike}});

component.querySelector('button').dispatchEvent('click');
Expand All @@ -110,7 +110,7 @@ describe('like button - onLike event', () => {
});
```

### Component sometimes have more than props
### Component with multiple props

**Important: As only react is supported right now, theses feature are not yet implemented because react don't need it**

Expand Down

0 comments on commit 5d05ad7

Please sign in to comment.