moduleForComponent does not properly destroy the views it created

[chancancode]

I believe this is what this TODO comment is about. This just bit me and caused a few hours of pulling hair :)

The scenario I have is that my component attaches a click callback on the body on didInsertElement (to dismiss itself when clicked outside), which is removed in willDestroyElement. Problem is, since the views are not actually destroyed, the willDestroyElement hooks and friends are never fired.

So, a few (completely unrelated) test cases later, I used the click helper somewhere and the whole thing blew up with a Error: Cannot perform operations on a Metamorph that is not in the DOM.. It was an epic WTF moment 😅

This might also explain why the tests are leaking memory 😉

[chancancode]

A quick patch:

diff --git a/test/javascripts/support/ember-qunit.js b/test/javascripts/support/ember-qunit.js
index 4ffa73f..ddacede 100644
--- a/test/javascripts/support/ember-qunit.js
+++ b/test/javascripts/support/ember-qunit.js
@@ -70,12 +70,11 @@ exports["default"] = function moduleForComponent(name, description, callbacks) {
     context.dispatcher.setup({}, '#ember-testing');

     context.__setup_properties__.render = function() {
-      var containerView = Ember.ContainerView.create({container: container});
+      context.__container_view__ = Ember.ContainerView.create({container: container});
       var view = Ember.run(function(){
         var subject = context.subject();
-        containerView.pushObject(subject);
-        // TODO: destory this somewhere
-        containerView.appendTo('#ember-testing');
+        context.__container_view__.pushObject(subject);
+        context.__container_view__.appendTo('#ember-testing');
         return subject;
       });

@@ -179,6 +178,10 @@ exports["default"] = function moduleFor(fullName, description, callbacks, delega

     teardown: function(){
       Ember.run(function(){
+        if (context.__container_view__) {
+          context.__container_view__.destroy();
+        }
+
         container.destroy();

         if (context.dispatcher) {

It seems to have addressed the issue for me. It does have some side-effect though. It now triggers the focusout event on the elements as they are being torn down, which broke my tests. But that's probably not ember-qunit problem.

[stefanpenner]

@chancancode wanna submit a PR?

[chancancode]

Is this patch good enough? Or are we looking for a more generic solution?

[chancancode]

There is an additional "problem" with this:

In a component, I have on('didInsertElement') to hook up a jquery plugin, and I clean that up in on('willDestroyElement'). Problem is, with this patch, occasionally the clean up code will be called during tear down, but the setup code was never called, causing the jquery plugin to blow up. I'm still not entirely sure how this is possible (because the container view shouldn't have been created in the first place). Need to investigate more to find out why.