fix(rangeInput): unmount component (#3910)

algolia · Jul 1, 2019 · f6c29e8 · f6c29e8
1 parent e5c0a88
commit f6c29e8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/src/widgets/range-input/__tests__/range-input-test.js b/src/widgets/range-input/__tests__/range-input-test.js
@@ -6,22 +6,12 @@ jest.mock('preact-compat', () => {
   const module = require.requireActual('preact-compat');
 
   module.render = jest.fn();
+  module.unmountComponentAtNode = jest.fn();
 
   return module;
 });
 
 describe('rangeInput', () => {
-  describe('Usage', () => {
-    it('throws without container', () => {
-      expect(() => rangeInput({ container: undefined }))
-        .toThrowErrorMatchingInlineSnapshot(`
-"The \`container\` option is required.
-
-See documentation: https://www.algolia.com/doc/api-reference/widgets/range-input/js/"
-`);
-    });
-  });
-
   const attribute = 'aNumAttr';
   const createContainer = () => document.createElement('div');
   const instantSearchInstance = {};
@@ -38,6 +28,41 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/range-input
 
   afterEach(() => {
     ReactDOM.render.mockReset();
+    ReactDOM.unmountComponentAtNode.mockReset();
+  });
+
+  describe('Usage', () => {
+    it('throws without container', () => {
+      expect(() => rangeInput({ container: undefined }))
+        .toThrowErrorMatchingInlineSnapshot(`
+"The \`container\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/range-input/js/"
+`);
+    });
+  });
+
+  describe('Lifecycle', () => {
+    describe('dispose', () => {
+      it('unmounts the component', () => {
+        const container = document.createElement('div');
+        const helper = createHelper();
+        const widget = rangeInput({
+          attribute: 'price',
+          container,
+        });
+
+        expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledTimes(0);
+
+        widget.dispose({
+          state: helper.state,
+          helper,
+        });
+
+        expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledTimes(1);
+        expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledWith(container);
+      });
+    });
   });
 
   it('expect to render with results', () => {

diff --git a/src/widgets/range-input/range-input.js b/src/widgets/range-input/range-input.js
@@ -1,4 +1,4 @@
-import React, { render } from 'preact-compat';
+import React, { render, unmountComponentAtNode } from 'preact-compat';
 import cx from 'classnames';
 import RangeInput from '../../components/RangeInput/RangeInput';
 import connectRange from '../../connectors/range/connectRange';
@@ -153,7 +153,9 @@ export default function rangeInput({
     renderState: {},
   });
 
-  const makeWidget = connectRange(specializedRenderer);
+  const makeWidget = connectRange(specializedRenderer, () =>
+    unmountComponentAtNode(containerNode)
+  );
 
   return makeWidget({
     attribute,