Mika A.

Blog Simple :)

Catégorie : Javascript Page 2 of 3

React Native Android – Générer versionCode et versionName depuis package.json

En travaillant sur un nouveau projet React Native, j’ai essayé d’améliorer la configuration pour faciliter au tant que possible les mises à jour.

Rappel

Je vais commencer par rappeler rapidement le fonctionnement des mise à jours d’applications, particulièrement pour Android sur le Play Store. Quand on veut soumettre une nouvelle version d’une application sur Play Store, il est demandé de télécharger un fichier APK avec un versionCode (nombre entier) supérieur à celui du dernier APK envoyé.

Par exemple, la toute première version de l’application publiée sur Play Store peut porter le versionCode 1. Une nouvelle mise à jour doit avoir versionCode 2 ou plus et ainsi de suite à chaque mise à jour.

De manière générale, le versionCode peut être déclaré dans AndroidManifest.xml ou dans la configuration de Gradle (build.gradle) comme on peut le voir ci-dessous:

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.myproject"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode generatedVersionCode
        versionName generatedVersionName
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
// ...
}

Lire la suite

Tester un changement d’état dans un composant avec enzyme

En travaillant actuellement sur un projet React, je suis tombé sur une problématique dans un de mes tests fonctionnels où nous utilisons enzyme. Je vous explique tout cela.

Un composant pour démontrer le problème

Imaginez un composant React qui affiche un texte particulier quand l’état interne du composant a une certaine valeur. Voici un exemple trivial: nous voulons afficher le texte ‘😭 It\’s too late to apologize.’ quand l’état expired du composant est à true. La contrainte est que nous mettons cette valeur à true 1h après avoir monté le composant.

import React from 'react'

class Timer extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      expired: false,
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ expired: true })
    }, 3600 * 1000);
  }

  render() {
    return (
      <div>
        {this.state.expired ? '😭 It\'s too late to apologize.' : '😇 Everything is fine.'}
      </div>
    );
  }
}

export default Timer;

Imaginez maintenant que je veuille mettre en place un test qui m’assure que ce fonctionnement est toujours valide. En théorie, il faudrait monter le composant et attendre 1h avant de voir si le texte est correctement mis à jour. Il y a surement une manière plus rapide pour gérer cela et c’est là que enzyme montre toute sa force.

Enzyme et setState à la rescousse

Nous allons mettre en place un test avec enzyme et simuler le changement d’état dans le composant avant de vérifier le texte qui s’affiche. Pour vérifier le texte par défaut, c’est assez simple:

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Timer from './Timer';

configure({ adapter: new Adapter() });

it('should display nice text by default', () => {
  const timer = shallow(<Timer />);
  expect(timer.text()).toBe('😇 Everything is fine.');
});

Maintenant, pour pouvoir simuler le changement d’état (expired) sans attendre 1h, nous allons utiliser setState de enzyme et vérifier ensuite que le texte affiché est bien le second.

it('should display bad text when expired', () => {
  const timer = shallow(<Timer />);
  timer.setState({ expired: true });
  expect(timer.text()).toBe('😭 It\'s too late to apologize.');
});

Maintenant, nos tests valident bien le changement d’état dans le composant sans trop de difficulté.

N’hésitez pas à laisser un commentaire pour en discuter.

Configurer Travic CI pour un package Atom

En travaillant sur un petit package Atom ces derniers temps, j’ai commencé à configurer Travis CI pour lancer automatiquement mes builds et tests. Cela me permet d’assurer que les push et futurs pull request de mon projet ne cassent rien. Comme il s’agit d’un projet Opensource, je peux utiliser gratuitement les services de Github et Travis CI.

Mon repository est installé sur Github et j’ai commencé par activer le webhook de Travic CI dans les paramètres de celui-ci. Pour cela, aller dans Settings > Webhooks & services > Travic CI et activer ce service en commençant par l’éditer.

Webhooks Services

Il faut maintenant configurer Travis CI. Celui-ci est lié à mon compte Github et je retrouve directement la liste de mes repository et j’active celui qui est concerné.

 

active

Enfin, pour lancer les travaux de travis, il faut ajouter un fichier .travis.yml dans la racine du projet. Ce fichier contient les informations nécessaire à travis ainsi que la configuration des actions à faire. En ce qui concerne les packages Atom, un repository a été mis en place pour mettre en place facilement les configurations de Travis. Il suffit d’aller sur https://github.com/atom/ci/blob/master/.travis.yml et d’utiliser ce fichier.

Quand j’effectue des nouveau push sur le repository, travis va maintenant lancer les builds automatiquement et me tenir informé en cas de problème. Pour couronner le tout, j’ai droit au petit bouton indiquant le statut du repository. Il peut facilement être intégré sur une page web ou sur le README de mon projet 

Pour les packages Atom, il est également possible d’utiliser d’autres services comme AppVeyor ou Circle. Les détails pour ceux-ci sont également disponible sur le répertoire https://github.com/atom/ci/

Et voila, à vous maintenant!

Fièrement propulsé par WordPress & Thème par Anders Norén