From 2493652ed6dcafde55471a8c469b3989e7c7f5ce Mon Sep 17 00:00:00 2001
From: Jason Bedard <jason+github@jbedard.ca>
Date: Thu, 4 Oct 2018 18:33:04 -0700
Subject: [PATCH] fixup! fix(upgrade): properly destroy upgraded component
 elements and descendants

---
 packages/upgrade/src/common/upgrade_helper.ts |  5 +++++
 packages/upgrade/test/dynamic/upgrade_spec.ts | 22 ++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/upgrade/src/common/upgrade_helper.ts b/packages/upgrade/src/common/upgrade_helper.ts
index 7ac78b31cf19a..a694afefc2722 100644
--- a/packages/upgrade/src/common/upgrade_helper.ts
+++ b/packages/upgrade/src/common/upgrade_helper.ts
@@ -124,6 +124,11 @@ export class UpgradeHelper {
       controllerInstance.$onDestroy();
     }
     $scope.$destroy();
+
+    // Clean the jQuery/jqLite data on the component+child elements.
+    // Equivelent to jQuery/jqLite invoking `cleanData` on an Element (this.element)
+    //  https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/src/manipulation.js#L223
+    //  https://github.com/angular/angular.js/blob/26ddc5f830f902a3d22f4b2aab70d86d4d688c82/src/jqLite.js#L306-L312
     angular.element.cleanData([this.element]);
     angular.element.cleanData(this.element.querySelectorAll('*'));
   }
diff --git a/packages/upgrade/test/dynamic/upgrade_spec.ts b/packages/upgrade/test/dynamic/upgrade_spec.ts
index 84b2b3b403ac7..96c7a4d54c2bf 100644
--- a/packages/upgrade/test/dynamic/upgrade_spec.ts
+++ b/packages/upgrade/test/dynamic/upgrade_spec.ts
@@ -2196,9 +2196,11 @@ withEachNg1Version(() => {
              // Mocking animations (via `ngAnimateMock`) avoids the issue.
              angular.module('ng1', ['ngAnimateMock'])
                  .component('ng1', {
-                   controller: function($element: angular.IAugmentedJQuery) {
-                     $element.on !('$destroy', elementDestroyListener);
-                     $element.contents !().on !('$destroy', descendantDestroyListener);
+                   controller: class {
+                     constructor(private $element: angular.IAugmentedJQuery) {} $onInit() {
+                       this.$element.on !('$destroy', elementDestroyListener);
+                       this.$element.contents !().on !('$destroy', descendantDestroyListener);
+                     }
                    },
                    template: '<div></div>'
                  })
@@ -2237,11 +2239,11 @@ withEachNg1Version(() => {
              // Define `ng1Component`
              const ng1Component: angular.IComponent = {
                controller: class {
-                 constructor($element: angular.IAugmentedJQuery) {
-                   $element.data !('test', 1);
-                   $element.contents !().data !('test', 2);
+                 constructor(private $element: angular.IAugmentedJQuery) {} $onInit() {
+                   this.$element.data !('test', 1);
+                   this.$element.contents !().data !('test', 2);
 
-                   ng1ComponentElement = $element;
+                   ng1ComponentElement = this.$element;
                  }
                },
                template: '<div></div>'
@@ -2303,10 +2305,10 @@ withEachNg1Version(() => {
              // Define `ng1Component`
              const ng1Component: angular.IComponent = {
                controller: class {
-                 constructor($element: angular.IAugmentedJQuery) {
-                   ng1DescendantElement = $element.contents !();
+                 constructor(private $element: angular.IAugmentedJQuery) {} $onInit() {
+                   ng1DescendantElement = this.$element.contents !();
 
-                   $element.on !('click', elementClickListener);
+                   this.$element.on !('click', elementClickListener);
                    ng1DescendantElement.on !('click', descendantClickListener);
                  }
                },