diff --git a/website/docs/philosophy.md b/website/docs/philosophy.md index 7720270..5a6de43 100644 --- a/website/docs/philosophy.md +++ b/website/docs/philosophy.md @@ -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 @@ -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', () => { @@ -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', () => { @@ -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' ); }); @@ -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 @@ -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'); @@ -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**