Karma 5:集成 Karma 和 Angular2
集成 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相关推荐
- Karma和Jasmine 自动化单元测试环境搭建
最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...
- Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试
1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...
- 【Karma】多环境自动测试框架 -- 基础教程
介绍 前身 Testacular, AngularJs Team 创建出来的. 以下是官网对Karma的相关特点介绍 支持真实浏览器, 无浏览器PhantomJS 热更新,文件变化后自动测试 测试框架 ...
- Karma和Jasmine自动化单元测试
2019独角兽企业重金招聘Python工程师标准>>> 转自http://blog.fens.me/nodejs-karma-jasmine/ 前言 在Java领域,Apache, ...
- karma+phantomjs+mocha+chai使用心得
前言 作为一名被逼着开发转测试,后台转前台的苦逼来说,分享一下前端js单元测试的一些使用心得.按照网上的教程来走虽然大部分能够运行,但是部分教程不适用于实际测试环境,所以我来发布一个简单的教程,方便后 ...
- vue-cli自动化测试karma + mocha + chai
最近再为团队团队选择可行的测试方案.前端目前是vue-cli技术栈.试着在vue项目添加测试.把测试完整的方案记录下来. vue官网给的例子用的是karma + mocha + chai. karma ...
- JS相关环境搭建:Nodejs、karma测试框架、jsDuck、Express
第一章:压缩js(nodejs,uglify) 第一步:安装nodejs环境 直接下载http://www.nodejs.org/download/ 下载完成后直接下一步下一步即可,完了我们就具有no ...
- 前端单元测试-karma+mocha+chai
一.概念普及 1.单元测试运行环境: 运行环境是集成一系列功能的工具,我们可以通过它来选择"测试框架".自动打开浏览器.查看测试结果等功能.我们可以把它近似的理解为vue的vue- ...
- karma 测试框架的前世今生
引言 在前端测试框架的学习中了解到了karma的强大,搜索得到淘宝前端团队的这片讲述karma特点及原理的分享,非常不错.转载分享至此, 原文链接:http://taobaofed.org/blog/ ...
- 常用的前端自动化测试工具介绍 —— Karma
在开发的过程中,除了代码本身,测试也是重要的一环.大体来说,测试分为以下几种类型: 单元测试 功能测试 性能测试 安全测试 对于普通开发者而言,单元测试和功能测试是最常见的两种测试方式,本系列文章要介 ...
最新文章
- for循环动态的给select标签添加option内容
- Magento如何使用和设置CookieSession
- 激光扫描仪的扫描方式
- 小程序渲染html的两种方法
- iOS开发技巧,细节(二)
- python当前日期加n天_利用python获取当前日期前后N天或N月日期的方法示例
- 未来网络安全重塑,保障安全的会不会只有四五家?
- MySQL中根据A表画更新B表
- Flink状态管理和容错机制介绍
- 如何招到烂程序员(续)
- js 设置 Cookie,cookie的作用域设置
- TRNSYS与CONTAM3.4耦合过程
- Codeforce - 1040B - Shashlik Cooking(思维)
- Codeforces 633H. Fibonacci-ish II【莫队+线段树+公式】
- 超详细的cookie属性HttpOnly和SameSite引起的漏洞解决方案
- Windows进程详解(完整版)
- Arduino | 由八按键控制的俄罗斯方块
- 图像算法原理与实践——图像修复之 全变分模型
- 爬虫 403 增加header和代理ip也没用?有可能是cloudflare在搞事情
- UGUI源码解析——ContentSizeFitter