Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo ejecutar solo una especificación de prueba con angular-cli – Utilidad de código

 Tengo la compilación del proyecto Angular2 con Angular-CLI (beta 20).

¿Hay alguna manera de ejecutar pruebas contra un solo archivo de especificaciones seleccionado?

Solía ​​tener un proyecto basado en el inicio rápido de Angular2 y podía agregar especificaciones manualmente al archivo jasmine. Pero no sé cómo configurar esto fuera de las pruebas de karma o cómo limitar las pruebas de karma a archivos específicos con compilaciones Angular-CLI.

,

Cada uno de sus .spec.tsarchivos tiene todas sus pruebas agrupadas en describebloques como este:

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

Puede ejecutar fácilmente solo este bloque único, anteponiendo el describenombre de la función con f:

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

Si tiene esa función, no describese ejecutarán otros bloques.
Por cierto. puede hacer algo similar con it=> fity también hay una versión de "lista negra": xAsi que:

  • fdescribefithace que solo las funciones marcadas de esta manera se ejecuten
  • xdescribexithace que todas las funciones excepto las marcadas de esta manera se ejecuten

,

Configurar test.tsel archivo dentro de la srccarpeta:

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

Reemplácelo /\.spec\.ts$/con el nombre del archivo que desea probar. Por ejemplo:/app.component\.spec\.ts$/

Esto ejecutará la prueba solo para app.component.spec.ts.

,

Puede probar solo un archivo específico con Angular CLI (el ngcomando) de esta manera:

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

Hay más documentos en https://angular.io/cli/test

Tenga en cuenta que si bien esto funciona para archivos de biblioteca independientes, no funcionará para componentes angulares/servicios/etc. Esto se debe a que los archivos angulares tienen dependencias con otros archivos (es decir, src/test.tsen Angular 7). Lamentablemente, la --mainbandera no acepta múltiples argumentos.

,

Esto funcionó para mí en todos los casos:

1
ng test --include='**/dealer.service.spec.ts'

Sin embargo, generalmente obtuve "TypeError: Cannot read property 'ngModule' of null" para esto:

1
ng test --main src/app/services/dealer.service.spec.ts

Versión de @angular/cli 10.0.4

,

usar--include

es trabajar con--include

1
ng test --include src/app/path-to-component/path-component.component.spec.ts

Lo intenté --mainpero muestra todos los resultados fallidos mientras no lo es. Creo --mainque cambiará el test.tsarchivo principal.

,

Si desea poder controlar qué archivos se seleccionan desde la línea de comando, logré hacer esto para Angular 7.

En resumen, debe instalar @angular-devkit/build-angular:browsery luego crear un complemento de paquete web personalizado para pasar la expresión regular del archivo de prueba. Por ejemplo:

angular.json : cambie el generador de pruebas @angular-devkit/build-angular:browsery configure un archivo de configuración personalizado:

1
2
3
4
5
6
7
8
...
        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js : cree una configuración de paquete web que lea la expresión regular desde la línea de comando:

1
2
3
4
5
6
7
8
9
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 – editar la especificación

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

Luego use lo siguiente para anular el valor predeterminado:

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

Documenté la historia de fondo aquí , disculpas de antemano por los tipos y los enlaces erróneos. Crédito a la respuesta anterior de @ Aish-Anu por indicarme la dirección correcta.

,

En una terminal bash, me gusta usar el doble guión. Con VS Code, puede hacer clic con el botón derecho en el archivo de especificaciones en el explorador o en la pestaña abierta. Luego seleccione 'Copiar ruta relativa'. Ejecute el siguiente comando pegando la ruta relativa desde el portapapeles.

1
npm t -- --include relative/path/to/file.spec.ts

El doble guión señala el final de las opciones de comando para npm ty pasa cualquier cosa después de eso al siguiente comando que apunta a ng tNo requiere ninguna modificación y rápidamente da los resultados deseados.

,

Esto me funciona en Angular 7. Se basa en la opción principal del comando ng. No estoy seguro de si esta opción no está documentada y posiblemente esté sujeta a cambios, pero me funciona. Puse una línea en mi archivo package.json en la sección de scripts. Allí, usando la opción principal con el comando ng test, especifico la ruta al archivo .spec.ts que quiero ejecutar. Por ejemplo

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

Puede ejecutar la secuencia de comandos al igual que ejecuta cualquiera de dichas secuencias de comandos. Lo ejecuto en Webstorm haciendo clic en "prueba 1" en la sección npm.

,

Una forma simple de hacer esto es comenzar describe y todo con f .

1
2
3
4
5
6
7
fdescribe('testecomponente', () => {
  fit('should create', () => {
    //your code 
  }
  
}
  

,

Resolví este problema por mí mismo usando grunt. Tengo el script gruñido a continuación. Lo que hace el script es tomar el parámetro de la línea de comando de la prueba específica para ejecutar y crea una copia de test.ts y coloca este nombre de prueba específico allí.

Para ejecutar esto, primero instale grunt-cli usando:

1
npm install -g grunt-cli

Ponga las siguientes dependencias gruñidas en su paquete.json:

1
2
3
4
5
"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"

Para ejecutarlo, guarde el siguiente archivo grunt como Gruntfile.js en su carpeta raíz. Luego, desde la línea de comando, ejecútelo como:

1
grunt --target=app.component

Esto ejecutará app.component.spec.ts.

El archivo Grunt es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*
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']);
};

,

Agregando a esto para personas como yo que estaban buscando una manera de ejecutar una sola especificación en Angular y encontraron este SO.

De acuerdo con los últimos documentos de Angular (v9.0.6 al momento de escribir), el ng testcomando tiene una --includeopción en la que puede especificar un directorio de *.spec.(ts|tsx)archivos o solo un .spec.(ts|tsx)archivo en sí.

https://angular.io/cli/test

,

Solo se necesita un pequeño cambio en test.tsel archivo dentro de la carpeta src:

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

Aquí test-exampleestá el nombre exacto del archivo que necesitamos para ejecutar

De la misma manera, si necesita probar el archivo de servicio, solo puede reemplazar el nombre del archivo como "/test-example.service"

,

Si está trabajando en un proyecto que usa arquitectura monorepo, debe escribir el nombre del proyecto después del script en la línea de comando.
Por ejemplo:

1
ng test MyProject1Name -- --include='myComponent.component.spec.ts'

,

Desde angular-cli puede ejecutar este comando y la prueba incluirá solo el archivo de especificaciones que desee.

ng test: incluye la ruta del archivo de especificaciones

Publicar un comentario

0 Comentarios