Développement d'une interface utilisateur en JavaScript à l'aide des principes TDD

StackOverflow https://stackoverflow.com/questions/96086

  •  01-07-2019
  •  | 
  •  

Question

J'ai eu beaucoup de difficulté à essayer de trouver le meilleur moyen de suivre correctement les principes de TDD lors du développement de l'interface utilisateur en JavaScript. Quelle est la meilleure façon de s'y prendre?

Est-il préférable de séparer le visuel du fonctionnel? Développez-vous d’abord les éléments visuels, puis écrivez des tests, puis codez pour des fonctionnalités?

Était-ce utile?

La solution

J'ai déjà utilisé TDD avec Javascript par le passé et je devais faire la distinction entre les tests unitaires et les tests d'intégration. Selenium testera votre site dans son ensemble, avec la sortie du serveur, ses post-backs, ses appels ajax, etc. Mais pour les tests unitaires, rien de tout cela n’est important.

Ce que vous voulez, c'est simplement l'interface utilisateur avec laquelle vous allez interagir et votre script. L’outil que vous utiliserez pour cela est essentiellement JsUnit , qui prend un document HTML avec quelques fonctions Javascript. sur la page et les exécute dans le contexte de la page. Vous allez donc inclure le code HTML stubbed sur la page avec vos fonctions. À partir de là, vous pouvez tester l'interaction de votre script avec les composants de l'interface utilisateur dans l'unité isolée du code HTML fictif, votre script et vos tests.

Cela peut paraître un peu déroutant, alors voyons si nous pouvons faire un petit test. Laissons certains TDD supposer qu’après qu’un composant est chargé, une liste d’éléments est colorée en fonction du contenu du LI.

tests.html 

<html>
<head>
<script src="jsunit.js"></script>
<script src="mootools.js"></script>
<script src="yourcontrol.js"></script>
</head>
<body>
    <ul id="mockList">
        <li>red</li>
        <li>green</li>
    </ul>   
</body>
<script>
    function testListColor() {
        assertNotEqual( $("#mockList li")[0].getStyle("background-color", "red") );

        var colorInst = new ColorCtrl( "mockList" );

        assertEqual( $("#mockList li")[0].getStyle("background-color", "red") );
    }
</script>


</html>

Évidemment, TDD est un processus en plusieurs étapes. Par conséquent, pour notre contrôle, nous aurons besoin de plusieurs exemples.

yourcontrol.js (étape 1) 

function ColorCtrl( id ) {
 /* Fail! */    
}

yourcontrol.js (étape 2) 

function ColorCtrl( id ) {
    $("#mockList li").forEach(function(item, index) {
        item.setStyle("backgrond-color", item.getText());
    });
    /* Success! */
}

Vous pouvez probablement voir le point douloureux ici, vous devez conserver votre code HTML fictif ici sur la page en synchronisation avec la structure de ce que vos contrôles de serveur seront. Mais cela vous procure un bon système pour TDD avec JavaScript.

Autres conseils

Je n'ai jamais réussi à obtenir du code d'interface utilisateur TDDed. Le plus proche de nous était en effet de séparer autant que possible le code de l'interface utilisateur de la logique d'application. C’est l’une des raisons pour lesquelles le modèle modèle-contrôleur-contrôleur est utile: le modèle et le contrôleur peuvent être numérisés sans trop de problèmes et sans devenir trop compliqué.

Selon mon expérience, la vue était toujours réservée à nos tests d'acceptation utilisateur (nous avons écrit des applications Web et nos UAT utilisaient le HttpUnit de Java). Cependant, à ce niveau, il s’agit vraiment d’un test d’intégration, sans la propriété de test en isolation que nous souhaitons avec TDD. En raison de cette configuration, nous avons dû écrire notre contrôleur / modèle tests / code d’abord, puis l’UI et l’UAT correspondante. Cependant, dans le code d'interface graphique Swing que j'ai écrit récemment, j'ai d'abord écrit le code d'interface graphique avec des stubs pour explorer ma conception du front-end avant d'ajouter le contrôleur / modèle / API. YMMV ici cependant.

Donc, pour réitérer, le seul conseil que je puisse donner est ce que vous semblez déjà suspecter: séparez le plus possible le code de votre interface utilisateur de votre logique et mettez-les à jour.

J'ai trouvé l'architecture MVP parfaitement adaptée à la rédaction d'interface utilisateur testable. Vos classes Présentateur et Modèle peuvent simplement être testées à 100%. Vous devez vous préoccuper uniquement de la vue (qui doit être une couche muette et mince uniquement pour déclencher des événements vers le présentateur) pour les tests d'interface utilisateur (avec Selenium, etc.)

Notez que dans le cas où je parle d'utiliser MVP entièrement dans le contexte de l'interface utilisateur, sans nécessairement passer du côté serveur. Votre interface utilisateur peut avoir ses propres présentateur et modèle qui résident entièrement du côté client. Le présentateur gère la logique d'interaction / validation de l'interface utilisateur, tandis que le modèle conserve les informations d'état et fournit un portail vers le backend (où vous pouvez avoir un modèle séparé).

Vous devriez également consulter la technique Presenter First .

C’est la principale raison pour laquelle je suis passé à Google Web Toolkit ... J’ai développé et testé en Java et j’attends raisonnablement que le code JavaScript compilé fonctionne correctement sur différents navigateurs. TDD étant avant tout une fonction de test unitaire, la plupart du projet peut être développé et testé avant compilation et déploiement.

Les suites de tests d'intégration et fonctionnelles vérifient que le code résultant fonctionne comme prévu après son déploiement sur un serveur de test.

Je suis sur le point de commencer à utiliser Javascript TDD sur un nouveau projet sur lequel je travaille. Mon plan actuel consiste à utiliser qunit pour effectuer les tests unitaires. Lors du développement des tests, vous pouvez exécuter le test simplement en actualisant la page de test dans un navigateur.

Pour une intégration continue (et pour que les tests soient exécutés dans tous les navigateurs), j'utiliserai Selenium pour automatiquement chargez le faisceau de test dans chaque navigateur et lisez le résultat. Ces tests seront exécutés à chaque enregistrement du contrôle de code source.

Je vais également utiliser JSCoverage pour obtenir une analyse de la couverture de code des tests. Cela sera également automatisé avec Selenium.

Je suis en train de mettre cela en place. Je mettrai à jour cette réponse avec des détails plus précis une fois la configuration définie.

Outils de test:

Ce que je fais est de fourrer le Dom pour voir si j'obtiens ce que j'attendais. Un des effets secondaires intéressants de cette méthode est qu’en effectuant rapidement vos tests, vous développez également votre application.

Je viens de publier une boîte à outils open source qui aidera énormément à JavaScript tdd. C’est une composition de nombreux outils open source qui vous donne une application de base indispensable, dès le départ.

Il fournit des commandes uniques à exécuter: serveur Web dev, exécuteur de test jasmine pour navigateur unique, exécuteur de test jasmine js-test-driver pour plusieurs navigateurs et concaténisation / minification pour JavaScript et CSS. Il génère également une version non modifiée de votre application pour le débogage en production, précompile vos modèles de guidon et prend en charge l'internationalisation.

Aucune configuration n'est requise. Cela fonctionne.

http://github.com/davidjnelson/agilejs

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top