Fix the test part

mathieuancelin · mathieuancelin · commit 76c0f955e68a · 2016-04-18T10:59:41.000+02:00
diff --git a/readme.md b/readme.md
@@ -158,6 +158,10 @@ $ npm start
 
 Rendez-vous ensuite sur http://localhost:3000 pour parcourir la documentation des différentes routes disponibles. Nous vous recommandons de passer au moins une fois sur cette documentation afin d'avoir une idée globale des données fournies par l'API pour alimenter votre application.
 
+## Tests
+
+De manière générale, chaque étape du workshop (hormis les premières) possède des tests pour valider le fonctionnement de l'application. Ces tests vont vous permettre de savoir ou vous en êtes dans l'étape courante. N'hésitez pas à lire les tests pour voir de quelle façon l'application doit se comporter, ainsi qu'à lancer la commande magique (`npm test`) à tout moment.
+
 ## Les étapes du workshop
 
 * [Etape 0](/step-0)
diff --git a/step-2/readme.md b/step-2/readme.md
@@ -10,7 +10,7 @@ Pour lancer l'application de l'étape 1, exécutez la commande `npm start` (apr
 
 Dans cette étape, vous allez avoir besoin de l'API. Pour l'exécuter, lancez la commande `npm start` dans le dossier `api`.
 
-Vous avez également la possibilité de lancer les tests de l'étape 2 (que nous avons rédigé pour vous) en utilisant la commande `npm run test` afin de voir quelles parties de l'étape fonctionnent et quelles parties ne fonctionnent pas du tout.
+Vous avez également la possibilité de lancer les tests de cette étape (que nous avons rédigé pour vous) en utilisant la commande `npm test` afin de voir quelles parties de l'étape fonctionnent et quelles parties ne fonctionnent pas du tout. N'hésitez pas à lire le code des tests afin d'avoir quelques indications en plus sur la façon d'écrire votre application.
 
 ## Objectif
 
diff --git a/step-3/readme.md b/step-3/readme.md
@@ -10,6 +10,8 @@ Pour lancer l'application de l'étape 2, exécutez la commande `npm start` (apr
 
 Dans cette étape, vous allez avoir besoin de l'API. Pour l'exécuter, lancez la commande `npm start` dans le dossier `api`. La documentation de l'API est disponible à l'adresse http://localhost:3000
 
+Vous avez également la possibilité de lancer les tests de cette étape (que nous avons rédigé pour vous) en utilisant la commande `npm test` afin de voir quelles parties de l'étape fonctionnent et quelles parties ne fonctionnent pas du tout. N'hésitez pas à lire le code des tests afin d'avoir quelques indications en plus sur la façon d'écrire votre application.
+
 ## Objectif
 
 Maintenant que notre application possède les fonctionnalités de base, nous allons commencer a nous attaquer à la navigation.
@@ -128,7 +130,9 @@ vous pouvez évidemment l'ajouter via la ligne de commande :
 npm install --save react-router@2.0.1
 ```
 
-Maintenant nous pouvons commencer l'intégration du router (l'intégration de base est présente dans le projet mais vous pouvez tout de même lire les paragraphes suivant). Pour ce faire, commençons par lire [l'introduction](https://github.com/reactjs/react-router/blob/master/docs/Introduction.md) à `react-router` puis importons les APIs dans `app.js`
+Maintenant nous pouvons commencer l'intégration du router (l'intégration de base est présente dans le projet mais vous pouvez tout de même lire les paragraphes suivant).
+
+Pour ce faire, commençons par lire [l'introduction](https://github.com/reactjs/react-router/blob/master/docs/Introduction.md) à `react-router` puis importons les APIs dans `src/app.js`. Pour des raisons de testabilité, nous allons faire en sorte d'encapsuler toute l'application et son système de routage dans un composant dédié dans `src/app.js` et faire en sorte que ce composant puisse recevoir une API `history` dédiée (différente en environnement de test). La montage de ce composant dans le DOM sera effectué dans le fichier `src/indexj.js`
 
 ```javascript
 import { Router, Route, browserHistory, IndexRoute } from 'react-router';
@@ -140,22 +144,30 @@ l'initialisation du routeur se fera de la façon suivante :
 import { Router, Route, browserHistory, IndexRoute } from 'react-router';
 import NotFound from './components/not-found';
 
-ReactDOM.render(
-  <Router history={browserHistory}>
-    <Route path="/" component={???}>
-      <IndexRoute component={???} />
-      ...
-      <Route path="*" component={NotFound} />
-    </Route>
-  </Router>,
-  document.getElementById('main')
-);
+export const App = React.createClass({
+  propTypes: {
+    history: PropTypes.object,
+  },
+  render() {
+    const history = this.props.history || browserHistory;
+    return (
+      <Router history={history}>
+        <Route path="/" component={???}>
+          <IndexRoute component={???} />
+          ...
+          <Route path="*" component={NotFound} />
+        </Route>
+      </Router>,
+    );
+  }
+});
 ```
 
 Ici nous configurons le routeur pour utiliser l'API `history`, tirée de HTML5, du navigateur comme URL de routage côté client. Cette API permet de faire varier l'URL du navigateur sans pour autant déclencher un rechargement de la page.
 
 ```javascript
-<Router history={browserHistory}> ... </Router>
+const history = this.props.history || browserHistory;
+<Router history={history}> ... </Router>
 ```
 
 puis nous spécifions un container qui aura le role d'afficher la vue courante du router et qui sera le point d'entrée de l'application.
@@ -167,7 +179,7 @@ puis nous spécifions un container qui aura le role d'afficher la vue courante d
 D'après le tutorial de `react-router`, ce genre de composant peut s'écrire de la façon suivante :
 
 ```javascript
-const App = React.createClass({
+const MyApp = React.createClass({
   render() {
     return (
       <div>
diff --git a/step-4/readme.md b/step-4/readme.md
@@ -10,6 +10,8 @@ Pour lancer l'application de l'étape 3, exécutez la commande `npm start` (apr
 
 Dans cette étape, vous allez avoir besoin de l'API. Pour l'exécuter, lancez la commande `npm start` dans le dossier `api`. La documentation de l'API est disponible à l'adresse http://localhost:3000
 
+Vous avez également la possibilité de lancer les tests de cette étape (que nous avons rédigé pour vous) en utilisant la commande `npm test` afin de voir quelles parties de l'étape fonctionnent et quelles parties ne fonctionnent pas du tout. N'hésitez pas à lire le code des tests afin d'avoir quelques indications en plus sur la façon d'écrire votre application.
+
 ## Objectif
 
 L'objectif de cette étape est d'ajouter des fonctionnalités sur la fiche de description d'un vin, à savoir :
diff --git a/step-5/readme.md b/step-5/readme.md
@@ -10,6 +10,8 @@ Pour lancer l'application de l'étape 4, exécutez la commande `npm start` (apr
 
 Dans cette étape, vous allez avoir besoin de l'API. Pour l'exécuter, lancez la commande `npm start` dans le dossier `api`. La documentation de l'API est disponible à l'adresse http://localhost:3000
 
+Vous avez également la possibilité de lancer les tests de cette étape (que nous avons rédigé pour vous) en utilisant la commande `npm test` afin de voir quelles parties de l'étape fonctionnent et quelles parties ne fonctionnent pas du tout. N'hésitez pas à lire le code des tests afin d'avoir quelques indications en plus sur la façon d'écrire votre application.
+
 ## Objectif
 
 Dans cette étape, nous allons intégrer [Redux](http://redux.js.org/index.html) a notre magnifique application.
@@ -242,7 +244,7 @@ import { WineListPage } from './components/wine-list';
 import { WinePage } from './components/wine';
 import { NotFound } from './components/not-found';
 
-import { Router, Route, hashHistory, IndexRoute } from 'react-router';
+import { Router, Route, browserHistory, IndexRoute } from 'react-router';
 
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
@@ -252,19 +254,26 @@ const store = createStore(app);
 
 ...
 
-ReactDOM.render(
-  <Provider store={store}>
-    <Router history={hashHistory}>
-      <Route path="/" component={WineApp}>
-        <IndexRoute component={RegionsPage} />
-        <Route path="regions/:regionId" component={WineListPage} />
-        <Route path="regions/:regionId/wines/:wineId" component={WinePage} />
-        <Route path="*" component={NotFound} />
-      </Route>
-    </Router>
-  </Provider>
-  , document.getElementById('main')
-);
+export const App = React.createClass({
+  propTypes: {
+    history: PropTypes.object
+  },
+  render() {
+    const history = this.props.history || browserHistory;
+    return (
+      <Provider store={store}>
+        <Router history={history}>
+          <Route path="/" component={WineApp}>
+            <IndexRoute component={RegionsPage} />
+            <Route path="regions/:regionId" component={WineListPage} />
+            <Route path="regions/:regionId/wines/:wineId" component={WinePage} />
+            <Route path="*" component={NotFound} />
+          </Route>
+        </Router>
+      </Provider>
+    );
+  }
+});
 ```
 
 Provider va simplement alimenter le context `react` avec un champ `store`. (pour plus de détails sur le contexte `react`, voir [https://facebook.github.io/react/docs/context.html](https://facebook.github.io/react/docs/context.html))
diff --git a/step-5/src/app.js b/step-5/src/app.js
@@ -20,7 +20,7 @@ const store = createStore(app);
 
 export const App = React.createClass({
   propTypes: {
-    history: PropTypes.object, // eslint-disable-line
+    history: PropTypes.object // eslint-disable-line
   },
   render() {
     const history = this.props.history || browserHistory;
diff --git a/step-6/readme.md b/step-6/readme.md
@@ -2,9 +2,15 @@
 
 ## Pré-requis
 
+Vous devez maîtriser les étapes 0, 1, 2, 3, 4 et 5 du workshop afin de pouvoir réaliser l'étape 6.
+
 Le code disponible dans cette étape correspond au résultat attendu des étapes 0, 1, 2, 3, 4, et 5.
 
-Pour lancer l'application de l'étape 5, exécutez la commande `npm start` (après avoir fait un `npm install`). Ouvrez ensuite l'URL http://localhost:8080 dans votre navigateur. Vous avez également besoin de l'API (lancez la commande `npm start` dans le dossier `api`).
+Pour lancer l'application de l'étape 5, exécutez la commande `npm start` (après avoir fait un `npm install`). Ouvrez ensuite l'URL http://localhost:8080 dans votre navigateur.
+
+Dans cette étape, vous allez avoir besoin de l'API. Pour l'exécuter, lancez la commande `npm start` dans le dossier `api`. La documentation de l'API est disponible à l'adresse http://localhost:3000.
+
+Vous avez également la possibilité de lancer les tests de cette étape (que nous avons rédigé pour vous) en utilisant la commande `npm test` afin de voir quelles parties de l'étape fonctionnent et quelles parties ne fonctionnent pas du tout. N'hésitez pas à lire le code des tests afin d'avoir quelques indications en plus sur la façon d'écrire votre application.
 
 ## Objectif
 
@@ -220,14 +226,20 @@ export const DevTools = createDevTools(
 
 Ce composant va être responsable de l'affichage des devtools dans l'application (Attention ce genre d'outil ne doit être utilisé que dans un environnement de développement).
 
-Une fois le composant fini, il va falloir l'inclure dans l'application (`wine-app.js`)
+Une fois le composant fini, il va falloir l'inclure dans l'application (`wine-app.js`). Cependant, comme notre application peut-être lancée dans un environnement de test, nous aimerions que les Devtools ne soient pas utilisés lors des phases de test. En effets, leur utilisation dans l'environnement de test ralentit énormément ces dernier. Nous allons donc tester si nous sommes en environnement de test et si c'est le cas, rendre un composant `null`.
 
 ```javascript
 import React, { PropTypes } from 'react';
 import { GlobalStats } from './stats';
 import { connect } from 'react-redux';
 import { DevTools } from './devtools';
 
+const NoDevToolsCauseInTestEnv = React.createClass({
+  render() {
+    return null;
+  }
+});
+
 const mapStateToProps = (state) => {
   return {
     ...
@@ -244,12 +256,13 @@ export const WineApp = connect(mapStateToProps)(React.createClass({
   },
 
   render () {
+    const Tools = window.TEST ? NoDevToolsCauseInTestEnv : DevTools;
     return (
       <div>
         <div className="grid">
             ...
         </div>
-        <DevTools />
+        <Tools />
       </div>
     );
   }
@@ -322,7 +335,7 @@ Editez votre fichier `src/app.js` comme suivant
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { Router, Route, hashHistory, IndexRoute } from 'react-router';
+import { Router, Route, browserHistory, IndexRoute } from 'react-router';
 
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware, compose } from 'redux';
@@ -332,19 +345,34 @@ import { app } from './reducers';
 import { DevTools } from './components/devtools';
 
 const store = compose(applyMiddleware(thunk), DevTools.instrument())(createStore)(app);
-// ici on synchronise le routeur avec le store
-const history = syncHistoryWithStore(hashHistory, store);
 
 ...
 
-ReactDOM.render(
-  <Provider store={store}>
-    <Router history={history}> // et on utilise notre historique synchronisé
-      ...
-    </Router>
-  </Provider>
-  , document.getElementById('main')
-);
+export const App = React.createClass({
+  propTypes: {
+    history: PropTypes.object
+  },
+  componentDidMount() {
+    store.dispatch(fetchLikesCount());
+    store.dispatch(fetchCommentsCount());
+  },
+  render() {
+    // ici on synchronise le routeur avec le store
+    const history = syncHistoryWithStore(this.props.history || browserHistory, store);
+    return (
+      <Provider store={store}>
+        <Router history={history}> // et on utilise notre historique synchronisé
+          <Route path="/" component={WineApp}>
+            <IndexRoute component={RegionsPage} />
+            <Route path="regions/:regionId" component={WineListPage} />
+            <Route path="regions/:regionId/wines/:wineId" component={WinePage} />
+            <Route path="*" component={NotFound} />
+          </Route>
+        </Router>
+      </Provider>
+    );
+  }
+});
 ```
 
 ## A vous de jouer !
