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