Question

我正在尝试为相当大的 non-cli Angular应用程序加快单元测试的速度，并想到：如果我跳过样式表怎么办？运行测试最慢的步骤（大部分）是Webpack编译应用程序中包含的数千个scss样式表。

我已更改Webpack设置以为这些文件加载空模块：

 { test: /\.css$/, use: 'null-loader' },
 { test: /\.scss$/, use: 'null-loader' },

但是，当然，Angular测试平台的元数据解析器现在抱怨模块为空。

 Error: Expected 'styles' to be an array of strings.
      at assertArrayOfStrings (webpack:///node_modules/@angular/compiler/esm5/compiler.js:2522 <- config/spec-bundle.js:109446:19)
      at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack:///node_modules/@angular/compiler/esm5/compiler.js:14965 <- config/spec-bundle.js:121889:13)

我认为我要做的是要么将每个样式表加载为空字符串，要么将测试平台设置为忽略组件元数据中对.scss文件的引用。

是否有一种方法可以解决上述问题之一？或者也许有一种更聪明的解决方法？

Answer 1

我解决了！

通过创建一个将所有.scss文件作为空字符串加载的自定义加载器，我可以大大减少编译单元测试所需的时间。

ignore-sass-loader.js：

from makefun import wraps

def args_as_ints(func):
    @wraps(func)
    def wrapper(*args, **kwargs):
        print("wrapper executes")
        args = [int(x) for x in args]
        kwargs = dict((k, int(v)) for k, v in kwargs.items())
        return func(*args, **kwargs)
    return wrapper


@args_as_ints
def funny_function(x, y, z=3):
    """Computes x*y + 2*z"""
    return x*y + 2*z


print(funny_function("3", 4.0, z="5"))
# wrapper executes
# 22

help(funny_function)
# Help on function funny_function in module __main__:
#
# funny_function(x, y, z=3)
#     Computes x*y + 2*z

funny_function(0)  
# observe: no "wrapper executes" is printed! (with functools it would)
# TypeError: funny_function() takes at least 2 arguments (1 given)

然后通过在Webpack配置中添加别名来解决此问题：

const sass = require("node-sass");
const async = require("neo-async"); const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4;
const asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);

module.exports = function ignoreSassLoader(content) { 
    const callback = this.async(); 

    asyncSassJobQueue.push({}, () => { 
        callback(null, ' '.toString(), null); 
    }); 
};

然后最后我将我的加载器与原始加载器一起使用：

module.exports = function () {
    return {
               resolveLoader: {
                   alias: {
                       'ignore-sass-loader': resolve(__dirname, '../config/loaders/ignore-sass-loader')
                   }
               },

角度单元测试-忽略样式表

1 个答案: