Skip to content

Commit e1ddf35

Browse files
marcodearaujomarcodearaujo
committed
Add Client View
1 parent 4d8b4ee commit e1ddf35

File tree

4 files changed

+147
-25
lines changed

4 files changed

+147
-25
lines changed

‎app/components/Client/Profile/Client.js‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { CardStack, Card } from 'react-cardstack';
23
import { Link } from 'react-router'
34

45
import ClientService from 'services/Client'
@@ -13,15 +14,15 @@ class Client extends React.Component
1314
client : null,
1415
error : ''
1516
};
16-
this.getClients(this.props.params.id);
17+
this.getClient(this.props.params.id);
1718
}
1819

19-
getClients(id) {
20-
ClientService.getClients(id).then((response) => {
20+
getClient(id) {
21+
ClientService.getClient(id).then((response) => {
2122
this.setState({client: response.data.client.shift()});
2223
}).catch((error) => {
2324
this.setState({error: 'Error Found: Trying get client'});
24-
if (error.response) {
25+
if (typeof error.response.data.error !== 'undefined') {
2526
this.setState({error: error.response.data.error});
2627
}
2728
});
@@ -44,30 +45,22 @@ class Client extends React.Component
4445
<img src="https://placehold.it/256x256" />
4546
</div>
4647
</div>
47-
<div className="column is-4 name">
48+
<div className="column is-6 name">
4849
<p>
4950
<span className="title is-bold color-black">
5051
<strong>{this.state.client.name}</strong>
5152
</span>
5253
</p>
5354
<p className="tagline">
54-
{this.state.client.address} - {this.state.client.city}
55+
{this.state.client.address}
5556
</p>
5657
<p>
57-
<strong>{this.state.client.area._id}</strong>
58+
<strong>{this.state.client.city}</strong>
5859
</p>
5960
</div>
60-
<div className="column is-2 followers has-text-centered">
61-
<p className="stat-val">129k</p>
62-
<p className="stat-key">followers</p>
63-
</div>
64-
<div className="column is-2 following has-text-centered">
65-
<p className="stat-val">2k</p>
66-
<p className="stat-key">following</p>
67-
</div>
68-
<div className="column is-2 likes has-text-centered">
69-
<p className="stat-val">29</p>
70-
<p className="stat-key">likes</p>
61+
<div className="column is-4 followers has-text-centered">
62+
<p className="stat-val">Area</p>
63+
<p className="stat-key"><strong>{this.state.client.area._id}</strong></p>
7164
</div>
7265
</div>
7366
</div>

‎app/services/Client.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,28 @@ import axios from 'axios';
33
import { HOST } from 'constants/Server';
44

55
const Client = {
6-
getClients(id = null) {
6+
7+
getClients() {
8+
let url = [HOST, 'api', 'v1', 'client'];
9+
710
let config = {
811
headers: {
9-
Authorization : localStorage.token
12+
Authorization : window.localStorage.getItem('token')
1013
}
1114
};
15+
return axios.get(url.join('/'), config);
16+
},
17+
18+
getClient(id) {
19+
1220
let url = [HOST, 'api', 'v1', 'client'];
13-
if (id) {
14-
url.push(id);
15-
}
21+
url.push(id);
22+
23+
let config = {
24+
headers: {
25+
Authorization : window.localStorage.getItem('token')
26+
}
27+
};
1628
return axios.get(url.join('/'), config);
1729
}
1830
};

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"react-router": "^2.8.1"
1313
},
1414
"devDependencies": {
15+
"axios-mock-adapter": "^1.7.1",
1516
"babel-core": "^6.17.0",
1617
"babel-jest": "^16.0.0",
1718
"babel-loader": "^6.2.5",
@@ -47,8 +48,8 @@
4748
],
4849
"collectCoverage": true,
4950
"moduleNameMapper": {
50-
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
51-
"\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
51+
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
52+
"\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
5253
}
5354
},
5455
"author": "",

‎tests/Profile.Client.test.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
jest.enableAutomock();
2+
jest.dontMock('components/Client/Profile/Client');
3+
jest.dontMock('components/Error/Error');
4+
jest.dontMock('react');
5+
jest.dontMock('axios');
6+
jest.dontMock('axios-mock-adapter');
7+
jest.dontMock('enzyme');
8+
jest.dontMock('services/Client');
9+
10+
describe('Test Client', () => {
11+
require('../tests/__mocks__/LocalStorageMock');
12+
13+
const React = require('react');
14+
const Enzyme = require('enzyme');
15+
const shallow = Enzyme.shallow;
16+
17+
let axios = require('axios');
18+
let MockAdapter = require('axios-mock-adapter');
19+
20+
it('Client should show mocked data', (done) => {
21+
22+
let id = '123abc';
23+
let response = {
24+
client: [
25+
{
26+
id: id,
27+
name: 'Jon Snow',
28+
address: '7 Street',
29+
city: 'Winterfell',
30+
area: {
31+
_id: 'Center',
32+
parents: 'Center'
33+
}
34+
},
35+
]
36+
};
37+
let Client;
38+
let component;
39+
let mockAdapter = new MockAdapter(axios);
40+
41+
mockAdapter.onGet('http://localhost:3000/api/v1/client/' + id).reply(200, response);
42+
43+
Client = require('components/Client/Profile/Client').default;
44+
45+
component = shallow(
46+
<Client params={ { id: id} }/>
47+
);
48+
49+
setTimeout(() => {
50+
51+
expect(component.find('.name p').at(0).text()).toEqual('Jon Snow');
52+
expect(component.find('.name p').at(1).text()).toEqual('7 Street');
53+
expect(component.find('.name p').at(2).text()).toEqual('Winterfell');
54+
expect(component.find('.followers p').at(0).text()).toEqual('Area');
55+
expect(component.find('.followers p').at(1).text()).toEqual('Center');
56+
expect(component.find('.nav-menu span a').at(0).text()).toEqual('Visited');
57+
expect(component.find('.nav-menu span a').at(1).text()).toEqual('Update');
58+
expect(component.find('.nav-menu span a').at(2).text()).toEqual('Schedule');
59+
expect(component.find('.nav-menu span a').at(3).text()).toEqual('Delete');
60+
done();
61+
}, 0);
62+
});
63+
64+
it('Client should show error message', (done) => {
65+
66+
let id = '123abc';
67+
let response = { error:"Client Not Found" };
68+
let promises = [];
69+
let Client;
70+
let component;
71+
let mockAdapter = new MockAdapter(axios);
72+
73+
mockAdapter.onGet('http://localhost:3000/api/v1/client/' + id).reply(404, response);
74+
75+
Client = require('components/Client/Profile/Client').default;
76+
77+
component = shallow(
78+
<Client params={ { id: id} }/>
79+
);
80+
81+
setTimeout(() => {
82+
83+
component.update();
84+
expect(component.render().text()).toEqual('Client Not Found');
85+
done();
86+
}, 0);
87+
});
88+
89+
it('Client should show default error message', (done) => {
90+
91+
let id = '123abc';
92+
let response = {};
93+
let promises = [];
94+
let Client;
95+
let component;
96+
let mockAdapter = new MockAdapter(axios);
97+
98+
mockAdapter.onGet('http://localhost:3000/api/v1/client/' + id).reply(503, response);
99+
100+
Client = require('components/Client/Profile/Client').default;
101+
102+
component = shallow(
103+
<Client params={ { id: id} }/>
104+
);
105+
106+
setTimeout(() => {
107+
108+
component.update();
109+
expect(component.render().text()).toEqual('Error Found: Trying get client');
110+
done();
111+
}, 0);
112+
});
113+
114+
});
115+
116+

0 commit comments

Comments
 (0)