From 7bb7bb5b077ab675ff6bd5cf76975fad4d6f6ef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 27 Feb 2019 15:14:44 +0100
Subject: [PATCH 1/6] fix(panel): append panel body as a child element

---
 src/components/Panel/Panel.js                | 75 +++++++++++---------
 src/components/Panel/__tests__/Panel-test.js | 22 +++---
 src/widgets/panel/panel.js                   | 22 +++---
 3 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/src/components/Panel/Panel.js b/src/components/Panel/Panel.js
index db214740ba..8435896575 100644
--- a/src/components/Panel/Panel.js
+++ b/src/components/Panel/Panel.js
@@ -1,44 +1,53 @@
-import React from 'preact-compat';
+import React, { Component } from 'preact-compat';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Template from '../Template/Template';
 
-const Panel = ({ cssClasses, hidden, templateProps, data, onRef }) => (
-  <div
-    className={cx(cssClasses.root, {
-      [cssClasses.noRefinementRoot]: hidden,
-    })}
-    hidden={hidden}
-  >
-    {templateProps.templates.header && (
-      <Template
-        {...templateProps}
-        templateKey="header"
-        rootProps={{
-          className: cssClasses.header,
-        }}
-        data={data}
-      />
-    )}
+class Panel extends Component {
+  componentDidMount() {
+    this.bodyRef.appendChild(this.props.bodyElement);
+  }
 
-    <div className={cssClasses.body} ref={onRef} />
+  render() {
+    const { cssClasses, hidden, templateProps, data } = this.props;
 
-    {templateProps.templates.footer && (
-      <Template
-        {...templateProps}
-        templateKey="footer"
-        rootProps={{
-          className: cssClasses.footer,
-        }}
-        data={data}
-      />
-    )}
-  </div>
-);
+    return (
+      <div
+        className={cx(cssClasses.root, {
+          [cssClasses.noRefinementRoot]: hidden,
+        })}
+        hidden={hidden}
+      >
+        {templateProps.templates.header && (
+          <Template
+            {...templateProps}
+            templateKey="header"
+            rootProps={{
+              className: cssClasses.header,
+            }}
+            data={data}
+          />
+        )}
+
+        <div className={cssClasses.body} ref={node => (this.bodyRef = node)} />
+
+        {templateProps.templates.footer && (
+          <Template
+            {...templateProps}
+            templateKey="footer"
+            rootProps={{
+              className: cssClasses.footer,
+            }}
+            data={data}
+          />
+        )}
+      </div>
+    );
+  }
+}
 
 Panel.propTypes = {
-  // Prop to get the panel body reference to insert the widget
-  onRef: PropTypes.func,
+  bodyElement: PropTypes.instanceOf(Element).isRequired,
   cssClasses: PropTypes.shape({
     root: PropTypes.string.isRequired,
     noRefinementRoot: PropTypes.string.isRequired,
diff --git a/src/components/Panel/__tests__/Panel-test.js b/src/components/Panel/__tests__/Panel-test.js
index 99c58bd5ca..ae7967dd44 100644
--- a/src/components/Panel/__tests__/Panel-test.js
+++ b/src/components/Panel/__tests__/Panel-test.js
@@ -5,6 +5,7 @@ import Panel from '../Panel';
 describe('Panel', () => {
   test('should render component with default props', () => {
     const props = {
+      bodyElement: document.createElement('div'),
       cssClasses: {
         root: 'root',
         noRefinementRoot: 'noRefinementRoot',
@@ -24,11 +25,11 @@ describe('Panel', () => {
 
     const wrapper = mount(<Panel {...props} />);
 
-    expect(wrapper.find('.root')).toHaveLength(1);
-    expect(wrapper.find('.noRefinementRoot')).toHaveLength(0);
-    expect(wrapper.find('.body')).toHaveLength(1);
-    expect(wrapper.find('.header')).toHaveLength(1);
-    expect(wrapper.find('.footer')).toHaveLength(1);
+    expect(wrapper.find('.root').exists()).toBe(true);
+    expect(wrapper.find('.noRefinementRoot').exists()).toBe(false);
+    expect(wrapper.find('.body').exists()).toBe(true);
+    expect(wrapper.find('.header').exists()).toBe(true);
+    expect(wrapper.find('.footer').exists()).toBe(true);
     expect(wrapper.find('.header').text()).toBe('Header');
     expect(wrapper.find('.footer').text()).toBe('Footer');
     expect(wrapper).toMatchSnapshot();
@@ -36,6 +37,7 @@ describe('Panel', () => {
 
   test('should render component with `hidden` prop', () => {
     const props = {
+      bodyElement: document.createElement('div'),
       cssClasses: {
         root: 'root',
         noRefinementRoot: 'noRefinementRoot',
@@ -55,11 +57,11 @@ describe('Panel', () => {
 
     const wrapper = mount(<Panel {...props} />);
 
-    expect(wrapper.find('.root')).toHaveLength(1);
-    expect(wrapper.find('.noRefinementRoot')).toHaveLength(1);
-    expect(wrapper.find('.body')).toHaveLength(1);
-    expect(wrapper.find('.header')).toHaveLength(1);
-    expect(wrapper.find('.footer')).toHaveLength(1);
+    expect(wrapper.find('.root').exists()).toBe(true);
+    expect(wrapper.find('.noRefinementRoot').exists()).toBe(true);
+    expect(wrapper.find('.body').exists()).toBe(true);
+    expect(wrapper.find('.header').exists()).toBe(true);
+    expect(wrapper.find('.footer').exists()).toBe(true);
     expect(wrapper.props().hidden).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
diff --git a/src/widgets/panel/panel.js b/src/widgets/panel/panel.js
index 1940d106d5..df0e3ff3a2 100644
--- a/src/widgets/panel/panel.js
+++ b/src/widgets/panel/panel.js
@@ -12,24 +12,22 @@ import Panel from '../../components/Panel/Panel';
 const withUsage = createDocumentationMessageGenerator({ name: 'panel' });
 const suit = component('Panel');
 
-const renderer = ({ containerNode, cssClasses, templateProps }) => ({
-  options,
-  hidden,
-}) => {
-  let bodyRef = null;
-
+const renderer = ({
+  containerNode,
+  bodyContainerNode,
+  cssClasses,
+  templateProps,
+}) => ({ options, hidden }) => {
   render(
     <Panel
       cssClasses={cssClasses}
       hidden={hidden}
       templateProps={templateProps}
       data={options}
-      onRef={ref => (bodyRef = ref)}
+      bodyElement={bodyContainerNode}
     />,
     containerNode
   );
-
-  return { bodyRef };
 };
 
 /**
@@ -85,6 +83,7 @@ export default function panel({
     `The \`hidden\` option in the "panel" widget expects a function returning a boolean (received "${typeof hidden}" type).`
   );
 
+  const bodyContainerNode = document.createElement('div');
   const cssClasses = {
     root: cx(suit(), userCssClasses.root),
     noRefinementRoot: cx(
@@ -112,18 +111,19 @@ export default function panel({
 
     const renderPanel = renderer({
       containerNode: getContainerNode(container),
+      bodyContainerNode,
       cssClasses,
       templateProps,
     });
 
-    const { bodyRef } = renderPanel({
+    renderPanel({
       options: {},
       hidden: true,
     });
 
     const widget = widgetFactory({
       ...widgetOptions,
-      container: getContainerNode(bodyRef),
+      container: bodyContainerNode,
     });
 
     return {

From 8d323fdb0389cf6da425e197d90a123d7e14f3ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 28 Feb 2019 13:39:58 +0100
Subject: [PATCH 2/6] fix(panel): update stories

---
 stories/panel.stories.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/stories/panel.stories.js b/stories/panel.stories.js
index b4ec50e82e..7272f22f42 100644
--- a/stories/panel.stories.js
+++ b/stories/panel.stories.js
@@ -21,17 +21,16 @@ storiesOf('Panel', module)
     })
   )
   .add(
-    'with ratingMenu',
+    'with range input',
     withHits(({ search, container, instantsearch }) => {
       search.addWidget(
         instantsearch.widgets.panel({
           templates: {
-            header: ({ results }) =>
-              `Header ${results ? `| ${results.nbHits} results` : ''}`,
+            header: 'Price',
             footer: 'Footer',
           },
           hidden: ({ results }) => results.nbHits === 0,
-        })(instantsearch.widgets.ratingMenu)({
+        })(instantsearch.widgets.rangeInput)({
           container,
           attribute: 'price',
         })
@@ -39,19 +38,23 @@ storiesOf('Panel', module)
     })
   )
   .add(
-    'with menu',
+    'with range slider',
     withHits(({ search, container, instantsearch }) => {
       search.addWidget(
         instantsearch.widgets.panel({
           templates: {
-            header: ({ results }) =>
-              `Header ${results ? `| ${results.nbHits} results` : ''}`,
+            header: 'Price',
             footer: 'Footer',
           },
           hidden: ({ results }) => results.nbHits === 0,
-        })(instantsearch.widgets.menu)({
+        })(instantsearch.widgets.rangeSlider)({
           container,
-          attribute: 'brand',
+          attribute: 'price',
+          tooltips: {
+            format(rawValue) {
+              return `$${Math.round(rawValue).toLocaleString()}`;
+            },
+          },
         })
       );
     })

From 2463055d4d9f61dd8f643b98d6c20c97c76d4cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 1 Mar 2019 16:52:26 +0100
Subject: [PATCH 3/6] test(panel): test inner widget lifecycle

---
 src/widgets/panel/__tests__/panel-test.js | 38 +++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/widgets/panel/__tests__/panel-test.js b/src/widgets/panel/__tests__/panel-test.js
index 41765d2262..8c7ba92813 100644
--- a/src/widgets/panel/__tests__/panel-test.js
+++ b/src/widgets/panel/__tests__/panel-test.js
@@ -1,5 +1,15 @@
+import { render, unmountComponentAtNode } from 'preact-compat';
 import panel from '../panel';
 
+jest.mock('preact-compat', () => {
+  const module = require.requireActual('preact-compat');
+
+  module.render = jest.fn();
+  module.unmountComponentAtNode = jest.fn();
+
+  return module;
+});
+
 describe('Usage', () => {
   test('without arguments does not throw', () => {
     expect(() => panel()).not.toThrow();
@@ -41,3 +51,31 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/panel/js/"
 `);
   });
 });
+
+describe('Lifecycle', () => {
+  beforeEach(() => {
+    render.mockClear();
+    unmountComponentAtNode.mockClear();
+  });
+
+  test('calls the inner widget lifecycle', () => {
+    const widget = {
+      init: jest.fn(),
+      render: jest.fn(),
+      dispose: jest.fn(),
+    };
+    const widgetFactory = () => widget;
+
+    const widgetWithPanel = panel()(widgetFactory)({
+      container: document.createElement('div'),
+    });
+
+    widgetWithPanel.init({});
+    widgetWithPanel.render({});
+    widgetWithPanel.dispose({});
+
+    expect(widget.init).toHaveBeenCalledTimes(1);
+    expect(widget.render).toHaveBeenCalledTimes(1);
+    expect(widget.dispose).toHaveBeenCalledTimes(1);
+  });
+});

From 14f62b62168d8fc3cdfd9868cdad059e432673c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Mon, 4 Mar 2019 11:14:30 +0100
Subject: [PATCH 4/6] test(Panel): refactor way to get default props

---
 src/components/Panel/__tests__/Panel-test.js | 54 +++++++++-----------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/components/Panel/__tests__/Panel-test.js b/src/components/Panel/__tests__/Panel-test.js
index ae7967dd44..c6240f2e0a 100644
--- a/src/components/Panel/__tests__/Panel-test.js
+++ b/src/components/Panel/__tests__/Panel-test.js
@@ -2,25 +2,31 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Panel from '../Panel';
 
+const defaultCSSClasses = {
+  root: 'root',
+  noRefinementRoot: 'noRefinementRoot',
+  body: 'body',
+  header: 'header',
+  footer: 'footer',
+};
+
+const getDefaultProps = () => ({
+  bodyElement: document.createElement('div'),
+  cssClasses: defaultCSSClasses,
+  hidden: false,
+  data: {},
+  templateProps: {
+    templates: {
+      header: 'Header',
+      footer: 'Footer',
+    },
+  },
+});
+
 describe('Panel', () => {
   test('should render component with default props', () => {
     const props = {
-      bodyElement: document.createElement('div'),
-      cssClasses: {
-        root: 'root',
-        noRefinementRoot: 'noRefinementRoot',
-        body: 'body',
-        header: 'header',
-        footer: 'footer',
-      },
-      hidden: false,
-      data: {},
-      templateProps: {
-        templates: {
-          header: 'Header',
-          footer: 'Footer',
-        },
-      },
+      ...getDefaultProps(),
     };
 
     const wrapper = mount(<Panel {...props} />);
@@ -37,22 +43,8 @@ describe('Panel', () => {
 
   test('should render component with `hidden` prop', () => {
     const props = {
-      bodyElement: document.createElement('div'),
-      cssClasses: {
-        root: 'root',
-        noRefinementRoot: 'noRefinementRoot',
-        body: 'body',
-        header: 'header',
-        footer: 'footer',
-      },
+      ...getDefaultProps(),
       hidden: true,
-      data: {},
-      templateProps: {
-        templates: {
-          header: 'Header',
-          footer: 'Footer',
-        },
-      },
     };
 
     const wrapper = mount(<Panel {...props} />);

From b59541cf72fb759a56a415606f794775baac6067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Mon, 4 Mar 2019 11:16:56 +0100
Subject: [PATCH 5/6] test(Panel): store cssClasses in variable

---
 src/components/Panel/__tests__/Panel-test.js | 30 +++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/Panel/__tests__/Panel-test.js b/src/components/Panel/__tests__/Panel-test.js
index c6240f2e0a..1a9eeac6a1 100644
--- a/src/components/Panel/__tests__/Panel-test.js
+++ b/src/components/Panel/__tests__/Panel-test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Panel from '../Panel';
 
-const defaultCSSClasses = {
+const cssClasses = {
   root: 'root',
   noRefinementRoot: 'noRefinementRoot',
   body: 'body',
@@ -12,7 +12,7 @@ const defaultCSSClasses = {
 
 const getDefaultProps = () => ({
   bodyElement: document.createElement('div'),
-  cssClasses: defaultCSSClasses,
+  cssClasses,
   hidden: false,
   data: {},
   templateProps: {
@@ -31,13 +31,15 @@ describe('Panel', () => {
 
     const wrapper = mount(<Panel {...props} />);
 
-    expect(wrapper.find('.root').exists()).toBe(true);
-    expect(wrapper.find('.noRefinementRoot').exists()).toBe(false);
-    expect(wrapper.find('.body').exists()).toBe(true);
-    expect(wrapper.find('.header').exists()).toBe(true);
-    expect(wrapper.find('.footer').exists()).toBe(true);
-    expect(wrapper.find('.header').text()).toBe('Header');
-    expect(wrapper.find('.footer').text()).toBe('Footer');
+    expect(wrapper.find(`.${cssClasses.root}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.noRefinementRoot}`).exists()).toBe(
+      false
+    );
+    expect(wrapper.find(`.${cssClasses.body}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.header}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.footer}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.header}`).text()).toBe('Header');
+    expect(wrapper.find(`.${cssClasses.footer}`).text()).toBe('Footer');
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -49,11 +51,11 @@ describe('Panel', () => {
 
     const wrapper = mount(<Panel {...props} />);
 
-    expect(wrapper.find('.root').exists()).toBe(true);
-    expect(wrapper.find('.noRefinementRoot').exists()).toBe(true);
-    expect(wrapper.find('.body').exists()).toBe(true);
-    expect(wrapper.find('.header').exists()).toBe(true);
-    expect(wrapper.find('.footer').exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.root}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.noRefinementRoot}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.body}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.header}`).exists()).toBe(true);
+    expect(wrapper.find(`.${cssClasses.footer}`).exists()).toBe(true);
     expect(wrapper.props().hidden).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });

From e6057c3e91b816fc0a862290b2c3362e68736a73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 5 Mar 2019 14:03:12 +0100
Subject: [PATCH 6/6] test(panl): use toWarnDev

---
 src/widgets/panel/__tests__/panel-test.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/widgets/panel/__tests__/panel-test.js b/src/widgets/panel/__tests__/panel-test.js
index 8c7ba92813..7703214119 100644
--- a/src/widgets/panel/__tests__/panel-test.js
+++ b/src/widgets/panel/__tests__/panel-test.js
@@ -12,23 +12,25 @@ jest.mock('preact-compat', () => {
 
 describe('Usage', () => {
   test('without arguments does not throw', () => {
-    expect(() => panel()).not.toThrow();
+    expect(() => {
+      panel();
+    }).not.toThrow();
   });
 
   test('with templates does not throw', () => {
-    expect(() =>
+    expect(() => {
       panel({
         templates: { header: 'header' },
-      })
-    ).not.toThrow();
+      });
+    }).not.toThrow();
   });
 
   test('with `hidden` as function does not throw', () => {
-    expect(() =>
+    expect(() => {
       panel({
         hidden: () => true,
-      })
-    ).not.toThrow();
+      });
+    }).not.toThrow();
   });
 
   test('with `hidden` as boolean warns', () => {
@@ -44,7 +46,9 @@ describe('Usage', () => {
   test('with a widget without `container` throws', () => {
     const fakeWidget = () => {};
 
-    expect(() => panel()(fakeWidget)({})).toThrowErrorMatchingInlineSnapshot(`
+    expect(() => {
+      panel()(fakeWidget)({});
+    }).toThrowErrorMatchingInlineSnapshot(`
 "The \`container\` option is required in the widget within the panel.
 
 See documentation: https://www.algolia.com/doc/api-reference/widgets/panel/js/"