#CestFacile : Un peu d’intégration continue avec CircleCI

On a vu dans notre dernier post comment écrire quelques tests avec Jest, Enzyme et Chai. On est allé assez loin en testant non seulement nos composants, mais aussi nos reducers, nos actions et même nos sagas.

C’est le moment idéal pour commencer à mettre en place un peu d’intégration continue.

CircleCI

Il existe des tas d’outils pour faire de l’intégration continue. Parfois intégrés au hébergement de repos (GitLab, Bitbucket), parfois indépendants.

J’ai déjà parlé d’intégration continue avec GitLab dans un précédent post. On va donc s’intéresser aujourd’hui à la mise en place d’intégration continue avec Circle CI.

Avant de faire n’importe quoi, on va déjà se poser quelques questions :

  • Est-ce que c’est normal de pousser du code non testé sur un repo ?
  • Est-ce que c’est vraiment à Circle CI d’être le seul responsable des tests de non régression ?
  • Est-ce le dev qui pousse du code ne devrait pas être bloqué en cas de fail sur les tests unitaires ?

Vous vous doutez de la réponse, du coup on va ajouter une dépendance supplémentaire qui va permettre de bloquer nos push sur le repo si les tests sont red.

Husky

Husky fait une seule chose, et il le fait bien : il met en place des hooks git qui seront exécuté aux différentes actions que l’on peut effectuer avec GIT… par exemple lancer nos tests unitaires avant de pouvoir commit.

On installe :

npm install [email protected] --save-dev

Puis on modifie notre package.json pour mettre en place nos hooks :

{
  "husky": {
    "hooks": {
      "pre-commit": "yarn test",
    }
  }
}

Dans ./package.json

Ici, on lance nos tests avant de commit. Si ca pète au niveau des tests, le commit n’aura pas lieu.

On a quand même un petit soucis : par défaut, un yarn test lance les tests en mode watch, ce qui signifie qu’on ne sort jamais de la couverture de tests, et qu’on n’a aucun moyen de savoir si les tests provoquent un exit.

Il suffit de créer un nouveau script dans notre package.json :

  "ci_test": "CI=true react-scripts test --env=jsdom",

Tout est bon.

Reste plus qu’à tester un commit en faisant en sorte qu’il pète. Pour ça on va volontairement casser un de nos tests :

import React from 'react';
import ReactDOM from 'react-dom';
import {shallow, mount} from 'enzyme';
import {expect} from 'chai';
import {Provider} from 'react-redux'
import { createMockStore } from 'redux-test-utils';
import App from './App';
import initialState from '../../Store/initialState'

const store = createMockStore(initialState)

it('renders without crashing', () => {
 const wrapper = mount(<App store={store}/>)
});

it('renders a header', () => {
 const wrapper = shallow(<App store={store} />).dive()
 expect(wrapper.find('Header')).to.have.length(0) // On remplace 1 par 0
})

Dans ./src/Scenes/App/App.test.js

Super, maintenant on va tenter un commit sachant qu’on a configuré Husky de cette façon dans notre package.json :

 "husky": {
   "hooks": {
     "pre-commit": "yarn ci_test"
   }
 }

« pre-commit hook failed »

Yeah !

On fixe notre erreur dans notre test et on retente :

Youpi, tout fonctionne comme prévu.

Circle CI, donc

Maintenant qu’on a mieux préparé notre environnement, on va pouvoir se concentrer sur notre pipe d’intégration continue.

Note : il vous faudra linker Circle CI à votre projet. Sur GitHub, c’est super simple grâce au Marketplace. Mais fondamentalement il suffit de lier votre repo depuis Circle CI pour en bénéficier.

Tout ce qu’on a à faire, c’est créer un fichier circle.yml à la racine de notre projet :

machine:
  node:
    version: 8.0.0
dependencies:
  override:
    - yarn
test:
  override:
    - yarn ci_test

Dans ./circle.yml

Attention, c’est du YAML, c’est très susceptible en terme d’indentation.

Ici, on défini la version de Node qu’on souhaite utiliser, on fait un yarn pour installer nos dépendances puis on termine par notre script ci_test pour lancer nos tests.

Si tout se passe bien, CircleCI devrait vous afficher un truc dans ce genre :

Encore mieux, sur GitHub, vous avez la possibilité de voir le résultat de vos tests avant de merger une pull request :

Congratz !

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *