web-dev-qa-db-fra.com

Comment exécuter une seule spécification de test avec angular-cli

J'ai un projet Angular2 construit avec Angular-CLI (beta 20).

Existe-t-il un moyen d'exécuter des tests sur un seul fichier de spécifications sélectionné?

J'avais un projet basé sur le démarrage rapide Angular2 et je pouvais ajouter manuellement des spécifications au fichier jasmine. Mais je ne sais pas comment configurer cela en dehors des tests de karma ou comment limiter les tests de karma à des fichiers spécifiques avec des versions Angular-CLI.

angularjasmineangular-cli
80
Zielu

Dans chacun de vos fichiers .spec.ts, tous ses tests sont regroupés dans le bloc describe comme suit:

describe('SomeComponent', () => {...}

Vous pouvez facilement exécuter ce seul bloc en préfixant le nom de la fonction describe avec f:

fdescribe('SomeComponent', () => {...}

Si vous avez une telle fonction, aucun autre bloc describe ne sera exécuté. Btw. vous pouvez faire la même chose avec it => fit et il existe également une version "liste noire" - x. Alors:

  • fdescribe et fit causes niquement fonctions marquées de cette façon
  • xdescribe et xit causes tout sauf les fonctions marquées de cette façon sont exécutées
151
Tomek Sułkowski

Configurez le fichier test.ts dans le dossier src:

const context = require.context('./', true, /\.spec\.ts$/);

Remplacez /\.spec\.ts$/ par le nom de fichier que vous souhaitez tester. Par exemple: /app.component\.spec\.ts$/

Ceci exécutera le test uniquement pour app.component.spec.ts.

55
Aish Anu

Vous pouvez tester uniquement un fichier spécifique avec la commande CLI angulaire (la commande ng) comme ceci:

ng test --main ./path/to/test.ts

Docs supplémentaires sont à https://angular.io/cli/test

Notez que bien que cela fonctionne pour les fichiers de bibliothèque autonomes, cela ne fonctionnera pas pour angular components/services/etc. En effet, les fichiers angular ont des dépendances sur d'autres fichiers (à savoir src/test.ts dans Angular 7). Malheureusement, le drapeau --main ne prend pas plusieurs arguments.

14
iislucas

Si vous voulez pouvoir contrôler quels fichiers sont sélectionnés à partir de la ligne de commande, j'ai réussi à le faire pour Angular 7.

En résumé, vous devez installer @angular-devkit/build-angular:browser puis créer un plugin webpack personnalisé pour faire passer le fichier de test regex. Par exemple:

angular.json - modifie le générateur de test de @angular-devkit/build-angular:browser et définit un fichier de configuration personnalisé:

...

        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js - crée une configuration de WebPack qui lit la regex à partir de la ligne de commande:

const webpack = require('webpack');
const FILTER = process.env.KARMA_FILTER;
let KARMA_SPEC_FILTER = '/.spec.ts$/';
if (FILTER) {
  KARMA_SPEC_FILTER = `/${FILTER}.spec.ts$/`;
}
module.exports = {
  plugins: [new webpack.DefinePlugin({KARMA_SPEC_FILTER})]
}

test.ts - édite la spécification

...
// Then we find all the tests.
declare const KARMA_CONTEXT_SPEC: any;
const context = require.context('./', true, KARMA_CONTEXT_SPEC);

Utilisez ensuite comme suit pour remplacer la valeur par défaut:

KARMA_FILTER='somefile-.*\.spec\.ts$' npm run test

J'ai documenté le backstory here , des excuses préalables pour les types et les mauvais liens. Merci à la réponse ci-dessus de @ Aish-Anu pour m'avoir orienté dans la bonne direction.

5
6EQUJ5

Cela fonctionne pour moi dans Angular 7. Il est basé sur l'option --main de la commande ng. Je ne sais pas si cette option est non documentée et peut être modifiée, mais cela fonctionne pour moi. Je mets une ligne dans mon fichier package.json dans la section des scripts. Là, en utilisant l’option --main de avec la commande ng test, je spécifie le chemin du fichier .spec.ts que je veux exécuter. Par exemple

"test 1": "ng test --main E:/WebRxAngularClient/src/app/test/shared/my-date-utils.spec.ts",

Vous pouvez exécuter le script comme vous le faites. Je le lance dans Webstorm en cliquant sur "test 1" dans la section npm.

4
user2367418

J'ai résolu ce problème pour moi-même en utilisant le grunt. J'ai le script Grunt ci-dessous. Le script prend le paramètre de ligne de commande du test spécifique à exécuter, crée une copie de test.ts et ajoute ce nom de test spécifique.

Pour l'exécuter, commencez par installer grunt-cli en utilisant:

npm install -g grunt-cli

Mettez les dépendances ci-dessous dans votre package.json:

"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^2.0.0",
"grunt-string-replace": "^1.3.1"

Pour l'exécuter, enregistrez le fichier grunt ci-dessous sous le nom Gruntfile.js dans votre dossier racine. Ensuite, en ligne de commande, exécutez-le en tant que:

grunt --target=app.component

Cela lancera app.component.spec.ts.

Le fichier Grunt est comme ci-dessous:

/*
This gruntfile is used to run a specific test in watch mode. Example: To run app.component.spec.ts , the Command is: 
grunt --target=app.component
Do not specific .spec.ts. If no target is specified it will run all tests.
*/
module.exports = function(grunt) {
var target = grunt.option('target') || '';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: ['temp.conf.js','src/temp-test.ts'],
    copy: {
      main: {
        files: [
             {expand: false, cwd: '.', src: ['karma.conf.js'], dest: 'temp.conf.js'},
             {expand: false, cwd: '.', src: ['src/test.ts'], dest: 'src/temp-test.ts'}
             ],
      }
    },
    'string-replace': {
          dist: {
            files: {
              'temp.conf.js': 'temp.conf.js',
              'src/temp-test.ts': 'src/temp-test.ts'
            },
            options: {
              replacements: [{
                pattern: /test.ts/ig,
                replacement: 'temp-test.ts'
              },
              {
                pattern: /const context =.*/ig,
                replacement: 'const context = require.context(\'./\', true, /'+target+'\\\.spec\\\.ts$/);'
              }]
            }
        }
    },
    'exec': {
        sleep: {
          //The sleep command is needed here, else webpack compile fails since it seems like the files in the previous step were touched too recently
          command: 'ping 127.0.0.1 -n 4 > nul',
          stdout: true,
          stderr: true
        },
        ng_test: {
          command: 'ng test --config=temp.conf.js',
          stdout: true,
          stderr: true
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-string-replace');
    grunt.loadNpmTasks('grunt-exec');
  // Default task(s).
  grunt.registerTask('default', ['clean','copy','string-replace','exec']);

};
3
vanval