文档章节

专题 俄罗斯方块的React实现 (二)自动化测试和webpack

 田浩hoyt
发布于 2017/08/31 23:37
字数 535
阅读 18
收藏 0

关于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
作品 0
杭州
私信 提问
VUE和ES6资源收集

最近在学习vue.js,整合了一些优秀的开源项目可供学习 MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Glo......

Jimmy
2017/07/13
0
0
Webpack DllPlugin 让构建速度柔顺丝滑

概念 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译,只需要编译一次,编译完成后存在指定的文...

流浪的先知
03/13
0
0
前端技术周刊 2018-06-22:Webpack 生存指南

前端技术周刊 2018-06-22 新闻 生态更新 Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。 五月底,欧盟的通用数据保护协议 ...

a独家记忆
2018/07/13
0
0
webpack+react多页面开发(二)-终极架构

webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入...

frontman
2018/11/08
0
0
ELSE 技术周刊(2017.10.23期)

业界动态 Vue 2.5 released Vue 2.5 正式发布,作者对于该版本的优化总结:更好的TypeScript 集成,更好的错误处理,更好的单文件功能组件支持以及更好的与环境无关的SSR WiFi爆惊天漏洞!K...

风清洋ELSE
2017/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
5分钟前
0
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
17分钟前
0
0
分布式数据一致性

狼王黄师傅
58分钟前
1
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0
从源码的角度来看SpringMVC

SpringMVC核心流程图 简单总结 首先请求进入DispatcherServlet 由DispatcherServlet 从HandlerMappings中提取对应的Handler 此时只是获取到了对应的Handle,然后得去寻找对应的适配器,即:H...

骚年锦时
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部