Les tests de d3 (et d'autres SVG de base) des Applications Web

Question

J'ai une application web qui utilise la d3 de la bibliothèque pour certains complexes SVG en fonction des visualisations.

J'ai des tests automatisés pour mon code côté serveur et JavaScript modèles (j'utilise un MVC comme l'architecture dans mon JavaScript). Ces actions sont exécutées sur un Jenkins serveur CI à chaque livraison. Maintenant, j'ai besoin de travailler sur la façon de tester mon point de vue.

Comment les autres s'attaquer à ce problème et quels outils utilisez-vous?

Quelques réflexions que j'ai eu ...

• Sérialiser les SVG généré dans un fichier et de les comparer à une base de référence
• Capturer automatiquement un navigateur d'image et de faire une image diff
• Quelque chose d'autre?

Merci!

Answer 1

L'exemple que vous donnez sont pour le test de la sortie graphique. Pour cela, vous pouvez utiliser une capture d'écran de l'outil de comparaison comme PhantomCSS, Sikuli ou roll-up de votre propre avec Resemble.js.

Mais si votre question est plus genrally sur le test de D3.js/SVG-en fonction des applications, comme le titre l'indique, vous devriez regarder la D3 de la suite de tests. La plupart des tests ne sont même pas besoin d'un html luminaire parce qu'ils sont fondamentalement test de l'API. Si la chose la plus importante pour vous est la cohérence du résultat visuel, aller avec une capture d'écran de l'outil de comparaison. Pour la navigation et le UX flux, vous êtes mieux avec le navigateur d'automatisation comme le Sélénium. Mais pour les tests unitaires, où vous voulez vous assurer d'avoir une API cohérente et code modulaire, la plupart des frameworks de test avec des espions, luminaire et se moquant de capacités de le faire (j'.e, de Jasmin, de Vœux, de Moka).

Answer 2

Il sonne comme le Sélénium devriez faire ce que vous cherchez. Il conduit le navigateur web et permet donc à vous de vérifier ce qui se passe réellement dans le navigateur au lieu de supposer que le SVG sera restituée correctement. Il vous permet de spécifier les tests unitaires comme une série de clics/coups de clés et il s'intègre très bien avec Jenkins.

Answer 3

La solution, je suis actuellement en contemplant est ...

1. Créer un simple fichier (csv) avec une liste d'url à la capture, avec une culture de la région (voir 3)
2. La charge de chacune des url et des captures d'écran avec le Sélénium
3. Des cultures de la visualisation de la capture d'écran avec ImageMagick (donc nous sommes juste tester la visualisation et pas la totalité de l'interface utilisateur)
4. Comparez les images des lignes de base à l'aide de ImageMagick
5. Générer un rapport HTML avec les anciens, les nouveaux et les diff images (pour les images qui sont différents)
6. Générer JUnit xml de sortie pour le serveur CI

Answer 4

La capture de navigateur et vérifier le graphe est un bon test. Mais j'ai l'impression que cela soit une responsabilité de D3 lui-même que notre code.

J'ai été aussi ayant la même question. (Ma Question). Veuillez commander la réponse que j'ai posté là-bas.