Better children prop validation and fix integration tests

Author: valentijnnieman

dash_core_components/Tabs.py

@@ -10,7 +10,7 @@ class Tabs(Component):
 children components that will be that tab's content.
 
 Keyword arguments:
-- children (a list of or a singular dash component, string or number; optional): Array that holds Tab components
+- children (list | a list of or a singular dash component, string or number; optional): Array that holds Tab components
 - id (string; optional): The ID of this component, used to identify dash components
 in callbacks. The ID needs to be unique across all of the
 components in an app.

dash_core_components/dash_core_components.min.js

@@ -2883,7 +2883,18 @@
       },
       "children": {
         "type": {
-          "name": "node"
+          "name": "union",
+          "value": [
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "node"
+              }
+            },
+            {
+              "name": "node"
+            }
+          ]
         },
         "required": false,
         "description": "Array that holds Tab components"

dash_core_components/metadata.json

@@ -116,15 +116,6 @@ export default class Tabs extends Component {
         this.selectHandler = this.selectHandler.bind(this);
         this.parseChildrenToArray = this.parseChildrenToArray.bind(this);
 
-        this.NoChildrenError = {
-            name: 'NoChildrenError',
-            message: 'Tabs did not have any children Tab components!',
-        };
-
-        if (!this.props.children) {
-            throw this.NoChildrenError;
-        }
-
         if (!this.props.value) {
             // if no value specified on Tabs component, set it to the first child's (which should be a Tab component) value
 
@@ -230,8 +221,6 @@ export default class Tabs extends Component {
                     />
                 );
             });
-        } else {
-            throw this.NoChildrenError;
         }
         if (!selectedTab) {
             throw new Error(
@@ -383,7 +372,10 @@ Tabs.propTypes = {
     /**
      * Array that holds Tab components
      */
-    children: PropTypes.node,
+    children: React.PropTypes.oneOfType([
+        React.PropTypes.arrayOf(React.PropTypes.node),
+        React.PropTypes.node
+      ]),
 
     /**
      * Holds the colors used by the Tabs and Tab components. If you set these, you should specify colors for all properties, so:

src/components/Tabs.react.js

@@ -560,25 +560,25 @@ def test_tabs_without_value(self):
 
         app.layout = html.Div([
             html.H1('Dash Tabs component demo'),
-            dcc.Tabs(id="tabs-example", children=[
-                dcc.Tab(label='Tab One', value='tab-1-example'),
-                dcc.Tab(label='Tab Two', value='tab-2-example'),
+            dcc.Tabs(id="tabs-without-value", children=[
+                dcc.Tab(label='Tab One', value='tab-1', children=[html.Div('hi')]),
+                dcc.Tab(label='Tab Two', value='tab-2', children=[html.Div('hi')]),
             ]),
-            html.Div(id='tabs-content-example')
+            html.Div(id='tabs-content')
         ])
 
 
-        @app.callback(Output('tabs-content-example', 'children'),
-                    [Input('tabs-example', 'value')])
+        @app.callback(Output('tabs-content', 'children'),
+                    [Input('tabs-without-value', 'value')])
         def render_content(tab):
-            if tab == 'tab-1-example':
+            if tab == 'tab-1':
                 return html.H3('Default selected Tab content 1')
-            elif tab == 'tab-2-example':
+            elif tab == 'tab-2':
                 return html.H3('Tab content 2')
 
         self.startServer(app=app)
 
-        default_tab_content = self.wait_for_element_by_css_selector('#tabs-content-example')
+        default_tab_content = self.wait_for_element_by_css_selector('#tabs-content')
 
         self.assertEqual(default_tab_content.text, 'Default selected Tab content 1')
 

test/test_integration.py

@@ -3,12 +3,6 @@ import Tab from '../../src/components/Tab.react.js';
 import React from 'react';
 import {mount, render} from 'enzyme';
 
-test('Tabs are defined', () => {
-    const tabs = <Tabs />;
-
-    expect(tabs).toBeDefined();
-});
-
 test('Tabs render', () => {
     const tabs = render(
         <Tabs>