文档章节

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

 田浩hoyt
发布于 2017/08/31 23:37
字数 535
阅读 15
收藏 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
webpack+react多页面开发(二)-终极架构

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

frontman
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
一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

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

woIwoI
2017/09/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【Flutter教程】从零构建电商应用(一)

在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flu...

笔阁
15分钟前
1
0
什么是以太坊DAO?(三)

Decentralized Autonomous Organization,简称DAO,以太坊中重要的概念。一般翻译为去中心化的自治组织。 投票支付合约的所有费用和行动需要时间,并要求用户始终保持活跃,知情和专注。另一...

geek12345
17分钟前
0
0
一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
59分钟前
2
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
今天
1
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
今天
709
12

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部