[Table Visualization][Test] Document all the functional tests related to table vis

[ananzh]

Table visualization is re-factored with React and OUI DataGrid component, which affects all the related functional tests. There are three major sections of our current functional tests.

Exit criteria:

• Document all the functional test that are related to the table visualizations
• Remove all selenium functional tests related to table viz

Applications

Visualize

Data table tests

Function tests to verify data table functionalities.

• Should allow applying changed params
• Should allow reseting changed params
• Should be able to save and load
• Should show correct data
• Should show percentage columns
• Should show correct data when using average pipeline aggregation
• Should show correct data for a data table with date histogram
• Should show correct data when selecting a field by its custom name
• Should correctly filter for applied time filter on the main timefield
• Should correctly filter for pinned filters
• Should show correct data for a data table with top hits
• Should show correct data for a data table with range agg

otherBucket

• should show correct data
• should apply correct filter

metricsOnAllLevels

• should show correct data without showMetricsAtAllLevels
• should show correct data without showMetricsAtAllLevels even if showPartialRows is selected
• should show metrics on each level
• should show metrics other than count on each level

split tables

• should have a split table
• should show metrics for split bucket when using showMetricsAtAllLevels

sort

• should sort table based on the selected column
• should sort all tables based on the selected column (split tables)

resize column

• should resize table column width
• should resize column width for all tables (split tables)

Advanced Settings test ( Histogram)

Advanced settings control the format displayed in the visualization. Table visualization should reflect the advanced settings. For example, histogram:maxBars is used to limit the number of aggregation buckets displayed in the table.

[Test]

• Use sample log data.
• Create a table and split rows. Buckets aggregation is Histogram and term is machine.ram.
• In advanced settings, check the current histogram:maxBars is equal to the default value (100).

• Should use provided value when number of generated buckets is less than histogram:maxBars
  1. set interval to 2400000000
  2. since the buckets generated is less than histogram:maxBars, we expect the displayed interval equal to provided interval.

• Should scale value to round number when number of generated buckets is greater than histogram:maxBars
  1. set interval to 100
  2. since the buckets generated is greater than histogram:maxBars, we expect the displayed interval is not equal to provided interval and it should be scaled.

Embedding chart

Sometimes, we might want to embed a visualization in an iframe. There are two ways to do the embeddings. First, use Share feature on the top menu to generate an iframe code. Second, add &embed=true after current URL and reload the page. Now, you are in embed mode and visualization page changed to only contain table visualization and filter.

[Test]

• select data and create a table
• add &embed=true after current URL and reload the page

• Should allow opening table visualization in embedded mode

  1. verify table exist
  2. verify table values to make sure it is shown correctly

• Should allow to filter in embedded mode

  1. add a filter and verify results
  2. remove a filter and verify results

• Should allow Filter for value and Filter out value features to change the visualization in embedded mode

  1. click a value and choose Filter for value
  2. verify table results and remove the filter
  3. click a value and choose Filter out value
  4. verify table results and remove the filter

Linked saved searched

This is to test whether we could create and render a table visualizaition with saved search.

[Test]

• navigate to discover and selet log sample data
• add a filter extension is rpm
• save it (a saveSearch object) and name it as rpm. record the URL
• it should create a table visualization from a saved search
  1. navigate to visualization
  2. click data table and click save search rpm
  3. table should be rendered
  4. set time range and verify table vis result

• it should have a valid link to the saved search from the visualization
  1. click the link button next to rpm(showUnlinkSavedSearchPopover)
  2. click view this search in discover

3. discover should loaded correctly (check the url is the as the previous saved url)

• browser go back (should be back to table vis)

• it should respect the time filter when linked to a saved search

  1. change time range
  2. verify table vis result

• it should allow adding filters while having a linked saved search

  1. add another filter bytes is between 100 to 3000
  2. verify table vis result

• it should allow unlinking from a linked search

  1. click the link button next to rpm
  2. click remove link to saved search
  3. verify that there is an added filter extension is rpm
  4. remove filter extension is rpm and verify table vis result

• it should not break when saving after unlinking

  1. save the table vis as Unlinked before saved
  2. table should still render correctly
  3. reload table from visualization and verify the result

Dashboard

Table visualization can be added in the dashboard. There are multiple functional tests to verifying the functionalities of table vis in the dashboard.

Drag and Drop

Table visualization is the vis to show that visualization can be dragged and dropped in dashboard (code). This is more of a dashboard func and we could use any vis type panel to test. In our functional test, I switch table to pie. I think it is fine to not test it in opensearch-dashboard-functional-repo.

Embeddable rendering

Table visualization should render correctly in dashboard.

[Test]

• navigate to dashboard and click to add a new dashboard
• set time range inside of data
• add table visualization and check if table is rendered correctly
• refresh the page and check if table is rendered correctly
• set time range outside of data
• add table visualization and check if table is rendered correctly with 0 result
• refresh the page and check if table is rendered correctly

Filter

• adding a filter that excludes all data in table vis

  1. click filter bar and add filter
  2. table vis should show 0 count

• removing a filter to restore data in table vis

  1. remove the filter
  2. table vis should show original count

• adding a pinned filter that excludes all data in table vis

  1. click filter bar and add filter. then pin the filter.
  2. table vis should show 0 count

• removing a pinned filter to restore data in table vis

  1. remove the above pinned filter
  2. table vis should show original count

url_field_formatter.ts

In url_field_formatter.ts test case applied on dashboard(code, it is testing whether a url value in table vis can be clickable in the dashboard.

This test will be moved to opensearch-dashboards-functional-repo. Therefore, we del the test case and the method getFieldLinkInVisTable which is only used here.

[Test]

• go to stack management, click Index Patterns then click index pattern opensearch_dashboards_sample_data_logs
• search clientip and click edit button on its right
• in format field, choose URL

• Should show clickable URL in table visualization

  1. after setting up the field in index pattern, go to visualize and create a table visualization
  2. choose opensearch_dashboards_sample_data_logs, split rows with terms and field is clientip
  3. clientip value in the table vis should be clickable
  4. save this table visualization

• Should show clickable URL in dashboard

  1. open saved table vis in the above test in the dashboard
  2. the clientip in the table vis should be URL and clickable

Others

There are many table related methods in the functional tests. Most of the them are used in inspect or other visualization (vege, tileMap and etc.). There are some functions that seems related to table visualization, but they are not. Below are some confusing functions:

getTableData (code)

This func has nothing to do with table visualization. It is used to return table data in nested array format. It is called in several tests, for example:

dashboard_state.js: Tile map with no changes will update with visualization changes
In this test case, it is fetching lat and lon values from tileMap. TileMap does not use table vis.

getDataGridTableData (code)

It is used in VegaDebugInspectorViewProvider:

 public getGridTableData() {
      return dataGrid.getDataGridTableData();
    }

There are two tests in _vega_chart.ts, 'should contain data on "Signal Values" tab' and 'should contain data on "Signal Values" tab'. They are using a similar EuiDataGrid component in the inspector to display in Data sets and Signal values. But these tables are not utilizing table vis.

getViewTable (code)

This function is called in several tsvb tests. Tsvb table is not using table visualization plugin.

getTableRow (code)

This is a method used in settings page. It is used to get index pattern table row content.

[ananzh]

done the research task. close the issue.