Création d'un test d'unité visuelle pour React

Création d'une application simple pour enseigner des concepts liés à la notation d'une main de poker en utilisant une programmation fonctionnelle. Ce projet utilise des éléments visuels et des tests unitaires pour "jouer" le processus d'apprentissage. Quelques composants simples combinés à la grille d'interface utilisateur Kendo puissante et facile à utiliser créent un affichage significatif des tests avec des données.

En tant que développeur Advocate for Progress, je consacre une partie de mon temps à des workshops J'enseigne les techniques de programmation fonctionnelle aux développeurs C # depuis quelques années et j'ai récemment commencé à adapter ce contenu pour inclure JavaScript.

Le contenu que j'ai développé inclut:

Je crée actuellement des exemples qui continuent avec le thème de la programmation fonctionnelle. Dans ces exemples, je vais utiliser le jeu de poker pour démontrer différentes techniques pour écrire des codes fonctionnels et documentaires. Pour aider à visualiser les données utilisées dans les exemples, j'ai décidé de créer un composant de test unitaire visuel simple utilisant React. Le composant fait partie d'une application simple pour enseigner les concepts liés à la notation d'une main de poker en utilisant la programmation fonctionnelle.

"Pourquoi ne pas utiliser le framework XYZ?"

ce n'était pas une décision facile de créer une autre méthode de test du code. Cependant, je voulais vraiment faire quelque chose de personnalisé pour le sujet qui n'introduisait pas un autre concept tel qu'un framework de test unitaire qui a sa propre courbe d'apprentissage. Au lieu de cela, je voulais quelque chose qui pourrait permettre aux étudiants de se concentrer sur le code utilisé dans la démo.

Connecter un concept à un visuel

Dans mon contenu, j'essaie de créer des éléments visuels. Je trouve que les cartes à jouer sont relatables car elles présentent un objet du monde réel. Une autre propriété pratique des cartes à jouer est qu'elles affichent leurs valeurs, ce qui les rend visibles en un coup d'œil.

est d'afficher une main d'images de cartes à jouer avec leurs valeurs correspondantes. Avec cet affichage, je vais inclure le résultat du score de poker souhaité, la description et la valeur de réussite / échec. Le résultat final sera un projet que les utilisateurs pourront ouvrir en utilisant StackBlitz et commencer à écrire du code pour allumer les tests unitaires. Tout ce dont ils ont besoin pour démarrer sera prêt à être utilisé

Détails des composants

Pour créer le composant Visual Unit Test, j'ai utilisé React. J'ai choisi React parce que le sujet de la programmation fonctionnelle est souvent associé au style de développement de React. En outre, StackBlitz propose des modèles simples pour démarrer avec React tout en fournissant des résultats en temps réel via "Rechargement à chaud au fur et à mesure de la frappe", . Le composant de test d'unité visuelle consiste en une grille d'interface utilisateur Kendo pour afficher les images de cartes à jouer et les valeurs correspondantes utilisées dans le test. La grille est accompagnée d'une barre d'état avec une description de ce qui est testé (c.-à-d. "Deux cartes de la même valeur"). La barre d'état affiche également le résultat du test par couleur et par texte. Pour aider les étudiants à identifier ce qui se passe dans le test, la valeur de sortie est affichée sous la barre d'état.

19659016] La grille de l'interface utilisateur du Kendo se lie à pratiquement toutes les sources de données et offre un large éventail de fonctionnalités qui en font un écran intuitif permettant d'interagir avec les données. La liaison des données à la grille est aussi simple que la définition de la propriété data. Pour les tests unitaires, j'utilise les données de cartes à jouer locales stockées dans un fichier JSON chargé dans l'état du composant. Une fois la propriété data définie, la grille génère automatiquement des colonnes en fonction des objets de données.

 // test-data.json

"royalFlush": [
  {
    "suit": "HEARTS",
    "value": "QUEEN",
    "numValue": 12,
    "image": "https://deckofcardsapi.com/static/img/QH.png",
    "code": "QH"
  },
  // ... more cards
]

 // VisualUnitTest.js

Les colonnes peuvent être définies explicitement, ce qui permet une personnalisation complète et améliore davantage l'affichage de la grille. L'une des fonctionnalités clés de ce scénario consistait à afficher un modèle de grille personnalisé. En utilisant un modèle de cellule, j'ai pu facilement afficher des images des cartes à jouer dans une colonne de grille. La configuration d'un modèle de colonne pour la grille du Kendo UI nécessite deux étapes simples. Tout d'abord, un composant de cellule de grille qui hérite de GridCell est créé. Le composant est ensuite lié à la propriété de la cellule de la colonne dans laquelle il sera utilisé.

 // VisualUnitTest.js


  
  
  
  


 classe ImageCell étend GridCell {
  render () {
    revenir (
      
        
      
    );
  }
}

En outre, le tri sur plusieurs colonnes est activé afin que les étudiants puissent personnaliser leur vue des données. Vous trouverez des détails et des démonstrations sur le tri et les fonctions supplémentaires de la grille de l'interface utilisateur Kendo sur le site Web Kendo UI .

La barre d'état

L'affichage des données L'élément visuel de réussite / échec était nécessaire pour compléter l'expérience. Pour terminer le test d'unité visuelle, j'ai incorporé un composant de barre de statistiques. La barre d'état est un composant simple qui utilise des styles CSS conditionnels pour afficher l'état du test unitaire. La description contient la description du test, le texte "pass" ou "fail" et la représentation littérale de la valeur en cours de test.

 // VisualUnitTest. js



 La ​​sortie était: {JSON.stringify (this.props.actual)} 

classe PassFail étend Component {
  constructeur (accessoires) {
    super (accessoires);
    this.state = {passFailText: this.props.value? "pass": "échec"}
  }
  render () {
    revenir (
      

        
 {this.props.description}
           {this.state.passFailText} 
        



  


               




      
    );
  }
} 

 // site.scss

.échouer {
  couleur d'arrière-plan: $ fail-color; // # D24D57
}

.passer {
  background-color: $ pass-color; // # 6B9362
} 

La combinaison de la grille et de la barre d'état complète le composant de test de l'unité visuelle. Pour compléter l'expérience de l'application, le composant reçoit des données de test et une configuration de test.

Togethering

L'application de test d'unité visuelle est pilotée par un fichier unique qui connecte tout. Le fichier test.js associe les données de test, unités testées, à un tableau de configurations de test. Dans ce scénario, je teste deux fonctions publiques que l'étudiant est chargé de créer: getHandRank () qui marque chaque main de poker disponible dans une partie de poker à cinq cartes et getHighCard () une fonction qui doit renvoyer l'objet de carte le plus élevé dans une main.

 // test.js

// données de test
importer des données depuis './test-data.json';
// Unité sous test
import {getHandRank, getHighCard} depuis '../components/Scoring.js';

// Un tableau de configurations de test.
export {tests};

const tests = [
  {
    id: 11,
    name: "1. Royal Flush",
    data: data.royalFlush,
    actual: getHandRank(data.royalFlush),
    expected: "RoyalFlush",
    description: "A straight flush including ace, king, queen, jack, and ten all in the same suit."
  },
  // ...more tests
] 

Une configuration de test comprend le nom, les données, la valeur réelle (l'unité testée), la valeur attendue et la description. Les valeurs réelles et attendues sont utilisées par le composant de test de l'unité visuelle pour déterminer si le test est réussi ou non. En interne, le composant de test d'unité visuelle effectue une comparaison entre les deux valeurs pour produire une valeur de "passage". Une fois qu'un succès / échec est déterminé, le test unitaire affiche la couleur, le texte et la valeur de sortie correspondants.

 // VisualUnitTest.js

importer deepEqual de 'deep-equal';

exporter la classe par défaut VisualUnitTest étend le composant {
    this.state = {
      pass: deepEqual (this.props.expected, this.props.actual),
      dataDisplay: this.props.data,
      // ...
    };

// ...
} 

Pour compléter l'expérience de l'application, les configurations de test sont itérées sur le composant de test de l'unité visuelle. En utilisant un simple opérateur de carte, le composant est initialisé avec une configuration de test et affiché.
// Définition des tests unitaires.
import {tests} depuis './tests/tests.js';

classe App étend le composant {
  constructeur () {
    super();
    this.state = {tests: tests};
  }

  render () {
    revenir (
      

    );
  }
}

L'application est terminée et les étudiants ont un projet qu'ils utilisent pour écrire du code fonctionnel pour effectuer les tests et voir une visualisation. Les élèves ouvriront le fichier scoring.js et seront invités à compléter les deux fonctions (ou unités testées) à résoudre pour les tests fournis. Comme le code est écrit dans scoring.js les éléments visuels seront mis à jour en temps réel, indiquant quels tests ont réussi / échoué:

 export {getHighCard, getHandRank}

// Utilise ce fichier pour compléter les fonctions suivantes et
// résout tous les tests unitaires affichés à droite.
//
// Essayez une approche fonctionnelle. Remplissez tout l'unité
// teste sans définir une seule variable.

// Test 1b. Obtenez la plus haute carte.
// La carte avec la valeur la plus élevée dans la main. (Deep Equals, renvoie l'objet carte complet).
const getHighCard = function (cartes) {
  revenir;
};

// Tests 1a - 10
// Marque toutes les mains du poker.
const getHandRank = function (cartes) {
  revenir; // retourne la chaîne "HighCard" pour terminer le premier test.
}; 

Conclusion

Ce projet utilise des éléments visuels et des tests unitaires pour "jouer" le processus d'apprentissage. Quelques composants simples combinés à la grille d'interface utilisateur Kendo puissante et facile à utiliser créent un affichage significatif des tests avec des données. L'utilisation de StackBlitz et de React constitue la plate-forme idéale pour un outil pédagogique destiné aux développeurs JavaScript. J'ai hâte de voir comment les élèves interagiront avec cette idée dans un atelier, une réunion ou un webinaire.

Si vous souhaitez voir la version d'une heure, un enregistrement est disponible sur le Chaîne YouTube Progress .

Essayez-le

Si vous êtes du genre, essayez l'appli Poker StoringBlitz et essayez-la. Pour en savoir plus sur la grille de données de l'interface utilisateur Kendo et les autres composants de React, lance un essai gratuit de 30 jours sur l'interface utilisateur Kendo .

Que pensez-vous de StackBlitz, idée d'utiliser des tests unitaires et des visualisations pour enseigner les techniques de code? Veuillez sonner dans les commentaires ci-dessous, j'adorerais avoir de vos nouvelles.