web-dev-qa-db-fra.com

Tests de débogage dans NG Test

J'utilise Angular CLI et VS code mais aucun de mes points d'arrêt dans mes fichiers de spécifications ne semble être touché lorsque je lance ng test?

Dois-je faire une config?

angularvisual-studio-codekarma-jasmineangular-cli
29
72GM

Les autres réponses sont des réponses tout à fait valables, mais ayant utilisé Angular depuis environ 18 mois maintenant, j'ai tendance à le faire dans le navigateur - chrome outils!

Exécutez ng test puis f12 et recherchez le fichier de spécification via le contexte webpack. Ajoutez un ou plusieurs points d'arrêt et actualisez-le. Il atteindra lesdits points d'arrêt. Selon la capture d'écran

enter image description here

33
72GM

Dans la nouvelle version de VSCode (1.14.0) , ils suivent ceci recette :

Vous pouvez déboguer l’application Angular entièrement (tests unitaires compris)), la recette est simple.

15
titusfx

Mise à jour angulaire 8.1.3 + code Visual Studio 1.36.1

Pour quelque raison que ce soit, il y a le préfixe _karma_webpack_ (N'était pas là pour la version 7), donc j'ai dû ajouter une section supplémentaire pathMapping à .vscode/launch.json:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "pathMapping": {
        "/_karma_webpack_": "${workspaceRoot}"
      }
    },

C’est ce qui a fonctionné pour moi avec Angular CLI 1.0. * Et Chrome sur Windows 7.

Changer les fichiers de configuration

Dans le répertoire racine de votre projet, ouvrez karma.conf.js. Juste après singleRun: false, Ajoutez , Suivi de cette section:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

Ajoutez la configuration à .vscode/launch.json:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}"
    },

Lancer le débogage

  1. Exécuter ng test --browsers ChromeDebug

  2. Attendez que le navigateur Chrome démarre. Vous verrez quelque chose comme ceci en ligne de commande:

    01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

  3. Définissez le point d'arrêt dans l'un de vos fichiers .spec.ts.

  4. Dans Visual Studio Code, choisissez la configuration de débogage Unit tests Et appuyez sur F5 (bouton "Démarrer le débogage").

  5. Appuyez sur Shift+Ctrl+F5 Ou actualisez la fenêtre Chrome pour réexécuter les tests et atteindre le point d'arrêt.

Pour plus de commodité

Vous pouvez également modifier votre package.json et ajouter un nouveau script:

"test-debug": "ng test --browsers ChromeDebug",

Ensuite, la prochaine fois que vous souhaitez démarrer ng test Avec le débogage, exécutez simplement:

npm run test-debug

Les références:

12
Andrei Sinitson

Juste pour ajouter aux autres réponses:

  • Suivez les instructions @titusfx mentionnés.
  • Dans le terminal run ng test.
  • Dans la vue de débogage de Visual Studio Code, sélectionnez ng test du menu déroulant.
  • vous devrez peut-être actualiser le navigateur si vous ne pouvez pas atteindre les points d'arrêt la première fois.

enter image description here

3
A-Sharabiani

Vous pouvez simplement ajouter un "débogueur" où vous souhaitez déboguer et exécuter

ng test

Lorsque le navigateur chrome s’ouvre, activez les outils de développement et il s’arrêtera sur votre "débogueur".

0
Joao Vitor Marques