En utilisant Angular/CLI dans VS Code, puis-je exécuter les tests en même temps que les constructions ?

Question

J'ai utilisé Angular/CLI dans le contexte de VS Code.

A partir de l'invite du Terminal dans VS Code, on peut invoquer ng serve o ng test -- mais existe-t-il un moyen de combiner les deux (par exemple, quelque chose comme ng serve test ) de sorte que, lorsque je fais du TDD et que je développe d'abord des tests, je vois le terminal afficher les tests échoués, puis passer au vert lorsque j'écris du code pour répondre aux tests, Y voir les résultats de la page web sur un autre écran ?

Gracias.

Answer 1

Il y a deux solutions que je connais pour ce problème :

Une solution pour utiliser 2 terminaux

• il suffit d'ouvrir 2 bornes
• en une seule fois, exécutez ng serve
• dans l'autre, exécutez ng test

J'ai essayé avec les terminaux VS Code, et les terminaux cmd traditionnels de Windows. Cela fonctionne mais c'est très limité et implique beaucoup de pollution visuelle.

Une solution distribuable à l'aide d'un paquet npm

Vous pouvez utiliser un npm paquet appelé npm-run-all . Ce paquet vous aide à exécuter plusieurs npm des tâches en parallèle ou de manière séquentielle.

Il suffit de courir

npm install --save-dev npm-run-all

Celui-ci installe npm-run-all dans les dépendances dev de votre projet.

npm-run-all a 2 modes :

• run-p : exécute plusieurs tâches en parallèle
• run-s : exécute plusieurs tâches de manière séquentielle

Dans le package.json de votre projet, dans le fichier script vous pouvez maintenant ajouter :

"scripts": {
  ...
  "tdd": "run-p \"start\" \"test\"",
  "verify": "run-s \"test -- --watch=false\" \"lint\"",
  ...
},

Vous pouvez appeler les tâches comme vous le souhaitez. J'ai juste nommé la tâche dev tdd d'être plus explicite sur mon intention.

Nota : Vous pouvez également utiliser un autre npm paquet appelé concurrently mais je ne suis pas sûr qu'il ait l'avantage d'avoir l'avantage d'avoir l'avantage. s'exécuter de manière séquentielle mode.

Cette solution est distribuable : chaque développeur est désormais en mesure d'effectuer une npm install sur votre projet et exécutez la tâche tdd (ou quel que soit le nom que vous voulez lui donner). De plus, vous pouvez également créer des tâches qui seront exécutées dans une usine de construction. Ceci permet à votre projet d'être intégré dans un contexte dev-ops.

Answer 2

Les commandes npm script vous permettent de combiner des commandes en utilisant &&. Par exemple, le projet nouvellement généré a une commande start définie comme suit :

 "start": "ng serve"

vous pouvez le changer pour qu'il ressemble à ceci :

 "start": "ng test && ng serve"

Ensuite, lancez votre application en utilisant

npm start

Vous pouvez également définir votre propre commande npm script, par ex.

"serveWithTest": "ng test && ng serve"

Ensuite, vous pouvez l'exécuter comme ceci :

npm run serveWithTest

Par défaut, karma est configuré pour s'exécuter en mode veille. Ainsi, chaque fois que vous modifiez et enregistrez votre code, les tests sont automatiquement relancés.

Mise à jour. Si la configuration ci-dessus ne fonctionne pas pour vous (comme dans le commentaire sur Powershell), vous pouvez la configurer différemment. Ajoutez les deux commandes suivantes dans la section scripts du package.json :

"serve": "ng serve",
"preserve": "ng test"

Modifiez la propriété singleRun pour qu'elle soit vraie dans karma.conf.js.

Effectuez le test et le service comme suit :

npm run serve