Cara menjalankan hanya satu spec tes dengan angular-cli

143

Saya memiliki proyek membangun Angular2 dengan Angular-CLI (beta 20).

Apakah ada cara untuk menjalankan tes hanya terhadap satu file spesifikasi yang dipilih?

Saya dulu punya proyek berdasarkan mulai cepat Angular2, dan saya bisa secara manual menambahkan spesifikasi ke file melati. Tetapi saya tidak tahu bagaimana mengatur ini di luar pengujian karma atau bagaimana membatasi tes karma untuk file tertentu dengan build Angular-CLI.

Zielu
sumber

Jawaban:

224

Setiap .spec.tsfile Anda memiliki semua tes yang dikelompokkan dalam describeblok seperti ini:

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

Anda dapat dengan mudah menjalankan hanya satu blok ini, dengan mengawali describenama fungsi dengan f:

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

Jika Anda memiliki fungsi seperti itu, tidak ada describeblok lain yang akan berjalan. Btw. Anda dapat melakukan hal serupa dengan it=> fitdan ada juga versi "daftar hitam" - x. Begitu:

  • fdescribedan hanyafit menyebabkan fungsi-fungsi yang ditandai untuk dijalankan
  • xdescribedan xitmenyebabkan semua kecuali fungsi yang ditandai dengan cara ini untuk dijalankan
Tomek Sułkowski
sumber
1
Saya telah menggunakan fdescribe di file helloworld.component.spec.ts saya tetapi kesalahan pada file app.component.spec.ts juga ditampilkan.
Master Yoda
1
Itu karena semua kode sedang dievaluasi (jika tidak, tidak akan tahu bahwa ADA uraian di dalam tes Anda) - deskripsi hanya membatasi pelaksanaan hasil tes. Anda masih perlu memperbaiki kesalahan sintaksis / skrip pada file lain.
Tomek Sułkowski
3
Saya pikir meskipun OP menerima jawaban ini, pertanyaannya adalah bagaimana sebenarnya hanya mengevaluasi satu file spesifikasi: P
roberto tomás
4
Ini bukan jawabannya. @iislucas memiliki jawaban di bawah ini.
Ben Racicot
Bisakah saya mengatur beberapa flag di lingkungan CI saya yang akan gagal bertemu fdescribeatau xdescribe? Saya tidak ingin peninjau yang ceroboh (saya) menggabungkan PR yang melewatkan semua tes saya.
ILikeFood
80

Konfigurasikan test.tsfile di dalam srcfolder:

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

Ganti /\.spec\.ts$/dengan nama file yang ingin Anda uji. Sebagai contoh:/app.component\.spec\.ts$/

Ini akan menjalankan tes hanya untuk app.component.spec.ts.

Aish Anu
sumber
8
harus diterima jawaban, pendekatan ini menghilangkan beban keluaran gumpfy dalam log - tidak seperti deskripsi yang verbose
danday74
3
solusi mudah :) menghemat banyak waktu.
Detoxic-Soul
Ini akan mencocokkan komponen dengan apa pun sebelum 'app' jadi 'product-app.component.spec.ts' atau 'order-app.component.spec.ts' juga akan cocok. Saya bukan yang terhebat dengan regx. Apakah ada cara untuk secara khusus menargetkan 'app.component.spec.ts'?
hanesjw
Saya mencoba /^app.component\.spec\.ts$/ tetapi tidak berhasil Tampaknya bekerja di penguji regex tetapi tes ng tidak menyukainya karena alasan tertentu; menghasilkan kesalahan.
hanesjw
harus menjadi jawaban yang disarankan
Anil Vangari
55

Anda dapat menguji hanya file tertentu dengan CLI Angular ( ngperintah) seperti ini:

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

Dokumen lebih lanjut ada di https://angular.io/cli/test

Perhatikan bahwa sementara ini berfungsi untuk file perpustakaan yang berdiri sendiri, itu tidak akan berfungsi untuk komponen / layanan sudut / dll. Ini karena file sudut memiliki dependensi pada file lain (yaitu src/test.tsdalam Angular 7). Sayangnya --mainbendera tidak mengambil banyak argumen.

iislucas
sumber
2
Ini saran yang bagus dan berhasil. Terima kasih! Selain itu, perlu disadari bahwa jika kita mencoba dan mengarahkannya ke component.spec.tsfile yang dibuat secara otomatis , kita akan melihat bahwa tes tidak pernah dimulai: Error: AsyncTestZoneSpec is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/async-test.js... Saya yakin solusi lebih lanjut dapat diretas bersama tetapi itu adalah sesuatu yang harus diperhatikan karena pengaturan dilakukan di dalam src/main.tsdan impornya tidak tersedia dalam kasus ini.
pulkitsinghal
Ketika saya menjalankan seluruh tes menggunakan perintah ng ttes saya menulis melewati tetapi ketika saya menjalankan file tertentu itu memberikan kesalahan. TypeError: Tidak dapat membaca properti 'getComponentFromError' of null di TestBedViewEngine._initIfNeeded (node_modules/@angular/core/fesm2015/testing.js: 3112: 1) di TestBedViewEngine.get (node_modules/f/j/test/f//j/////j/tter/meter/file/termake.html). 3230: 1) di Function.get (node_modules/@angular/core/fesm2015/testing.js: 2960: 1) di UserContext. <anonymous> (src / app / timebar.service.spec.ts: 14: 45) "
canbax
1
Jawaban ini juga berlaku untuk Angular 8. Ini harus menjadi jawaban yang diterima karena akan menjalankan tepat satu file spesifikasi pengujian.
2
Untuk Angular 9 saya mendapatkan opsi tidak dikenal "--main" :(
rmcsharry
6

Jika Anda ingin dapat mengontrol file mana yang dipilih dari baris perintah, saya berhasil melakukan ini untuk Angular 7.

Singkatnya, Anda perlu menginstal @angular-devkit/build-angular:browserdan kemudian membuat plugin webpack khusus untuk melewati file tes regex melalui. Sebagai contoh:

angular.json - ubah pembuat uji dari @angular-devkit/build-angular:browserdan atur file konfigurasi khusus:

...

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

extra-webpack.config.js - buat konfigurasi webpack yang membaca regex dari baris perintah:

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 - edit spec

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

Kemudian gunakan sebagai berikut untuk mengganti default:

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

Saya mendokumentasikan backstory di sini , permintaan maaf sebelumnya untuk jenis dan mis-link. Terima kasih atas jawaban di atas oleh @ Aish-Anu karena mengarahkan saya ke arah yang benar.

6EQUJ5
sumber
4

Ini berfungsi untuk saya dalam Angular 7. Ini didasarkan pada opsi --main dari perintah ng. Saya tidak yakin apakah opsi ini tidak berdokumen dan mungkin dapat berubah, tetapi itu berfungsi untuk saya. Saya menaruh baris di file package.json saya di bagian skrip. Di sana menggunakan opsi --main dengan perintah tes ng, saya menentukan path ke file .spec.ts yang ingin saya jalankan. Sebagai contoh

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

Anda dapat menjalankan skrip saat menjalankan skrip tersebut. Saya menjalankannya di Webstorm dengan mengklik "test 1" di bagian npm.

pengguna2367418
sumber
3

Saya memecahkan masalah ini untuk diri saya sendiri dengan menggunakan gerutuan. Saya memiliki skrip kasar di bawah ini. Apa yang dilakukan skrip adalah mengambil parameter baris perintah dari pengujian khusus untuk menjalankan dan membuat salinan test.ts dan menempatkan nama pengujian khusus ini di sana.

Untuk menjalankan ini, instal dulu grunt-cli menggunakan:

npm install -g grunt-cli

Masukkan dependensi mendengus di bawah ini di package.json Anda:

"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"

Untuk menjalankannya simpan file grunt di bawah ini sebagai Gruntfile.js di folder root Anda. Kemudian dari command line jalankan sebagai:

grunt --target=app.component

Ini akan menjalankan app.component.spec.ts.

File kasar adalah sebagai berikut:

/*
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']);

};
vanval
sumber
Melihat solusi yang diterima, saya tidak merekomendasikan cara ini
Drenai
2
@ Brian - solusi saya menghindari harus memodifikasi kode sumber dan karenanya mencegah kesalahan potensial dalam memeriksa file. Solusi saya memungkinkan hanya menentukan nama tes pada baris perintah dengan mengotomatiskan langkah-langkah manual.
vanval
Ya, sebenarnya itu poin yang bagus. Ada kemungkinan besar Anda bisa lupa menghapus xdescribe atau fdescribe - dan tes Anda akan dihapus secara permanen!
Drenai
3
@Ryan Anda dapat menginstal / mengkonfigurasi aturan tslint-jasmine untuk memeriksa panggilan fdescribe / fit / xdescribe / xit dan gagal menjalankan tslint Anda; jika ini merupakan bagian dari langkah pra-komit, hal ini mencegah Anda secara tidak sengaja memeriksa tes Anda baik terfokus atau dinonaktifkan.
Neil Menzies
1

Menambahkan ini untuk orang-orang seperti saya yang sedang mencari cara untuk menjalankan satu spec di Angular dan menemukan ini SO.

Menurut dokumen Angular terbaru (v9.0.6 pada saat penulisan), ng testperintah memiliki --includeopsi di mana Anda dapat menentukan direktori *.spec.(ts|tsx)file atau hanya satu .spec.(ts|tsx)file itu sendiri.

https://angular.io/cli/test

earthican
sumber
0

Hanya perubahan kecil yang diperlukan dalam test.tsfile di dalam folder src:

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

Sini, test-example adalah nama file yang harus kita jalankan

Dengan cara yang sama, jika Anda hanya perlu menguji file layanan, Anda dapat mengganti nama file seperti "/ test-example.service"

madhu srinivas
sumber
0

Ini berhasil bagi saya dalam setiap kasus:

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

Namun, saya biasanya mendapat "TypeError: Tidak dapat membaca properti 'ngModule' of null" untuk ini:

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

Versi @ angular / cli 10.0.4

PeterB
sumber