Skip to content

Commit 0b5cff8

Browse files
mathieuancelinmathieuancelin
committed
Add tests to step 2
1 parent 796b19a commit 0b5cff8

18 files changed

+917
-16
lines changed

‎step-2-done/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,19 @@
1313
"babel-preset-react": "6.5.0",
1414
"babel-register": "6.7.2",
1515
"chai": "3.5.0",
16+
"enzyme": "^2.2.0",
1617
"eslint": "2.4.0",
1718
"eslint-plugin-react": "4.2.3",
1819
"jsdom": "8.1.0",
1920
"mocha": "2.4.5",
2021
"react-addons-test-utils": "0.14.7",
22+
"sinon": "^1.17.3",
2123
"webpack": "1.12.14",
2224
"webpack-dev-server": "1.14.1"
2325
},
2426
"scripts": {
2527
"lint": "eslint src",
28+
"test": "mocha --compilers js:babel-register tests/index.js",
2629
"bundle": "webpack -p --colors --progress",
2730
"start": "webpack-dev-server -d --colors --inline --content-base public",
2831
"build": "npm run lint && npm run bundle"

‎step-2-done/tests/bootstrap.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* eslint no-console: 0 */
2+
3+
import jsdom from 'jsdom';
4+
5+
export function bootstrapEnv(body = '') {
6+
const doc = jsdom.jsdom(`<!doctype html><html><body>${body}</body></html>`);
7+
const win = doc.defaultView;
8+
function propagateToGlobal(window) {
9+
for (const key in window) {
10+
if (!window.hasOwnProperty(key)) continue;
11+
if (key in global) continue;
12+
global[key] = window[key];
13+
}
14+
}
15+
global.document = doc;
16+
global.window = win;
17+
propagateToGlobal(win);
18+
// console.log('\nENV setup is done !!!');
19+
}

‎step-2-done/tests/components/regions.spec.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* eslint no-undef:0, no-unused-vars:0, react/jsx-closing-bracket-location: 0, react/jsx-max-props-per-line: 0 */
2+
3+
import React from 'react';
4+
import { expect } from 'chai';
5+
import { shallow } from 'enzyme';
6+
import sinon from 'sinon';
7+
8+
import Regions from '../../src/components/regions';
9+
10+
describe('<Regions />', () => {
11+
it('doit afficher des régions', () => {
12+
const regions = ['region 1', 'region 2', 'region 3'];
13+
const wrapper = shallow(
14+
<Regions regions={regions} />
15+
);
16+
// const component = wrapper.instance();
17+
// const clickHandler = component.handleRegionClick || wrapper.get(0).props.children[0].props.onClick;
18+
const children = wrapper.get(0).props.children;
19+
expect(wrapper.equals(
20+
<div>
21+
<div {...children[0].props}>region 1</div>
22+
<div {...children[1].props}>region 2</div>
23+
<div {...children[2].props}>region 3</div>
24+
</div>
25+
)).to.equal(true);
26+
});
27+
it('doit afficher un style différent si une régions est sélectionnée', () => {
28+
const regions = ['region 1', 'region 2', 'region 3'];
29+
const wrapper = shallow(
30+
<Regions
31+
regions={regions}
32+
selected="region 1" />
33+
);
34+
const children = wrapper.get(0).props.children;
35+
expect(wrapper.equals(
36+
<div>
37+
<div {...children[0].props} style={{ fontWeight: 'bold', backgroundColor: 'lightGrey', padding: 16 }}>region 1</div>
38+
<div {...children[1].props}>region 2</div>
39+
<div {...children[2].props}>region 3</div>
40+
</div>
41+
)).to.equal(true);
42+
});
43+
44+
it('doit gérer le click sur une région', () => {
45+
const regions = ['region 1', 'region 2', 'region 3'];
46+
const onRegionChange = sinon.spy();
47+
const wrapper = shallow(
48+
<Regions
49+
regions={regions}
50+
selected="region 1"
51+
onRegionChange={onRegionChange} />
52+
);
53+
const children = wrapper.get(0).props.children;
54+
expect(wrapper.equals(
55+
<div>
56+
<div {...children[0].props} style={{ fontWeight: 'bold', backgroundColor: 'lightGrey', padding: 16 }}>region 1</div>
57+
<div {...children[1].props}>region 2</div>
58+
<div {...children[2].props}>region 3</div>
59+
</div>
60+
)).to.equal(true);
61+
wrapper.find('div').at(3).simulate('click', { target: { textContent: '...' }});
62+
expect(onRegionChange.calledOnce).to.equal(true);
63+
});
64+
});

‎step-2-done/tests/components/wine-app.spec.js

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
/* eslint no-undef:0, no-unused-vars:1, react/jsx-closing-bracket-location: 0, react/jsx-max-props-per-line: 0 */
2+
3+
import React from 'react';
4+
import { expect } from 'chai';
5+
import { mount } from 'enzyme';
6+
7+
import WineApp from '../../src/components/wine-app';
8+
9+
const regions = ['Bordeaux', 'Bourgogne'];
10+
11+
const wines1 = [
12+
{
13+
"id": "chevrol-bel-air",
14+
"name": "Château Chevrol Bel Air",
15+
"type": "Rouge",
16+
"appellation": {"name": "Lalande-de-Pomerol", "region": "Bordeaux"},
17+
"grapes": ["Cabernet Sauvignon", "Merlot", "Cabernet Franc"]
18+
},
19+
{
20+
"id": "bel-air",
21+
"name": "Château Bel-Air",
22+
"type": "Rouge",
23+
"appellation": {"name": "Lussac-Saint-Emilion", "region": "Bordeaux"},
24+
"grapes": ["Cabernet Sauvignon", "Merlot", "Cabernet Franc"]
25+
}
26+
];
27+
28+
const wines2 = [
29+
{
30+
"id": "clarendelle",
31+
"name": "Clarendelle",
32+
"type": "Blanc",
33+
"appellation": {"name": "Bordeaux", "region": "Bordeaux"},
34+
"grapes": ["Sauvignon", "Sémillon", "Muscadelle"]
35+
},
36+
{
37+
"id": "les-hauts-de-tour-prignac",
38+
"name": "Les Hauts de Tour Prignac",
39+
"type": "Rouge",
40+
"appellation": {"name": "Médoc", "region": "Bordeaux"},
41+
"grapes": ["Cabernet Sauvignon", "Merlot"]
42+
}
43+
];
44+
45+
function promise(data) {
46+
return {
47+
then(func) {
48+
return promise(func(data));
49+
},
50+
catch() {}
51+
};
52+
}
53+
54+
window.fetch = (url) => {
55+
if (url.startsWith('/api/regions')) {
56+
return promise({ json: () => regions });
57+
}
58+
if (url.startsWith(`/api/wines?region=${regions[0]}`)) {
59+
return promise({ json: () => wines1 });
60+
}
61+
if (url.startsWith(`/api/wines?region=${regions[1]}`)) {
62+
return promise({ json: () => wines2 });
63+
}
64+
if (url.startsWith(`/api/wines/${wines1[0].id}`)) {
65+
return promise({ json: () => wines1[0] });
66+
}
67+
if (url.startsWith(`/api/wines/${wines1[1].id}`)) {
68+
return promise({ json: () => wines1[1] });
69+
}
70+
if (url.startsWith(`/api/wines/${wines2[0].id}`)) {
71+
return promise({ json: () => wines2[0] });
72+
}
73+
if (url.startsWith(`/api/wines/${wines2[1].id}`)) {
74+
return promise({ json: () => wines2[1] });
75+
}
76+
throw new Error(`Unknown URL : ${url}`);
77+
};
78+
global.fetch = window.fetch;
79+
80+
describe('<WineApp />', () => {
81+
it('doit afficher des régions', () => {
82+
const wrapper = mount(
83+
<WineApp />
84+
);
85+
86+
const foundRegions = wrapper.find('div').filterWhere(n => regions.indexOf(n.get(0).innerHTML) > -1);
87+
expect(foundRegions.length).to.equal(2);
88+
});
89+
it('doit afficher la liste des vins de la région', () => {
90+
const wrapper = mount(
91+
<WineApp />
92+
);
93+
94+
const wineNames1 = Object.keys(wines1).map(k => wines1[k].name);
95+
const foundWines1 = wrapper.find('div').filterWhere(n => wineNames1.indexOf(n.get(0).innerHTML) > -1);
96+
expect(foundWines1.length).to.equal(3); // 3 because the first wine is showed
97+
98+
const wineNames2 = Object.keys(wines2).map(k => wines2[k].name);
99+
const foundWines2 = wrapper.find('div').filterWhere(n => wineNames2.indexOf(n.get(0).innerHTML) > -1);
100+
expect(foundWines2.length).to.equal(0);
101+
});
102+
it('doit afficher le premier vin de la région', () => {
103+
const wrapper = mount(
104+
<WineApp />
105+
);
106+
107+
const firstWine = wines1[0];
108+
const Wine = wrapper.find('Wine').at(0).first();
109+
const foundName = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.name) > -1);
110+
const foundType = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.type) > -1);
111+
const foundRegion = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.region) > -1);
112+
const foundAppellation = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.name) > -1);
113+
const foundGrapes = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.grapes.join(', ')) > -1);
114+
115+
expect(foundName.length).to.equal(2); // because of root div
116+
expect(foundType.length).to.equal(2);
117+
expect(foundAppellation.length).to.equal(2);
118+
expect(foundRegion.length).to.equal(2);
119+
expect(foundGrapes.length).to.equal(2);
120+
});
121+
it('doit afficher des vins après avoir sélectionné une région', () => {
122+
const wrapper = mount(
123+
<WineApp />
124+
);
125+
126+
{
127+
const wineNames1 = Object.keys(wines1).map(k => wines1[k].name);
128+
const foundWines1 = wrapper.find('div').filterWhere(n => wineNames1.indexOf(n.get(0).innerHTML) > -1);
129+
expect(foundWines1.length).to.equal(3); // 3 because the first wine is showed
130+
131+
const wineNames2 = Object.keys(wines2).map(k => wines2[k].name);
132+
const foundWines2 = wrapper.find('div').filterWhere(n => wineNames2.indexOf(n.get(0).innerHTML) > -1);
133+
expect(foundWines2.length).to.equal(0);
134+
}
135+
136+
const region2 = wrapper.find('div').filterWhere(n => n.get(0).innerHTML === regions[1]);
137+
region2.simulate('click');
138+
139+
{
140+
const wineNames1 = Object.keys(wines1).map(k => wines1[k].name);
141+
const foundWines1 = wrapper.find('div').filterWhere(n => wineNames1.indexOf(n.get(0).innerHTML) > -1);
142+
expect(foundWines1.length).to.equal(0);
143+
144+
const wineNames2 = Object.keys(wines2).map(k => wines2[k].name);
145+
const foundWines2 = wrapper.find('div').filterWhere(n => wineNames2.indexOf(n.get(0).innerHTML) > -1);
146+
expect(foundWines2.length).to.equal(3); // 3 because the first wine is showed
147+
}
148+
});
149+
it('doit afficher le premier vin de la région après avoir sélectionné une région', () => {
150+
const wrapper = mount(
151+
<WineApp />
152+
);
153+
154+
{
155+
const firstWine = wines1[0];
156+
const Wine = wrapper.find('Wine').at(0).first();
157+
const foundName = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.name) > -1);
158+
const foundType = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.type) > -1);
159+
const foundRegion = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.region) > -1);
160+
const foundAppellation = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.name) > -1);
161+
const foundGrapes = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.grapes.join(', ')) > -1);
162+
163+
expect(foundName.length).to.equal(2); // because of root div
164+
expect(foundType.length).to.equal(2);
165+
expect(foundAppellation.length).to.equal(2);
166+
expect(foundRegion.length).to.equal(2);
167+
expect(foundGrapes.length).to.equal(2);
168+
}
169+
170+
const region2 = wrapper.find('div').filterWhere(n => n.get(0).innerHTML === regions[1]);
171+
region2.simulate('click');
172+
173+
{
174+
const firstWine = wines2[0];
175+
const Wine = wrapper.find('Wine').at(0).first();
176+
const foundName = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.name) > -1);
177+
const foundType = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.type) > -1);
178+
const foundRegion = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.region) > -1);
179+
const foundAppellation = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.name) > -1);
180+
const foundGrapes = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.grapes.join(', ')) > -1);
181+
182+
expect(foundName.length).to.equal(2); // because of root div
183+
expect(foundType.length).to.equal(2);
184+
expect(foundAppellation.length).to.equal(3);
185+
expect(foundRegion.length).to.equal(3);
186+
expect(foundGrapes.length).to.equal(2);
187+
}
188+
});
189+
it('doit afficher un vin après avoir sélectionné un nouveau vin', () => {
190+
const wrapper = mount(
191+
<WineApp />
192+
);
193+
194+
{
195+
const firstWine = wines1[0];
196+
const Wine = wrapper.find('Wine').at(0).first();
197+
const foundName = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.name) > -1);
198+
const foundType = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.type) > -1);
199+
const foundRegion = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.region) > -1);
200+
const foundAppellation = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.name) > -1);
201+
const foundGrapes = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.grapes.join(', ')) > -1);
202+
203+
expect(foundName.length).to.equal(2); // because of root div
204+
expect(foundType.length).to.equal(2);
205+
expect(foundAppellation.length).to.equal(2);
206+
expect(foundRegion.length).to.equal(2);
207+
expect(foundGrapes.length).to.equal(2);
208+
}
209+
210+
const wine2 = wrapper.find('div').filterWhere(n => n.get(0).innerHTML === wines1[1].name);
211+
wine2.simulate('click');
212+
213+
{
214+
const firstWine = wines1[1];
215+
const Wine = wrapper.find('Wine').at(0).first();
216+
const foundName = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.name) > -1);
217+
const foundType = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.type) > -1);
218+
const foundRegion = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.region) > -1);
219+
const foundAppellation = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.appellation.name) > -1);
220+
const foundGrapes = Wine.find('div').filterWhere(n => n.get(0).innerHTML.indexOf(firstWine.grapes.join(', ')) > -1);
221+
222+
expect(foundName.length).to.equal(2); // because of root div
223+
expect(foundType.length).to.equal(2);
224+
expect(foundAppellation.length).to.equal(2);
225+
expect(foundRegion.length).to.equal(2);
226+
expect(foundGrapes.length).to.equal(2);
227+
}
228+
});
229+
});

0 commit comments

Comments
 (0)