集成 Karma 和 Angular2 我们需要做很多工作,由于需要使用 TypeScript 进行开发,首先需要正确配置 Typescript ,然后正确配置对 Angular2 的引用。还要创建 Karma 的入口文件,以便进行打包。

1. 安装工具

安装 Angular2.beta.7

karma3@1.0.0 C:\study\karmaStudy\karma3
├── angular2@2.0.0-beta.7
├── UNMET PEER DEPENDENCY es6-promise@^3.0.2
├── UNMET PEER DEPENDENCY es6-shim@^0.33.3
├── UNMET PEER DEPENDENCY reflect-metadata@0.1.2
├── UNMET PEER DEPENDENCY rxjs@5.0.0-beta.2
└── UNMET PEER DEPENDENCY zone.js@0.5.15npm WARN EPEERINVALID angular2@2.0.0-beta.7 requires a peer of es6-promise@^3.0.2 but none was installed.
npm WARN EPEERINVALID angular2@2.0.0-beta.7 requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN EPEERINVALID angular2@2.0.0-beta.7 requires a peer of reflect-metadata@0.1.2 but none was installed.
npm WARN EPEERINVALID angular2@2.0.0-beta.7 requires a peer of rxjs@5.0.0-beta.2 but none was installed.
npm WARN EPEERINVALID angular2@2.0.0-beta.7 requires a peer of zone.js@0.5.15 but none was installed.

如果使用了 NPM 3 以上版本,需要手工安装依赖库

es6-promise@^3.0.2
es6-shim@^0.33.3
reflect-metadata@0.1.2
rxjs@5.0.0-beta.2
zone.js@0.5.15

安装 webpack 和它的插件 ts-loader

npm i -D webpack ts-loader

安装 karma 及其插件

npm i -D karma karma-chrome-launcher karma-jasmine jasmine-core karma-webpack

安装 typings

这里,我们需要 es6-shim 的定义和 jasmine 的定义。

奇怪的是 install 必须是第一个参数。

安装 jasmine 的定义

> typings install --save --ambient jasmine
? Found jasmine typings for DefinitelyTyped. Continue? Yes
Installing jasmine@~2.2.0 (DefinitelyTyped)...jasmine
└── (No dependencies)

安装 es6-shim 的定义

> typings install --save --ambient es6-shim
? Found es6-shim typings for DefinitelyTyped. Continue? Yes
Installing es6-shim@~0.31.2 (DefinitelyTyped)...es6-shim
└── (No dependencies)

这些组件安装完成之后,你的 package.json 应该是这样的。

{"name": "karma3","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"angular2": "^2.0.0-beta.7","es6-promise": "^3.0.2","es6-shim": "^0.33.3","reflect-metadata": "^0.1.2","rxjs": "^5.0.0-beta.2","zone.js": "^0.5.15"},"devDependencies": {"jasmine-core": "^2.4.1","karma": "^0.13.21","karma-chrome-launcher": "^0.2.2","karma-jasmine": "^0.3.7","karma-webpack": "^1.7.0","ts-loader": "^0.8.1","typings": "^0.6.8","webpack": "^1.12.14"}
}

2. 编写示例代码

在项目目录中创建 src 文件夹,在其中创建名为 MyMaths.ts 的代码文件

import { Component } from 'angular2/core';
import { Injectable } from 'angular2/core';@Component({selector: "hello"
})
export class MyMaths{add(a: number, b:number ){return a + b;}
}

在项目目录中,创建 test 和其中的 unit 子文件夹,我们的单元测试将会保存在这个文件夹中。

创建名为 MyMaths.spec.ts 的单元测试文件

import { MyMaths } from '../../src/MyMaths';describe('hello, unit test.', function(){var myMaths = new MyMaths();it('hello, add', function(){let a = 2, b = 3;let result = myMaths.add(a, b );expect(result).toBe( 5 );});it('it should failded.', function(){let a = 2, b = 3;let result = myMaths.add(a, b);expect(result).toBe( 100 );})
});

3. 配置环境

1. 配置 TypeScript

在项目目录中创建名为 tsconfig.Json 的 TypeScript配置文件。

注意其中的 noEmitHelpers 必须配置为 false,emitDecoratorMetadata 必须配置为 true.

{"compilerOptions": {"target": "es5","module": "commonjs","removeComments": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"noEmitHelpers": false,"noImplicitAny": false,"sourceMap": true},"exclude":["node_modules","typings/main","typings/main.d.ts"],"filesGlob": ["./src/**/*.ts","!./node_modules/**/*.ts"]
}

2. 配置 webpack

webpack 的默认配置文件为 webpack.config.js,我们这里用来测试打包的正确性。

var path = require('path');var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');module.exports = {resolve: {extensions: ['', '.js', '.ts']},entry: "./spec-bundle.js",output: {path: BUILD_PATH,filename: 'bundle.js'},module: {loaders: [{ test: /\.ts$/, loader: 'ts-loader' }]},node: {global: 'window',progress: false,crypto: 'empty',module: false,clearImmediate: false,setImmediate: false}
};

3. 配置 karma

首先,创建 karma 的入口文件,我们通过这个文件将所有的测试代码和待测试代码一起打包。

创建名为 spec-bundle.js 的入口文件。

require('es6-shim');
require('es6-promise');
require('reflect-metadata');
require('rxjs');
require('zone.js');var testContext = require.context('./test', true, /\.spec\.ts/);
var appContext = require.context('./src', true, /\.ts/);appContext.keys().forEach(appContext);
testContext.keys().forEach(testContext);var domAdapter = require('angular2/src/platform/browser/browser_adapter');
domAdapter.BrowserDomAdapter.makeCurrent();

然后,创建 karma 的配置文件。可以先使用 karma init 创建基本的配置信息,然后修改为我们需要的内容。

// Karma configuration
// Generated on Thu Feb 25 2016 10:11:36 GMT+0800 (China Standard Time)

module.exports = function(config) {var testWebpackConfig = require('./webpack.test.config.js');config.set({// base path that will be used to resolve all patterns (eg. files, exclude)basePath: '',// frameworks to use// available frameworks: https://npmjs.org/browse/keyword/karma-adapterframeworks: ['jasmine'],// list of files / patterns to load in the browser
    files: ['spec-bundle.js'],// list of files to exclude
    exclude: [],// preprocess matching files before serving them to the browser// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {'spec-bundle.js': ['webpack'] },webpack: testWebpackConfig,// test results reporter to use// possible values: 'dots', 'progress'// available reporters: https://npmjs.org/browse/keyword/karma-reporterreporters: ['progress'],// web server portport: 9876,// enable / disable colors in the output (reporters and logs)colors: true,// level of logging// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,// enable / disable watching file and executing tests whenever any file changesautoWatch: true,// start these browsers// available browser launchers: https://npmjs.org/browse/keyword/karma-launcherbrowsers: ['Chrome'],// Continuous Integration mode// if true, Karma captures browsers, runs the tests and exitssingleRun: true,// Concurrency level// how many browser should be started simultaneous
    concurrency: Infinity})
}

这里用到了 webpack 进行打包,而且声明了使用 webpack.test.config.js 作为 webpack 的配置文件。

创建这个名为 webpack.test.config.js 的配置文件。这个文件不需要入口文件,也不需要输出目录。Karma 将提供入口和获取打包之后的输出。

var path = require('path');var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');module.exports = {resolve: {extensions: ['', '.js', '.ts']},module: {loaders: [{ test: /\.ts$/, loader: 'ts-loader' }]},node: {global: 'window',progress: false,crypto: 'empty',module: false,clearImmediate: false,setImmediate: false}
};

4. 测试

1. 检查打包是否正确。

由于已经配置了 webpack,可以直接在项目目录中执行 webpack,应该可以在 build 子目录中看到打包之后的文件,文件中应该已经正确包含了我们的所有代码。

2. 执行测试

执行 karma start ,可以完成测试过程。

25 02 2016 11:13:15.560:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
25 02 2016 11:13:15.576:INFO [launcher]: Starting browser Chrome
25 02 2016 11:13:18.349:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#uBbzQ9xOIQzT1jNOAAAA with id 85611572
Chrome 47.0.2526 (Windows 7 0.0.0) hello, unit test. it should failded. FAILEDExpected 5 to be 100.at Object.<anonymous> (C:/study/karmaStudy/karma3/spec-bundle.js:17352:25)
Chrome 47.0.2526 (Windows 7 0.0.0): Executed 2 of 2 (1 FAILED) (0.026 secs / 0.013 secs)

5. 讨论

这个过程的配置信息较为复杂,需要耐心检查错误。

转载于:https://www.cnblogs.com/haogj/p/5209937.html

Karma 5:集成 Karma 和 Angular2相关推荐

  1. Karma和Jasmine 自动化单元测试环境搭建

    最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...

  2. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  3. 【Karma】多环境自动测试框架 -- 基础教程

    介绍 前身 Testacular, AngularJs Team 创建出来的. 以下是官网对Karma的相关特点介绍 支持真实浏览器, 无浏览器PhantomJS 热更新,文件变化后自动测试 测试框架 ...

  4. Karma和Jasmine自动化单元测试

    2019独角兽企业重金招聘Python工程师标准>>> 转自http://blog.fens.me/nodejs-karma-jasmine/ 前言 在Java领域,Apache, ...

  5. karma+phantomjs+mocha+chai使用心得

    前言 作为一名被逼着开发转测试,后台转前台的苦逼来说,分享一下前端js单元测试的一些使用心得.按照网上的教程来走虽然大部分能够运行,但是部分教程不适用于实际测试环境,所以我来发布一个简单的教程,方便后 ...

  6. vue-cli自动化测试karma + mocha + chai

    最近再为团队团队选择可行的测试方案.前端目前是vue-cli技术栈.试着在vue项目添加测试.把测试完整的方案记录下来. vue官网给的例子用的是karma + mocha + chai. karma ...

  7. JS相关环境搭建:Nodejs、karma测试框架、jsDuck、Express

    第一章:压缩js(nodejs,uglify) 第一步:安装nodejs环境 直接下载http://www.nodejs.org/download/ 下载完成后直接下一步下一步即可,完了我们就具有no ...

  8. 前端单元测试-karma+mocha+chai

    一.概念普及 1.单元测试运行环境: 运行环境是集成一系列功能的工具,我们可以通过它来选择"测试框架".自动打开浏览器.查看测试结果等功能.我们可以把它近似的理解为vue的vue- ...

  9. karma 测试框架的前世今生

    引言 在前端测试框架的学习中了解到了karma的强大,搜索得到淘宝前端团队的这片讲述karma特点及原理的分享,非常不错.转载分享至此, 原文链接:http://taobaofed.org/blog/ ...

  10. 常用的前端自动化测试工具介绍 —— Karma

    在开发的过程中,除了代码本身,测试也是重要的一环.大体来说,测试分为以下几种类型: 单元测试 功能测试 性能测试 安全测试 对于普通开发者而言,单元测试和功能测试是最常见的两种测试方式,本系列文章要介 ...

最新文章

  1. for循环动态的给select标签添加option内容
  2. Magento如何使用和设置CookieSession
  3. 激光扫描仪的扫描方式
  4. 小程序渲染html的两种方法
  5. iOS开发技巧,细节(二)
  6. python当前日期加n天_利用python获取当前日期前后N天或N月日期的方法示例
  7. 未来网络安全重塑,保障安全的会不会只有四五家?
  8. MySQL中根据A表画更新B表
  9. Flink状态管理和容错机制介绍
  10. 如何招到烂程序员(续)
  11. js 设置 Cookie,cookie的作用域设置
  12. TRNSYS与CONTAM3.4耦合过程
  13. Codeforce - 1040B - Shashlik Cooking(思维)
  14. Codeforces 633H. Fibonacci-ish II【莫队+线段树+公式】
  15. 超详细的cookie属性HttpOnly和SameSite引起的漏洞解决方案
  16. Windows进程详解(完整版)
  17. Arduino | 由八按键控制的俄罗斯方块
  18. 图像算法原理与实践——图像修复之 全变分模型
  19. 爬虫 403 增加header和代理ip也没用?有可能是cloudflare在搞事情
  20. UGUI源码解析——ContentSizeFitter

热门文章

  1. 依赖反转原则(DIP)
  2. java json处理入门
  3. Hive复杂数据类型之array
  4. Linux开发_控制shell光标
  5. Python 进阶之路 (五) map, filter, reduce, zip 一网打尽
  6. shell实战训练营Day2
  7. HDU 2256Problem of Precision(矩阵快速幂)
  8. 云服务器真假辨别奥秘
  9. ABBYY PDF Transformer+ 给你好看
  10. ObjectC----NSObject常用方法和OC反射机制