Programmation Web et jeux vidéo - 420-W11-SF

Cours 21 -

Tests unitaires

Par Jimmy Gilbert

09 novembre 2022

  • Un test doit avoir:
    • une hypothèse d'état ou de valeur de sortie
    • Une manière de vérifier si cette hypothèse est valide ou non
  • Le test permet de vérifier que ce qu'on s'attend de l'entrée et sortie soit valide par rapport à ce que l'on a spécifié

  • On est en mesure de faire correspondre un état d'entrée donné à une valeur de sortie.

Pourquoi écrit-on des tests unitaires?
En JavaScript?

Notions de base

Utilité

Notions de base

Pourquoi des tests unitaires?

  • Garantir la qualité du code

  • Forcer à tester les cas limites

    • Quel cas limite?

  • Faciliter la réécriture du code (refactor)

  • Trouver les erreurs plus rapidement

  • Documenter le code

Comment ça permet de documenter le code?

  • Plusieurs cadriciels "framework" sont disponibles :

    • Karma

    • Protractor

    • Jasmine

    • Mocha

    • QUnit => notre choix pour le cours!

Notions de base

Tests unitaires en JavaScript

  • Nous utiliserons QUnit.

    • Puissant

    • Simple d'utilisation

    • Installation simple

      • Il suffit d'inclure un
        .js à votre projet

    • Il est utilisé par jQuery

      • C'est quoi jQuery?

Notions de base

QUnit - js unit testing

Fonctionnement

Utilisation HTML

Visitez le site officiel et découvrez l’exercice de base

Fichier tests.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
  <script src="tests.js"></script>
</body>
</html>

Fonctionnement

Utilisation JS et résultat

Visitez le site officiel et découvrez l’exercice de base

Fichier tests.js

QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

Résultat

Normes et recommandations

Structure de dossier

ProjetWeb

  • js

    • main.js        # Utilisation de fonctions

    • tests.js        # Tests pour le fichier main.js

  • index.html            # Page qui utilise main.js

  • tests.html            # Page qui affiche les résultats des tests

Normes et recommandations

Une bonne suite de tests

  • Teste les cas limites

  • S'exécute rapidement

  • Comporte des tests qui ont des noms significatifs

  • Exécution simple et automatique

  • Couvre toutes les lignes de code

  • Indépendant

  • Lisible

  • Répétable

Made with Slides.com