WIP: Revert incorrect deletion of initScrollHandler() and `destroyS…

…crollHandler()`
material-components · Feb 14, 2019 · e3e9023 · e3e9023
1 parent d3e87cb
commit e3e9023
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 10 deletions.
diff --git a/packages/mdc-top-app-bar/foundation.ts b/packages/mdc-top-app-bar/foundation.ts
@@ -75,23 +75,39 @@ class MDCTopAppBarBaseFoundation extends MDCFoundation<MDCTopAppBarAdapter> {
   }
 
   init() {
+    this.initScrollHandler();
+    this.initResizeHandler_();
+    this.adapter_.registerNavigationIconInteractionHandler('click', this.navClickHandler_);
+  }
+
+  destroy() {
+    this.destroyScrollHandler();
+    this.destroyResizeHandler_();
+    this.adapter_.deregisterNavigationIconInteractionHandler('click', this.navClickHandler_);
+  }
+
+  initScrollHandler() {
     if (this.scrollHandler_) {
       this.adapter_.registerScrollHandler(this.scrollHandler_);
     }
-    if (this.resizeHandler_) {
-      this.adapter_.registerResizeHandler(this.resizeHandler_);
-    }
-    this.adapter_.registerNavigationIconInteractionHandler('click', this.navClickHandler_);
   }
 
-  destroy() {
+  destroyScrollHandler() {
     if (this.scrollHandler_) {
       this.adapter_.deregisterScrollHandler(this.scrollHandler_);
     }
+  }
+
+  private initResizeHandler_() {
+    if (this.resizeHandler_) {
+      this.adapter_.registerResizeHandler(this.resizeHandler_);
+    }
+  }
+
+  private destroyResizeHandler_() {
     if (this.resizeHandler_) {
       this.adapter_.deregisterResizeHandler(this.resizeHandler_);
     }
-    this.adapter_.deregisterNavigationIconInteractionHandler('click', this.navClickHandler_);
   }
 }
 

diff --git a/packages/mdc-top-app-bar/index.ts b/packages/mdc-top-app-bar/index.ts
@@ -65,7 +65,13 @@ class MDCTopAppBar extends MDCComponent<MDCTopAppBarBaseFoundation> {
   }
 
   setScrollTarget(target: EventTarget) {
+    // Remove scroll handler from the previous scroll target
+    this.foundation_.destroyScrollHandler();
+
     this.scrollTarget_ = target;
+
+    // Initialize scroll handler on the new scroll target
+    this.foundation_.initScrollHandler();
   }
 
   getDefaultFoundation(): MDCTopAppBarBaseFoundation {

diff --git a/packages/mdc-top-app-bar/standard/foundation.ts b/packages/mdc-top-app-bar/standard/foundation.ts
@@ -79,10 +79,6 @@ class MDCTopAppBarFoundation extends MDCTopAppBarBaseFoundation {
     this.resizeHandler_ = () => this.topAppBarResizeHandler_();
   }
 
-  init() {
-    super.init();
-  }
-
   destroy() {
     super.destroy();
     this.adapter_.setStyle('top', '');

diff --git a/test/unit/mdc-top-app-bar/foundation.test.js b/test/unit/mdc-top-app-bar/foundation.test.js
@@ -77,3 +77,17 @@ test('click handler removed from navigation icon during destroy', () => {
   foundation.destroy();
   td.verify(mockAdapter.deregisterNavigationIconInteractionHandler('click', td.matchers.isA(Function)));
 });
+
+test('#initScrollHandler calls registerScrollHandler', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.scrollHandler_ = td.func();
+  foundation.initScrollHandler();
+  td.verify(mockAdapter.registerScrollHandler(foundation.scrollHandler_), {times: 1});
+});
+
+test('#destroyScrollHandler calls deregisterScrollHandler', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.scrollHandler_ = td.func();
+  foundation.destroyScrollHandler();
+  td.verify(mockAdapter.deregisterScrollHandler(foundation.scrollHandler_), {times: 1});
+});
diff --git a/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js
@@ -121,6 +121,25 @@ test('destroy destroys icon ripples', () => {
   });
 });
 
+test('#setScrollTarget deregisters and registers scroll handler on provided target', () => {
+  const {component} = setupTest();
+  const fakeTarget1 = document.createElement('div');
+  const fakeTarget2 = document.createElement('div');
+
+  component.setScrollTarget(fakeTarget1);
+  assert.equal(component.scrollTarget_, fakeTarget1);
+
+  component.foundation_.destroyScrollHandler = td.func();
+  component.foundation_.initScrollHandler = td.func();
+
+  component.setScrollTarget(fakeTarget2);
+
+  td.verify(component.foundation_.destroyScrollHandler(), {times: 1});
+  td.verify(component.foundation_.initScrollHandler(), {times: 1});
+
+  assert.equal(component.scrollTarget_, fakeTarget2);
+});
+
 test('getDefaultFoundation returns the appropriate foundation for default', () => {
   const fixture = getFixture();
   const root = fixture.querySelector(strings.ROOT_SELECTOR);