improving test and documentation for Link

README.md

@@ -10,7 +10,9 @@ npm install capiroute --save
 ```
 
 ---
-## Example using React
+## router
+
+### Example using React
 
 ```javascript
 // index.js
@@ -46,8 +48,7 @@ router.subscribe( () => {
 });
 ```
 
----
-## API
+### API
 
 * **subscribe(function)**: call function on every route change.
 
@@ -106,7 +107,7 @@ router.subscribe( () => {
     // output: { type: 'completed' }
     ```
 
-* **hasQuery()**: returns if query string exists or not
+* **hasQueryString()**: returns if query string exists or not
 
     ```javascript
     // considering route /tasks?type=completed
@@ -128,4 +129,49 @@ router.subscribe( () => {
 
     ```javascript
     router.dispatch();
-    ```
+    ```
+
+## Link
+
+### Example
+
+```javascript
+import React from 'react';
+
+// Element create a link to /tasks?type=archived and log to console on click
+const MyLink = () => (
+    <Link to="/tasks" queryTo={{ type: 'archived' }} onClick={{console.log('clicked')}} />
+);
+
+export default MyLink;
+```
+
+### props
+
+* **to**: define which route to goto
+
+```javascript
+// link to /tasks
+<Link to="/tasks" />
+```
+
+* **queryTo**: add queryString to URL
+
+```javascript
+// link to current route appended with ?type=archived
+<Link queryTo={{ type: 'archived' }} />
+```
+
+* **onClick**: append click event
+
+```javascript
+// will log to console on click
+<Link onClick={{ console.log("clicked") }} />
+```
+
+* **keepQuery**: keep current queryString on route change
+```javascript
+// considering current URL /?type=archived
+// should link to /tasks?type=archived
+<Link to="/tasks" keepQuery />
+```

package.json

@@ -27,12 +27,17 @@
   "homepage": "https://github.com/calimaborges/capiroute#readme",
   "devDependencies": {
     "babel-cli": "^6.24.0",
+    "babel-jest": "^19.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-react-jsx": "^6.23.0",
     "babel-preset-env": "^1.3.2",
     "coveralls": "^2.13.0",
+    "enzyme": "^2.8.0",
     "jest": "^19.0.2",
     "np": "^2.13.1",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-test-renderer": "^15.4.2",
     "watch": "^1.0.2"
   },
   "dependencies": {

src/Link.js

@@ -17,14 +17,15 @@ const handleLink = (to, queryTo, onClick, keepQuery) => event => {
 const Link = ({ to, onClick, keepQuery, queryTo, children, ...props}) => (
     <a href={to || "/"}
         onClick={handleLink(to, queryTo, onClick, keepQuery)}
-        {...props}>
+       {...props}>
         {children}
     </a>
 );
 
 Link.propTypes = {
     to: React.PropTypes.string,
-    keepQuery: React.PropTypes.any
+    queryTo: React.PropTypes.object,
+    keepQuery: React.PropTypes.bool
 };
 
 export default Link;

test/Link.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import Link from '../src/Link';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+
+import { setCurrentUrl } from './helper.lib';
+
+test('should be rendered correctly', () => {
+    const component = renderer.create(
+        <Link to="/about">About</Link>
+    );
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('should call goto if prop "to" is set', () => {
+    const component = shallow(
+        <Link to="/about">About</Link>
+    );
+
+    const oldPushState = window.history.pushState;
+    const oldOnPopState = window.onpopstate;
+    window.history.pushState = jest.fn();
+    window.onpopstate = jest.fn();
+
+    component.find('a').simulate('click', { preventDefault() {} });
+
+    // FIXME: should mock router
+    expect(window.history.pushState.mock.calls.length).toBe(1);
+    expect(window.history.pushState.mock.calls[0][2]).toBe('/about');
+    expect(window.onpopstate.mock.calls.length).toBe(1);
+
+    window.history.pushState = oldPushState;
+    window.onpopstate = oldOnPopState;
+});
+
+test('should call onClick if it is set', () => {
+    let counter = 0;
+    const component = shallow(
+        <Link onClick={() => counter++}>About</Link>
+    );
+
+    component.find('a').simulate('click', { preventDefault() {} });
+
+    expect(counter).toBe(1);
+});
+
+test('should set queryString if prop "queryTo" is set', () => {
+    const component = shallow(
+        <Link queryTo={{ type: 'test' }}>About</Link>
+    );
+
+    setCurrentUrl('http://www.example.com/tasks');
+    const oldPushState = window.history.pushState;
+    const oldOnPopState = window.onpopstate;
+    window.history.pushState = jest.fn();
+    window.onpopstate = jest.fn();
+
+    component.find('a').simulate('click', { preventDefault() {} });
+
+    // FIXME: should mock router
+    expect(window.history.pushState.mock.calls.length).toBe(1);
+    expect(window.history.pushState.mock.calls[0][2]).toBe('/tasks?type=test');
+    expect(window.onpopstate.mock.calls.length).toBe(1);
+
+    window.history.pushState = oldPushState;
+    window.onpopstate = oldOnPopState;
+});
+
+test('should set keep query if prop "keepQuery" is set', () => {
+    const component = shallow(
+        <Link to="/tasks" keepQuery>About</Link>
+    );
+
+    setCurrentUrl('http://www.example.com/?type=test');
+    const oldPushState = window.history.pushState;
+    const oldOnPopState = window.onpopstate;
+    window.history.pushState = jest.fn();
+    window.onpopstate = jest.fn();
+
+    component.find('a').simulate('click', { preventDefault() {} });
+
+    // FIXME: should mock router
+    expect(window.history.pushState.mock.calls.length).toBe(1);
+    expect(window.history.pushState.mock.calls[0][2]).toBe('/tasks?type=test');
+    expect(window.onpopstate.mock.calls.length).toBe(1);
+
+    window.history.pushState = oldPushState;
+    window.onpopstate = oldOnPopState;
+});

test/__snapshots__/Link.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should be rendered correctly 1`] = `
+<a
+  href="/about"
+  onClick={[Function]}
+>
+  About
+</a>
+`;