unit-testing - 在 Internet Explorer 中运行 Karma 时在 aurelia-testing 中使用 WaitForElement

Question

我们目前正在开发需要在 Internet Explorer 11 上运行的 Aurelia 应用程序。一切都很好，直到我们尝试使用 karma-ie-launcher 在 IE11 上运行我们的 Karma/Tape 测试。

Karma 正常启动，一些测试正在执行，直到遇到使用 waitForDocumentElement 的测试。由于 waitForDocumentElement 使用 promises，我告诉自己，很好，我只需要将一些 Promise polyfill 加载到 Karma 中，一切都会像使用 Chrome 时一样开始工作。但是，它显然没有。

那么，终于是问题了。有没有办法让我的测试在 Karma 上运行，使用 karma-ie-launcher 以 IE11 为目标，并能够在我的测试中使用 waitForDocumentElement。它似乎是这里的罪魁祸首，因为它使用了 promise 。

如果需要，我可能会在我的项目旁边建立一个示例存储库。

谢谢!

编辑:这是“堆栈空间不足”错误的堆栈跟踪。作为记录，rawValue 是一个可绑定(bind)的属性，我试图在 waitForDocumentelement 中断言，这样绑定(bind)和所有人都有时间做他们的事情。

 WARN: 'Unhandled rejection TypeError: Unable to get property 'rawValue' of undefined or null reference
   at Anonymous function (http://localhost:9876/base/dist/_test/components/aurelia-numeric-input/aurelia-numeric-input.spec.js?ea0d4f3a76b6b818e30e08a7cbbc07dc5c11e02a:31:17)
   at r (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:31:9351)
   at i.prototype._settlePromiseFromHandler (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:14559)
   at i.prototype._settlePromise (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:15364)
   at i.prototype._settlePromise0 (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:16065)
   at i.prototype._settlePromises (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:17395)
   at r.prototype._drainQueue (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3054)
   at r.prototype._drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3112)
   at drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:1236)
   at Anonymous function (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:31140)'
WARN: 'Unhandled rejection TypeError: Unable to get property 'rawValue' of undefined or null reference
   at Anonymous function (http://localhost:9876/base/dist/_test/components/aurelia-numeric-input/aurelia-numeric-input.spec.js?ea0d4f3a76b6b818e30e08a7cbbc07dc5c11e02a:36:17)
   at r (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:31:9351)
   at i.prototype._settlePromiseFromHandler (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:14559)
   at i.prototype._settlePromise (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:15364)
   at i.prototype._settlePromise0 (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:16065)
   at i.prototype._settlePromises (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:17395)
   at r.prototype._drainQueue (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3054)
   at r.prototype._drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3112)
   at drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:1236)
   at Anonymous function (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:31140)'
WARN: 'Unhandled rejection Error: Out of stack space
   at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2691:7)
   at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
   at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
   at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)
   at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
   at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
   at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)
   at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
   at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
   at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)'

Answer 1

Karma 在名为 __karma__ 的窗口上创建了一个属性，它列出了与您的 karma.conf.js 中的模式匹配的文件。通常，在您的测试入口点模块中有一些代码会减少此文件名列表并删除扩展名等，因此它们成为适合您的加载程序的模块名称列表......在您的情况下是 requirejs ;)

然后将这个模块名称数组分配给 requirejs 配置的 deps 属性，这会导致 requirejs 在调用分配给 callback 属性的函数之前加载所有这些模块requirejs 配置的。

我一直在手动添加 bluebird 作为第一个依赖项。然后在回调中，我进行一些功能检测，如果浏览器不支持 Promise，则将其分配给 window.Promise。

这是一个应该非常清楚地映射到您的设置的示例。相关行用注释表示。

const testModules = Object.keys(window.__karma__.files)
    .filter(filename => /\.spec\.js$/.test(filename))
    .map(filename => filename.replace(/^\/base\/dist\/|\.js$/g, ''));

testModules.unshift('bluebird');  // make bluebird the first dependency in the array... this means it will be the first argument to the callback function (see below)

let karmaStarted = false;

require.config({
    baseUrl: '/base/global/output',
    paths: {
        'bluebird': '../some/path/to/bluebird.min' // ensure the loader can find bluebird
    },
    deps: testModules,  // bluebird is the first item in this array of modules
    callback: (bluebird: any) => {  // bluebird is the first arg... there are many other args but we don't care about the rest
        if (karmaStarted) {
            return;
        }

        // polyfill Promise on an as-needed basis.
        if (!('Promise' in window && 'resolve' in window.Promise && 'reject' in window.Promise && 'all' in window.Promise && 'race' in window.Promise)) {
            window.Promise = bluebird.Promise;
        }

        karmaStarted = true;
        window.__karma__.start();
    }
});