[笔记]1.Karma前端TDD试水

894974231 发布于2019-08-19 14:35 / 2081人阅读

摘要：起博主是电信行业的码农，在工作单位也搞搞单元测试和了什么。目前对技术很感兴趣，尝试新的领域里面也试试看这次要用的方式要实现一个简单画图板功能，支持和。配置文件里面主要就是一个对象，根据注释提示调整下即可。

起

博主是电信行业的码农，在工作单位也搞搞单元测试和TDD了什么。目前对Web技术很感兴趣，尝试新的领域里面也试试看TDD.

这次要用TDD的方式要实现一个简单画图板功能，支持Chrome和Firefox。

准备工作 安装Karma

npm install -g karma

墙内的朋友安装的时候可能会看到这样的错误

Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-windows.zip
Saving to C:TEMPphantomjsphantomjs-1.9.7-windows.zip

events.js:72
        throw er; // Unhandled "error" event
              ^
Error: read ECONNRESET
    at errnoException (net.js:901:11)
    at TCP.onread (net.js:556:19)

这个时候需要自己手动下载一份phantomjs-1.9.7-windows.zip放到对应目录，然后继续执行npm install -g karma，安装就会成功。

执行karma init就会像执行npm init，一样提示你配置好你的karma.conf.js文件。配置文件里面主要就是一个JSON对象，根据注释提示调整下即可。(如果你和我一样使用的测试框架是Mocha,断言库是chai的话，还需要为Karma安装Mocha的插件npm install karma-mocha & npm install karma-chai。)

我的配置文件和目录结构

./
│  karma.conf.js
├─lib
|
└─test
    testwwp.js

启动karma，karma会启动你需要的浏览器，并执行case。不过我们还没有添加任何Case。

>karma start
INFO [karma]: Karma v0.10.9 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser Firefox
WARN [launcher]: Chrome have not captured in 60000 ms, killing.
WARN [launcher]: Firefox have not captured in 60000 ms, killing.
INFO [launcher]: Trying to start Chrome again.
INFO [launcher]: Trying to start Firefox again.
INFO [Chrome 33.0.1750 (Windows 7)]: Connected on socket XSBr3JzPetUpruEbr30w
INFO [Firefox 27.0.0 (Windows 7)]: Connected on socket LfejRTLN--KYyhSlr30x
Chrome 33.0.1750 (Windows 7): Executed 0 of 0 ERROR (1.061 secs / 0 secs)
Firefox 27.0.0 (Windows 7): Executed 0 of 0 ERROR (1.252 secs / 0 secs)

添加Case

按照TDD的节奏，该写一个失败的Case了。

"use strict";

var expect = chai.expect;

describe("fist test",function() {

  it("should failed",function() {
    expect(1).to.equal(2);
  });

});

Karma的配置文件加载了Mocha和Chai，在测试文件中就不需要像node.js一样require("xxx")了。如果你的karma配置文件中autoWatch是true的话，当你保存文件之后Karma就告诉你的Case在两个浏览器里面执行的结果了。

INFO [watcher]: Changed file "D:/git/karmatddpost/test/testwwp.js".
Chrome 33.0.1750 (Windows 7) fist test should failed FAILED
        expected 1 to equal 2
        AssertionError: expected 1 to equal 2
Firefox 27.0.0 (Windows 7) fist test should failed FAILED
        expected 1 to equal 2
Chrome 33.0.1750 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.357 secs / NaN secs)
Firefox 27.0.0 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.383 secs / NaN secs)

Karma的TDD的工作环境算是配置好了。接下来就可以开发简易画图板了。

捐赠

如果您觉得本文对您有帮助，欢迎请作者一杯咖啡

https://me.alipay.com/shupengfei

云服务器 GPU云服务器试水 tdd python tdd 兼容笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78027.html

前端单元测试

摘要：为保证代码的质量，单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。以一个项目为例，代码结构如下前端测试框架主要是与，这里我们选择，断言库有以及自带的。为保证代码的质量，单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。 TDD与BDD的区别 TDD属于测试驱动开发，BDD属于行为驱动开发。个人理解其实就是TDD先写测试模块，再写主功能代码，然后能让测试模块通...

liuyix 2019-08-22 14:58 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

godlong_X 2019-05-29 16:57 评论0 收藏0
前端组件的测试

摘要：的配置文件是为了解析那些需要测试的源文件相关的文件，然后再给的单元测试用例去识别。其作用是仅仅渲染至虚拟节点，不会返回真实的节点，能极大提高测试性能。为解放劳动力，发展生产力测试有了这般变化：鼠标点击手动测试 -> 用脚本模拟,自动化测试 Vue中的组件测试需要安装的包全局安装：babel、mocha、karma 其他局部安装的包在下面的【测试环境搭建】最下方配置文件中给出...

haobowd 2019-08-22 15:10 评论0 收藏0
《Python Web开发》作者Harry Percival：TDD就是微小而渐进的改变

摘要：目前就职于，他在各种演讲研讨会和开发者大会上积极推广测试驱动开发。问很多敏捷教练都表示训练新人做测试驱动开发是一件辛苦而进度缓慢的事，并且收益也不是很大。首先是开发的对话式风格。第一个问题就是测试套件的速度。 Harry J.W. Percival目前就职于PythonAnywhere，他在各种演讲、研讨会和开发者大会上积极推广测试驱动开发（TDD）。他在利物浦大学获得计算机科学硕士学...

Guakin_Huang 2019-07-24 18:26 评论0 收藏0