使用 angular4 + mocha + karma 重复测试
Tests repeat with angular4 + mocha + karma
Question/Issue
我已经将 angular-cli 1.0.0 生成的基本项目从使用 jasmine 转换为使用 mocha。 为什么当我完成到 mocha 的转换时,所有的测试 运行 都做两次? 有趣的是当我们 运行 与 wallabyjs tests/code 相同 运行ner,或者用降级的angular2,那么只测试运行一次。
为了从头开始重现,我采取了 3 个步骤和可选的第 4 个步骤。不幸的是,涉及到很多代码,所以我提供了一个存储库来演示,并提供了一个命令来执行每个步骤,可以在步骤详细信息中找到。
第 1 步使用 angular-cli 创建项目
ng new someBlankProject
cd someBlankProject
ng test
预期结果 3 次测试 运行
详情
- 配置
- angular-cli + angular4 + 业力 + 茉莉花
- angular-cli项目jasmine + karma测试结果
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 01-fresh-project; cd 01-fresh-project; git checkout 2bf12b577173085344a86e37726d9f7ece930c77;npm install;npm run test -- --single-run=true
第 2 步验证 jasmine 在本地和 CI
上使用 karma 和 wallaby 测试 运行
- 介绍 diff 包括 CI 和 wallabyjs 运行ner
npm install
解决依赖关系
ng test
预期结果 3 次测试 运行
- 用wallabyjs确认
No failing tests, 3 passing
详情
- 配置
- angular-cli + angular4 + 业力 + 茉莉花
- angular-cli项目jasmine + karma测试结果
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 02-add-wallaby; cd 02-add-wallaby; git checkout 0bb96884d0e71f286d0b4fedc0dcafd20dc9d2b1;npm install;npm run test -- --single-run=true
- wallabyjs 结果
No failing tests, 3 passing
第 3 步介绍 mocha 并将规范从 jasmine 转换为 mocha
- 介绍 diff 转换为 mocha
npm prune;npm install
清理和解决依赖关系
ng test
预期结果 3 次测试 运行 实际结果 6 次测试 运行
Chromeium 53.0.2785 (Ubuntu 0.0.0): Executed 6 of 3 SUCCESS (0.347 secs / 0.042 secs)
- 用wallabyjs确认
No failing tests, 3 passing
详情
- 配置
- angular-cli + angular4 + 业力 + mocha
- angular-cli项目mocha+karma测试结果
- "Failed" 构建 6 of 3 tests passing
- only 3 tests in source
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 03-converted-mocha; cd 03-converted-mocha; git checkout 0a9ed8804e15c451ff0d67ebd2d38980d54f9763;npm install;npm run test -- --single-run=true
- wallabyjs 结果
No failing tests, 3 passing
可选观察
我观察到的最奇怪的事情之一是使用 angular 2 没有相同的行为!
第 4 步将 angular 从 4 降级为 2
- 引入diff降级angular4
npm prune;npm install
清理和解决依赖关系
ng test
预期结果 3 次测试 运行
- 用wallabyjs确认
No failing tests, 3 passing
步骤详细信息
- 配置
- angular-cli + angular2 + 业力 + mocha
- angular-cli项目mocha+karma+angular2个测试结果
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 04-downgrade-angular; cd 04-downgrade-angular; git checkout 0e6c2811b9aab722fcc382e4676d97c089ad1f91;npm install;npm run test -- --single-run=true
- wallabyjs 结果
No failing tests, 3 passing
karma 的框架配置是问题
因为 wallabyjs 按预期工作,我花了很多时间探索 karma 和 karma-mocha,重点放在 karma.conf.js
坏了karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],
plugins: [
require('karma-mocha'),
require('karma-chai'),
require('karma-sinon'),
require('karma-sinon-chai'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-mocha-reporter'),
require('karma-coverage-istanbul-reporter'),
require('karma-istanbul-threshold'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false },
{ pattern: 'node_modules/chai/chai.js', instrument: false },
{ pattern: 'node_modules/sinon-chai/lib/sinon-chai.js', instrument: false },
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly', 'json' ],
fixWebpackSourcePaths: true
},
istanbulThresholdReporter: {
src: 'coverage/coverage-final.json',
reporters: ['text'],
thresholds: {
global: {
statements: 95.01,
branches: 75.59,
lines: 91.89,
functions: 89.23
},
each: {
statements: 75.76,
branches: 33.33,
lines: 75,
functions: 41.67
}
}
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul', 'istanbul-threshold']
: ['progress', 'mocha'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
我采用的方法是 "try stuff until it works" 的最佳实践,这意味着我逐行删除部分配置以查看它是否重要并查看它是否改变了行为。
分辨率
具体来说,修复是从 frameworks
数组中删除 sinon-chai
和可选的 chai
。
frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],
变成
frameworks: ['mocha', '@angular/cli'],
资源
工作代码可以在 this commit with this diff 使用 angular-cli / karma / mocha / angular4
找到
Travis 构建结果
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 0 of 3 SUCCESS (0 secs / 0 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 1 of 3 SUCCESS (0 secs / 0.062 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.079 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.086 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0.32 secs / 0.086 secs)
Question/Issue
我已经将 angular-cli 1.0.0 生成的基本项目从使用 jasmine 转换为使用 mocha。 为什么当我完成到 mocha 的转换时,所有的测试 运行 都做两次? 有趣的是当我们 运行 与 wallabyjs tests/code 相同 运行ner,或者用降级的angular2,那么只测试运行一次。
为了从头开始重现,我采取了 3 个步骤和可选的第 4 个步骤。不幸的是,涉及到很多代码,所以我提供了一个存储库来演示,并提供了一个命令来执行每个步骤,可以在步骤详细信息中找到。
第 1 步使用 angular-cli 创建项目
ng new someBlankProject
cd someBlankProject
ng test
预期结果 3 次测试 运行
详情
- 配置
- angular-cli + angular4 + 业力 + 茉莉花
- angular-cli项目jasmine + karma测试结果
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 01-fresh-project; cd 01-fresh-project; git checkout 2bf12b577173085344a86e37726d9f7ece930c77;npm install;npm run test -- --single-run=true
第 2 步验证 jasmine 在本地和 CI
上使用 karma 和 wallaby 测试 运行- 介绍 diff 包括 CI 和 wallabyjs 运行ner
npm install
解决依赖关系
ng test
预期结果 3 次测试 运行- 用wallabyjs确认
No failing tests, 3 passing
详情
- 配置
- angular-cli + angular4 + 业力 + 茉莉花
- angular-cli项目jasmine + karma测试结果
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 02-add-wallaby; cd 02-add-wallaby; git checkout 0bb96884d0e71f286d0b4fedc0dcafd20dc9d2b1;npm install;npm run test -- --single-run=true
- wallabyjs 结果
No failing tests, 3 passing
第 3 步介绍 mocha 并将规范从 jasmine 转换为 mocha
- 介绍 diff 转换为 mocha
npm prune;npm install
清理和解决依赖关系
ng test
预期结果 3 次测试 运行 实际结果 6 次测试 运行Chromeium 53.0.2785 (Ubuntu 0.0.0): Executed 6 of 3 SUCCESS (0.347 secs / 0.042 secs)
- 用wallabyjs确认
No failing tests, 3 passing
详情
- 配置
- angular-cli + angular4 + 业力 + mocha
- angular-cli项目mocha+karma测试结果
- "Failed" 构建 6 of 3 tests passing
- only 3 tests in source
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 03-converted-mocha; cd 03-converted-mocha; git checkout 0a9ed8804e15c451ff0d67ebd2d38980d54f9763;npm install;npm run test -- --single-run=true
- wallabyjs 结果
No failing tests, 3 passing
可选观察
我观察到的最奇怪的事情之一是使用 angular 2 没有相同的行为!
第 4 步将 angular 从 4 降级为 2
- 引入diff降级angular4
npm prune;npm install
清理和解决依赖关系
ng test
预期结果 3 次测试 运行- 用wallabyjs确认
No failing tests, 3 passing
步骤详细信息
- 配置
- angular-cli + angular2 + 业力 + mocha
- angular-cli项目mocha+karma+angular2个测试结果
- 复制命令
git clone git@github.com:arranbartish/angular-cli-seed.git 04-downgrade-angular; cd 04-downgrade-angular; git checkout 0e6c2811b9aab722fcc382e4676d97c089ad1f91;npm install;npm run test -- --single-run=true
- wallabyjs 结果
No failing tests, 3 passing
karma 的框架配置是问题
因为 wallabyjs 按预期工作,我花了很多时间探索 karma 和 karma-mocha,重点放在 karma.conf.js
坏了karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],
plugins: [
require('karma-mocha'),
require('karma-chai'),
require('karma-sinon'),
require('karma-sinon-chai'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-mocha-reporter'),
require('karma-coverage-istanbul-reporter'),
require('karma-istanbul-threshold'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false },
{ pattern: 'node_modules/chai/chai.js', instrument: false },
{ pattern: 'node_modules/sinon-chai/lib/sinon-chai.js', instrument: false },
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly', 'json' ],
fixWebpackSourcePaths: true
},
istanbulThresholdReporter: {
src: 'coverage/coverage-final.json',
reporters: ['text'],
thresholds: {
global: {
statements: 95.01,
branches: 75.59,
lines: 91.89,
functions: 89.23
},
each: {
statements: 75.76,
branches: 33.33,
lines: 75,
functions: 41.67
}
}
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul', 'istanbul-threshold']
: ['progress', 'mocha'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
我采用的方法是 "try stuff until it works" 的最佳实践,这意味着我逐行删除部分配置以查看它是否重要并查看它是否改变了行为。
分辨率
具体来说,修复是从 frameworks
数组中删除 sinon-chai
和可选的 chai
。
frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],
变成
frameworks: ['mocha', '@angular/cli'],
资源
工作代码可以在 this commit with this diff 使用 angular-cli / karma / mocha / angular4
找到Travis 构建结果
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 0 of 3 SUCCESS (0 secs / 0 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 1 of 3 SUCCESS (0 secs / 0.062 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.079 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.086 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0.32 secs / 0.086 secs)