Remove a Switcher's listeners when using SwitcherProvider

Author: jdlehman

.travis.yml

@@ -5,8 +5,9 @@ cache:
   directories:
     - node_modules
 node_js:
-  - "5.7"
   - "6.2"
+  - "7.8"
+  - "8.0"
 env:
   matrix:
     - TEST_SUITE=lint

src/Switcher.js

@@ -105,14 +105,33 @@ export default class Switcher extends Component {
   }
 
   componentWillUnmount() {
+    const usingProvider = this.context.switcherProvider;
     if (this.props.load) {
-      window.removeEventListener('load', this.handleRouteChange);
+      if (usingProvider) {
+        this.context.switcherProvider.loadListeners = this.context.switcherProvider.loadListeners.filter(
+          ({ id }) => id !== this._id
+        );
+      } else {
+        window.removeEventListener('load', this.handleRouteChange);
+      }
     }
     if (this.props.pushState) {
-      window.removeEventListener('popstate', this.handleRouteChange);
+      if (usingProvider) {
+        this.context.switcherProvider.popStateListeners = this.context.switcherProvider.popStateListeners.filter(
+          ({ id }) => id !== this._id
+        );
+      } else {
+        window.removeEventListener('popstate', this.handleRouteChange);
+      }
     }
     if (this.props.hashChange) {
-      window.removeEventListener('hashchange', this.handleRouteChange);
+      if (usingProvider) {
+        this.context.switcherProvider.hashChangeListeners = this.context.switcherProvider.hashChangeListeners.filter(
+          ({ id }) => id !== this._id
+        );
+      } else {
+        window.removeEventListener('hashchange', this.handleRouteChange);
+      }
     }
   }
 

test/SwitcherProvider_test.js

@@ -24,8 +24,62 @@ describe('SwitcherProvider', () => {
     expect(component.text()).toEqual('Another ChildHomeHome');
     helpers.currentPath.restore();
   });
+
+  it('removes event listeners when a child Switcher is unmounted', () => {
+    sinon.stub(helpers, 'currentPath').returns('/');
+    const component = renderNested();
+    const innerSwitcher = component.find('Switcher').last();
+    const listenerId = innerSwitcher.node._id;
+    const instance = component.instance();
+
+    expect(instance.switcherProvider.loadListeners.length).toEqual(2);
+    expect(instance.switcherProvider.hashChangeListeners.length).toEqual(2);
+    expect(
+      instance.switcherProvider.loadListeners
+        .map(({ id }) => id)
+        .indexOf(listenerId)
+    ).not.toEqual(-1);
+    expect(
+      instance.switcherProvider.hashChangeListeners
+        .map(({ id }) => id)
+        .indexOf(listenerId)
+    ).not.toEqual(-1);
+    helpers.currentPath.restore();
+
+    sinon.stub(helpers, 'currentPath').returns('/hello');
+    component.update();
+    expect(instance.switcherProvider.loadListeners.length).toEqual(1);
+    expect(instance.switcherProvider.hashChangeListeners.length).toEqual(1);
+    expect(
+      instance.switcherProvider.loadListeners
+        .map(({ id }) => id)
+        .indexOf(listenerId)
+    ).toEqual(-1);
+    expect(
+      instance.switcherProvider.hashChangeListeners
+        .map(({ id }) => id)
+        .indexOf(listenerId)
+    ).toEqual(-1);
+    helpers.currentPath.restore();
+  });
 });
 
+function renderNested() {
+  return mount(
+    <SwitcherProvider>
+      <div>
+        <Switcher>
+          <Switcher path="/">
+            <div path={['/', '/other']}>Home</div>
+            <div path="/second">Second</div>
+          </Switcher>
+          <div path="/hello">Hello</div>
+        </Switcher>
+      </div>
+    </SwitcherProvider>
+  );
+}
+
 function renderComponent() {
   return mount(
     <SwitcherProvider>