fix(headerFooter): make collapsible click handler work

this is a hotfix

Author: vvo

src/decorators/__tests__/headerFooter-test.js

@@ -57,7 +57,7 @@ describe('headerFooter', () => {
     };
     expect(out).toEqualJSX(
       <div className="ais-root root">
-        <Template rootProps={{className: 'ais-header'}} {...templateProps} onClick={null} />
+        <Template rootProps={{className: 'ais-header', onClick: null}} {...templateProps} />
         <div className="ais-body body">
           <TestComponent {...defaultProps} />
         </div>
@@ -86,11 +86,68 @@ describe('headerFooter', () => {
         <div className="ais-body body">
           <TestComponent {...defaultProps} />
         </div>
-        <Template rootProps={{className: 'ais-footer'}} {...templateProps} onClick={null} />
+        <Template rootProps={{className: 'ais-footer', onClick: null}} {...templateProps} />
       </div>
     );
   });
 
+  describe('collapsible', () => {
+    let templateProps;
+    let headerTemplateProps;
+    let footerTemplateProps;
+
+    beforeEach(() => {
+      defaultProps.templateProps.templates = {
+        header: 'yo header',
+        footer: 'yo footer'
+      };
+      templateProps = {
+        data: {},
+        transformData: null,
+        templates: {
+          header: 'yo header',
+          footer: 'yo footer'
+        }
+      };
+      headerTemplateProps = {
+        templateKey: 'header',
+        ...templateProps
+      };
+      footerTemplateProps = {
+        templateKey: 'footer',
+        ...templateProps
+      };
+    });
+
+    it('when true', () => {
+      defaultProps.collapsible = true;
+      let out = render(defaultProps);
+      expect(out).toEqualJSX(
+        <div className="ais-root root ais-root__collapsible">
+          <Template rootProps={{className: 'ais-header', onClick: function() {}}} {...headerTemplateProps} />
+          <div className="ais-body body">
+            <TestComponent {...defaultProps} />
+          </div>
+          <Template rootProps={{className: 'ais-footer', onClick: null}} {...footerTemplateProps} />
+        </div>
+      );
+    });
+
+    it('when collapsed', () => {
+      defaultProps.collapsible = {collapsed: true};
+      let out = render(defaultProps);
+      expect(out).toEqualJSX(
+        <div className="ais-root root ais-root__collapsible ais-root__collapsed">
+          <Template rootProps={{className: 'ais-header', onClick: function() {}}} {...headerTemplateProps} />
+          <div className="ais-body body">
+            <TestComponent {...defaultProps} />
+          </div>
+          <Template rootProps={{className: 'ais-footer', onClick: null}} {...footerTemplateProps} />
+        </div>
+      );
+    });
+  });
+
   function render(props = {}) {
     let HeaderFooter = headerFooter(TestComponent);
     renderer.render(<HeaderFooter {...props} />);

src/decorators/headerFooter.js

@@ -40,8 +40,7 @@ function headerFooter(ComposedComponent) {
       let className = cx(this.props.cssClasses[type], `ais-${type}`);
       return (
         <Template {...this.props.templateProps}
-          onClick={handleClick}
-          rootProps={{className}}
+          rootProps={{className, onClick: handleClick}}
           templateKey={type}
           transformData={null}
         />