test: add resize config for easy story and e2e resizing #2234
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
We've started adding
resize
wrapper elements around certain stories to allow for a better size per chart while also allowing the docs consumer to easily resize the chart to see how it changes.This caused a bit of an issue in #2156 with clipping of the vrt screenshots.
This PR adds a
resize
config to theStory.parameters
. This allows us to pass aboolean
where if true we wrap the story in resizablediv
, matching the default size of the.echChart
. You may also pass this parameter any css styles to be applied to this resize wrapper. For example theMetric - Basic
story just adds the following to override theheight
andwidth
of the resize wrapper to200px
.Any provided styles override the default styles here...
elastic-charts/storybook/style.scss
Lines 144 to 151 in 3b83f53
As for the the e2e tests, I added the
setResizeDimensions
method to thecommon
page object for easily updating the height and width of this resize wrapper. This would look like...If no
resize
parameter was provided this method will throw and error!Changes added to facilitate testing of Bullet as Metric in #2156.