Component gallery behavior test¶
Application: |
---|
import dash
from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Input(id='input'),
dcc.Dropdown(
id='dropdown',
options=[{
'label': str(x),
'value': str(x)
} for x in range(1, 10)]
),
dcc.RadioItems(
id='radio-items',
options=[{
'label': str(x),
'value': str(x)
} for x in range(1, 10)]
),
html.Div(id='input-output'),
html.Div(id='dropdown-output'),
html.Div(id='radio-items-output'),
html.Button('change-style', id='change-style'),
html.Div(
'Style changer',
id='style-output',
style={'backgroundColor': 'rgba(255, 0, 0, 1)'}
),
html.Div(
id='multi-elements-click',
children=[
html.Button('btn-1', id='btn-1'),
html.Button('btn-2', id='btn-2'),
html.Button('btn-3', id='btn-3'),
]
),
html.Div(id='multi-elements-outputs')
])
for i in (
'input',
'dropdown',
'radio-items',
):
@app.callback(
Output('{}-output'.format(i), 'children'), [Input(i, 'value')]
)
def _wrap(value):
if value is None:
raise PreventUpdate
return str(value)
@app.callback(
Output('style-output', 'style'), [Input('change-style', 'n_clicks')]
)
def on_style_change(n_clicks):
if n_clicks is None:
raise PreventUpdate
return {'backgroundColor': 'rgba(0, 0, 255, 1)'}
@app.callback(
Output('multi-elements-outputs', 'children'),
[Input('btn-{}'.format(x), 'n_clicks') for x in range(1, 4)],
)
def on_multi_click(*args):
return [html.Span(x) for x in args if x]
Test: |
---|
application:
path: test_apps.component_gallery
InputBehavior:
description: Test text can entered/customized in a Input component in behavior tests.
parameters:
value:
default: Input value
event:
- "enter $value in #input"
outcome:
- "text in #input-output should be $value"
DropdownBehavior:
description: Test that a dropdown value can be selected in behavior tests.
parameters:
value:
default: '1'
event:
- 'enter $value in {#dropdown .Select-input input}'
- 'click {#dropdown .Select .Select-menu-outer}'
outcome:
- 'text in #dropdown-output should be $value'
RadioItemsBehavior:
description: Test radio items value can be changed in behavior tests.
event:
- 'click {#radio-items > label:nth-child(9) > input[type="radio"]}'
outcome:
- "text in #radio-items-output should be 9"
- '{#radio-items > label:nth-child(9) > input[type="radio"]}.checked should be true'
StyleChangeButtonBehavior:
description: Test style assertions in behavior tests
event:
- 'style "background-color" of #style-output should be "rgba(255, 0, 0, 1)"'
- 'click #change-style'
outcome:
- 'style "background-color" of #style-output should be "rgba(0, 0, 255, 1)"'
MultiElementsBehavior:
description: Test multiple elements found.
event:
- 'click *{#multi-elements-click > button}'
outcome:
- '*{#multi-elements-outputs > span}.length == 3'
XpathBehavior:
description: Test xpath element find.
event:
- 'click [//*[@id="btn-1"]]'
outcome:
- '*[//div[@id="multi-elements-outputs"]/span].length should be 1'
Tests:
- InputBehavior
- InputBehavior:
value: Non default
- DropdownBehavior
- RadioItemsBehavior
- StyleChangeButtonBehavior
- MultiElementsBehavior
- XpathBehavior