如何使用angular cli仅执行一个测试规范

如何使用angular cli仅执行一个测试规范,angular,jasmine,angular-cli,Angular,Jasmine,Angular Cli,我使用Angular2项目构建Angular2 CLI(beta 20) 有没有办法只对一个选定的等级库文件运行测试 我曾经有一个基于Angular2 quick start的项目,我可以手动将规范添加到jasmine文件中。但是我不知道如何在karma测试之外设置此项,或者如何使用Angular CLI构建将karma测试限制到特定文件。您的每个.spec.ts文件都将其所有测试分组在描述块中,如下所示: description('SomeComponent',()=>{…} 通过在descr

我使用Angular2项目构建Angular2 CLI(beta 20)

有没有办法只对一个选定的等级库文件运行测试


我曾经有一个基于Angular2 quick start的项目,我可以手动将规范添加到jasmine文件中。但是我不知道如何在karma测试之外设置此项,或者如何使用Angular CLI构建将karma测试限制到特定文件。

您的每个
.spec.ts
文件都将其所有测试分组在
描述
块中,如下所示:

description('SomeComponent',()=>{…}

通过在
descripe
函数名前面加上
f
,您可以轻松地运行这一块:

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

如果您有这样的功能,则不会运行其他
descripe
块。 顺便说一句,你可以用
it
=>
fit
做类似的事情,还有一个“黑名单”版本-
x
。因此:

  • fdescribe
    fit
    只会导致以这种方式标记的函数运行
  • xdescripe
    xit
    会导致所有以这种方式标记的函数运行

我自己用grunt解决了这个问题。我有下面的grunt脚本。该脚本的作用是运行特定测试的命令行参数,创建test.ts的副本,并将此特定测试名称放在其中

要运行此操作,请首先使用以下命令安装grunt cli:

npm install -g grunt-cli
将以下grunt依赖项放入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']);

};

src
文件夹中配置
test.ts
文件:

const context = require.context('./', true, /\.spec\.ts$/);
/\.spec\.ts$/
替换为要测试的文件名。例如:
/app.component\.spec\.ts$/


这将仅对app.component.spec.ts运行测试

如果您希望能够控制从命令行中选择哪些文件,我已设法对Angular 7执行此操作

总之,您需要安装
@angular devkit/build angular:browser
,然后创建一个自定义的网页插件,以通过测试文件regex。例如:

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})]
}
测试.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为我指出了正确的方向。

这在Angular 7中对我有效。它基于ng命令的--main选项。我不确定此选项是否未记录并且可能会更改,但它对我有效。I put脚本部分中我的package.json文件中的一行。在这里,使用的--main选项和ng test命令,我指定了要执行的.spec.ts文件的路径

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

您可以在运行任何此类脚本时运行该脚本。我在Webstorm中通过单击npm部分中的“测试1”来运行它。

您可以使用(
ng
命令)仅测试特定文件,如下所示:

ng测试--main./path/to/test.ts
更多文件请访问


请注意,虽然这适用于独立库文件,但不适用于角度组件/服务等。这是因为角度文件依赖于其他文件(即角度7中的
src/test.ts
)。遗憾的是,
--main
标志不接受多个参数。

对于像我这样的人来说,他们正在寻找一种在Angular中运行单个规范的方法,并发现了这一点

根据最新的Angular文档(编写本文时为v9.0.6),
ng test
命令有一个
--include
选项,您可以在其中指定
*.spec.(ts | tsx)
文件的目录,或者只指定一个
.spec.(ts | tsx)
文件本身


只需在src文件夹中的
test.ts
文件中进行少量更改:

const context = require.context('./', true, /test-example\.spec\.ts$/);
这里,
testexample
是我们需要运行的确切文件名


同样,如果只需要测试服务文件,可以替换文件名,如“/test example.service”

这在任何情况下都适用于我:

ng test --include='**/dealer.service.spec.ts'
但是,我通常会得到“TypeError:无法读取null的属性'ngModule'”:

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

在bash终端中,@angular/cli 10.0.4的版本我喜欢使用双破折号。使用VS代码,您可以右键单击资源管理器中的spec文件或“打开”选项卡。然后选择“复制相对路径”。运行下面的命令,从剪贴板粘贴相对路径

npm t -- --include relative/path/to/file.spec.ts
双破折号表示
npm t
的命令选项结束,并将其后的任何内容传递给指向
ng t
的下一个命令。它不需要任何修改,并快速给出所需的结果。

使用
--包括

它与
--include

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

我尝试了
--main
,但它显示了所有失败的结果,而它没有。我认为
--main
将更改main
test.ts
文件。

查看已接受的解决方案,我认为这种方式不合适recommended@Brian-我的解决方案避免了修改源代码,从而防止了签入文件时可能出现的错误。我的该解决方案通过自动执行手动步骤,只需在命令行上指定测试名称即可。是的,实际上这是一个很好的观点。很有可能您会忘记删除xdescribe或fdescribe-您的测试将被永久删除!@Ryan您可以安装/配置tslint jasmine规则以检查fdescribe/fit/xdescribe/xitC