* Create component to list areas

 * Create test to cover the component list area

 * Changing the test of menu

 * Adding item of navigation

Author: Gabriel Goncalves

app/App.js

@@ -6,7 +6,8 @@ import 'style-loader!css-loader!less-loader!font-awesome-webpack/font-awesome-st
 
 import iClientComponent from 'components/IClient/IClient'
 import HomeComponent from 'components/Home/Home'
-import AreaComponent from 'components/Area/Area'
+import AreaComponent from 'components/Area/List/Area'
+import LastVisitsComponent from 'components/Area/Area'
 import ListClientComponent from 'components/Client/List/Client'
 import ProfileClientComponent from 'components/Client/Profile/Client'
 import SaveClientComponent from 'components/Client/Save/Client'
@@ -25,6 +26,7 @@ ReactDOM.render(
             <Route path="area" component={CreateAreaComponent} />
             <Route path="visit/:clientId/" component={CreateVisitComponent} />
             <Route path="visit/:id" component={AreaComponent} />
+            <Route path="lastVisits" component={LastVisitsComponent} />
         </Route>
     </Router>,
     document.getElementById('app')

app/components/Area/Area.js

@@ -57,19 +57,6 @@ class Area extends React.Component
         }
         return (
             <div className="container hello">
-                <div className="level header">
-                    <div className="level-left">
-                        <h2 className="title is-2">iClient</h2>
-                    </div>
-                    <div className="level-right">
-                        <Link to='/area' className="button is-info is-medium">
-                            <span className="icon">
-                                <i className="fa fa-plus"></i>
-                            </span>
-                            <span>New Area</span>
-                        </Link>
-                    </div>
-                </div>
                 { this.state.areas }
             </div>
         );

app/components/Area/List/Area.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router'
+
+import AreaService from 'services/Area'
+
+import Error from 'components/Error/Error'
+
+class Area extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            areas : null,
+            error : ''
+        };
+        this.getAreas();
+    }
+
+    getAreas() {
+        AreaService.getAll().then((response) => {
+            this.setState({areas: response.data.areas});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get area'});
+            if (typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.areas) {
+            return <div>Loading...</div>;
+        }
+        const areaList = this.state.areas.map((area, key) => {
+            let line = ((key % 2) ? 'is-success' : 'is-info');
+            return (
+                <tr key={key}>
+                    <td>
+                        { area._id }
+                    </td>
+                </tr>
+            );
+        });
+
+        return (
+            <section className="">
+                <div className="container hello">
+                    <div className="level header">
+                        <div className="level-left">
+                            <h2 className="title is-2">Areas</h2>
+                        </div>
+                        <div className="level-right">
+                            <Link to='/area' className="button is-info is-medium">
+                                <span className="icon">
+                                    <i className="fa fa-plus"></i>
+                                </span>
+                                <span>New Area</span>
+                            </Link>
+                        </div>
+                    </div>
+                    <table className="table">
+                        <tbody>
+                            { areaList }
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default Area;

app/components/Menu/Menu.js

@@ -14,6 +14,7 @@ class Menu extends React.Component{
             links: [
                 [ '/', 'Home'],
                 ['/clients', 'Clients'],
+                ['/lastVisits', 'Last Visits'],
                 ['/areas', 'Areas']
             ]
         };

tests/List.Area.test.js

@@ -0,0 +1,105 @@
+jest.enableAutomock();
+jest.dontMock('components/Area/List/Area');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Area');
+
+describe('Test Area', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
+    it('Area should show error message', (done) => {
+
+        let response = {error:"Area Not Found"};
+        let Area;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(404, response);
+
+        Area = require('components/Area/List/Area').default;
+
+        component = shallow(
+            <Area />
+        );
+
+        setTimeout(() => {
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Area Not Found');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+
+        }, 0);
+    });
+
+    it('Area should show default error message', (done) => {
+
+        let response = {};
+        let Area;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(503, response);
+
+        Area = require('components/Area/List/Area').default;
+
+        component = shallow(
+            <Area />
+        );
+
+        setTimeout(() => {
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Error Found: Trying get area');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Area should show mocked data', (done) => {
+
+        let response = {
+            areas: [
+                {_id: 'South', parent: 'Center', ancestors: 'Center'},
+                {_id: 'North', parent: 'Center', ancestors: 'Center'},
+            ]
+        };
+        let Area;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(200, response);
+
+        Area = require('components/Area/List/Area').default;
+
+        component = shallow(
+            <Area />
+        );
+
+        setTimeout(() => {
+            try {
+                component.update();
+                expect(component.find('tbody td').at(0).text()).toEqual('South');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+});
+

tests/Menu.test.js

@@ -21,6 +21,7 @@ describe('Test Menu', () => {
         let expectedLinks = [
             ['/', 'Home'],
             ['/clients', 'Clients'],
+            ['/lastVisits', 'Last Visits'],
             ['/areas', 'Areas'],
         ];
 
@@ -55,7 +56,7 @@ describe('Test Menu', () => {
         expect(window.localStorage.getItem('token')).toEqual('test_menu');
 
         expect(component.childAt(0).text()).toEqual('<LinksApp />');
-        expect(component.childAt(0).render().find('.nav-item.is-tab').length).toEqual(3);
+        expect(component.childAt(0).render().find('.nav-item.is-tab').length).toEqual(4);
         expect(component.childAt(1).text()).toEqual('Logout');
         done();
     });