文档章节

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

 田浩hoyt
发布于 2017/08/31 23:37
字数 535
阅读 14
收藏 0
点赞 0
评论 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
前端技术周刊 2018-06-22:Webpack 生存指南

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

a独家记忆
07/13
0
0
前端每周清单第 29 期:Web 现状分析与优化策略、Vue 单元测试、Headless Chrome 爬虫

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/09/04
0
0
以react为核心的企业级前端架构

导语: 我们正处在一个技术大爆发时代,IT技术作为与人们生活息息相关的领域,得到了飞速发展。前端技术,又是所有IT技术中,更新最快的领域之一,考虑到前端社区“激进 ”的创新风气,似乎也...

IT_小翼
2016/04/08
164
0
ELSE 技术周刊(2017.10.23期)

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

风清洋ELSE
2017/10/23
0
0
干货 | 如何一步步打造基于React的移动端SPA框架

摘要:前端框架作为工具,是各种模式,结构的集合,一个原则就是:“如非必要,不换”。但是,打算换一定要有换的道理,首要的原则就是当前的框架已不适应业务的发展,而框架就是要解决业务扩...

携程技术中心
2017/12/15
0
0
SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu
2017/06/19
736
2
一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端、Native客户端、Node.js、 大前端框架:React、Vue.js、Koa 跨终端技术:HTML 5、CSS 3、JavaScript 跨平台框架:React Native、Cordo...

woIwoI
2017/09/18
0
0
彻底解决Webpack打包性能问题

这几天写腾讯实习生 Mini 项目的时候用上了 react 全家桶,当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是,react 加上 react-router、material-ui、superag...

黑魔法
2016/07/29
1K
0
一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端、Native客户端、Node.js、 大前端框架:React、Vue.js、Koa 跨终端技术:HTML 5、CSS 3、JavaScript 跨平台框架:React Native、Cordo...

柯南和由美
2017/09/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知识点总结

jq如何拿到data-info的自定义属性 1.1 原生可以获取到所有属性el.attrbutes 1.2 jq的$(el).attr('属性名称') 继承的几种方式,原型链 2.1 扩展原型对象实现继承 2.2 替换原型对象实现继承 2....

litCabbage
7分钟前
0
0
python语言规范

http://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/python_style_rules/...

ghou-靠墙哭
11分钟前
0
0
istio 监控,遥测 (理论)

Istio提供了一种灵活的模型来强制执行授权策略并收集网格中服务的遥测。 基础架构后端旨在提供用于构建服务的支持功能。它们包括诸如访问控制系统,遥测捕获系统,配额执行系统,计费系统等之...

xiaomin0322
14分钟前
0
0
阿里资深专家面试问题收集

corejava hashcode相等的两个对象一定相等吗?equals呢?反过来相等吗? 介绍一下集合框架? hashtable,hashmap底层实现是什么?hashtable和concurrenthashmap底层实现的区别? hashmap和treemap的...

undefine
15分钟前
6
0
alpine安装软件指定安装源

linux-alpine安装软件指定安装源 一、永久修改apk下载源地址 vi etc/apk/repositories 替换成阿里源 http://mirrors.aliyun.com/alpine/v3.8/main/http://mirrors.aliyun.com/alpine/v3...

我心中有猛狗
15分钟前
0
0
Centos7通过yum安装nginx

添加源地址(直接install可能不是最新版本的) sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 安装 sudo yum install -y ng......

iplusx
17分钟前
0
0
ef .core Dapper Helper

using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Threading.Tasks; using Dapper; using Dap......

Lytf
19分钟前
0
0
iOS 小笔记

1.以下代码打印什么     __block int val = 10;    void (^blk)(void) = ^{        printf("val=%d\n",val);        };       val = 2;    blk(); /...

风了个1
20分钟前
0
0
【Spring Boot 系列 Spring Boot示例程序】

入门程序步骤,创建一个Maven项目。继承Spring Boot官方提供的父工程。再引入一个Web的应用启动器。 1、选择一个合适的IDEA工具 创建一个Maven工程,并添加如下配置 <parent> <...

HansonReal
22分钟前
0
0
217. Contains Duplicate - LeetCode

Question 217. Contains Duplicate Solution 题目大意:判断数组中是否有重复元素 思路:构造一个set,不重复就加进去,重复返回true,如果数据量大的话,可以用布隆过滤器 Java实现: publ...

yysue
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部