Як виконати лише один тестовий зразок з кутом-клип


143

У мене є збірка проекту Angular2 з Angular-CLI (бета-версія 20).

Чи є спосіб запустити тести лише на один вибраний специфікаційний файл?

У мене був проект на основі швидкого запуску Angular2, і я міг вручну додати характеристики до файлу жасмину. Але я не знаю, як встановити це за межами тестування на карму чи як обмежити тести на карму певними файлами з наборами Angular-CLI.

Відповіді:


224

Кожен ваш .spec.tsфайл має всі свої тести, згруповані в такий describeблок:

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

Ви можете легко запустити лише цей єдиний блок, префіксуючи describeім'я функції за допомогою f:

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

Якщо у вас є така функція, інші describeблоки не працюватимуть. Btw. ви можете зробити подібну річ з it=> fitі є також "чорний список" версії - x. Так:

  • fdescribeі fitвикликає запуск лише функцій, позначених таким чином
  • xdescribeі xitвикликає запуск усіх, крім функцій, позначених цим способом

1
Я використовував fdescribe у своєму файлі helloworld.component.spec.ts, але також відображаються помилки файлу app.component.spec.ts.
Майстер Йода

1
Це тому, що весь код оцінюється (інакше він би не знав, що в ваших тестах є ARE fdescribes) - fdescribe обмежує виконання результатів тестів. Вам потрібно виправити помилки синтаксису / машинопису в інших файлах.
Томек Сулковський

3
Я думаю, хоча ОП прийняла цю відповідь. Питання гостро було оцінити, як оцінити лише один специфікаційний файл: P
roberto tomás

4
Це не відповідь. @iislucas має відповідь нижче.
Бен Рачикот

Чи можу я встановити прапор у моєму середовищі CI, який не вдасться зустрітися fdescribeабо xdescribe? Я не хочу, щоб неохайний рецензент (я) об'єднав PR, який пропускає всі мої тести.
ILikeFood

80

Налаштування test.tsфайлу всередині srcпапки:

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

Замініть /\.spec\.ts$/ім'я файлу, яке ви хочете протестувати. Наприклад:/app.component\.spec\.ts$/

Це запустить тест лише для app.component.spec.ts.


8
слід прийняти відповідь, цей підхід видаляє набір gumpfy результатів у журналах - на відміну від fdescribe, який є багатослівним
daday74

3
просте рішення :) заощадило багато часу.
Detoxic-Soul

Це відповідатиме компонентам із будь-чим перед "app", так що "product-app.component.spec.ts" або "order-app.component.spec.ts" також буде збігом. Я не найбільший з regx. Чи є спосіб конкретно націлити на "app.component.spec.ts"?
hanesjw

Я спробував /^app.component\.spec\.ts$/, але не пощастило. Здається, працює в тестері для регулярних викидів, але тест з ng чомусь не подобається; видає помилку.
hanesjw

повинна бути рекомендована відповідь
Аніл Вангарі

55

Ви можете протестувати лише певний файл з кутовим CLI ( ngкоманда) таким чином:

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

Інші документи розміщені на веб-сторінці https://angular.io/cli/test

Зауважте, що, хоча це працює для автономних бібліотечних файлів, воно не працюватиме для кутових компонентів / служб / тощо. Це відбувається тому, що кутові файли залежать від інших файлів (а саме src/test.tsу Angular 7). На жаль, --mainпрапор не приймає багато аргументів.


2
Це чудова пропозиція, і вона працює. Дякую! Крім того, варто пам’ятати, що якщо ми спробуємо вказати його на автоматично створений component.spec.tsфайл, ми побачимо, що тести ніколи не починаються: 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... Я впевнений, що подальше вирішення можна зламати разом, але це щось, що слід знати тому, що налаштування, здійснене всередині нього src/main.tsта імпорт, у цьому випадку недоступне.
пулкіцінгаль

Коли я запускаю цілі тести за допомогою команди, ng tтест я пишу, але коли я запускаю конкретний файл, він дає помилку. TypeError: Неможливо прочитати властивість 'getComponentFromError' з null на TestBedViewEngine._initIfNeeded (node_modules/@angular/core/fesm2015/testing.js: 3112: 1) на TestBedViewEngine.get (node_modules/@angular/201m201/fesmfesms) 3230: 1) на Function.get (node_modules/@angular/core/fesm2015/testing.js: 2960: 1) в UserContext. <anonymous> (src / app / timebar.service.spec.ts: 14: 45) "
canbax

1
Ця відповідь працює і для Angular 8. Це має бути прийнятою відповіддю, оскільки він запустить рівно один тестовий специфікаційний файл.

2
Для Angular 9 я отримую невідомий варіант "--main" :(
rmcsharry

6

Якщо ви хочете мати можливість контролювати, які файли обрані з командного рядка, мені вдалося це зробити для Angular 7.

Підсумовуючи це, вам потрібно встановити, @angular-devkit/build-angular:browserа потім створити користувацький плагін для веб-упаковки, щоб пройти регекс тестового файлу. Наприклад:

angular.json - змінити програму тестування @angular-devkit/build-angular:browserта встановити спеціальний конфігураційний файл:

...

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

extra-webpack.config.js - створити конфігурацію вебпакету, яка читає регулярний вираз із командного рядка:

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 - редагуйте специфікацію

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

Потім скористайтеся наступним чином, щоб змінити типовий параметр:

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

Я задокументував тут історію , заздалегідь вибачте за типи та помилки. Заслуговуйте на відповідь вище від @ Aish-Anu за те, що він спрямовував мене в правильному напрямку.


4

Це працює для мене в Angular 7. Він заснований на --main варіант команди ng. Я не впевнений, чи є ця опція недокументованою і, можливо, може бути змінена, але вона працює для мене. Я помістив рядок у свій файл package.json у розділі сценаріїв. Там, використовуючи параметр --main з командою ng test, я вказую шлях до файлу .spec.ts, який я хочу виконати. Наприклад

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

Ви можете запустити сценарій під час запуску будь-якого такого сценарію. Я запускаю його у Webstorm, натиснувши на "test 1" у розділі npm.


3

Я вирішив цю проблему для себе, використовуючи грунт. Я маю сценарій бурчання нижче. Сценарій - це взяти параметр командного рядка конкретного тесту для запуску та створити копію test.ts та помістити туди конкретне ім'я тесту.

Щоб виконати це, спочатку встановіть grunt-cli, використовуючи:

npm install -g grunt-cli

Покладіть нижче грунтові залежності у ваш 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"

Щоб запустити його, збережіть наведений нижче файл grunt як Gruntfile.js у вашій кореневій папці. Потім з командного рядка запустіть його як:

grunt --target=app.component

Це запустить app.component.spec.ts.

Файл Grunt наведено нижче:

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

};

Дивлячись на прийняте рішення, я не думаю, що такий спосіб рекомендується
Дренай

2
@Brian - моє рішення уникає необхідності змінювати вихідний код, а значить, запобігає можливим помилкам при перевірці у файлі. Моє рішення дозволяє просто вказати ім'я тесту в командному рядку шляхом автоматизації кроків вручну.
vanval

Так, насправді це хороший момент. Є хороший шанс, що ви можете забути видалити xdescribe або fdescribe - і ваш тест буде назавжди видалений!
Дренай

3
@Ryan ви можете встановити / налаштувати tslint-jasmine-правила, щоб перевірити наявність викликів fdescribe / fit / xdescribe / xit та не виконати запуск tslint; якщо це частина попереднього етапу, це запобігає випадковій перевірці в тестах або зосередженою, або відключеною.
Ніл Мензіс

1

Додавши до цього таких людей, як я, які шукали спосіб запустити одну специфікацію в Angular і знайшли це ТАК.

Згідно з останніми документами Angular (v9.0.6 під час написання), ng testкоманда має --includeопцію, де можна вказати каталог *.spec.(ts|tsx)файлів або просто один .spec.(ts|tsx)файл.

https://angular.io/cli/test


0

Просто невелика потреба змінити test.tsфайл у папці src:

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

Ось test-exampleточне ім’я файлу, яке нам потрібно запустити

Таким же чином, якщо вам потрібно протестувати лише сервісний файл, ви можете замінити ім'я файлу типу "/test-example.service"


0

Це працювало для мене в кожному випадку:

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

Однак я зазвичай отримую "TypeError: Неможливо прочитати властивість 'ngModule' null" для цього:

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

Версія @ angular / cli 10.0.4

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.