1. 测试框架 / 环境以及配置文件
Jasmine
Jasmine是一个面向行为驱动开发(BDD)的Javascript单元测试框架。
npm install -g jasmine
// 在项目中安装时，我使用的是下面这句
npm install karma-jasmine jasmine-core --save-dev
Karma
Karma是基于node.js的Javascript测试运行环境
npm install karma --save-dev
在angular项目中一顿这样的操作，你会看到 package.json 文件中多出来下面这些东西。
"jasmine-core": "^2.99.1",
”jasmine-spec-reporter": "~4.2.1",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
karma.conf.js
angular项目中自己有的 karma.conf.js 配置文件，我啥也没改。大概搜了一下配置文件里写了点什么。参考的是这位大佬的文章https://segmentfault.com/a/1190000009737186
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
// 基础路径
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
// 加载的插件
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// 插件【karma-coverage-istanbul-reporter】配置项
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
// 测试结果报告方式
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
// 日志等级
logLevel: config.LOG_INFO,
autoWatch: true,
// 测试浏览器列表
browsers: ['Chrome'],
// 持续集成模式，true：表示浏览器执行测试后退出
singleRun: false
});
};
使用 ng test 命令运行一下， 默认端口号是 9876，打开浏览器就能看到测试报告了。
ng test运行效果
然后就可以在
xxx.spec.ts 文件中写测试代码咯！
有关 npm install 命令
-
npm install xxx: 安装模块到项目目录 -
npm install -g xxx: 安装模块到全局，安装的磁盘位置取决于npm config prefix 的位置 -
npm install --save xxx: 安装模块到项目目录下，并在package文件的dependencies节点中写入依赖 -
npm install --save-dev xxx: 安装模块到项目目录下，并在package文件的devDependencies节点写入依赖
遇到的问题
- ERROR in node_modules/@types/jasmine/index.d.ts(138,47): error TS1005: ';' expected.
在ng test的时候报错了。原因是因为@types/jasmine和typescript版本问题。升级typescript到 2.9.2 之后就没问题了。
"@types/jasmine": "~2.8.6",
"typescript": "~2.9.2"
- Failed: Template parse errors: Can't bind to 'routerLink' since it ... ...
解决方案： 导入RouterTestingModule
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
PrimengModule,
RouterTestingModule
],
declarations: [ MemorySelectComponent]
})
.compileComponents();
}));
- NullInjectorError: No provider for HttpClient
错误原因： 没有导入HttpClientTestingModule模块
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
PrimengModule,
RouterTestingModule,
HttpClientTestingModule
],
declarations: [ MemorySelectComponent]
})
.compileComponents();
}));
- Failed: Template parse errors: Can't bind to 'routerLink' since it ... ...
解决方案： 导入RouterTestingModule
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
PrimengModule,
RouterTestingModule,
HttpClientTestingModule
],
declarations: [ MemorySelectComponent]
})
.compileComponents();
}));
- Error: StaticInjectorError(DynamicTestModule)
原因是Services是要放在providers数组中的。我一开始放到imports中去了。
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
PrimengModule,
RouterTestingModule,
HttpClientTestingModule
],
declarations: [ MemorySelectComponent],
providers: [ MessageService ]
})
.compileComponents();
}));
运行的时候还遇到了很多坑，找到了几篇大佬写的博客，真的是及时雨。
https://segmentfault.com/a/1190000009769787
https://blog.csdn.net/prufeng/article/details/88178587
