Tester Javascript qui manipule le DOM

Question

J'ai été regarder dans javascript, des suites de tests et j'ai trouvé QUnit d'être très intéressant. Je comprends comment test de calcul de code, mais...

Comment tester des applications javascript écrit principalement pour la manipulation DOM?

il semble que les tests de la position/couleur/etc des éléments du DOM serait un point discutable parce que tu finirais par faire somethign comme ceci:

$("li.my_element").css("background-color", "#f00");

et puis dans votre test...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

cela ne fonctionne tout simplement pas, parce qu'il est fondamentalement juste cela:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

Suis-je folle? Comment est-ce censé être fait?

edit: le cœur de la question:

Je suppose que ce que je reçois à est, je dois m'assurer que le code n'est pas rompu avant le déploiement, mais la grande majorité des c'est l'INTERFACE utilisateur d'aides et ajax. Comment puis-je tester que les choses sont en train d'apparaître correctement?

Quelques exemples:

• test de JQuery UI boîte de dialogue apparaît sur le dessus de tous les autres éléments
• tester que le glisser-déposer fonctionne correctement
• test de la couleur d'un drop, les changements lorsqu'un élément est tombé sur elle
• test que l'ajax est tous fonctionne correctement
• test qu'il n'y a pas de superflus des virgules qui va briser IE

Answer 1

J'ai trouvé le Javascript/DOM tests, en particulier pour la simple interactions que vous décrivez, ne sont pas utiles. Vous aurez des tests que les choses sont bien mis en place, et depuis jQuery est donc déclarative, vos tests de regarder un peu comme votre code.

Ma pensée est que si vous écrivez plus grande JS composants, il est logique de tirer un ensemble cohérent de comportements à la fois dans un plugin jQuery et un ensemble de tests pour elle.

Mais dans les exemples que vous avez mentionné, il semble que vous êtes vraiment à la recherche d'un niveau de protection au sein de votre site web intégré. Un outil comme le Sélénium sera probablement plus puissant et appropriée pour vous. En particulier, il

• peut être automatisé
• peut s'exécuter sur plusieurs navigateurs, y compris IE
• s'exécute dans le contexte de votre application web et de pages, afin de drag-n-drop peut être testées, où il se passe vraiment à la place de l'environnement de test.
• AJAX peut être testé

Answer 2

Au lieu de tester la fonction css de JQuery. Votre test doit se moquer de la fonction css et s'assurer qu'il n'est appelé qu'une fois avec la couleur correcte. Le code testé devrait être le vôtre, pas les frameworks.

Answer 3

En plus de ce que Jason Harwig dit, je dirais que le test unitaire est un test pour vous assurer que le code est exécuté comme prévu. Si vous voulez tester tout ça, puis Jason a tout à fait raison au sujet de la façon dont vous devriez le faire. Si vous êtes désireux de faire des tests pour vérifier que la manipulation du DOM qui se passe (INTERFACE utilisateur de test) et non pas le code qui est en train de faire la manipulation du DOM (tests unitaires), alors vous voudrez peut-être vérifier quelque chose comme le Sélénium, WatiN ou Watir.

Answer 4

Je suppose que beaucoup de gens de tester visuellement: c'est à dire qu'ils regardent leur navigateur de sortie sur leur écran, pour voir si il regarde comme le DOM a été manipulé comme prévu.

Si cela doit être un test automatisé cas (par exemple. pour les tests de régression), alors peut-être qu'ils enregistrer la sortie (comme la capture d'écran) et de faire quelque chose comme comparer deux captures d'écran pour voir si les résultats sont les mêmes.

Au lieu de capturer une capture d'écran, vous avez juste à capturer l'ensemble des DOM, et de faire un side-by-side de comparaison de la capture DOM arbres (qui est peut-être moins enclin à l'erreur qu'à comparer les pixels).

Answer 5

Je teste des trucs AJAX comme ceci:

1. Faire l'appel AJAX
2. Configurer une minuterie JavaScript
3. Vérifiez le DOM pour voir si les changements attendus ont eu lieu

Maintenant, il se peut que l'appel AJAX ne soit pas revenu avant votre vérification, mais il s'agit également d'informations de test utiles; avec un appel AJAX, il y a (généralement) un certain temps après lequel nous appellerions cela un échec. Par exemple, si nous faisons une suggestion contextuelle et qu'il faut 30 secondes pour revenir, c'est un échec.