fix(ngMock): prevent memory leak due to data attached to $rootElement

Starting with 88bb551, `ngMock` will attach the `$injector` to the `$rootElement`, but will never
clean it up, resulting in a memory leak. Since a new `$rootElement` is created for every test,
this leak causes Karma to crash on large test-suites.
The problem was not detected by our internal tests, because we do our own clean-up in
`testabilityPatch.js`.

This commit prevents the memory leak, by cleaning up all data attached to `$rootElement` after each
test.

Fixes angular#14094

Author: gkalpak

src/ngMock/angular-mocks.js

@@ -127,12 +127,12 @@ angular.mock.$Browser = function() {
 };
 angular.mock.$Browser.prototype = {
 
-/**
-  * @name $browser#poll
-  *
-  * @description
-  * run all fns in pollFns
-  */
+  /**
+   * @name $browser#poll
+   *
+   * @description
+   * run all fns in pollFns
+   */
   poll: function poll() {
     angular.forEach(this.pollFns, function(pollFn) {
       pollFn();
@@ -2089,9 +2089,11 @@ angular.mock.$RAFDecorator = ['$delegate', function($delegate) {
 /**
  *
  */
+var originalRootElement;
 angular.mock.$RootElementProvider = function() {
   this.$get = ['$injector', function($injector) {
-    return angular.element('<div ng-app></div>').data('$injector', $injector);
+    originalRootElement = angular.element('<div ng-app></div>').data('$injector', $injector);
+    return originalRootElement;
   }];
 };
 
@@ -2600,7 +2602,17 @@ if (window.jasmine || window.mocha) {
     currentSpec = null;
 
     if (injector) {
-      injector.get('$rootElement').off();
+      var cleanUpElems = [originalRootElement];
+      var $rootElement = injector.get('$rootElement');
+      if ($rootElement !== originalRootElement) cleanUpElems.push($rootElement);
+      cleanUpElems.forEach(function(elem) {
+        // The `$rootElement` might not have been created or
+        // a mocked `$rootElement` might not have the standard methods
+        if (elem && elem.off) elem.off();
+        if (elem && elem.removeData) elem.removeData();
+      });
+      if (window.jQuery) window.jQuery.cleanData(cleanUpElems);
+
       injector.get('$rootScope').$destroy();
     }
 

test/ngMock/angular-mocksSpec.js

@@ -2408,9 +2408,134 @@ describe('ngMockE2E', function() {
   });
 });
 
+
 describe('make sure that we can create an injector outside of tests', function() {
   //since some libraries create custom injectors outside of tests,
   //we want to make sure that this is not breaking the internals of
   //how we manage annotated function cleanup during tests. See #10967
   angular.injector([function($injector) {}]);
 });
+
+
+describe('don\'t leak memory between tests', function() {
+  var jQuery = window.jQuery;
+  var prevRootElement;
+  var prevRemoveDataSpy;
+  var prevCleanDataSpy;
+
+  it('should run a test to keep track of `removeData()`/`cleanData()` calls for later inspection',
+    function() {
+      module(function($provide) {
+        $provide.decorator('$rootElement', function($delegate) {
+          // Spy on `.removeData()` and `jQuery.cleanData()`,
+          // so the next test can verify that they have been called as necessary
+          prevRootElement = $delegate;
+          prevRemoveDataSpy = spyOn($delegate, 'removeData').andCallThrough();
+
+          if (jQuery) {
+            prevCleanDataSpy = spyOn(jQuery, 'cleanData').andCallThrough();
+          }
+
+          return $delegate;
+        });
+      });
+
+      // Inject the `$rootElement` to ensure it has been created
+      inject(function($rootElement) {
+        expect($rootElement.injector()).toBeDefined();
+      });
+    }
+  );
+
+  it('should clean up `$rootElement`-related data after each test', function() {
+    // One call is made by `testabilityPatch`'s `dealoc()`
+    // We want to verify the subsequent call, made by `angular-mocks`
+    // (Since `testabilityPatch` re-wrapps `$rootElement` and because jQuery
+    //  returns a different object, we don't capture the 1st call when using jQuery)
+    expect(prevRemoveDataSpy.callCount).toBe(jQuery ? 1 : 2);
+
+    if (jQuery) {
+      // One call is made by `testabilityPatch`'s `dealoc()`
+      // We want to verify the subsequent call, made by `angular-mocks`
+      expect(prevCleanDataSpy.callCount).toBe(2);
+
+      var cleanUpElems = prevCleanDataSpy.calls[1].args[0];
+      expect(cleanUpElems.length).toBe(1);
+      expect(cleanUpElems[0][0]).toBe(prevRootElement[0]);
+    }
+  });
+});
+
+describe('don\'t leak memory between tests with mocked `$rootScope`', function() {
+  var jQuery = window.jQuery;
+  var prevOriginalRootElement;
+  var prevOriginalRemoveDataSpy;
+  var prevRootElement;
+  var prevRemoveDataSpy;
+  var prevCleanDataSpy;
+
+  it('should run a test to keep track of `removeData()`/`cleanData()` calls for later inspection',
+    function() {
+      module(function($provide) {
+        $provide.decorator('$rootElement', function($delegate) {
+          // Mock `$rootElement` to be able to verify that the correct object is cleaned up
+          var mockRootElement = angular.element('<div></div>');
+
+          // Spy on `.removeData()` and `jQuery.cleanData()`,
+          // so the next test can verify that they have been called as necessary
+          prevOriginalRootElement = $delegate;
+          prevOriginalRemoveDataSpy = spyOn($delegate, 'removeData').andCallThrough();
+
+          prevRootElement = mockRootElement;
+          prevRemoveDataSpy = spyOn(mockRootElement, 'removeData').andCallThrough();
+
+          if (jQuery) {
+            prevCleanDataSpy = spyOn(jQuery, 'cleanData').andCallThrough();
+          }
+
+          return mockRootElement;
+        });
+      });
+
+      // Inject the `$rootElement` to ensure it has been created
+      inject(function($rootElement) {
+        expect($rootElement).toBe(prevRootElement);
+        expect(prevOriginalRootElement.injector()).toBeDefined();
+        expect(prevRootElement.injector()).toBeUndefined();
+
+        // If we don't clean up `prevOriginalRootElement`-related data now, `testabilityPatch` will
+        // complain about a memory leak, because it doesn't clean up after the original
+        // `$rootElement`.
+        // This is a false alarm, because `angular-mocks` will clean up later.
+        prevOriginalRootElement.removeData();
+        prevOriginalRemoveDataSpy.reset();
+
+        expect(prevOriginalRemoveDataSpy.callCount).toBe(0);
+      });
+    }
+  );
+
+  it('should clean up after the `$rootElement` (both original and decorated) after each test',
+    function() {
+      // Only `angular-mocks` cleans up after the original `$rootElement`, not `testabilityPatch`
+      expect(prevOriginalRemoveDataSpy.callCount).toBe(1);
+
+      // One call is made by `testabilityPatch`'s `dealoc()`
+      // We want to verify the subsequent call, made by `angular-mocks`
+      // (Since `testabilityPatch` re-wrapps `$rootElement` and because jQuery
+      //  returns a different object, we don't capture the 1st call when using jQuery)
+      expect(prevRemoveDataSpy.callCount).toBe(jQuery ? 1 : 2);
+
+      if (jQuery) {
+        // One call is made by `testabilityPatch`'s `dealoc()`
+        // We want to verify the subsequent call, made by `angular-mocks`
+        expect(prevCleanDataSpy.callCount).toBe(2);
+
+        var cleanUpElems = prevCleanDataSpy.calls[1].args[0];
+        expect(cleanUpElems.length).toBe(2);
+        expect(cleanUpElems[0][0]).toBe(prevOriginalRootElement[0]);
+        expect(cleanUpElems[1][0]).toBe(prevRootElement[0]);
+      }
+    }
+  );
+});