如何用 Karma,Jasmine,Webpack 测试 UI 组件系列(一)配置篇

如何用 Karma,Jasmine,Webpack 测试 UI 组件系列 (一) 配置篇为什么要测试

从个人经验来看,测试是防止软件缺陷的最好方法。

生产开发中当我们修改一小段代码,大部分的开发人员会手动打开他们的浏览器 或 POSTMAN来验证它是否仍然正确。

这种方法(手工测试)不仅低效,而且会隐藏一些你未发现的缺陷。

我们测试我们软件的目的是验证它是否如我们预期中的一毛一样。

单元测试

单元测试是一种测试你的项目中每个最小单元代码的有效手段,是使你的程序思路清晰的基础。

一旦所有的测试通过,这些零散的单元组合在一起也会运行的很好,因为这些单元的行为已经被独立的验证过了。

本文介绍如何使用 Karma,Jasmine,Webpack 编写单元测试代码。

详细代码请点击 https://github.com/sunyue1992/KaramJasmineWebpack

安装 Karma

下面给出一份karma.config.js的配置模板,大部分按照默认值配置就可以了。

Webpack 和 Babel 的安装和配置

Babel和Webpack的根据使用到的ECMAScript新特性决定是否配置,我的配置如下

Jasmine 的断言库的引入

编写测试用例

因为我司在生成中还在使用Angular 1.X 的版本,所以测试用例的编写也以此为例,需要安装angular angular-mocks。

参考

Testing AngularJS with Jasmine and Karma

(https://scotch.io/tutorials/testing-angularjs-with-jasmine-and-karma-part-1)

Angular 官方示例

(https://github.com/angular/angular-seed)

Angular 官方文档

(https://docs.angularjs.org/guide/unit-testing)

Jasmine语法

(http://keenwon.com/1218.html)

如果文章对你有帮助,欢迎关注,谢谢!

本文来自企鹅号 - 前端node开发分享媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native打包

前面写了关于React的一系列入门章:http://lib.csdn.net/xiangzhihong8/5375/chart/React%20Native ...

2428
来自专栏后端云

vm被systemd删除

发现计算节点重启后,所有的该节点上的vm被删除了,查看vm对应的qemu日志,qemu-kvm: terminating on signal 15 from p...

1974
来自专栏逸鹏说道

跨平台开发之~ VSCode开发第一个C程序

VSCode的安装就不讲了,可以参考这个(http://www.cnblogs.com/dunitian/p/6661644.html) 写一个简单的C,然后F...

3467
来自专栏黑泽君的专栏

MyEclipse中,使用Maven新建web项目后,提示The superclass "javax.servlet.http.HttpServlet" was not found on the Ja

  使用 MyEclipse + Maven 建立了一个 Javaweb工程,在编写 JSP页面 时,顶端出现“红色”的报错信息:The superclass ...

1702
来自专栏Angular&服务

ionic2实现扫描二维码功能

1362
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(19)——Selenium工具介绍

3655
来自专栏Java技术分享

JSP Layout详细介绍

JSP Layout 是一个用来实现 JSP 布局支持的简单示例项目。该项目只需要一个 Servlet 类,一些配置即可。下载的压缩包中包含一个完整的项目,可直...

2436
来自专栏游戏杂谈

关于mysql的1067与1045错误

以前装过xampp后,发现用它的话,想学点东西有点困难(太傻瓜化了)。干脆自己弄环境去折腾一把…

1012
来自专栏菩提树下的杨过

利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,...

2427
来自专栏编程之旅

CocoaPods导入的库其头文件导入的方法以及Pch预编译文件配置

尽管CocoaPods使用十分方便,但其导入的第三方框架还是要经过几步操作,才能供项目使用

891

扫码关注云+社区