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

test: add resize config for easy story and e2e resizing #2234

Merged
merged 3 commits into from
Nov 8, 2023

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Nov 8, 2023

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 the Story.parameters. This allows us to pass a boolean where if true we wrap the story in resizable div, 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 the Metric - Basic story just adds the following to override the height and width of the resize wrapper to 200px.

Example.parameters = {
  resize: {
    height: '200px',
    width: '200px',
  },
};

Any provided styles override the default styles here...

#story-resize-wrapper {
resize: both;
height: 100%;
width: 100%;
overflow: auto;
max-width: 100%;
max-height: 80vh;
}

As for the the e2e tests, I added the setResizeDimensions method to the common page object for easily updating the height and width of this resize wrapper. This would look like...

test('should resize metric', async ({ page }) => {
    await common.expectChartAtUrlToMatchScreenshot(page)(
      'http://localhost:9001/xxxxx,
      {
        action: async () => {
          await common.setResizeDimensions(page)({ width: '400px' });
        },
      },
    );
  });

If no resize parameter was provided this method will throw and error!

⚠️ This feature only impacts the storybook docs and e2e testing.

Changes added to facilitate testing of Bullet as Metric in #2156.

@nickofthyme nickofthyme added :docs Anything related to documentation, API, storybook :ci labels Nov 8, 2023
@@ -10,8 +10,6 @@ import { test } from '@playwright/test';

import { common } from '../page_objects/common';

process.env.ENV_URL = 'http://localhost:9002/';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This straggler was causing issues pointing to the wrong port.

@nickofthyme nickofthyme merged commit b85198d into elastic:main Nov 8, 2023
13 checks passed
@nickofthyme nickofthyme deleted the resize-config branch November 8, 2023 17:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:ci :docs Anything related to documentation, API, storybook
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant