fix(menuSelect): unmount component (#3911)

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

Hide file tree

Showing 3 changed files with 62 additions and 29 deletions.
diff --git a/src/widgets/menu-select/__tests__/__snapshots__/menu-select-test.js.snap b/src/widgets/menu-select/__tests__/__snapshots__/menu-select-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`menuSelect render renders correctly 1`] = `
+exports[`menuSelect Lifecycle render renders correctly 1`] = `
 <MenuSelect
   canRefine={true}
   cssClasses={
@@ -40,7 +40,7 @@ exports[`menuSelect render renders correctly 1`] = `
 />
 `;
 
-exports[`menuSelect render renders transformed items correctly 1`] = `
+exports[`menuSelect Lifecycle render renders transformed items correctly 1`] = `
 <MenuSelect
   canRefine={true}
   cssClasses={

diff --git a/src/widgets/menu-select/__tests__/menu-select-test.js b/src/widgets/menu-select/__tests__/menu-select-test.js
@@ -1,10 +1,12 @@
-import { render } from 'preact-compat';
+import { render, unmountComponentAtNode } from 'preact-compat';
+import algoliasearchHelper from 'algoliasearch-helper';
 import menuSelect from '../menu-select';
 
 jest.mock('preact-compat', () => {
   const module = require.requireActual('preact-compat');
 
   module.render = jest.fn();
+  module.unmountComponentAtNode = jest.fn();
 
   return module;
 });
@@ -22,7 +24,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu-select
     });
   });
 
-  describe('render', () => {
+  describe('Lifecycle', () => {
     let data;
     let results;
     let state;
@@ -31,40 +33,69 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu-select
     beforeEach(() => {
       data = { data: [{ name: 'foo' }, { name: 'bar' }] };
       results = { getFacetValues: jest.fn(() => data) };
-      state = { toggleRefinement: jest.fn() };
-      helper = {
-        toggleRefinement: jest.fn().mockReturnThis(),
-        search: jest.fn(),
-        state,
-      };
+      helper = algoliasearchHelper({}, 'index_name');
+      helper.search = jest.fn();
+      state = helper.state;
 
       render.mockClear();
     });
 
-    it('renders correctly', () => {
-      const widget = menuSelect({
-        container: document.createElement('div'),
-        attribute: 'test',
+    describe('render', () => {
+      it('renders correctly', () => {
+        const widget = menuSelect({
+          container: document.createElement('div'),
+          attribute: 'test',
+        });
+
+        widget.init({
+          helper,
+          createURL: () => '#',
+          instantSearchInstance: {},
+        });
+        widget.render({ results, createURL: () => '#', state });
+
+        expect(render.mock.calls[0][0]).toMatchSnapshot();
       });
 
-      widget.init({ helper, createURL: () => '#', instantSearchInstance: {} });
-      widget.render({ results, createURL: () => '#', state });
+      it('renders transformed items correctly', () => {
+        const widget = menuSelect({
+          container: document.createElement('div'),
+          attribute: 'test',
+          transformItems: items =>
+            items.map(item => ({ ...item, transformed: true })),
+        });
 
-      expect(render.mock.calls[0][0]).toMatchSnapshot();
-    });
+        widget.init({
+          helper,
+          createURL: () => '#',
+          instantSearchInstance: {},
+        });
+        widget.render({ results, createURL: () => '#', state });
 
-    it('renders transformed items correctly', () => {
-      const widget = menuSelect({
-        container: document.createElement('div'),
-        attribute: 'test',
-        transformItems: items =>
-          items.map(item => ({ ...item, transformed: true })),
+        expect(render.mock.calls[0][0]).toMatchSnapshot();
       });
+    });
 
-      widget.init({ helper, createURL: () => '#', instantSearchInstance: {} });
-      widget.render({ results, createURL: () => '#', state });
+    describe('dispose', () => {
+      it('unmounts the component', () => {
+        const container = document.createElement('div');
+        const widget = menuSelect({
+          attribute: 'test',
+          container,
+        });
 
-      expect(render.mock.calls[0][0]).toMatchSnapshot();
+        helper.setState(widget.getConfiguration({}));
+
+        expect(unmountComponentAtNode).toHaveBeenCalledTimes(0);
+
+        widget.dispose({
+          state: helper.state,
+          helper,
+        });
+
+        expect(unmountComponentAtNode).toHaveBeenCalledTimes(1);
+        expect(unmountComponentAtNode).toHaveBeenCalledWith(container);
+      });
     });
   });
 });
diff --git a/src/widgets/menu-select/menu-select.js b/src/widgets/menu-select/menu-select.js
@@ -1,4 +1,4 @@
-import React, { render } from 'preact-compat';
+import React, { render, unmountComponentAtNode } from 'preact-compat';
 import cx from 'classnames';
 import connectMenu from '../../connectors/menu/connectMenu';
 import MenuSelect from '../../components/MenuSelect/MenuSelect';
@@ -112,7 +112,9 @@ export default function menuSelect({
     templates,
   });
 
-  const makeWidget = connectMenu(specializedRenderer);
+  const makeWidget = connectMenu(specializedRenderer, () =>
+    unmountComponentAtNode(containerNode)
+  );
 
   return makeWidget({ attribute, limit, sortBy, transformItems });
 }