Updated the readme.md and grouped the new tests

README.md

@@ -17,44 +17,6 @@ npm install react2angular --save
 ```js
 import { Component } from 'react'
 
-class MyComponent extends Component {
-  render() {
-    return <div>
-      <p>FooBar: {this.props.fooBar}</p>
-      <p>Baz: {this.props.baz}</p>
-    </div>
-  }
-}
-```
-
-### 2. Expose it to Angular
-
-```js
-import { react2angular } from 'react2angular'
-
-angular
-  .module('myModule', [])
-  .component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))
-```
-
-### 3. Use it in your Angular 1 code
-
-```html
-<my-component
-  foo-bar="3"
-  baz="'baz'"
-></my-component>
-```
-
-## Usage 2 (Alternative)
-
-As an alternative you can specify the propTypes in your component, and it'll be use automatically as the bindings
-
-### 1. Create a React component
-
-```js
-import { Component } from 'react'
-
 class MyComponent extends Component {
   static propTypes = {
     fooBar: React.PropTypes.number.isRequired,
@@ -72,6 +34,8 @@ class MyComponent extends Component {
 
 ### 2. Expose it to Angular
 
+When propTypes are specified, they'll be used as the component's bindings, so it's no necessary to add them again.
+
 ```js
 import { react2angular } from 'react2angular'
 
@@ -80,6 +44,13 @@ angular
   .component('myComponent', react2angular(MyComponent))
 ```
 
+As an alternative you can pass the bindings and they'll override the use of propTypes.
+
+```js
+  // ...  
+  .component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))
+```
+
 ### 3. Use it in your Angular 1 code
 
 ```html

test.tsx

@@ -69,33 +69,35 @@ describe('react2angular', () => {
     })
   })
 
-  it('should give an angular component', () => {
-    expect(TestAngularOne.bindings).not.toBe(undefined)
-    expect(TestAngularOne.controller).not.toBe(undefined)
-  })
-
-  it('should use the propTypes when present and no bindingNames were specified', () => {
-    const reactAngularComponent = react2angular(TestThreeWithPropTypes)
-
-    expect(reactAngularComponent.bindings).toEqual({
-      bar: '<',
-      baz: '<',
-      foo: '<'
+  describe('initialization', () => {
+    it('should give an angular component', () => {
+      expect(TestAngularOne.bindings).not.toBe(undefined)
+      expect(TestAngularOne.controller).not.toBe(undefined)
     })
-  })
 
-  it('should use the bindingNames when present over the propTypes', () => {
-    const reactAngularComponent = react2angular(TestThreeWithPropTypes, ['foo'])
+    it('should use the propTypes when present and no bindingNames were specified', () => {
+      const reactAngularComponent = react2angular(TestThreeWithPropTypes)
 
-    expect(reactAngularComponent.bindings).toEqual({
-      foo: '<'
+      expect(reactAngularComponent.bindings).toEqual({
+        bar: '<',
+        baz: '<',
+        foo: '<'
+      })
     })
-  })
 
-  it('should have empty bindings when parameter is an empty array', () => {
-    const reactAngularComponent = react2angular(TestThreeWithPropTypes, [])
+    it('should use the bindingNames when present over the propTypes', () => {
+      const reactAngularComponent = react2angular(TestThreeWithPropTypes, ['foo'])
 
-    expect(reactAngularComponent.bindings).toEqual({})
+      expect(reactAngularComponent.bindings).toEqual({
+        foo: '<'
+      })
+    })
+
+    it('should have empty bindings when parameter is an empty array', () => {
+      const reactAngularComponent = react2angular(TestThreeWithPropTypes, [])
+
+      expect(reactAngularComponent.bindings).toEqual({})
+    })
   })
 
   describe('react classes', () => {