SASS 单元测试

前不久在为 Nojiko 寻找单元测试方案，这是当时列出的期望包含的特性：

使用 sass 编写测试脚本；
支持测试 mixin；
支持 mocha 等测试框架；
能够集成到 gulp 等自动构建工具中；

按照以上需求，最终只找到了一个单元测试库，就是本文所要讲的 true，而且该库除了能满足所有需求之外，其本身的 API 也相当简洁，非常好用。

本文章将大致的讲解一下 true 的安装和使用，以及与 mocha 和 gulp 的集成方式，如果需要更加详细的说明，可以前往其官网或 GitHub主页查看。

p.s. 该方案只能用于测试 function 和 mixin，而对于 placeholder 或直接输出样式并不支持。另外若 mixin 中使用 @extend 继承了其它选择器样式，这种的也是不支持的。因此这种方案更加适用于 sass 框架和库，而非产品类型的项目。

安装

true 支持使用 gem、bower 或 npm 三种包管理工具进行安装；但其中 gem 需要安装 ruby 环境，这对于使用 node-sass 的用户并不友好；而 bower 用于网站的运行时依赖管理，对于 true 这种开发时依赖并不适用；因此建议选择 npm 方式来安装：

npm install sass-true --save-dev

另外，为了方便调试，建议同时将 true 安装系统全局环境中：

npm install -g sass-true

之后可以直接使用 true-cli 执行测试脚本。

测试

安装完成后，便可以开始编写测试脚本了。

对于 true 来说，其测试脚本就是普通的 sass/scss 文件，仅仅只需要在其中引入 true 的库文件：

@import "true";    // 引用时无需填写相对路径，true 在执行测试脚本时会自动注入该文件。

该库文件将提供如下几个混入类：

test-module 用于声明一个测试模块；
test 用于声明一条单元测试；
report 输出测试报告；
assert-equal 相等断言；
assert-unequal 不等断言；
assert-true true 断言；
assert-false false 断言；
assert CSS 输出断言，用于测试 mixin；
output/input 用于输出待评估的内容；
expect 用于输出期望的内容；

其用法如下：

@import "true";

@include test-module('Utilities') {

    // 测试函数
    @include test('function: compute-line-height') {

        @include assert-equal(
            compute-line-height(12px, 1.5),
            18px,
            '若 $line-height 参数为无单位数字，则返回使用该数字乘以 $font-size 的值'
        );

        @include assert-equal(
            compute-line-height(12px, 18px),
            18px,
            '若 $line-height 参数为有单位数字，则直接返回该行高'
        );
        
    }
    
    // 测试混入
    @include test('mixin: hide-text') {

        @include assert('调用 hide-text 混入类，输出一组用于隐藏文本的样式') {
            @include output {
                @include hide-text;
            }

            @include expect {
                font: 0/0 a;
                color: transparent;
                text-shadow: none;
            }
        }

    }
}

// 输出测试报告
// - 若使用 mocha 等测试框架，无需输出报告
@include report;

编写完后，便可在命令行中执行如下命令运行测试：

true-cli test_file.scss`

集成 mocha 与 gulp

当然，我们不可能每次修改完代码之后都要去命令行中手动执行一遍测试命令，这太麻烦了；我们会希望能有一个更好的方式，每当保存代码文件之后，都能自动地运行一次测试；另外，true 默认输出的报告格式也实在有点不够直观；而 mocha 和 gulp 就是用来解决这些问题的：让 mocha 负责生成报告，并使用 gulp 自动执行测试。

那么首先我们先将 true 集成到 mocha 中；这需要编写一个简单的 mocha 测试脚本，在这个脚本中，我们将调用 true 并传入 mocha 所提供的 describe 和 it 两个函数，通过这种方式来让 mocha 收集到 true 的测试运行结果：

var path = require('path');
var sassTrue = require('sass-true');

var sassFile = path.join(__dirname, 'test.scss');

sassTrue.runSass({
    file: sassFile,
    includePaths: ['./node_modules/']
}, describe, it);

同样，执行一下 mocha 查看是否成功：

mocha test_file.js

成功之后，我们再在 gulp 中调用 mocha。

gulp 和 mocha 的集成非常方便，只需要在当前项目安装 gulp-mocha 插件，并在你的 gulpfile.js 中声明如下任务即可：

var gulp = require('gulp');
var mocha = require('gulp-mocha');

gulp.task('test', function() {
    gulp.src('./test.js', { read: false })
        .pipe( mocha() );
});

最后，使用 gulp.watch() 绑定 sass 源代码及测试脚本的修改操作，当这些文件被修改时执行一下该任务即可了。