[QA] set_control action dom elements tests
#1422
Conversation
This reverts commit 8795181.
…control_action_dom_elements_tests
View the example dashboards of the current commit live on PyCafe ☕ 🚀Updated on: 2025-10-01 16:47:35 UTC Compare the examples using the commit's wheel file vs the latest released version: vizro-core/examples/scratch_devView with commit's wheel vs View with latest release vizro-core/examples/dev/View with commit's wheel vs View with latest release vizro-core/examples/visual-vocabulary/View with commit's wheel vs View with latest release vizro-core/examples/tutorial/ |
…control_action_dom_elements_tests
…control_action_dom_elements_tests
…control_action_dom_elements_tests
| layout=vm.Grid(grid=[[0], [2], [1]]), | ||
| components=[ | ||
| vm.Graph( | ||
| id=cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID, | ||
| figure=px.scatter( | ||
| iris, | ||
| x="sepal_length", | ||
| y="petal_width", | ||
| color="species", | ||
| custom_data=["species"], | ||
| ), | ||
| actions=[ | ||
| set_control(control="filter_interactions", value="species"), | ||
| vm.Action( | ||
| function=scatter_click_data_custom_action(), | ||
| inputs=[f"{cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID}.clickData"], | ||
| outputs=f"{cnst.CARD_SET_CONTROL_INTERACTIONS_ID}", | ||
| ), | ||
| ], | ||
| ), | ||
| vm.Card(id=cnst.CARD_SET_CONTROL_INTERACTIONS_ID, text="### No data clicked."), | ||
| vm.Graph( | ||
| id=cnst.BOX_SET_CONTROL_INTERACTIONS_ID, | ||
| figure=px.box( | ||
| iris, | ||
| x="sepal_length", | ||
| y="petal_width", | ||
| color="species", | ||
| ), | ||
| ), |
There was a problem hiding this comment.
Is this the same?
| layout=vm.Grid(grid=[[0], [2], [1]]), | |
| components=[ | |
| vm.Graph( | |
| id=cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID, | |
| figure=px.scatter( | |
| iris, | |
| x="sepal_length", | |
| y="petal_width", | |
| color="species", | |
| custom_data=["species"], | |
| ), | |
| actions=[ | |
| set_control(control="filter_interactions", value="species"), | |
| vm.Action( | |
| function=scatter_click_data_custom_action(), | |
| inputs=[f"{cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID}.clickData"], | |
| outputs=f"{cnst.CARD_SET_CONTROL_INTERACTIONS_ID}", | |
| ), | |
| ], | |
| ), | |
| vm.Card(id=cnst.CARD_SET_CONTROL_INTERACTIONS_ID, text="### No data clicked."), | |
| vm.Graph( | |
| id=cnst.BOX_SET_CONTROL_INTERACTIONS_ID, | |
| figure=px.box( | |
| iris, | |
| x="sepal_length", | |
| y="petal_width", | |
| color="species", | |
| ), | |
| ), | |
| components=[ | |
| vm.Graph( | |
| id=cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID, | |
| figure=px.scatter( | |
| iris, | |
| x="sepal_length", | |
| y="petal_width", | |
| color="species", | |
| custom_data=["species"], | |
| ), | |
| actions=[ | |
| set_control(control="filter_interactions", value="species"), | |
| vm.Action( | |
| function=scatter_click_data_custom_action(), | |
| inputs=[f"{cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID}.clickData"], | |
| outputs=f"{cnst.CARD_SET_CONTROL_INTERACTIONS_ID}", | |
| ), | |
| ], | |
| ), | |
| vm.Graph( | |
| id=cnst.BOX_SET_CONTROL_INTERACTIONS_ID, | |
| figure=px.box( | |
| iris, | |
| x="sepal_length", | |
| y="petal_width", | |
| color="species", | |
| ), | |
| ), | |
| vm.Card(id=cnst.CARD_SET_CONTROL_INTERACTIONS_ID, text="### No data clicked."), |
| vm.Parameter( | ||
| targets=[f"{cnst.BOX_SET_CONTROL_INTERACTIONS_ID}.title"], | ||
| selector=vm.RadioItems(id=cnst.RADIOITEM_SET_CONTROL_INTER_PARAM, options=["red", "blue"], value="blue"), | ||
| ), |
There was a problem hiding this comment.
Why do we have this if it's not changed using the set_control?
| vm.Action( | ||
| function=scatter_click_data_custom_action(), | ||
| inputs=[f"{cnst.SCATTER_SET_CONTROL_INTERACTIONS_ID}.clickData"], | ||
| outputs=f"{cnst.CARD_SET_CONTROL_INTERACTIONS_ID}", | ||
| ), | ||
| ], | ||
| ), | ||
| vm.Card(id=cnst.CARD_SET_CONTROL_INTERACTIONS_ID, text="### No data clicked."), |
| vm.Filter( | ||
| column="year", | ||
| targets=[cnst.SET_CONTROL_TABLE_AG_GRID_INTERACTIONS_ID], | ||
| selector=vm.Dropdown(value=2007), | ||
| ), |
There was a problem hiding this comment.
Why do we still have this filter if it’s not affected by set_control? If it’s redundant, we should remove it.
The set_control tests will be expanding soon, so it’s important to keep things as simple as possible. Could you simplify these pages and tests accordingly, and make sure all similar pages follow the same structure (same for tests)? That way, it’ll be easier to adjust them later if needed.
| controls=[ | ||
| vm.Filter(column="species", selector=vm.Dropdown(value="virginica")), | ||
| ], |
There was a problem hiding this comment.
I guess you can remove this, so this page is aligned structurally with drill_through_parameter_page_1 and drill_through_filter_page_1.
| @pytest.mark.filterwarnings("ignore::DeprecationWarning") | ||
| def test_set_control_filter_interactions_graph(dash_br): | ||
| """Test filter interactions between two graphs.""" | ||
| accordion_select(dash_br, accordion_name=cnst.ACTIONS_ACCORDION) | ||
| page_select( | ||
| dash_br, | ||
| page_name=cnst.SET_CONTROL_GRAPH_INTERACTIONS_PAGE, | ||
| ) | ||
|
|
||
| # select 'versicolor' in dropdown filter and check result for box graph | ||
| clear_dropdown(dash_br, cnst.DROPDOWN_SET_CONTROL_INTER_FILTER) | ||
| select_dropdown_value(dash_br, dropdown_id=cnst.DROPDOWN_SET_CONTROL_INTER_FILTER, value="versicolor") | ||
| # Check y axis max value is '1.8' | ||
| dash_br.wait_for_text_to_equal( | ||
| graph_axis_value_path(graph_id=cnst.BOX_SET_CONTROL_INTERACTIONS_ID, axis_value_number="5", axis_value="1.8"), | ||
| "1.8", | ||
| ) | ||
|
|
||
| # click on the 'setosa' data in scatter graph and check result for box graph | ||
| dash_br.click_at_coord_fractions("#scatter_set_control_inter path:nth-of-type(20)", 0, 1) | ||
| # Check y axis max value is '0.6' | ||
| dash_br.wait_for_text_to_equal( | ||
| graph_axis_value_path(graph_id=cnst.BOX_SET_CONTROL_INTERACTIONS_ID, axis_value_number="3", axis_value="0.6"), | ||
| "0.6", | ||
| ) | ||
|
|
||
| # open dropdown and check values | ||
| dash_br.multiple_click(dropdown_arrow_path(dropdown_id=cnst.DROPDOWN_SET_CONTROL_INTER_FILTER), 1) | ||
| check_selected_dropdown( | ||
| dash_br, | ||
| dropdown_id=cnst.DROPDOWN_SET_CONTROL_INTER_FILTER, | ||
| all_value=False, | ||
| expected_selected_options=["setosa"], | ||
| expected_unselected_options=["SelectAll", "versicolor", "virginica"], | ||
| ) | ||
| # close dropdown | ||
| dash_br.multiple_click(dropdown_arrow_path(dropdown_id=cnst.DROPDOWN_SET_CONTROL_INTER_FILTER), 1) | ||
|
|
||
| # select 'red' title for the box graph | ||
| dash_br.multiple_click( | ||
| categorical_components_value_path(elem_id=cnst.RADIOITEM_SET_CONTROL_INTER_PARAM, value=1), 1 | ||
| ) | ||
| dash_br.wait_for_text_to_equal(".gtitle", "red") |
There was a problem hiding this comment.
As I already mentioned above, let's streamline the pages and tests. So, in this case I would skip several steps and only:
- open the relevant page
- click on the
versicolorpoint on the source graph - check the targeted control options/value (could be skipped as well)
- check the targeted graph layout.
| def test_set_control_filter_interactions_ag_grid(dash_br): | ||
| """Test filter interaction between ag_grid and line graph.""" | ||
| accordion_select(dash_br, accordion_name=cnst.ACTIONS_ACCORDION) | ||
| page_select( | ||
| dash_br, | ||
| page_name=cnst.SET_CONTROL_TABLE_AG_GRID_INTERACTIONS_PAGE, | ||
| ) | ||
|
|
||
| # check if column 'country' is available | ||
| dash_br.wait_for_element( | ||
| f"div[id='{cnst.SET_CONTROL_TABLE_AG_GRID_INTERACTIONS_ID}'] div:nth-of-type(1) div[col-id='country']" | ||
| ) | ||
|
|
||
| # click on Albania country | ||
| dash_br.multiple_click( | ||
| f"div[id='{cnst.SET_CONTROL_TABLE_AG_GRID_INTERACTIONS_ID}'] div[class='ag-center-cols-container'] " | ||
| f"div:nth-of-type(2) div[col-id='country']", | ||
| 1, | ||
| ) | ||
| # Check y axis max value is '40k' | ||
| dash_br.wait_for_text_to_equal( | ||
| graph_axis_value_path( | ||
| graph_id=cnst.SET_CONTROL_LINE_AG_GRID_INTERACTIONS_ID, axis_value_number="6", axis_value="50k" | ||
| ), | ||
| "50k", | ||
| ) |
There was a problem hiding this comment.
This one is a great example of a simple test! 🚀 As I mentioned in the comment above, it's maybe worth to check that the targeted filter value is the right one.
| # click on the 'setosa' data in scatter graph | ||
| dash_br.click_at_coord_fractions(f"#{cnst.SCATTER_FILTER_DRILL_THROUGH_SOURCE_ID} path:nth-of-type(20)", 0, 1) |
There was a problem hiding this comment.
It would be nice if you click on the "versicolor" graph's point here and in the test_parameter_drill_through especially. For some controls the "setosa" is already set by default (like for the radio_items tested in test_parameter_drill_through).
edit: Same for all tests added in this PR.
| check_selected_categorical_component( | ||
| dash_br, | ||
| component_id=cnst.CHECKLIST_FILTER_DRILL_THROUGH_ID, | ||
| select_all_status=False, | ||
| options_value_status=[ | ||
| {"value": 1, "selected": True, "value_name": "setosa"}, | ||
| {"value": 2, "selected": False, "value_name": "versicolor"}, | ||
| {"value": 3, "selected": False, "value_name": "virginica"}, | ||
| ], | ||
| ) |
There was a problem hiding this comment.
Can we also make a check of the x-axis or something else to prove that the filter/parameter on the targeted page is properly applied? (Same for all drill-through tests)
There was a problem hiding this comment.
Really nice work! The filte/parameter interaction and drill-through are coverer excellently!
If it's not that hard, would you mind adding two more use cases:
- chaining two
set_controlactions on the same page - graph drill-down (
set_control) where the source and the target graph is the same
If you find some of these two cases too complicate, then I'm totally fine to skip it.
Description
Tests for
set_controlaction drill_through and interactionsNotice
I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":