关于mocha
引入单元测试可以有效的保证代码质量,Mocha(https://mochajs.org/ )是一个很常用的前端自动化框架。
Mocha支持多种形式的测试环境,默认是在命令行模式下工作,同时也支持其他的运行环境。俄罗斯方块的项目是在网页环境中运行的,因此选择将测试报告直接生成html更加方便。
生成mocha框架
mocha提供了命令行工具,来快速构建其执行环境,要生成html类型的报告,只需要在命令行执行以下命令
mocha -R doc init ./test-html
执行成功后,mocha会生成在test-html目录下 index.html,mocha.css和mocha.js三个文件。tests.js是预留的测试文件,测试代码写在里面就会被执行。
与webpack集成
由于单元测试代码需要不断更新并集成到mocha框架中,因此,可以稍微改动以下mocha生成的html资源,以便直接使用webpack和npm直接生成。
先将mocha的index.html修改成ejs文件,并直接删除下面的代码段。
<script>
mocha.run();
</script>
自动测试的脚本可以集中放在test目录下,并在webpack的entry中添加一个配置,将所有的测试代码打包成一个bundle,并将这个bundle注入到测试报告的html中,通过html plugin可以方便的实现。
new html_webpack_plugin({
inject: true,
title:'Mocha Test',
filename:"test.html",
template:'test-html/index.ejs',
chunks:["test"]
}),
mocha生成的html文件还会引用到mocha.js和mocha.css两个资源文件,因此在编译时需要将这两个文件拷贝到最后生成的test.html文件所在的目录中。
测试代码
测试代码可以根据业务逻辑进一步分离,最后在test/index.js中import进来,然后在test/index.js的最后一样加上mocha.run,以保证mocha的执行在所有的测试用例加载之后。
测试代码相对比较简单,这里就不贴了。github上的代码只对tetris的旋转做了简单的测试。
© 著作权归作者所有