Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the chart testable from outside #215

Closed
1 task done
markov00 opened this issue May 22, 2019 · 2 comments
Closed
1 task done

Make the chart testable from outside #215

markov00 opened this issue May 22, 2019 · 2 comments
Labels
enhancement New feature or request :test Missing or to be fixed test

Comments

@markov00
Copy link
Member

markov00 commented May 22, 2019

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
@markov00 markov00 added enhancement New feature or request :test Missing or to be fixed test labels May 22, 2019
@markov00
Copy link
Member Author

@emmacunningham any other ideas on that?

@markov00
Copy link
Member Author

Closing this issue as we already have multiple ways to test the state of the chart from the outside

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request :test Missing or to be fixed test
Projects
None yet
Development

No branches or pull requests

1 participant