[meta] Vislib functional test replacement

[markov00]

Is your feature request related to a problem? Please describe.
The replacement of vislib requires also a replacement of the current functional tests available in Kibana.
These tests are checking also the rendering capabilities inside Kibana picking and analyzing DOM elements.
With the current @elastic/charts library, rendering in Canvas, this is no more possible.

Describe the solution you'd like

• find and collect every PageObject functions, used by functional tests in Kibana, that are checking values/variables in the DOM rendered by vislib
• analyze these functions and extract a set of possible replacement properties/statistics that can be extracted from the chart state or chart selectors (e.g. number of bars, lines, areas, points, bars values, colors, etc)
• put those statistics into the available <ChartStatus/> component as attributes only when the debug flag is enabled
• enable the debug flag in vislib only when running on the CI (we should be careful here because the debug currently also enable the graphical debug that can break Kibana visual regression tests)
• replace the PageObject functions for vislib with similar tests using our exposed statistics/properties
• where possible, extract from the functional tests the chart state (in particular the specs configurations) and create a set of VRTs in the elastic-charts repo to check the correctness of the rendering.

Describe alternatives you've considered
Enable Percy on Kibana, but we should define when we want to run it and how

Related issue in Kibana: elastic/kibana#70176

[VladLasitsa]

Collected the following functions that we used in function tests for area, line and bar charts:

• getAreaChartData - Calculate needed data using height of rectangle('rect.background') and data about position of one area chart from 'path' in attribute 'd'. This area chart data which we insert in 'path' starts with a 'M'ove to a x,y location, followed by a bunch of 'L'ines from that point to the next. Those points are the values we're going to use to calculate the data values we're testing. So git rid of the one 'M' and split the rest on the 'L's.

• getAreaChartPaths - Needed for getting number of segments in chart.

• getLineChartData - Calculate needed data using height of rectangle('clipPath rect') and data about position of one line chart from 'circle' in attribute 'cy'.

• getBarChartData - Calculate needed data using height of rectangle('g > g.series > rect') for one bar in chart.

• getChartYAxisRatio - Returns the range/pixel ratio (max value - min value on y axis / position on max value - poation of min value) - needed for chart data getters. So that we can transform heights in data.

• getYAxisLabels - Get all y - axis labels

• getYAxisLabelsAsNumbers - Get count of y - axis labels

• getXAxisLabels - Get all x - axis labels

[markov00]

@VladLasitsa
on getAreaChartData are the test checking that the position of an area point in the SVG is the same as the one reported in the functional test in the SVG coordinate space? or is comparing that value to the original data used (the value coming from ES and processed by visualize editor?
Same question for Bars and Lines
Thanks

[VladLasitsa]

@markov00
As I understand getAreaChartData and other similar functions just calculate value using height and position in SVG so that in different function tests we can compare it with expected data (by expected data in test I think we mean original data(values coming from ES)).

[nickofthyme]

Completed in elastic/kibana@c88e285