Search code examples
javascriptextjsjs-test-driver

Error with Ext.Msg in js-test-driver tests

In my js-test-driver tests, I'm having an error from simply calling 

Ext.Msg.alert('Error', 'An error occurred while trying load parameters for action with id ' + actionId);

Error Message: Uncaught TypeError: Cannot read property 'insertBefore' of null

Note that Ext.Msg.rendered is true and that Ext.Msg.el.dom.parentNode is null if I stop execution just before the error.

This error does not happen if:

  • The real app is running, only during tests.
  • If I run a single test, only if I run multiple tests that end up calling Ext.Msg.alert

Stack trace

Ext.define.insertBefore (ext-all-debug.js:13281)
Ext.define.show (ext-all-debug.js:42064)
Ext.define.sync (ext-all-debug.js:82755)
Ext.define.syncShadow (ext-all-debug.js:33992)
Ext.define.onAfterFloatLayout (ext-all-debug.js:34002)
Ext.define.afterComponentLayout (ext-all-debug.js:34374)
Base.implement.callParent (ext-all-debug.js:4455)
Ext.define.afterComponentLayout (ext-all-debug.js:38639)
Ext.define.notifyOwner (ext-all-debug.js:38067)
Ext.define.callLayout (ext-all-debug.js:125114)
Ext.define.flushLayouts (ext-all-debug.js:125283)
Ext.define.runComplete (ext-all-debug.js:125769)
callOverrideParent (ext-all-debug.js:36)
Base.implement.callParent (ext-all-debug.js:4455)
Ext.override.runComplete (ext-all-debug.js:29905)
Ext.define.run (ext-all-debug.js:125750)
Ext.define.statics.flushLayouts (ext-all-debug.js:29913)
Ext.define.statics.updateLayout (ext-all-debug.js:29947)
Ext.define.updateLayout (ext-all-debug.js:31844)
Ext.define.onContentChange (ext-all-debug.js:36116)
Ext.define.updateLayout (ext-all-debug.js:31839)
Ext.define.onContentChange (ext-all-debug.js:36116)
Ext.define.updateLayout (ext-all-debug.js:31839)
Ext.define.setTitle (ext-all-debug.js:53058)
Ext.define.setTitle (ext-all-debug.js:55155)
Ext.define.reconfigure (ext-all-debug.js:90310)
Ext.define.show (ext-all-debug.js:90476)
Ext.define.alert (ext-all-debug.js:90600)
Ext.define.onInstanceRetrievalError (BaseWorkflowActionController.js:139)
(anonymous function) (ext-all-debug.js:2265)
Ext.apply.callback (ext-all-debug.js:7437)
Ext.define.Ext.apply.inheritableStatics.load (mock.js:38)
Ext.define.onDocumentClick (BaseWorkflowActionController.js:73)
(anonymous function) (VM6566:6)
Ext.apply.createListenerWrap.wrap (ext-all-debug.js:10786)
AsyncTestCase.test_unknown_error_displays_error_dialog (WorkflowSingleActionController.Test.js:87)

Any ideas of what could be going on? Or something to try?

This question was cross-posted to http://www.sencha.com/forum/showthread.php?288372-Error-calling-Ext.Msg.alert-from-js-test-driver-tests&p=1053744#post1053744

Solution

  • The problem is that js-test-driver runs the following code which removes any content from the DOM at the end of each test.

    var testRunnerPlugin =
      new jstestdriver.plugins.TestRunnerPlugin(Date, function() {
    jstestdriver.log(jstestdriver.jQuery('body')[0].innerHTML);
    jstestdriver.jQuery('body').children().remove();
    jstestdriver.jQuery(document).unbind();
    jstestdriver.jQuery(document).die();
}, runTestLoop);

    Therefore, the global Ext.Msg which was rendered onto the body becomes orphaned and it fails when trying to sync the shadow.

    The solution is not to use the global Ext.Msg, always instantiate a new Ext.message.MessageBox if you want your code to be testable in js-test-driver

    Here's a test case that reproduces the exact same stack trace https://fiddle.sencha.com/#fiddle/7i1