Skip to content

Make the chart testable from outside #215

@markov00

Description

@markov00

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

  • this request is checked against already exist requests
  • [ ] every related Kibana issue is listed under Kibana Cross Issues list
  • [ ] kibana cross issue tag is associated to the issue if any kibana cross issue is present

Metadata

Metadata

Assignees

No one assigned

    Labels

    :testMissing or to be fixed testenhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions