使用的工具/框架
webstorm
这个做前端的童鞋们应该都比较熟悉了吧,jetBrain出品的IDE神器,做Web开发、Node.js开发都可以。功能十分强大,我们今天的测试框架就是要与它集成,实现“开发的同时自动测试”。下面给出一些相关的资料地址:
Karma
这个是一个很强大的测试框架(Test Runner),可能有些童鞋不认识,不过相信有不少人用过jsTestDriver.是的,Karma也是Google出品,其前身叫做TestAcular,据其介绍视频上说,是Google在开发AngularJS的时候,感觉到jsTestDriver有一些不足,从而重新开发了一套测试框架。
其官网地址:http://karma-runner.github.io/0.10/index.html
补充一句:Karma本身只是一个测试框架,而不是assert framework,它支持你使用任何的断言lib,比如jasmine,mocha,qunit等等。也支持你使用任意的reporter生成报表。
实现步骤
Step1:安装Webstorm和Karma
- Webstorm是收费的,但是屌丝们总是有办法的,你们懂的,这里IDE的安装就不说了,很简单一路默认即可。
- Karma是依赖Node.js的,所以要先安装Node.js,可以去这里下载,然后直接安装即可。
- 安装完node之后,npm也就附带安装了,npm就是node.js的包管理器,我们通过它来安装其他的第三方库、框架,下面打开cmd窗口,输入“npm install -g karma”,等几分钟就会看到安装完成的提示了
- 安装完成后,注意看cmd窗口提示,里面会有最终安装到的路径(比如我用的Win7系统,就是C:/users/xxx/AppData/Roaming/npm/),把这个路径记下,后面会用到
现在Karma就安装好了,默认Karma会自动安装karma-jasmine插件,这是一个能够使用jasmine断言语法的框架,我们今天的测试用例就是用它来写啦。
Step2:设置Webstorm
下面到重点了,通过对webstorm的settings的一番摸索,终于找到了一个很方便的办法,可以让我们轻松的实现在IDE一边开发、一边同步看到测试结果的方法,下面就介绍如何来设置:
- 打开webstorm,选择File->Settings。
- 点击External Tools->+图标,弹出配置窗口,按照如下方式配置
- name:主要是描述这是什么东西,随你喜好
- Program:这个很重要,把之前记下的安装路径填写到这里
- 后面2个参数照着填写即可,不需修改
- 设置完成后,就ok了,下面我们来看看效果。
注意本篇文章不是讲karma的使用,所以具体如何使用karma来单元测试,请移步官网看一下介绍即可,下面直接使用我目前的一个karma工程演示一下效果
效果演示
选择要运行的测试配置文件:右键启动测试。下面会直接显示命令行窗口,当前的测试自动开始运行。
karma还可以监控你测试中的文件,一旦你改动了任何地方,save的时候,test可以自动运行。
分享到:
相关推荐
通过WebRtc搭建了自己的网站,实现了如下功能: ...>2、聊天大厅设计 >3、点对点视频聊天 >4、界面美化 注意:cert文件夹下需要放自己的ssl证书(ssl证书...若是文件名不是ssl_server,则需要自己在源码中更改相应文件名。
该资源是基于webstorm开发的一个前端管理系统,后端数据使用mock模拟生成,可以直接登录使用。代码仅供学习参考。
Webstorm+Nodejs+MongoDB的博客管理系统,使用Webstorm开发工具,编写js代码及前端html代码,连接MongoDB数据库进行数据交互,下载该代码文档,配置相应环境运行,将在浏览器上给你呈现出一个完整的博客管理系统!...
webstorm中px转rem插件 使用说明: 1.file-settings-plugins-install plugin from disk-选择生成的jar文件-restart webstorm 2.tools-SetPX2REM设置计算的比值-选中代码段,如'100px'-后,点击shift+f 3.设置界面和...
如何用ChatGPT插件+Webstorm提高程序员效率
WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置
基于物品协同过滤算法,采用springboot+vue+WebStorm+mysql等实现的电影智能推荐系统,适合个人毕设项目 movies-web为前端代码,.sql为mysql数据,其余为后端代码 基于物品协同过滤算法,采用springboot+vue+...
前端: React 开发工具:WebStorm 后端: SpringBoot+MyBatis+MySQL数据库 开发工具: IDEA JDK:10 管理工具:Maven 基本描述: 本系统是基于遗传算法的一个高校自动排课系统,同时也是一个前后端分离项目。 ...
HTML+JavaScript+CSS+WebStorm开发技巧
使用WebStorm开发 使用HTML+CSS+JS实现Echart大屏展示 Echarts模板网站: http://ppchart.com/#/ Echarts官方网站: ...
WebStorm 10.0.4汉化包
1.在本站下载安装Webstorm 2017汉化包. 授权方式:免费软件软件类型:汉化补丁软件语言:简体中文软件大小:13 MB更新日期:2016-12-25运行环境:WinXP, Vista, Win7, win8, win10 下载地址 2.将.\Webstorm 2017.1\...
wslnodejs 该工具,允许在WebStorm中使用来自WSL环境的nodejs(可能是任何IntelliJ)为什么? 我有一个Grunt设置,可以调用bash脚本,并且可以在WSL中完美运行。 我曾经从单独的控制台调用grunt,但后来在IDE中找到...
webstorm 最全快捷键 web前端开发利器啊
文件过大,已经上传到百度云盘中,压缩包中有汉化包破解钥匙安装包。 附带实用编辑器editplus同样有破解码在其中。http://pan.baidu.com/s/1gfclk6R。。。。。。。。。。。。。。。。。。。。。。。。。
webstorm
本系统功能包括:分为前端翻后端部分,包括用户,区分晋通用户以及誉里员用户,包括首页展示,部门管理,人事管理,员工管理三个模块等等。 二、项目运行 环境配置: Jdkl . 8 + Tomcats . 5 + Mysql + HBuilderX...