J'ai eu beaucoup de mal à essayer de trouver la meilleure façon de bien suivre TDD principes, tandis que le développement de l'INTERFACE utilisateur en JavaScript. Quelle est la meilleure façon d'aller à ce sujet?
Est-il préférable de séparer les visuels de la fonctionnelle? Pensez-vous développer les éléments visuels d'abord, et ensuite à écrire des tests et le code de la fonctionnalité?
J'ai fait quelques TDD avec Javascript dans le passé, et ce que j'avais à faire était de faire la distinction entre les tests Unitaires et d'Intégration. Le sélénium permettra de tester votre site en général, avec la sortie du serveur, son post sur le dos, les appels ajax, tout ça. Mais pour les tests unitaires, rien de tout cela est important.
Ce que vous voulez, c'est juste l'INTERFACE utilisateur que vous allez être en interaction avec, et votre script. L'outil que vous allez utiliser pour ce est fondamentalement JsUnit, qui prend un document HTML, avec quelques fonctions Javascript sur la page et les exécute dans le contexte de la page. Donc, ce que vous allez faire, y compris l'Écrasé HTML de 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 de la moqué de HTML, votre script, et vos tests.
Peut-être un peu confus, alors permet de voir si on peut faire un petit test. Permet à certains TDD de supposer qu'après un composant est chargé, d'une liste d'éléments est de couleur en fonction du contenu de la 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 multi-étape, donc, pour notre contrôle, nous allons avoir besoin de plusieurs exemples.
yourcontrol.js (1)
function ColorCtrl( id ) {
/* Fail! */
}
yourcontrol.js (etape 2)
function ColorCtrl( id ) {
$$("#mockList li").forEach(function(item, index) {
item.setStyle("backgrond-color", item.getText());
});
/* Success! */
}
Vous pouvez probablement voir la douleur au point d'ici, vous devez garder votre maquette HTML ici sur la page en synchronisation avec la structure de ce que votre serveur contrôles seront. Mais il ne vous obtenir un très bon système pour le TDD communique avec JavaScript.
Je n'ai jamais réussi à TDDed code de l'INTERFACE utilisateur. Plus proche de nous est venu a été, en effet, pour séparer le code de l'INTERFACE utilisateur, autant que possible, à partir de la logique de l'application. C'est une des raisons pourquoi le modèle-vue-contrôleur est utile - le modèle et le contrôleur peut être TDDed sans trop de difficulté et sans être trop compliqué.
Dans mon expérience, le point de vue a toujours été de gauche pour notre utilisateur tests d'acceptation (nous avons écrit des applications web et de notre UATs utilisé Java HttpUnit). Cependant, à ce niveau, c'est vraiment un test d'intégration, sans le test-dans-l'isolement de la propriété que nous désirons TDD. En raison de cette configuration, nous avons eu à écrire notre contrôleur/tests/code d'abord, puis l'INTERFACE utilisateur et correspondant de l'UAT. Toutefois, dans le Swing GUI code que j'ai écrit dernièrement, j'ai écrit le code de la GUI d'abord avec des talons à explorer ma conception de l'extrémité avant, avant d'ajouter le contrôleur/modèle/API. YMMV ici.
Donc, pour résumer, le seul conseil que je puisse donner, c'est ce qui vous semble suspect - séparer le code de l'INTERFACE utilisateur de votre logique, autant que possible, et TDD eux.
J'ai trouvé le titre de MVP de l'architecture à être très approprié pour l'écriture de tests de l'Isu. Votre Présentateur et le Modèle de classes peuvent tout simplement être à 100% de l'unité testée. Vous avez seulement à vous soucier de la Vue (ce qui devrait être un idiot, mince couche de seulement déclenche des événements pour le Présentateur) pour l'INTERFACE utilisateur de test (avec le Sélénium, etc.)
Notez que dans le je suis en train de parler à l'aide de MVP entièrement dans le contexte de l'INTERFACE utilisateur, sans nécessairement traversée vers le côté serveur. Votre INTERFACE utilisateur peut avoir son propre Présentateur et le Modèle qui vit entièrement sur le côté client. Le Présentateur lecteurs de l'INTERFACE utilisateur de l'interaction de validation, etc. logique alors que le Modèle conserve les informations d'état et fournit un portail à l'arrière-plan (où vous pouvez avoir un Modèle distinct).
Vous devriez aussi jeter un oeil à le Présentateur de la Première TDD technique.
C'est la raison principale, je suis passé à Google Web Toolkit ... j'ai tester et développer en Java et ont une attente raisonnable que le compilé en JavaScript va fonctionner correctement sur une variété de navigateurs. Depuis le DRT est principalement une unité de la fonction de test, la plupart des projets peuvent être développés et testés avant la compilation et de déploiement.
De l'intégration et de suites de tests Fonctionnels vérifier que le code fonctionne comme prévu après il est déployé sur un serveur de test.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
