Use WaitForElement to test aurelia while Karma is running in Internet Explorer
We are currently developing an Aurelia application that needs to run in Internet Explorer 11. Everything is fine until we try to run our Karma / Tape tests in IE11 using the karma-ie-launcher program.
Karma starts right, some tests are done until a test using waitForDocumentElement
. Since to waitForDocumentElement
use promises, I said to myself, great, I just need to load some polyphrases Promise
in Karma and everything will start working the same as when using Chrome. But obviously this is not the case.
So finally the question. Is there a way to have my tests run in Karma targeting IE11, using karma-ie-launcher
and being able to use waitForDocumentElement
in my tests. This seems to be the culprit as it uses promises.
I can create a sample repo aside from my project if needed.
Thank!
Edit:
Here's a stack trace of the "out of stack space" error. For records, rawValue is the binding property I'm trying to assert inside a waitForDocumentElement
, so the binding and everyone has time to do their stuff.
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)'
source to share
Karma creates a property in a named window __karma__
that lists the files that match the templates in your karma.conf.js file. Typically, there is code in your dot test module that expands this list of filenames and expands the extension, etc., so they become the list of module names that match your loader ... requirejs in your case;)
This array of module names is then assigned to deps
the requirejs config property, which causes requirejs to load all of them before calling the function assigned to callback
the requirejs config property.
I manually add bluebird as the first dependency. Then I found some functionality in the callback and if the Promise is not supported by the browser then assign it to window.Promise.
Here's an example that should show up well in your setup. The corresponding lines are indicated by comments.
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();
}
});
source to share