专题 俄罗斯方块的React实现 (二)自动化测试和webpack
专题 俄罗斯方块的React实现 (二)自动化测试和webpack
田浩hoyt 发表于6个月前
专题 俄罗斯方块的React实现 (二)自动化测试和webpack
  • 发表于 6个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

关于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的旋转做了简单的测试。

标签: 俄罗斯方块
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 5
码字总数 4943
×
田浩hoyt
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: