GitHub

After the Jest Migration, which improves our unit testing setup, we want to further increase confidence in merging changes and bug fixes.

Therefore we want to (a) setup storybook and then (b) use the storybook test runner https://storybook.js.org/addons/@storybook/test-runner to integrate interaction tests into our CI pipeline.

Thereby we can spot breaking issues quickly and can test a wide variety of interactions more easily than we can with React Testing Library.

Goal:

All major components (every chart) has minimum one story with a play function which tests interaction (i.e. tooltip)
The test runner is included in the CI, and runs when merging master
Storybook is integrated onto our website.

Steps to complete:

Final steps:

Replace website with storybook (i.e. deploy on recharts.org)
Move existing RTL interaction tests to storybook
Cleanup stories - remove redundant examples that are already available in the API stories
Link examples in the API
Cleanup documentation by removing redundant descriptions of shared properties (i.e. dataKey).

// TODO: Create issues for all missing things in the table below.

Group	Component	has stories	has doc with ArgTable
Charts	AreaChart	x	x
Charts	BarChart	x	x
Charts	LineChart	x	x
Charts	ComposedChart	x	x
Charts	PieChart	x	x
Charts	RadarChart	x	x
Charts	RadialBarChart	x	x
Charts	ScatterChart	x	x
Charts	FunnelChart	x	x
Charts	Treemap	x	x
Charts	SankeyChart	x	x
General Components	ResponsiveContainer	x	x
General Components	Legend	o
General Components	Tooltip	o
General Components	Cell	o
General Components	Text	o
General Components	Label	o
General Components	LabelList	o
General Components	Customized	o
Cartesian Components	Area	x	x
Cartesian Components	Bar	x	x
Cartesian Components	Line	x	x
Cartesian Components	Scatter	x	x
Cartesian Components	XAxis	x	x
Cartesian Components	YAxis	x	x
Cartesian Components	ZAxis	x	x
Cartesian Components	Brush	x	x
Cartesian Components	CartesianAxis	x	x
Cartesian Components	CartesianGrid	x	x
Cartesian Components	ReferenceLine	x	x
Cartesian Components	ReferenceDot	x	x
Cartesian Components	ReferenceArea	x	x
Cartesian Components	ErrorBar	x	x
Cartesian Components	Funnel	x	x
Polar Components	Pie	x	x
Polar Components	Radar	x	x
Polar Components	RadialBar	o
Polar Components	PolarAngleAxis	o
Polar Components	PolarGrid	x	x
Polar Components	PolarRadiusAxis	o
Shapes	Cross	x	x
Shapes	Curve	x	x
Shapes	Dot	x	x
Shapes	Polygon	x	x
Shapes	Rectangle	x	x
Shapes	Sector	o

Provide feedback