test Section visibility and SubPanel handling

Author: bpostlethwaite

src/components/containers/Section.js

@@ -59,7 +59,9 @@ class Section extends Component {
   }
 
   render() {
-    const hasVisibleChildren = this.children.some(childIsVisible);
+    const hasVisibleChildren =
+      (this.children && this.children.some(childIsVisible)) ||
+      Boolean(this.subPanel);
 
     return hasVisibleChildren ? (
       <div className="section">

src/components/containers/SubPanel.js

@@ -15,12 +15,13 @@ export default class SubPanel extends Component {
 
   render() {
     const toggleClass = `subpanel__toggle ${this.props.toggleIconClass}`;
+    const isVisible = this.props.show || this.state.isVisible;
     return (
       <span>
         <span>
           <i className={toggleClass} onClick={this.toggleVisibility} />
         </span>
-        {this.state.isVisible ? (
+        {isVisible ? (
           <div className="subpanel">
             <div className="subpanel__cover" onClick={this.toggleVisibility} />
             <div>{this.props.children}</div>
@@ -33,6 +34,7 @@ export default class SubPanel extends Component {
 
 SubPanel.propTypes = {
   toggleIconClass: PropTypes.string.isRequired,
+  show: PropTypes.bool,
 };
 
 SubPanel.defaultProps = {

src/components/containers/__tests__/Section-test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Section from '../Section';
+import SubPanel from '../SubPanel';
 import {Flaglist, Info, Numeric} from '../../fields';
 import {TestEditor, fixtures, plotly} from '../../../lib/test-utils';
 import {connectTraceToPlot} from '../../../lib';
@@ -47,7 +48,7 @@ describe('Section', () => {
     ).toBe(false);
   });
 
-  fit('is visible if it contains any non attr children', () => {
+  it('is visible if it contains any non attr children', () => {
     const wrapper = mount(
       <TestEditor
         plotly={plotly}
@@ -89,4 +90,26 @@ describe('Section', () => {
     expect(wrapper.find(Flaglist).exists()).toBe(false);
     expect(wrapper.find(Numeric).exists()).toBe(false);
   });
+
+  it('will render first subPanel even with no visible attrs', () => {
+    const wrapper = mount(
+      <TestEditor
+        plotly={plotly}
+        onUpdate={jest.fn()}
+        {...fixtures.scatter({deref: true})}
+      >
+        <Section name="test-section">
+          <SubPanel show>
+            <Info>INFO</Info>
+          </SubPanel>
+          <SubPanel show>
+            <Info>MISINFORMATION</Info>
+          </SubPanel>
+        </Section>
+      </TestEditor>
+    ).find('[name="test-section"]');
+
+    expect(wrapper.find(Info).length).toBe(1);
+    expect(wrapper.find(Info).text()).toBe('INFO');
+  });
 });