Is your feature request related to a problem? Please describe.
The idea is to enable testing the outcomes from a chart configuration from the outside world of the elastic-chart library. Check if your configuration is good and can render correctly a chart is a plus for any Kibana usecase charts.
Describe the solution you'd like
Having the possibility to, at least, test on jest the output from the mobx store to get some hints on how many bars/lines/areas will be drawn
Describe alternatives you've considered
Use the SVG renderer and check rendered elements on svg groups, but the internals of the rendering can change anytime in development
Use visual regression tests, but is not always available.
Additional context
A first draft of a possible solution is to export the ChartStore from the chart library, and let the user inject an instance of that from the jest test.
From a preliminary test we need to manually update the parent dimensions directly from the store after mounting the component because seems that we are missing a rendering cycle there.
This can be an example of test case:
import { mount } from 'enzyme';
import React from 'react';
import { BarSeries, Chart, getSpecId, ScaleType } from './index';
import { ChartStore } from './state/chart_state';
describe('Jest testing chart', () => {
it('can render a chart', () => {
const chartStore = new ChartStore();
mount(
<Chart store={chartStore}>
<BarSeries
id={getSpecId('aaa')}
name={'Simple bar series'}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['y']}
data={[{ x: 1, y: 1 }, { x: 2, y: 5 }]}
/>
</Chart>,
);
// force the rendering on jsdom where we cannot observe the resize of the parent
chartStore.updateParentDimensions(200, 200, 0, 0);
expect(chartStore.initialized.get()).toBe(true);
expect(chartStore.geometries).toBeDefined();
expect(chartStore.geometries!.bars.length).toBe(2);
});
});
Notes:
- This will expose the ChartStore interface outside of charts and that can lead to unpredictable state of the chart if someone use it directly. We can mark as private most of the functions that are not used by the specs (everything expect add axis, add spec, add settings)
- We will probably have to add different Stores for different chart types like PieChart or Gauge/Goal. Each store ideally is the computation logic of a chart type. We should start naming them properly before exposing them outside
Kibana Cross Issues
n/a
Checklist
Is your feature request related to a problem? Please describe.
The idea is to enable testing the outcomes from a chart configuration from the outside world of the elastic-chart library. Check if your configuration is good and can render correctly a chart is a plus for any Kibana usecase charts.
Describe the solution you'd like
Having the possibility to, at least, test on jest the output from the mobx store to get some hints on how many bars/lines/areas will be drawn
Describe alternatives you've considered
Use the SVG renderer and check rendered elements on svg groups, but the internals of the rendering can change anytime in development
Use visual regression tests, but is not always available.
Additional context
A first draft of a possible solution is to export the
ChartStorefrom the chart library, and let the user inject an instance of that from the jest test.From a preliminary test we need to manually update the parent dimensions directly from the store after mounting the component because seems that we are missing a rendering cycle there.
This can be an example of test case:
Notes:
Kibana Cross Issues
n/a
Checklist
[ ] every related Kibana issue is listed underKibana Cross Issueslist[ ]kibana cross issuetag is associated to the issue if any kibana cross issue is present