validation.py

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

import datetime
import json
import plotly

app = dash.Dash(__name__)
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

test_cases = {
    'not-boolean': {
        'name': 'exception: simple "not a boolean" check',
        'component': dcc.Graph,
        'props': {
            'animate': 0
        }
    },
    'missing-required-nested-prop': {
        'name': 'exception: missing required "value" inside options',
        'component': dcc.Checklist,
        'props': {
            'options': [{
                'label': 'hello'
            }],
            'values': ['test']
        }
    },
    'string-not-list': {
        'name': 'exception: string-not-a-list',
        'component': dcc.Checklist,
        'props': {
            'options': [{
                'label': 'hello',
                'value': 'test'
            }],
            'values': 'test'
        }
    },
    'no-properties': {
        'name': 'pass: no properties',
        'component': dcc.Graph,
        'props': {}
    },
    'nested-children': {
        'name': 'exception: nested children',
        'component': html.Div,
        'props': {'children': [[1]]}
    },
    'deeply-nested-children': {
        'name': 'exception: deeply nested children',
        'component': html.Div,
        'props': {'children': html.Div([
            html.Div([
                3,
                html.Div([[10]])
            ])
        ])}
    },
    'dict': {
        'name': 'exception: returning a dictionary',
        'component': html.Div,
        'props': {
            'children': {'hello': 'world'}
        }
    },
    'nested-prop-failure': {
        'name': 'exception: nested string instead of number/null',
        'component': dcc.Graph,
        'props': {
            'figure': {'data': [{}]},
            'config': {
                'toImageButtonOptions': {
                    'width': None,
                    'height': 'test'
                }
            }
        }
    },
    'allow-null': {
        'name': 'pass: nested null',
        'component': dcc.Graph,
        'props': {
            'figure': {'data': [{}]},
            'config': {
                'toImageButtonOptions': {
                    'width': None,
                    'height': None
                }
            }
        }
    },
    'allow-null-2': {
        'name': 'pass: allow null as value',
        'component': dcc.Dropdown,
        'props': {
            'value': None
        }
    },
    'allow-null-3': {
        'name': 'pass: allow null in properties',
        'component': dcc.Input,
        'props': {
            'value': None
        }
    },
    'allow-null-4': {
        'name': 'pass: allow null in oneOfType',
        'component': dcc.Store,
        'props': {
            'id': 'store',
            'data': None
        }
    }
}


app.layout = html.Div([

    html.A('HOME', href='/'),

    html.Div(id='content'),

    html.Div(children=[
        html.Div([
            html.A(
                href='/{}'.format(key),
                children=test_cases[key]['name']
            ),
            html.Div(html.B(test_cases[key]['component'].__name__)),
            html.Pre(json.dumps(
                test_cases[key]['props'],
                indent=2,
                cls=plotly.utils.PlotlyJSONEncoder
            )),
        ], style={
            'margin': 5,
            'border': 'thin lightgrey solid',
            'padding': 5,
            'width': 'calc(25% - 50px)',
            'float': 'left',
            'display': 'inline-block'
        })
        for key in test_cases
    ]),
    dcc.Location(id='location'),
])


@app.callback(
    Output('content', 'children'),
    [Input('location', 'pathname')])
def display_content(pathname):
    if pathname is None or pathname == '/':
        return 'Initial state'
    test_case = test_cases[pathname.strip('/')]
    return html.Div(
        test_case['component'](**test_case['props'])
    )


if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_hot_reload=False)